2.0.0 RC 1

With this first release candidate, we've finalized the API for Tabris.js 2.0.

New CollectionView API

The CollectionView has a new API based on item indexes instead of the items itself. This gives the developer more control over binding different types of models to a CollectionView.

The items property has been replaced by a new property itemCount that controls the number of items to be displayed. To add or remove items at runtime, the methods insert() and remove() can be used, however, insert() now expects and item count instead of an array.

The cells of a CollectionView must now be created by the application in the callback createCell, which replaces the initializeCell callback. Any type of widget can be used as a cell. The type Cell has become obsolete and was removed. Example:

function createCell(type) {
  return new TextView({
    font: type === 'header' ? 'bold 18px' : '14px'
  });
}

Instead of the change:item event, the cells are now populated in a dedicated updateCell callback that receives the cell view and the item index to show:

function updateCell(cell, index) {
  cell.text = items[index].name;
}

The property itemHeight has been renamed to cellHeight for consistency. This property now also supports the value 'auto' that will calculate the height of each cell individually.

New Picker API

Since the CollectionView now works on item count and indexes instead of an array of items, the Picker API now follows the same approach.

The property items has been replaced by itemCount. The property selection that accepted the selected item has been removed in favor of the existing property selectionIndex.

The itemText callback is now required to provide a text for a given item. This callback is now called with an index instead of an item.

NavigationView

Removing hidden pages from a NavigationView using detach() or dispose() does no longer auto-remove pages stacked on top of the removed page. This allows you to remove underlying pages and so to change the target for back navigation.

The height of the toolbar(s) is now available as read-only properties topToolbarHeight and bottomToolbarHeight.

To prepare for pre-configured page transitions, the property animated has been replaced by a property pageAnimation that accepts the values 'default' and 'none'.

WebView history support

The WebView now supports navigating in the history using the new methods goBack() and goForward(). To check if this navigation is currently possible, you can use the read-only properties canGoBack and canGoForward.

Configurable enter key

The new property enterKeyType on TextInput allows to specify the label or icon shown on the return key of the keyboard. Supported values are 'default', 'done', 'next', 'send', 'search', and 'go'.

Renamed events

All-lowercase event names and those with a colon in their name (such as pan:left) have been renamed to camelCase (e.g. panLeft). This affects the following events:

• Gesture events prefixed with pan: and swipe:.
• The variants of the close event on AlertDialog have been renamed from close:ok, close:cancel and close:neutral to closeOk, closeCancel, and closeNeutral.
• addchild and removechild are now addChild and removeChild.
• Touch events (all lowercase) renamed to touchStart, touchEnd, touchCancel and touchMove.
• Property change events (like change:text) are now named after the pattern <property>Changed. For example, the event change:text becomes textChanged.

Pan events now have separate properties for translationX and translationY instead of translation to match with the properties of the Widget's transform object. The property velocity has been replaced by individual properties velocityX and velocityY.

Events API

The methods on(), off(), and once() now also support maps of events and listeners to allow adding and removing multiple listeners in a single statement. Example:

new CheckBox({
  left: 12, top: 12
}).on({
  tap: onTap,
  select: onSelect
}).appendTo(parent);

This version of these methods also offer improved typing and tool support.

Besides the target property, all events now include the additional properties type (the event name) and timeStamp (the event timestamp in milliseconds). The latter replaces the property time on touch events.

As all listeners now receive an event object, the trigger() method also expects an object as second parameter and does not delegate additional parameters to the listeners anymore.

New fetch implementation

Instead of using a polyfill, a subset of the fetch API is now implemented in Tabris.js directly. With this change, the response objects now include the method arrayBuffer() to allow downloading binary content using fetch:

fetch(url).then(response => response.arrayBuffer()).then(buffer => ...)

As an addition to the standard, this implementation also features a timeout option:

fetch(url, {
  timeout: 5000 // request timeout in ms
}).then(...);

Support for #RRGGBBAA colors

Color properties now accept colors in the format #rrggbbaa where the aa part defines the alpha channel (opacity) as hex value between 00 (transparent) and ff (opaque).

Nightly builds

For those who like to try out the latest developments in tabris, nightly builds are now available on npm. You can install the latest nightly using npm install tabris@nightly or include a dependency like this:

"dependencies": {
  "tabris": "nightly"
}