How to use the tabris.Button function in tabris

To help you get started, we’ve selected a few tabris examples, based on popular ways it is used in public projects.

github eclipsesource / tabris-js / snippets / button.js View on Github external
import {Button, contentView} from 'tabris';

// Create a push button that counts up on selection

let count = 0;

new Button({
  left: 10, top: 10,
  text: 'Button'
}).onSelect(({target}) => target.text = 'Pressed ' + (++count) + ' times')
  .appendTo(contentView);
github eclipsesource / tabris-js / test / typescript / Widgets / Composite.fail.ts View on Github external
import { Composite, Properties, Button, TextView, WidgetCollection } from 'tabris';

class CustomComponent extends Composite {
  constructor(props: Properties<Composite> & Partial<Pick<CustomComponent, 'foo'>>) { super(props); }
  public foo() {} public _doX() {} private _doy() {}
}

const bounds: Bounds = null;
const customComponent: CustomComponent = new CustomComponent({bounds});
customComponent.set({bounds});

const button: Button = new Button();
let textView: TextView = new TextView();
const buttonsComposite: Composite<Button> = new Composite<Button>();
buttonsComposite.append(textView);
buttonsComposite.append([textView]);
buttonsComposite.append(new WidgetCollection<TextView>([textView]));
textView = buttonsComposite.children()[0];
buttonsComposite.onLayoutChanged(() => {});
buttonsComposite.set({children: (() => {}) as any});
customComponent.set({_doX: (() => {}) as any});
customComponent.set({_doY: (() => {}) as any});
customComponent.set({doesNotExist: (() => {}) as any});
customComponent._scheduleRenderChildren();
customComponent.$flushChildren();
customComponent._layout;

/*Expected
github eclipsesource / tabris-js / test / typescript / Widgets / NavigationView.fail.ts View on Github external
import {NavigationView, Button, Page, Action} from 'tabris';


let widget = new NavigationView();
widget.append(new Button());

class CustomPage extends Page {
  public foo: string;
}

class CustomAction extends Action {
  public bar: string;
}

const badlyTypedNavigationView1: NavigationView<tabris.Composite> = new NavigationView();
const badlyTypedNavigationView2: NavigationView<CustomPage, tabris.Composite> = new NavigationView();
const badlyTypedNavigationView3: NavigationView<CustomAction, CustomPage> = new NavigationView();
const typedNavigationView: NavigationView<CustomPage, CustomAction> = new NavigationView();
typedNavigationView.append(new Action());
typedNavigationView.append(new Page());
github eclipsesource / tabris-js / snippets / screenshots.js View on Github external
function printerSnippet() {
  new Button({left: 16, top: android(10, 16), text: 'Print'}).onTap(() => {
    fetch(app.getResourceLocation('resources/salad.jpg'))
      .then(res => res.arrayBuffer())
      .then(data => printer.print(data, {jobName: 'Salad image', contentType: 'image/jpg'}))
      .then(event => console.log('Printing finished', event))
      .catch(err => console.error(err));
  }).appendTo(snippetParent);
}
github eclipsesource / tabris-js / examples / cordova / app.js View on Github external
function addPageSelector(page) {
  new Button({
    left: 0, top: 'prev() 8', right: 0,
    text: page.title
  }).on('select', () => page.appendTo(navigationView))
    .appendTo(contentContainer);
}
github eclipsesource / tabris-js / snippets / screenshots.js View on Github external
function buttonSnippet(parent) {
  dimen(parent, small);
  new Button({left: 16, right: 16, top: android(10, 16), text: 'Button'}).appendTo(parent);
  new Button({left: 16, right: 16, top: ['prev()', ios(12)], text: 'Flat', style: 'flat'}).appendTo(parent);
  new Button({left: 16, right: 16, top: ['prev()', ios(12)], text: 'Outline', style: 'outline'}).appendTo(parent);
  new Button({left: 16, right: 16, top: ['prev()', ios(12)], bottom: 16, text: 'Text', style: 'text'}).appendTo(parent);

}
github eclipsesource / tabris-js / snippets / timer.js View on Github external
function go() {
  new Button({
    centerX: 0, centerY: 0,
    text: 'Press me!'
  }).on('select', ({target}) => {
    target.text = 'Please wait...';
    setTimeout(sayThanks, 2000, target);
  }).appendTo(ui.contentView);
}
github eclipsesource / tabris-js / examples / cordova / CameraPage.js View on Github external
createUI() {
    super.createUI();
    this.content.append(
      new Button({id: 'pictureButton', text: PICTURE_BUTTON_TEXT})
        .on('select', () => this._takePicture()),
      new ImageView({id: 'image'})
    );
  }
github eclipsesource / tabris-js / snippets / navigationview-page-stacked.js View on Github external
function createPage(title) {
  const page = new Page({
    title: title || 'Initial Page'
  }).appendTo(navigationView);
  new Button({
    left: 16, top: 16, right: 16,
    text: 'Create another page'
  }).on('select', () => createPage('Page ' + (++pageCount)))
    .appendTo(page);
  new Button({
    left: 16, top: 'prev() 16', right: 16,
    text: 'Go back'
  }).on('select', () => page.dispose())
    .appendTo(page);
  new Button({
    left: 16, top: 'prev() 16', right: 16,
    text: 'Go to initial page'
  }).on('select', () => {
    navigationView.pages().dispose();
    createPage();
  }).appendTo(page);
  return page;
}
github eclipsesource / tabris-js / snippets / navigationview-tabfolder.js View on Github external
title: text,
    background: '#eeeeee'
  }).appendTo(navigationView);
  const controls = new Composite({
    centerX: 0, centerY: 0
  }).appendTo(page);
  new TextView({
    centerX: 0,
    text
  }).appendTo(controls);
  new Button({
    top: 'prev() 16', centerX: 0,
    text: 'Add Page'
  }).onSelect(() => createPage(navigationView))
    .appendTo(controls);
  new Button({
    top: 'prev() 16', centerX: 0,
    text: 'Remove Page'
  }).onSelect(() => page.dispose())
    .appendTo(controls);
}