Tabris.js 2.5 released with support for gradients, popover window and more

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.

Tabris.js 2.5 released with support for gradients, popover window and more

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

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

The following screenshot shows a selection of gradients rendered natively and in a WebView.
Tabris.js 2.5 released with support for gradients, popover window and more

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 > *': {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 > 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 => 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(
      
    );
  }

}

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

Tabris.js 2 on Google Play Tabris.js 2 on Apple App Store Tabris.js 2 on Windows Store

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!

Join our Team - we're hiring!We’re looking for Android Developer & JavaScript Developer. Contact us!
Design & deliver well thought-out products. Develop the cutting edge technology.

No Comments

Post a Comment

Comment
Name
Email
Website

By publishing a comment, you accept the Terms of Use and the Privacy Policy