Use the new Tabris.js 3.0-beta2 release to create better looking mobile apps with new button styles, shorter layout code and improved TypeScript/JSX support

The latest Tabris.js 3.0.0-beta2 release is here and brings us close to a final 3.0 release. This time around the update brings you a slough of new features, including new button styles, shorter layout code, improved TypeScript and JSX support, better stack traces and much more.

Button Styling

The look-and-feel of the Button widget can now be adjusted by setting the style property to “default”, “elevate”, “flat”, “outline” or “text”. The default style will create a platform specific appearance.

iOS Android

StackComposite

The new StackComposite widget arranges all of its children automatically in one vertical stack, starting from the top. Children may be aligned to the left, right, horizontal center, or stretched. The layoutData on the children is currently ignored, but will be supported in the final 3.0 release.

Example:

LayoutData Shorthands

In practice widgets often are made to fill their parent completely, or centered on both axes. That behavior can now be achieved with less code by setting layoutData to ‘fill’ or ‘center’ instead of an LayoutData object.

Then:

Now:

Better Stack Traces

Stack traces have been improved in a number of ways:

  • Clean platform-independent format
  • Framework internals are filtered out
  • Source map support, i.e. corrent line numbers when using TypeScript/JSX. (*)
  • cross timer/promise traces – works great in combination with async/ await

(*) Requires the tabris-cli version matching this release, install with npm i tabris-cli@3.0.0-beta2 -g.

The improved stack traces are printed when calling console.trace() or error.toString().

Inspectable localStorage

The localStorage now also implements key and length as specified in the W3C standard. This allows programmatically inspecting its content without knowing the keys associated with the contained items. In addition, console.dirxml can now also be called with localStorage to inspects its content:

TypeScript-friendly Data Types

Various properties in Tabris.js used to only accept CSS-like strings. Since the IDE and TypeScript compiler can not know what format a string is supposed to have, no auto-complete or type check could be provided. The new (or improved) object literals for font, color, gradient, image and layout data types have full auto-completion and TypeScript support while staying 100% compatible with the old string formats. Each type also has a matching JavaScript class.

JSX support for AlertDialog

An AlertDialog can now be created via regular JS/TS code or JSX:

Updates to the cordova infrastructure

We have updated the underlying cordova infrastructure to their latest version.

Platform Based on
Android cordova-android 8.0.0
iOS cordova-ios 5.0.0
tabris-cli cordova-cli 8.1.2

Wrap-up

There are even more changes planned for Tabris.js 3.0. If you’d like to know more, why not have a look at the Tabris.js 3.0 project on GitHub.

Happy coding!