How to use the tabris.TextInput 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 / worker.js View on Github external
const {Button, TextInput, TextView, contentView} = require('tabris');

// Create a worker that receives two numbers, adds them and sends the result back to the main script

console.log('hello worker');
const number1 = new TextInput({centerX: -65, top: 24, width: 32, alignment: 'centerX', text: '2'})
  .appendTo(contentView);
new TextView({left: 'prev() 16', baseline: 'prev()', text: '+'})
  .appendTo(contentView);
const number2 = new TextInput({left: 'prev() 16', baseline: 'prev()', width: 32, alignment: 'centerX', text: '3'})
  .appendTo(contentView);
new TextView({left: 'prev() 16', baseline: 'prev()', text: '='})
  .appendTo(contentView);
const result = new TextView({left: 'prev() 24', baseline: 'prev()', text: '?'})
  .appendTo(contentView);

new Button({
  left: 16, right: 16, top: [number1, 16],
  text: 'Add numbers in Worker'
}).onSelect(() => {
  const worker = new Worker('resources/worker-script.js');
  worker.onmessage = (event) => {
github eclipsesource / tabris-js / snippets / textinput-revealpassword.js View on Github external
import {TextInput, CheckBox, contentView} from 'tabris';

// Create a password text input field where the password can be revealed or hidden

const textInput = new TextInput({
  left: 16, right: 16, top: 16,
  type: 'password',
  message: 'Test password',
  keepFocus: true
}).appendTo(contentView);

new CheckBox({
  left: 16, right: 16, top: 'prev() 16',
  text: 'Show password'
}).onCheckedChanged(event => textInput.revealPassword = event.value)
  .appendTo(contentView);
github eclipsesource / tabris-js / test / typescript / Widgets / TextInput.fail.ts View on Github external
import {TextInput} from 'tabris';

let widget = new TextInput();
widget.onTypeChanged(function() {});

/*Expected
(4,
*/
github eclipsesource / tabris-js / examples / cordova / SharingPage.js View on Github external
createUI() {
    super.createUI();
    this.content.append(
      new TextView({id: 'textToShareLabel', text: TEXT_TO_SHARE}),
      new TextInput({id: 'input', message: INPUT_MESSAGE})
        .on('input', ({text: message}) => this.find('.sharingSection').forEach(section => section.message = message)),
      new ScrollView({id: 'scrollView'}).append(
        ...sharingSectionConfigurations.map(configuration => new SharingSection(configuration)),
        new Composite({id: 'spacer'})
      )
    );
  }
github eclipsesource / tabris-js / examples / input / input.js View on Github external
const {
  Button, CheckBox, Composite, TextView, TextInput, Picker, RadioButton, ScrollView, Slider, Switch, contentView
} = require('tabris');

const scrollView = new ScrollView({left: 0, top: 0, right: 0, bottom: 0}).appendTo(contentView);

const COUNTRIES = ['Germany', 'Canada', 'USA', 'Bulgaria'];
const CLASSES = ['Business', 'Economy', 'Economy Plus'];

new TextView({
  id: 'nameLabel',
  alignment: 'left',
  text: 'Name:'
}).appendTo(scrollView);

new TextInput({
  id: 'nameInput',
  message: 'Full Name'
}).appendTo(scrollView);

new TextView({
  id: 'flyerNumberLabel',
  text: 'Flyer Number:'
}).appendTo(scrollView);

new TextInput({
  id: 'flyerNumberInput',
  keyboard: 'number',
  message: 'Flyer Number'
}).appendTo(scrollView);

new TextView({
github eclipsesource / tabris-js / snippets / textinput-focus.js View on Github external
import {TextInput, contentView} from 'tabris';

new TextInput({
  top: 20, left: '20%', right: '20%',
  message: 'Colorful typing...',
  font: '22px sans-serif'
}).onFocus(({target}) => {
    target.background = 'yellow';
    target.borderColor = 'yellow';
  })
  .onBlur(({target}) => target.borderColor = 'red')
  .appendTo(contentView);

new TextInput({
  top: 'prev() 20', left: '20%', right: '20%',
  message: 'This text field keeps its focus forever',
  keepFocus: true
}).appendTo(contentView);
github eclipsesource / tabris-js / snippets / layout-baseline.js View on Github external
import {TextInput, TextView, contentView} from 'tabris';

const textView = new TextView({
  left: 16, top: 16,
  text: 'Label:'
}).appendTo(contentView);

new TextInput({
  left: [textView, 16], right: 16, baseline: textView,
  message: 'Text'
}).appendTo(contentView);
github eclipsesource / tabris-js / examples / timer / timer.js View on Github external
const statusTextView = new TextView({
  left: 16, top: 24, right: 16,
  text: 'Last update: <none>'
}).appendTo(contentView);

const cpsTextView = new TextView({
  left: 16, top: [statusTextView, 16], right: 16,
  text: 'Calls per second: <none>'
}).appendTo(contentView);

const delayTextView = new TextView({
  left: 16, top: [cpsTextView, 24],
  text: 'Delay (ms):'
}).appendTo(contentView);

const delayTextInput = new TextInput({
  left: [delayTextView, 16], baseline: delayTextView,
  id: 'delayTextInput',
  text: '1000',
  message: 'Delay (ms)'
}).appendTo(contentView);

const repeatCheckbox = new CheckBox({
  left: 16, top: delayTextInput,
  text: 'Repeat'
}).appendTo(contentView);

const startButton = new Button({
  left: ['50%', 16 / 4], top: [repeatCheckbox, 24], right: 16,
  text: 'Start timer'
}).on('select', () => {
  const delay = parseInt(delayTextInput.text);
github eclipsesource / tabris-js / examples / typescript-weather-app / src / app.ts View on Github external
contentView.background = 'rgb(83,100,160)';
contentView.on({
  resize: () => applyLayout()
});

let background = new BackgroundLayer({
  left: 0, right: 0, top: 0, height: contentView.height
}).appendTo(contentView);

let scrollView = new ScrollView({
  left: 0, right: 0, top: 0, bottom: 0
}).on({
  scrollY: ({offset}) => background.scroll(-offset)
}).appendTo(contentView);

let input = new TextInput({
    top: 30, centerX: 0,
    id: 'citySelector',
    message: 'enter city',
    textColor: '#FFFFFF',
    background: 'rgba(255, 255, 255, 0)',
    font: 'normal thin 32px sans-serif'
  }).on({
    focus: () => input.text = '',
    blur: () => input.text = localStorage.getItem('city') || '',
    accept: () => loadCity(input.text)
  }).appendTo(scrollView);

if (localStorage.getItem('city')) {
  loadCity(localStorage.getItem('city'));
}
github eclipsesource / tabris-js / snippets / textinput-keyboard.js View on Github external
import {TextInput, contentView} from 'tabris';

new TextInput({
  top: 25, left: '20%', right: '20%',
  message: 'default'
}).appendTo(contentView);

['ascii', 'decimal', 'number', 'numbersAndPunctuation', 'phone', 'email', 'url'].forEach((mode) => {
  new TextInput({
    top: 'prev() 10', left: '20%', right: '20%',
    keyboard: mode,
    message: mode
  }).appendTo(contentView);
});