Set up date and time input dialogs in your mobile application with Tabris.js 2.2

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 [js]DateDialog[/js] and [js]TimeDialog[/js] has been added. These dialogs accept listeners which are informed when a new value is picked.

To open the [js]DateDialog[/js] the following code can be used:

New “clear button” added to TextInput

We improved the users experience with a “clear button” on [js]TextInput[/js] with type “search” on Android.

New device vendor property

To retrieve the device’s vendor a new property [js]tabris.device.vendor[/js] 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:

It can then be used as a regular element:

Note that this example assumes that the element has exactly one child (the [js]callback[/js] 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 [js]set()[/js] and [js]get[/js] methods to accept the new properties, have previously been rather tedious. Now, with the with the addition of the tsProperties property and the [js]Properties[/js] and [js]Partial[/js] interfaces, this process has been greatly simplified.

The following example shows a custom UI component with the full support of its new 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.

To start developing real apps,

  • Install the latest Tabris CLI on your machine: [shell]npm install -g tabris-cli[/shell]
  • Type [shell]tabris init[/shell] in an empty directory – this will create a simple example app.
  • Type [shell]tabris serve[/shell] 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!