3.0.0-beta2

UI

StackLayout and 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:

contentView.append(
  <StackComposite layoutData='fill' spacing={24} >
    <TextView background='red'>lorem</TextView>
    <TextView background='green'>ipsum dolor</TextView>
    <TextView background='blue'>sit amet</TextView>
  </StackComposite>
);

This behavior can be added to most widget that inherit from Composite (e.g. Page, ScrollView) by setting the new layout property to a StackLayout instance.

Example:

contentView.append(
  <ScrollView layoutData='fill' layout={new StackLayout({alignment: 'stretchX'})} >
    <TextView background='red'>lorem</TextView>
    <TextView background='green'>ipsum dolor</TextView>
    <TextView background='blue'>sit amet</TextView>
  </ScrollView>
);

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.

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.

Logging

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().

Better warnings

Warnings printed by the framework do now generally include the source objects type and id, and also the file/line number in the application that caused the warning. The phrasing of many warnings has also been revised to be clearer and contain more relevant information.

Improved console.dirxml()

The dirxml method was already introduced in beta 1 as a convenient way to print the applications widget tree (or parts of it), but it only displayed the widget type and id. Now it also prints essential information like widget bounds, selection status, text value, etc.

In addition, dirxml can now also be called with localStorage to inspects its content.

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.

JSX and TypeScript improvements

New object literals for property types

Various properties in Tabris.js used to accept only CSS-like strings, which are short but error-prone. Since the IDE and TypeScript compiler can not know what format a string is supposed to have, no auto-complete could be provided. As a result typos would not become obvious until the code was executed.

The new object literals for font, color and gradient types have full auto-completion and TypeScript support while staying 100% compatible with the old string formats. While layoutData was already an object literal, it now allows objects to express the constraint values, e.g. left and top.

Each type also has a matching JavaScript class that is used as the default format by the framework. For example:

widget.background = {red: 255, green: 0, blue: 0};
// or
widget.background = '#ff0000';
// are normalized to a `Color` instance, i.e.
console.log(widget.background instance Color); // true
console.log(widget.background.toString());  // #ff0000
console.log(widget.background.red);  //255

JSX support for AlertDialog

As with ActionSheet in beta 1, AlertDialog can now be written as JSX. That allows for more readable code when a the dialog contains TextInput elements:

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();

The new static open method that serves as a convenient shorthand to create a very simple message dialog:

await AlertDialog.open('Comment saved').onClose.promise();
textView.text = 'Dialog closed';

Documentation

API documentation has been tweaked to improve readability and provide a short, informative overview for each class, method and property at first glance.

Breaking changes

Object 'ui' removed

The 'ui' object used to be a pseudo-widget that contained the main ContentView, the Drawer instance and various pseudo-widgets like StatusBar. This proved to be confusing and sometimes inconvenient, so all objects held by ui are now available as direct imports from the tabris module:

Old:

import {ui, TextView} from 'tabris';
ui.contentView.append(new TextView());

New:

import {contentView, TextView} from 'tabris';
contentView.append(new TextView());

Removed 'installPatch' method

The method app.installPatch allowed to patch a Tabris.js application on the fly without installing a complete new version. This API was always marked as experimental and is now removed again. It encouraged a risky practice (bypassing store policies) and was never widely used.

As a replacement the app.reload method now takes an URL parameter, allowing to execute any local or remote JavaScript in place of the packaged code. This, combined with fetch and the fs file system API would theoretically allow implementing this feature in-app, if desired.

Property 'backgroundImage' merged in to background

The property background was already supporting both colors and gradients, so it was an obvious move to make it accept images as well, eliminating the need for a separate backgroundImage property.