Improved text-handling and TypeScript data binding with Tabris.js 2.6
Tabris 2.6 brings a number of nice little enhancements while we are working hard on some larger new features for later this year. If you are creating data-driven apps primarily dealing with texts and forms, this release may be quite valuable to you. Here is what is new:
Widgets
Manage text selection on TextInput
A new selection
property allows to get and set the text cursor position and selection. The selection
is a two element number array representing the text selections start and end position. The native platform usually shows selection handles so that the selection can be changed by the user. A selection
array where both numbers are the same represent a single cursor at the given position. The selection can be observed via the selectionChanged
event as usual.
Real links in TextView
The new tapLink
event on TextView
fires when the user clicks on a link in an html text. It requires to set markupEnabled
to true and to provide a text containing an anchor (<a>
) with an href
attribute. Example:
1 |
textView.text = 'Website: <a href=\"http://example.com>example.com</a>'; |
The event object contains a property url
which provides the anchors href
url.
Dialogs with TextInput
An AlertDialog
can now contain TextInput
widgets to gather user input. The inputs are displayed alongside the title
and message
. The text values inserted by the user can be read in the dialogs close
event from the respective TextInputs
. Example:
1 |
dialog.on('close', (e) => e.target.textInputs[0].text); |
TypeScript
Together with Tabris 2.6 we also released a new version of tabris-decorators
, the TypeScript extension for Tabris.js. You can find it with full documentation on GitHub and npm. A series of tutorial blog posts on this project is also in the works.
For 2.6 it adds the following features:
One-way binding converter
It is now possible to assign a converter function to one-way bindings. It takes the new value of the base property and returns the value to be applied to the target property. This can be used to change the type of the value, or to modify it within a type, e.g. limiting a number to a specific range.
In this example a Date
object is converted to a localized string:
1 |
<textView bind-text={{path: 'person.dob', converter: v => v.toLocaleString()}} /> |
There is also the utility function to
exported by tabris-decorators
that makes this expression slightly shorter:
1 |
<textView bind-text={to('person.dob', v => v.toLocaleString())} /> |
It can also be used to define a re-usable shorthand:
1 2 3 4 5 |
// define shorthand, maybe in some other module: const toLocaleString = (path: string) => to(path, v => v.toLocaleString()); // later use: <textView bind-text={toLocaleString('person.dob')} /> |
Dependency Injection with “priority” parameter
@injectable
and @injectionHandler
now have a numeric priority
parameter.
Previously, with multiple injection handlers for the same type the only way to determine which has the highest priority was to modify the order in which they are added. This was inconvenient an error-prone. With the new property it can be made explicit which handler has the highest priority.
Get Started with 2.6
To try out Tabris.js 2.6,
- Install the 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!