Create better mobile apps with Tabris.js 3.1 and its new support for permissions, form data and canvas features

It is time for the first release since our big 3.0 launch. Tabris.js 3.1 focuses on community requested features, stability, and performance. In particular, we have introduced support for native permission handling (no more plugins required), more powerful HTTP requests with W3C FormData support, and many smaller API improvements throughout the framework. Let’s dive into it.

Permission handling

Providing controlled access to device-specific functionality is an important security feature on mobile devices. Until now, access to resources like camera or location had to be handled by plugins. With Tabris.js 3.1, we now offer full support for permission handling as part of the core framework. It allows to request permissions, check permission status, and handle platform-specific special cases. At a basic level permission handling follows the steps outlined below.

The following state diagram shows the most common states of app permission. Consult the dedicated permission docs to find out about permissions states, handling platform-specific config.xml entries and edge cases.

Use FormData to send http POST request

Tabris.js now supports the FormData class along with its related classes Blob and File. These W3C standard classes can be used to send HTTP POST requests mimicking an HTML form submission. FormData can be used in conjunction with fetch() or XMLHttpRequest to upload data in the “multipart/form-data” encoding. The following snippet demonstrates how to upload a key/value pair using FormData.

New support for New CanvasContext method “drawImage”

Until now, the CanvasContext class implemented by Tabris.js lacked the W3C standard method drawImage. It has now been added with support for the ImageBitmap class, which represents an uncompressed in-memory image. ImageBitmap objects are created with the asynchronous createImageBitmap method using a Blob (containing a .jpg or .png image), ImageData or another ImageBitmap as the source. The following snippet shows a common use-case to download an image and to draw it on a Canvas.

The little things

As stated above, this release focuses on community requested features. Besides the big additions listed above we improved the Tabris.js APIs across the board.

New property imageTintColor on Button

The new property imageTintColor allows tinting an image displayed on the Button widget. The image color is automatically adjusted when the Button changes its enabled state.

New property scrollbarVisible on CollectionView

The property works in the same fashion as scrollbarVisible on the ScrollView by showing or hiding the scroll bar while the user scrolls.

New property maxChars on TextInput

As a long-standing request we added support for the new property maxChars on the TextInput widget. It allows limiting the maximum number of characters that can be entered into a TextInput. Any additional characters will be omitted.

New events "select" and "reselect" on Tab

The new "select" event on the Tab fires in tandem with the "select" event on the parent TabFolder. The new "reselect" event on the Tab fires when the tap is already visible. This allows to easily support common use-cases like scrolling content to the top when a tab is re-tabbed.

Infinite Animations

The animate method now allows Infinity as a value for the repeat option. Using Infinity makes the animation repeat indefinitely.

Wrap up

This release offers something for everybody, and we are looking forward to your feedback. Expect more great features in the upcoming Tabris.js release building upon the new additions made here.

Get Started with Tabris.js 3.1

  1. Install the Tabris.js developer app on your device. Links below.
  2. Try out the snippets bundled in the app
  3. Install the 3.1 Tabris CLI on your machine: npm install -g tabris-cli@3.1.0
  4. Type tabris init in an empty directory – this will create a simple example app
  5. Type tabris serve and load it in the developer app
  6. Check out the 3.1 documentation