The 1.2 release of Tabris.js will come with a glimpse of a very powerful new feature: custom widgets.
Which problem do they solve? And how do they work? This blog post will provide you with some background and answers.
Extendability – today and tomorrow
Until the 1.2 release, the Tabris.js native part supported a fixed set of widgets that you could use out of the box. Cordova plugins could add access to further native functionality not part of Tabris.js itself under certain restrictions.
With support for custom widgets, developers are now able to extend the basic widget set of Tabris.js. This enables developers to add support for arbitrary native widgets. It does not matter if these widgets are part of the native iOS and Android system libraries or provided by third-party libraries.
How Custom Widgets work
- The JS and the native part of a custom widget come in form of a Cordova Plugin.
The native part of a custom widget implements the interaction with native widgets. In particular the native part is responsible for translating messages to get and set properties, calling methods on a widget, destroying a widget, and creating messages to notify the JS execution environment about events triggered by the native widget.
Examples of Custom Widgets
To give you an idea what the source code and project structure of a custom widget looks like we created two custom widgets. You can find them on GitHub.
Tabris Calendar Widget
The Tabris.js Calendar Widget contributes a specific native Android UI to show a calendar. It lets the user pick a date from the calendar. The widget currently only supports the Android platform.
Tabris Maps Plugin
To add support for the native map UIs on iOS and Android we created the Tabris Maps Plugin. It provides a custom widget named
ESMap. This custom widget uses the native Apple map library on iOS and the “Google Maps API for Android” on Android as the native counterpart to implement the ESMap widget. The plugin is currently under development. Feel free to request specific features you require by opening issues on GitHub.
There is also an example project, which contains a simple Tabris.js app that makes use of the Tabris Maps Plugin. It demonstrates basic features like how you can position the map and place markers.
We are excited about custom widget support in our upcoming 1.2 release of Tabris.js. Even though it will be our first take on the corresponding APIs, we have the impression that custom widget support is already quite useful.
As all the API we are going to provide will be preliminary we are happy to get your feedback to improve it. Please leave a comment on this post or just open an issue on one of the example projects. We’ll be happy to answer your questions.