Skip to content

2.0.0 Beta 1

Pre-release
Pre-release
Compare
Choose a tag to compare
@ralfstx ralfstx released this 08 Feb 09:29
· 1288 commits to master since this release
v2.0.0-beta1
3e9c54b

New UI model

Tabris.js does not dictate the use of pages anymore. Widgets can be added directly to the main area of the app.

The object tabris.ui, which represents the UI root, now has a number of children, that represent different parts of the app's user interface:

  • tabris.ui.statusBar - shows the time and some system status icons
  • tabris.ui.navigationBar - contains the Back, Home, etc. buttons on Android
  • tabris.ui.contentView - contains the app's main UI
  • tabris.ui.drawer - can be swiped in from the left

Widgets can be appended to contentView, and optionally to the drawer:

new tabris.Button({
  left: 16, top: 16
}).appendTo(tabris.ui.contentView);

Drawer is now a singleton

There's only a single drawer widget available as tabris.ui.drawer. The type tabris.Drawer cannot be instantiated anymore. The drawer is disabled by default, to use it in an application, you have to enable it:

tabris.ui.drawer.enabled = true;

New NavigationView, changes to Page

The new widget NavigationView offers page-based navigation. By creating multiple instances of this widget, it is now possible to have multiple page stacks in an app, for example in different tabs.

Pages are now appended to and removed from a NavigationView using the standard widget methods append(), appendTo(), detach(), and dispose(), respectively. When a page is added, it becomes the topmost page on the page stack and covers any previous page. The methods open() and close() on Page are obsolete and have been removed.

On back navigation, the topmost page will be disposed. When a page is removed from a NavigationView, all pages on top will be disposed automatically. To prevent pages from being automatically disposed, you can set the property autoDispose to false. The property topLevel has also been removed.

The header of a NavigationView can be styled using the new properties toolbarColor, actionColor, titleTextColor, and actionTextColor.

Actions and SearchActions are now also added to instances of a NavigationView.

Remove PageSelector

The helper type PageSelector, that showed a list of pages did not fit with the new UI model that allows for multiple page stacks. It has been removed.

Widgets

New AlertDialog

The new type AlertDialog can be used to display modal dialogs to the user. An alert dialog can contain a message text and up to three buttons with custom texts.

ScrollView scrolling

The ScrollView properties offsetX and offsetY are now read-only. To scroll programmatically, use the methods scrollToX() and scrollToY(). You can omit the animation by adding {animate: false} as second parameter.

TabFolder scrolling

A new property tabMode on TabFolder allows to enable overflow behavior on Android. It can be set to 'fixed' (default) or 'scrollable'. When set to 'scrollable', the tabs in the tab bar will overflow and can be scrolled.

A new TabFolder event scroll is fired when paging is enabled and a tab is scrolled. This event can be used to implement transition effects such as parallax scrolling.

TextView selectable mode

With a new property selectable on TextView, you can allow copying from a TextView into the clipboard. This property is currently only support on Android.

TextInput keepFocus property

A new property keepFocus has been introduced on TextInput. When set to true the TextInput will keep its focus, even when tapped outside of the widget bounds, thereby leaving the keyboard open.

New color properties on TextInput and Picker

The new properties fillColor and borderColor provide more fine-grained control over the look and feel of TextInput and Picker widgets.

Support for data URIs in image properties

Data URIs can now be used in all widget properties that accept an image.

Properties on tabris.app

The read-only properties id, version, and versionCode on tabris.app provide information on the app id and version.

HTTP

Support for binary responses in XHR

The responseType 'arraybuffer' is now supported by the XHR implementation in Tabris.js and supports downloading binary content.

Support for certificate pinning

A new property pinnedCertificate on tabris.app can be used to enable certificate pinning.
The property accepts an array of pinned certificates in the form of

[
  {host: <string>, hash: <string>, algorithm: <RSA2048|RSA4096|ECDSA256>},
  ...
]

Overall Widget API

Direct access to widget properties

You can now access all widget properties directly, without using get() and set():

button.text = 'OK';
var text = button.text;

The methods get() and set() remain available.

Remove support for off() with zero or one argument

In Tabris 1.0, calling a widget's off() method with zero arguments could be used to remove all listeners from a widget and off(topic) to remove all listeners for a given event topic. As these calls could affect other modules, they were considered risky and have been removed.

New detach method to remove widgets from their parent

Tabris widgets can be created without a parent and appended to a parent later. Using appendTo() they can be re-parented. A new method detach() now allows to remove a widget from its current parent for later re-use.

New includes method on WidgetCollection

You can use the new method includes() to find out whether a widget exists in a collection, e.g.

if (parent.children().includes(widget)) {
  ...
}

Custom widgets

The method tabris.registerWidget that had been recommended for custom widgets has been removed. Native widgets should now extend Widget. We recommend to use ES6 classes and transpile the code as needed.

class MyWidget extends Widget {

  get foo() {}
  set foo(value) {}
  ...

}

Android platform

Resource drawables in image objects

A new Android specific image url scheme android-drawable allows to load bundled resource drawables, e.g. new tabris.ImageView({image: 'android-drawable://ic_icon' }). The bundled resources have to be placed in their respective drawable folders during app build time.

Added support for splash screens

The cordova build now supports to configure a splash screen via the <splash ..> element. To customize the theme extend one of the SplashScreen themes.

Breaking changes

  • Minimum support Android version raised to API level 17 (Android 4.2)
  • Base theme to extend when creating a custom theme has been renamed from DarkActionBar to DarkAppBar
  • TabrisActivity intent extra theme now expects a theme resource id instead of a qualified class name
Assets 2
Loading