Tabris.js 3.3 allows to create better mobile apps with improved image support and simplified widgets
We are happy to announce the release of Tabris.js 3.3. This release focuses on making complex widgets easier to use, handling images with more flexibility and creating common layouts faster. For full details, see Tabris.js 3.3.0. GitHub entry.
Simplified layouts with the Row widget
In Tabris.js 3.2, we introduced the Stack and StackLayout to help you create vertically aligned layouts. In this release, we bring you the complementary widgets Row and RowLayout. They allow creating horizontally aligned layouts, including support for the baseline property. Row can be used in the following fashion:
|
1 2 3 4 5 6 |
contentView.append( <Row stretchX spacing={8} padding={16}> <TextView text='Hello'/> <TextView text='World'/> </Row> ); |
New Widgets ListView and ItemPicker
To reduce the complexity of some of the most powerful Tabris.js widgets, we have introduced two new ones, ListView and ItemPicker. Both of these additions are part of the tabris-decorators module and have to be imported accordingly.
A ListView is an extension of CollectionView capable of presenting items from a List object. By listening to the mutation events, all changes to the list are immediately made visible with appropriate animations. Similarly, the ItemPicker is an extension of a Picker. The ItemPicker also supports the List input and reacts to changes accordingly. The following snippet demonstrates the use of a ListView.
|
1 2 3 4 5 |
<ListView stretch items={[{title: 'Hello'}, {title: 'World'}]> <Cell height={48} padding={16}> <TextView font={{size: 32, style: 'italic'}} bind-text='title'/> </Cell> </ListView> |
Better image handling support
To create various types of images simpler, we added several new ways for converting image data to container objects.
canvas.toBlob()– creates aBlobcontaining a png encoded image of theCanvascontent.createImageBitmap(canvas)– creates anImageBitmapcontaining a decoded image of theCanvascontent.createImageBitmap(imageData)– creates anImageBitmapcontaining a decoded image of anImageDataobject.
Control the buttons text capitalization
To control how the button text is capitalized, a new property autoCapitalize has been added on the Button widget. The following values are supported:
'default'– the platform decides on the capitalization. On Android this would be uppercase while on iOS lowercase is used.'none'– the text is displayed unaltered.'all'– every letter is capitalized.
New SizeMeasurement service
To measure the visual bounds of a given text string, we introduced the experimental service SizeMeasurement. It offers methods to measure text with various text configuration parameters. It can be used in the following way:
|
1 2 |
const measurements = await sizeMeasurement.measureTexts([{text: 'Hello World', font: 'italic 24px'}]); console.log(measurements[0].width + " x " + measurements[0].height); |
The snippet above shows how to use the service asynchronously, but it is also possible to use it synchronously via measureTextsSync. The text configuration accepts the following parameters: text, font, maxWidth and markupEnabled. See the SizeMeasurement docs for more details.
Repository tabris-decorators supports Gitpod
Gitpod allows you to develop a multi-file Tabris.js project directly inside your browser. The tabris-decorators documentation now has links to open its examples directly in a configured gitpod instance. See the ListView widget and try it out yourself.
New parameter for the tabris-cli
To better control how to tabris serve an app from a developer machine, we added several new options. Thereby, it is possible to control the QR code independently from the actual network address.
--external– allows a URL to be given as the only external address, which will then also be encoded in the QR code.--port– allows to define the actual port of the HTTP server so it machtes the one given via –external.--no-intro– with this option the QR code is not printed to the console, but still available via HTML site.
Android
Updated JavaScript engine
The Android client has been updated to the latest J2V8 JavaScript engine version 6.0.0. This latest update is based on v8 7.4.288 and brings a noticeable performance and startup speed improvements. Since this new version has a new debugging interface, the previous support for Chrome inspector-based debugging has been removed. We are currently working on a new debugging integration, which will be much more powerful than the previous version. Stay tuned
Support for Android App Bundles
The Android build is now based on cordova-android 8.1 which allows to build Android app bundles. An app bundle allows shipping only these app artifacts that are required on a specific device, resulting in noticeably smaller apps. To build an app bundle, you specify the --packageType as a build parameter.
|
1 |
tabris build android --release -- --packageType=bundle |
The resulting .aab file can than be uploaded to the Google Play Store.
Get Started with Tabris.js 3.3
- Install the Tabris.js developer app on your device. Links below.
- Try out the bundled snippets in the app, or edit and run them via Tabris.js Playground.
- Install the 3.3 Tabris CLI on your machine:
npm install -g tabris-cli@3.3.0 - Type
tabris initin an empty directory to create a simple example app. - Type
tabris serveand load it in the developer app. - Check out the Tabris.js 3.3 documentation.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
