LabeledInput, no databinding

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

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

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

@component
export default class LabeledInput extends Composite {
 
private jsxProperties: ComponentJSX<this>;
 
constructor(properties: Partial<LabeledInput>) {
  super(properties);
  this.append(
    <widgetCollection>
      <textView id='label'
          height={32} centerY={0}
          text='Label:'
          font='20px'/>
      <textInput id='input'
          left='prev() 12' width={250}
          font='20px'/>
      </widgetCollection>
    );
  }
 
}
 
// ---------- Example App ------------

ui.contentView.append(
  <widgetCollection>
    <LabeledInput id='input'/>
    <LabeledInput id='anotherInput'/>
    <LabeledInput id='lastInput'/>
  </widgetCollection>
).children().set({left: 12, top: 'prev() 12'});