Tabris.js 2.0 – Top 10 Features: Simplified API

Tabris.js 2.0 is just two weeks away, and the development team is taking this ramp down time to reflect on the release and highlight the features we’re really excited about. A new major release gave us the opporuntity to update the API. We have been designing APIs for Widget Toolkits for over 10 years, and in that time we’ve learned a lot. In Tabris 2.0, we’ve modernized our API to fit better with the modern language features available in JavaScript and TypeScript. Here are some of the most notable changes.

Properties

When you look at Tabris 2.0 code, the most obvious novelty is direct access to native widget properties. Instead of calling input.set('text', 'Hello') or input.get('text'), you can now set and get properties directly:

[js] input.text = ‘Hello’; let name = input.text; [/js]

Events

Event listeners are still added using on(), but in Tabris.js 2.0, all event listeners receive exactly one argument, the event object. Every event object contains at least the fields

• type (the event type, e.g. "select"),
• target (the widget that received the event), and
• timeStamp (a Date instance).

Some event types add specific properties such as checked in the example below:

[js] checkBox.on(‘select’, (event) => { event.target.text = event.checked ? ‘I am checked’ : ‘I am not checked’; }); [/js]

By the way, the same code can be written a bit more concisely using the JavaScript object destructor syntax. This new language feature allows us to break down the event object into its properties:

[js] checkBox.on(‘select’, ({target, checked}) => { target.text = checked ? ‘I am checked’ : ‘I am not checked’; }); [/js]

We’ve also established a consistent naming scheme for events–there are no colons in event names anymore. All events are now written in camel case (e.g. backNavigation or panHorizontal). Change events are named after the property, e.g. textChanged and checkedChanged. These new event names can also be used as object keys without quotes, which comes in handy when adding multiple listeners. This can now be written as:

[js] widget.on({ tap: onTap, panLeft: onPanLeft }); [/js]

We hope you like the new API. Happy coding!

If you’re migrating an app from Tabris.js 1.x, be sure to check out our migration guide for a list of all changes.

Make sure to check back as we continue the countdown to the release, and don’t forget to follow us on twitter.

Tabris.js 2.0 - Top 10 Features

The simplified APIS are just some of the cool new additions to Tabris.js 2. Don’t forget to check out the other top 10 features in the rundown below.

1. TypeScript & JSX
2. Windows 10 Support
3. File system access
4. AlertDialog
5. Binary fetch()
6. Simplified event and properties API
7. StatusBar and NavigationBar
8. Tabris CLI
9. Security
10. NavigationView