New Tabris.js 3.5 provides APIs to make common mobile app development tasks faster

We are happy to announce the release of Tabris.js 3.5. This release continues our theme to make common tasks simpler by providing the tools and APIs you need. From new APIs to share app data, manage resources, and display markup, this release offers a brought set of features to make life as a Tabris.js developer easier.

New share API

A well-behaving app integrates well into its mobile platform. In order to do so, it should be able to communicate with other apps and exchange data. This is why we have created a new API to share pieces of data with other apps via the native sharing features modeled after the W3C sharing API. The new method takes a combination of text or binary data and offers it to other apps for consumption.

The following snippet demonstrates this behavior. Consult the Tabris.js docs for a full feature description and check the share.jsx snippet to see the example.

Support for “font” and “textColor” attributes in TextViews with markupEnabled

The TextView has received a set of new styling attributes which are available when markupEnabled is set to true. It now allows to apply the font and textColor attributes inside a block of text. Thereby it is possible to colorize or change the font of only a section of a text:

Since these declarations are plain text, they accept CSS-like font and color strings. When the text is given as the content of a TextView JSX element, both attributes support the usual “ColorValue” and “FontValue” syntax, such as instances of the Font and Color classes. The following screenshot shows the textview-markupenabled.jsx snippet making use of the new styling features.

Support for badges on top TabFolder tab bar on Android

The Android platform now allows showing a badge on a top TabFolder tab bar. The iOS platform continues only to support the bottom tab bar badge location.

New app resource management APIs

Dealing with app resources like images, colors, and texts is a common task in Android apps. To help select the right resource under various conditions, we have introduced a new mechanism that supports a JSON-based selector syntax to create resource “dictionaries” based on the platform, device language, or screen scale factor. Currently, there is explicit support for fonts, colors, and strings with more to come.

A simple JSON data file that provides internationalized texts for your application may look like this:

To consume this resource configuration for texts you would use TextRessource class:

This is just a short example; we recommend checking the documentation to get a full understanding of how the resource system works.

Updated Tabris CLI request logging

The '--log-requests' CLI switch will now log a summary of all fetch() and XMLHttpRequest to the CLI terminal. The previous behavior of '--log-requests' was to log requests received by the CLI’s own Http server. This feature is still available by setting an environment variable 'TABRIS_CLI_SERVER_LOG=true'. It is useful for debugging connection issues during app sideloading.

There is also a new shortcut “CTRL+P” which lets you print out an XML summary of the UI state (previously done via “CTRL+U”) or of the localStorage content.

New decorator property “@prop” has been added

The @prop decorator is a smarter version of the existing @property decorator. Benefits of using @prop over @property include:

  • The properties’ initial value is not undefined but depends on the type. For example, string properties are initialized with an empty string. The initial value my also be configured explicitly.
  • If set to null or undefined, the property is reset to its initial value. If the initial value is also null (which is the default for non-primitives) an exception is thrown.
  • Objects used as property values may implement an “equals” method to indicate whether or not the new value can be considered equal to the current one.

Unlike @property, @prop always requires type information to work properly. They are implicitly provided in TypeScript and explicitly in JavaScript by passing a constructor like this:

Updates to JavaScript and TypeScript

All JavaScript runtimes in Tabris.js 3.5 support the “async/await” syntax natively without any compiler/transpiler/polyfill. This was already the case in 3.4 but overlooked in the release notes.

Tabris.js now officially supports/recommends TypeScript 3.8 (previously 3.3). Older TypeScript versions will not be tested.

Get Started with Tabris.js 3.5

Get the app

  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.5 Tabris CLI on your machine: npm install -g tabris-cli@3.5.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.5 documentation.