Create better mobile apps with the new Tabris 3.0-rc1 and its new styling options, improved JSX support and more
We are happy to announce the first release candidate for Tabris 3.0. This should be the last one before the final 3.0 release, so make sure to provide your feedback as soon as possible. In this release we are focusing on tying together the last loose API ends, bring you easier to use APIs and a much improved (while not final) documentation. The full rundown can be found in the github release but here are the highlights.
New styling options for TextInput and Picker
The TextInput and Picker widgets receive new styling options on Android. The style and floatMessage properties allow to choose a design in line with the material design specs.
Additionally the Picker allows to show an empty state. This unselected state can be filled with a new message text property similar to a TextInput.
TabFolder improvements with badge support on Android
The badge and badgeColor properties are now also supported on Android.
The TabFolder also gains a new property selectionIndex to set the active Tab without holding an instance of it. This is especially useful when using JSX, where the Tab children are created declaratively, and no instance is immediately available.
CollectionView tap handling refined
Due to issues with cross platform support, we have removed the select event on the CollectionView. Instead interactions with a cell should be handled with regular events on the cell widget. The new method itemIndex(cell) may be used to determine the index associated with a cell:
|
1 2 3 4 5 6 7 8 |
collectionView.createCell = () => { const cell = new SomeWidget(); cell.onTap(() => { const index = cell.parent(CollectionView).itemIndex(cell); // do something with the item... }); return cell; } |
ScrollView allows to observe scroll state
The ScrollView adds the properties scrollXState and scrollYState which indicate whether the view is currently dragging, scrolling or in a resting position. Matching change events are available to observe these state changes while in motion.
Multiple improvements on the Widget base class
A new property excludeFromLayout was added that can be set to true to hide the widget and make the layout behave as though the widget does not exist. There is no empty space where the widget would have been displayed.
The padding property has been migrated from the Composite to be available on all Widget types. It now supports various shorter notations like [1, 10, 4, 8], '1 10 4 8' or simply 16 (for all sides), in place of a full object like {top: 1, right: 10, bottom: 4, bottom: 8}.
Finally the new property absoluteBounds provides the widget bounds relative to the tabris.contentView instead of the direct parent like existing bounds property does.
More concise JSX syntax
JSX can now be used to create any Popup (i.e. AlertDialog, Popover, DateDialog and TimeDialog).
The text of a TextView that use markupEnabled and JSX can now contain markup tags like and
|
1 2 3 4 5 6 7 |
contentView.append( <TextView padding={16} markupEnabled font='16px' lineSpacing={1.4}> <b/>Id:</b> {app.id}<br/> <b/>Version:</b> {app.version}<br/> <b/>Version Code:</b> {app.versionCode}<br/> </TextView/> ); |
The Element <$> has been added as a globally available element that may be used to group widgets (instead of <$> can also contain text, in which case it returns a string.
Almost all layout properties (e.g. left, top, centerY…) now accept true as an alias (usually for as an alias for 0) which allows a shorter syntax in JSX, e.g.
All layoutData preset values ('center', 'stretch', 'centerX', 'stretchY') can now be used as JSX shorthands, e.g.
Decorators Extension
The tabris-decorators extension for data binding and dependency injection was ported to 3.x and is once again released simultaneously with the core tabris module. Some example snippets were also added to the project.
CLI
The Tabris 3.0.0-rc1 CLI has also been released. The most significant change is that it can now create, serve, and build Tabris.js 2.x as well as 3.x Apps. So there is no longer any need to switch between CLI versions if working on Tabris 2.x and 3.x apps on the same developer machine.
In addition, 3.x apps generated with tabris init can now optionally set up for unit testing with Mocha.
Android native updates
In addition to the changes mentioned so far, the Android implementation has been updated to use the latest version of the Android jetpack libraries and material component library. When developing custom tabris plugins, you have to use the jetpack libraries in order to compile properly.
Additional changes
In addition to the changes above we also made API changes to the AlertDialog, NavigationView, Actions, TabFolder, the selector API and several other elements. Make sure to consult the release notes for full details.
Get Started with Tabris.js 3.0-rc1
- Install the Tabris.js developer app on your device. Links below!
- Try out the examples bundled in this app
- Install the 3.0-rc1 Tabris CLI on your machine:
npm install -g tabris-cli@3.0.0-rc1 - Type
tabris initin an empty directory – this will create a simple example app - Type
tabris serveand load it in the developer app - Check out the 3.0-rc1 documentation
Wrap-up
We are working actively to ship the final version of Tabris.js, so now we would be happy to get your feedback!
Happy coding!
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
