Tabris.js 2.3 released

Moritz Post
December 22, 2017 | 3 min Read

With Christmas around the corner, it is time for presents! The Tabris.js team joins the festivities with the new Tabris.js 2.3.0 release. This latest incarnation brings support for the iPhoneX, external loadable fonts, a themable navigation bar and more.

IPhoneX support

The latest Apple hardware brings a brand new form factor to the table and with Tabris.js 2.3.0 we support it out of the box. Several widgets have been adjusted to take care of the top nodge and the home indicator.

If your app uses a TabFolder or NavigationView as its top level app frame you are all set. For more fine control you should take a look at this video.

External fonts

A much requested feature is finally coming to Tabris.js: support for external font files. You are now able to load any TrueType and OpenType font in your app. You can use a loaded font everywhere where a font property is supported. To load a font you register the font file with an alias on the App object and than apply it via the font property.

[js] tabris.app.registerFont(‘pacifico’, ‘resources/pacifico.ttf#Pacifico’); new tabris.TextView({ left: 16, top: 16, right: 16, text: ‘Sphinx of black quartz, judge my vow.’, font: ‘20px pacifico’ }).appendTo(tabris.ui.contentView); [/js]

When registering the pacifico.ttf file, we gave it the alias pacifico, which we than used on the font property. The resulting TextView will render its text with the given font.

Fonts can be loaded from a relative or absolut path or from a remote URL. Be aware that on windows you can only load a font file when it is bundled with the app. In addition on windows, you have to provide the font-family name with the font file. You declare it by concatenating the font-family name with the file name via a “#” as shown above. To get the font-family name you could e.g. use a font inspector.

More fine-grained autoCapitalize control on TextInput

Previously a TextInput autoCapitalize property would capitalize all its letter when set to true. With the enahnced property you can now also use various modes to control how the capitalization is applied:

  • none - Do not change any text input
  • sentence - Capitalize the first word of a sentence
  • word - Capitalize every word
  • all - Capitalize every letter

You can still use the boolean values as before where false maps to none and true is equal to all.

New theme property on NavigationBar (Android only)

A new theme property on the NavigationBar enables to customize the appearance of the navigation buttons on devices running Android 8 (Oreo) and above. Setting the theme to light switches the bar icons to be dark and visible on a light background.

Get Started with 2.3

To try out Tabris.js 2.3,

  • Install the new 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!

Moritz Post