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()
.
1 2 3 |
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.
1 2 3 4 |
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:
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:
1 2 3 4 |
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
.
1 2 3 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@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!