Skip to content

Instantly share code, notes, and snippets.

@tbuschto
Last active December 21, 2018 15:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tbuschto/00e6dd5f1a6ae0541b39419369fe0d54 to your computer and use it in GitHub Desktop.
Save tbuschto/00e6dd5f1a6ae0541b39419369fe0d54 to your computer and use it in GitHub Desktop.
tabris-2-decorators-blog-4-1.tsx
import { Composite, ui, AlertDialog } from 'tabris';
import { bind, component, property, ComponentJSX, event, ChangeListeners, Listeners } from 'tabris-decorators';
// ------------ Component ------------
@component
export default class LabeledInput extends Composite {
@bind('#input.text') public text: string;
@event public readonly onTextChanged: ChangeListeners<string>;
@property public labelText: string;
@event public readonly onLabelTextChanged: ChangeListeners<string>;
@event public readonly onAccept: Listeners<{text: 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'
onAccept={this.onAccept.trigger}/>
</widgetCollection>
);
}
}
// ---------- Example App ------------
ui.contentView.append(
<widgetCollection>
<LabeledInput id='firstname' labelText='First name:'/>
<LabeledInput id='lastname' labelText='Last name:' onAccept={showName}/>
</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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment