LabeledInput with data binding

tabris-2-decorators-blog-3-1.tsx

import { Composite, ui, AlertDialog } from 'tabris';
import { bind, component, property, ComponentJSX } from 'tabris-decorators';

// ------------ Component ------------

@component
export default class LabeledInput extends Composite {

  @bind('#input.text') public text: string;
  @property public labelText: string;
  private jsxProperties: ComponentJSX<this>;

  constructor(properties: Partial<LabeledInput>) {
    super(properties);
    this.append(
      <widgetCollection>
        <textView id='label'
            height={32} centerY={0}
            bind-text='labelText'
            font='20px'/>
        <textInput id='input'
            left='prev() 12' width={250}
            font='20px'/>
      </widgetCollection>
    );
  }

}

// ---------- Example App ------------

ui.contentView.append(
  <widgetCollection>
    <LabeledInput id='firstname' labelText='First name:'/>
    <LabeledInput id='lastname' labelText='Last name:'/>
    <button onSelect={showName} text='OK'/>
  </widgetCollection>
).children().set({left: 12, top: 'prev() 12'});

function showName() {
  const firstName = ui.find('#firstname').first(LabeledInput).text;
  const lastName = ui.find('#lastname').first(LabeledInput).text;
  new AlertDialog({message: `Hello ${firstName} ${lastName}!`}).open();
}