Create mobile applications via the new Popover dialog and linear gradients with the new Tabris.js 2.5 release

The Tabris.js project is happy to announce its latest release: Tabris.js 2.5. Several brand new features like a popover window or the support for linear gradients allow to create even better apps. Building on the strong foundation of Tabris.js 2.4 we are also expanding existing APIs with additions to the widget selector syntax, support for image printing, tap events on the status bar and more. On top of all of that we also released a Tabris.js extension that offers, among other things, data binding using JSX/TypeScript.

For full details see the release notes.

New Popover dialog

A new Popover popup has been introduced. It allows to cover the app UI in a modal fashion with a custom UI. On large screen devices the Popover will be shown in a window style appearance while on small devices it covers the entire screen.

To create a popover we instantiate the Popover and append content to its contentView Composite followed by a call to open().

let popover = new Popover();
popover.contentView.append(new TextView({text: 'Hello Popover'}));
popover.open();

let popover = new Popover();

popover.contentView.append(new TextView({text: 'Hello Popover'}));

popover.open();

New navigationAction property on NavigationView

The navigationAction can be used to replace the menu action on the NavigtationView. In the popover screenshot above a NavigationView is used with a custom navigationAction to close the popover.

Support for linear gradients

The background property on a Widget now supports linear gradients. The gradient syntax follows the same notation as the linear-gradient specification.

new Composite({
  left: 0, right: 0, top: 0, bottom: 0,
  background: 'linear-gradient(to right top, red, green 50%, aqua 150%)',
}).appendTo(tabris.ui.contentView);

new Composite({

left: 0, right: 0, top: 0, bottom: 0,

background: 'linear-gradient(to right top, red, green 50%, aqua 150%)',

}).appendTo(tabris.ui.contentView);

The following screenshot shows a selection of gradients rendered natively and in a WebView.

Child selectors

All methods that accept selector a string can now also handle child selectors in the CSS-like syntax of selectorA > selectorB. For example:

widget.apply({'.columnLayout &gt; *': {left: 0, top: 'prev() 10', right: 0});

1	widget.apply({'.columnLayout > *': {left: 0, top: 'prev() 10', right: 0});

This will apply the given properties to all widgets who’s parent has columnLayout in its class attribute.

:host selector

The widget find and apply methods now also support the selector :host, inspired by the Web Component API. It always refers to the widget instance of the method that is called. Used with the apply method it allows a widget to refer to itself or descendants of a specific relationship to itself. Example:

widget.apply({
 ':host': {left: 0, top: 0, right: 0, bottom: 0},
 ':host &gt; Composite': {left: 0, top: 'prev() 10', right: 0}
});

widget.apply({

':host': {left: 0, top: 0, right: 0, bottom: 0},

':host > Composite': {left: 0, top: 'prev() 10', right: 0}

});

Previously this would have required either assigning specific id/class attributes to the targets or separate children/set calls.

New tap event on StatusBar

The StatusBar supports a new tap event on iOS. It can be used to e.g. trigger a “scroll-to-top” when the main content of the app consists of a scrolling container.

New name property on Device

The new name property on Device returns the user provided name of a device, e.g. “Joe’s iPhone”. The property is supported on iOS only.

Added support for printing images

The printing capabilities have been extended to print images. An images will be printed fullscreen in the center of the page. To support this new output type a property contentType has been added to the print options. It has to be either image/type or application/pdf.

printer.print(data, {jobName: 'image.jpg', contentType: 'image/jpg'}))
 .then(event =&gt; console.log('Printing finished', event))
 .catch(err =&gt; console.error(err));

printer.print(data, {jobName: 'image.jpg', contentType: 'image/jpg'}))

.then(event => console.log('Printing finished', event))

.catch(err => console.error(err));

New Project: TypeScript Decorators Extension

We now provide a Tabris.js extension called tabris-decorators which will make developing Tabris.js applications with TypeScript considerably more convenient using decorators. It features data binding capabilities, enhanced event handling and simple dependency injection. A quick setup guide can be found here and an example application here.

Here is a simple example for text-to-text property binding using JSX:

@component
class CustomComponent extends Composite {

  @property public myText: string = 'foo';

  constructor(properties: CompositeProperties) {
    super(properties);
    this.append(
      
    );
  }

}

@component

class CustomComponent extends Composite {

@property public myText: string = 'foo';

constructor(properties: CompositeProperties) {

super(properties);

this.append(

);

}

The installed version of tabris-decorators needs to be in sync with that of the tabris module, therefore its first release is also 2.5. Some features are still pretty basic and will be extended over the coming months. A longer tutorial will be released as a series of blog in a few weeks. Bug reports and feature requests go here.

Get Started with 2.5

To try out Tabris.js 2.5,

Install the new Tabris.js 2 developer app on your device
Try out the examples bundled in this app
Run your own code snippets from the playground, our online Tabris.js editor

To start developing real apps,

Install the latest Tabris CLI on your machine: npm install -g tabris-cli
Type tabris init in an empty directory – this will create a simple example app
Type tabris serve and load it in the developer app

The documentation contains everything you need to know (tip: try the doc search). Beginners find a step-by-step guide in this ebook. If you have questions or comments, you’re also invited to join the community chat.

Happy coding!

Feedback is welcome!

Want to join the discussion?
Feel free to contribute!

SLACK

GITHUB