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.
|
1 2 3 4 5 6 7 8 |
if (permission.isAuthorized('camera')) { AlertDialog.open('Camera permission is available'); } else { (async () => { const status = await permission.requestAuthorization('camera'); AlertDialog.open(`Camera permission has been ${status}.`); })(); } |
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.
|
1 2 3 4 |
const formData = new FormData(); formData.set('Hello', 'World'); const response = await fetch('https://url.com', {method: 'POST', body: formData}); const data = await response.text(); |
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.
|
1 2 3 4 5 |
(async () => { const response = await fetch('image.png'); const image = await createImageBitmap(await response.blob()); canvasContext.drawImage(image, 100, 100); })(); |
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
- Install the Tabris.js developer app on your device. Links below.
- Try out the snippets bundled in the app
- Install the 3.1 Tabris CLI on your machine:
npm install -g tabris-cli@3.1.0 - Type
tabris initin an empty directory – this will create a simple example app - Type
tabris serveand load it in the developer app - Check out the 3.1 documentation
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
