tbuschto

// eslint-disable-next-line max-len
const {TextView, contentView, NavigationView, Page, drawer, StackLayout, Stack, Row, CollectionView, Button, ImageView, TabFolder, CheckBox, Tab, Composite, TextInput, AlertDialog} = require('tabris');

const examples = MainView().appendTo(contentView);

// This is a standalone, plain JS Tabris app that showcases different use cases
// for functional components. Each self-running function below contains a small
// snippet with explanatory comments. You can see them in action by selecting
// it from the drawer while running the app.
//

tbuschto

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>;

tbuschto

import {TextView, ui} from 'tabris';

new TextView({
  left: 10, top: 10, right: 10, font: '23px',
  text: '你好，世界',
  alignment: 'left'
}).appendTo(ui.contentView);

tbuschto

import {TextView, CollectionView, Slider, ui, Composite} from 'tabris';

const items = [
    'One', 'Two', 'Three', 'Four', 'Five', 'Six',
    'Seven', 'Eight', 'Nine', 'Ten', 'Foo', 'Bar', 'Hello World'
]

const MARGIN = 10;
const BORDER = 2;
const TILE_HEIGHT = 128;

tbuschto

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;

tbuschto

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;

tbuschto

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

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

@component
export default class LabeledInput extends Composite {
 
private jsxProperties: ComponentJSX<this>;
 

tbuschto

import { ui } from 'tabris';

function pattern(regEx: RegExp) {
  return (prototype: object, property: string) => {
    const sym = Symbol();
    Object.defineProperty(prototype, property, {
      enumerable: true,
      set(value: string) {
        if (!regEx.test(value)) {
          throw new Error(`Invalid ${property} "${value}"`);

tbuschto

import 'reflect-metadata';
import { ui } from 'tabris';

function check(prototype: object, property: string) {
  const sym = Symbol();
  const constr = Reflect.getMetadata('design:type', prototype, property);
  Object.defineProperty(prototype, property, {
    enumerable: true,
    set(value: any) {
      if (!(value instanceof constr) && (typeof value !== constr.name.toLocaleLowerCase())) {

tbuschto

import { ui } from 'tabris';

function positive(prototype: object, property: string) {
  const sym = Symbol();
  Object.defineProperty(prototype, property, {
    enumerable: true,
    set(value: number) {
      if (value < 0) {
        throw new Error('Positive number expected');
      }