Tabris.js 2.2 released

Tabris.js 2.2 released

The latest Tabris.js 2.2.0 release brings some interesting new features to the table. A set of new APIs allow to input date and time values, an improved support for properties in TypeScript and several bugfixes make for a great release. Check the rundown below and the official changelog for more details.

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 “clear button” added to TextInput

We improved the users experience with a "clear button" on TextInput with type "search" on Android.

New device vendor property

To retrieve the device's 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,
  • 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 {
  let result = [];
  for (let i = 0; i < properties.times; i++) {
    result[i] = callback();
  }
  return new WidgetCollection(result);
}

It can then be used as 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 (attributes are checked). 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, have 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 the full support of its new properties:

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

class MyCustomForm extends Composite {

  public tsProperties: Properties & 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) {
    super(properties);
  }

}

For more detailed information please read the section "Interfaces" in the Tabris.js documentation.

How to get started with Tabris.js 2.2

  • Install the new Tabris.js Developer App on your device.
  • Try out the examples bundled with this app.
  • Run your code snippets from the playground, our online Tabris.js editor.

Tabris.js 2 on Google Play Tabris.js 2 on Apple App Store Tabris.js 2 on Windows Store

To start developing real apps,

  • Install the latest Tabris CLI on your machine: npm install -g tabris-cli
  • Type tabris init in an empty directory – this will create a simple example app.
  • Type tabris serve and load it in the Developer App.

The documentation contains everything you need to know (tip: try the doc search). Beginners can find a step-by-step guide in this ebook. If you have questions or comments, you're also invited to join the community chat.

Happy coding!

Keine Kommentare vorhanden

Kommentar schreiben

Kommentar
Name
E-Mail
Website