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:
|
1 2 3 4 5 6 7 |
contentView.append( <StackComposite layoutData='fill' spacing={24} > <TextView>Top</TextView> <TextView>Middle</TextView> <TextView>Bottom</TextView> </StackComposite> ); |
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:
|
1 |
new Composite({left: 0, top: 0, right: 0, bottom: 0}); |
Now:
|
1 |
new Composite({layoutData: 'fill'}); |
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.
|
1 2 3 4 5 6 7 |
widget.background = {red: 255, green: 0, blue: 0}; // or widget.background = '#ff0000'; // are normalized to a `Color` instance, i.e. console.log(widget.background instanceof Color); // true console.log(widget.background.toString()); // #ff0000 console.log(widget.background.red); //255 |
JSX support for AlertDialog
An AlertDialog can now be created via regular JS/TS code or JSX:
|
1 2 3 4 5 6 7 8 |
const dialog = AlertDialog.open( <AlertDialog title='Sign-in required' buttons={{ok: 'Sign-in', cancel: 'Cancel'}}> Provide sign-in credentials to access your personalized content. <TextInput message='Username' /> <TextInput type='password' message='Password' /> </AlertDialog> ); const {texts, button} = await dialog.onClose.promise(); |
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!
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
