2.2.0

New date and time input dialogs

To input date or time with native UI elements, a new DateDialog and TimeDialog has been added. These dialogs accept listeners which are informed when a new value is picked. To open the DateDialog the following code can be used:

new DateDialog({
  date: new Date()
}).on({
  select: ({date}) => console.log(date),
}).open();

New device vendor property

To retrieve the devices vendor a new property tabris.device.vendor has been added. It returns the device manufacturer, e.g.: "Apple" or "Samsung".

Functions as JSX elements

Functions that return a WidgetCollection can now be used as JSX elements. As per convention their name has to start with an uppercase letter. The function is called with two arguments: The element's attributes as an object and its children (if any) as an array. An example of this feature would be to call a given widget factory a given number of times:

function Repeat(properties: {times: number}, [callback]: [() => Widget]): WidgetCollection<Widget> {
  let result = [];
  for (let i = 0; i < properties.times; i++) {
    result[i] = callback();
  }
  return new WidgetCollection(result);
}

It can then be used like a regular element:

ui.contentView.append(
  <Repeat times={10}>{() => <textView top='prev() 10'>Hello Again!</textView>}</Repeat>
)

Note that this example assumes that the element has exactly one child (the callback function), but the type and number of children are not checked at compile time. (The attributes are.) It would therefore be a good idea to check the type of the children at runtime.

Improved support for custom properties in TypeScript

When creating a custom subclass of an existing Tabris widget, new properties don't behave the same as the built-in ones out of the box. Getting the constructor as well as the set and get methods to accept the new properties has previously been rather tedious. Now, with the with the addition of the tsProperties property and the Properties and Partial interfaces, this process has been greatly simplified.

The following example shows a custom UI component with full support of its new properties:

import {Composite, Partial, Properties} from 'tabris';

class MyCustomForm extends Composite {

  public tsProperties: Properties<Composite> & Partial<this, 'foo' | 'bar'>;

  // initializing plain properties is a must for "super" and "set" to work as a expected.
  public foo: string = null;
  public bar: number = null;

  constructor(properties?: Properties<MyCustomForm>) {
    super(properties);
  }

}

Read the section "Interfaces" at EcmaScript 6, TypeScript and JSX for detailed explanations.