Tabris.js 3.3 allows to create better mobile apps with improved image support and simplified widgets

We are happy to announce the release of Tabris.js 3.3. This release focuses on making complex widgets easier to use, handling images with more flexibility and creating common layouts faster. For full details, see Tabris.js 3.3.0. GitHub entry.

Simplified layouts with the Row widget

In Tabris.js 3.2, we introduced the Stack and StackLayout to help you create vertically aligned layouts. In this release, we bring you the complementary widgets Row and RowLayout. They allow creating horizontally aligned layouts, including support for the baseline property. Row can be used in the following fashion:

New Widgets ListView and ItemPicker

To reduce the complexity of some of the most powerful Tabris.js widgets, we have introduced two new ones, ListView and ItemPicker. Both of these additions are part of the tabris-decorators module and have to be imported accordingly.

A ListView is an extension of CollectionView capable of presenting items from a List object. By listening to the mutation events, all changes to the list are immediately made visible with appropriate animations. Similarly, the ItemPicker is an extension of a Picker. The ItemPicker also supports the List input and reacts to changes accordingly. The following snippet demonstrates the use of a ListView.

Better image handling support

To create various types of images simpler, we added several new ways for converting image data to container objects.

  • canvas.toBlob() – creates a Blob containing a png encoded image of the Canvas content.
  • createImageBitmap(canvas) – creates an ImageBitmap containing a decoded image of the Canvas content.
  • createImageBitmap(imageData) – creates an ImageBitmap containing a decoded image of an ImageData object.

Control the buttons text capitalization

To control how the button text is capitalized, a new property autoCapitalize has been added on the Button widget. The following values are supported:

  • 'default' – the platform decides on the capitalization. On Android this would be uppercase while on iOS lowercase is used.
  • 'none' – the text is displayed unaltered.
  • 'all' – every letter is capitalized.

New SizeMeasurement service

To measure the visual bounds of a given text string, we introduced the experimental service SizeMeasurement. It offers methods to measure text with various text configuration parameters. It can be used in the following way:

The snippet above shows how to use the service asynchronously, but it is also possible to use it synchronously via measureTextsSync. The text configuration accepts the following parameters: text, font, maxWidth and markupEnabled. See the SizeMeasurement docs for more details.

Repository tabris-decorators supports GitPod

GitPod allows you to develop a multi-file Tabris.js project directly inside your browser. The tabris-decorators documentation now has links to open its examples directly in a configured gitpod instance. See the ListView widget and try it out yourself.

New parameter for the tabris-cli

To better control how to tabris serve an app from a developer machine, we added several new options. Thereby, it is possible to control the QR code independently from the actual network address.

  • --external – allows a URL to be given as the only external address, which will then also be encoded in the QR code.
  • --port – allows to define the actual port of the HTTP server so it machtes the one given via –external.
  • --no-intro – with this option the QR code is not printed to the console, but still available via HTML site.

Android

Updated JavaScript engine

The Android client has been updated to the latest J2V8 JavaScript engine version 6.0.0. This latest update is based on v8 7.4.288 and brings a noticeable performance and startup speed improvements. Since this new version has a new debugging interface, the previous support for Chrome inspector-based debugging has been removed. We are currently working on a new debugging integration, which will be much more powerful than the previous version. Stay tuned

Support for Android App Bundles

The Android build is now based on cordova-android 8.1 which allows to build Android app bundles. An app bundle allows shipping only these app artifacts that are required on a specific device, resulting in noticeably smaller apps. To build an app bundle, you specify the --packageType as a build parameter.

The resulting .aab file can than be uploaded to the Google Play Store.

Get Started with Tabris.js 3.3

  1. Install the Tabris.js developer app on your device. Links below.
  2. Try out the bundled snippets in the app, or edit and run them via Tabris.js Playground.
  3. Install the 3.3 Tabris CLI on your machine: npm install -g tabris-cli@3.3.0
  4. Type tabris init in an empty directory to create a simple example app.
  5. Type tabris serve and load it in the developer app.
  6. Check out the Tabris.js 3.3 documentation.