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 initin an empty directory – this will create a simple example app - Type
tabris serveand 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!
