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.
instead of
.
All layoutData preset values ('center'
, 'stretch'
, 'centerX'
, 'stretchY'
) can now be used as JSX shorthands, e.g.
instead of
.
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 init
in an empty directory – this will create a simple example app - Type
tabris serve
and 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!