1.0.0

Renamed property foreground to textColor

We think that the name textColor reflects the purpose of this property better. This property applies to all widgets that display a text.

Added property itemIndex to CollectionView cell

This property always reflects the index of the data item that is displayed in the cell.

Introduce properties text and message in SearchAction

The text property reflects the current text in the search input field. It also allows to clear the search field. As in the TextInput widget, the message property allows to insert a hint message into the search field.

Removed return value from animate method

We found that chaining animation listeners to the animate method can lead to unexpected behavior. Therefore we decided to remove the return value from the animate method. In future versions, we plan to return a promise object instead.

Replaced Picker text property with selection

Instead of a text property, the Picker widget now provides a property selection that reflects the currently selected string. The index of the selected item is available in the property selectionIndex.

Added resize event

In order to listen on changes of a widget's size, use the new resize event instead of change:bounds.

Changed method to obtain a Canvas Context

Instead of tabris.getContext(canvas, width, height), the CanvasContext is now obtained by the getContext method on the Canvas widget as follows:

ctx = canvas.getContext("2d", widget, height);

The first parameter (contextType) will make it easier for us to provide
HTML5 compatibility without breaking changes.

Global JavaScript objects available

To extend compatibility with libraries and npm modules that rely on them, the global variables global and self are now available. They are aliases for window and represent the global JavaScript scope.

Support for module variables __dirname and __filename

These are local variables are automatically available in every node module.
We provide them to improve node compatibility.

Added target field on DOM events

The field event.target now always contains the event target. This improves compatibility with some Cordova Plug-Ins.

Removed deprecated API

For widgets and events that have been renamed in previous releases, the old names were still supported as aliases. With this release the old names are no longer supported.

Fixed memory leak related to Page handling

Closing multiple pages by opening a different top-level page did not remove the closed pages from memory. Page handling was largely rewritten, fixing this and several minor page issues.

0.9.4

Consistent change events

Change events ( change:[property]) are now fired on programmatic changes as well as changes caused by user interaction. Also, they are now fired for all properties, even if the property is not explicitly supported by the widget. The listeners now have three parameters: widget, newValue, options. options is an object that may be given to the set method as the last parameter. All change events triggered by that set will then receive this object. If no options object was given, it will be empty in the change event.

New/renamed event types

• All events of the type selection are now select.
• The SearchAction event submit is now accept, and modify is now input.
• All widgets with a selection or selectionIndex property now have a select event. It behaves like change:selection, but is only fired when the selection property changes due to user interaction.
• The TextInput widget now has an input event. It behaves like change:text, but is only fired when the text property changes due to the user typing.
• The Picker previously fired change:selection, which should have been change:selectionIndex. This has been corrected.

Listener parameters changed

• Like with change listeners, all other listener now also get the widget that fired the event as the first parameter. All existing parameters are shifted by one.

0.9.3

Support for gesture events

Tabris.js now supports gesture events. We recommend using these events instead of the low-level touch events, because the latter can have side effects when used inside scrollable widgets.

The following gesture events are supported:

• tap
• longpress
• pan
• pan:left, pan:right, pan:up, pan:down
• pan:horizontal, pan:vertical
• swipe:left, swipe:right , swipe:up, swipe:down

Example:

widget.on("swipe:left", function(event) {
  moveWidgetLeft();
};

For a more detailed description, see the doc on touch API.

New Drawer widget

A drawer is a container that can be slid in form the left edge of the screen, often used for navigation. You can now create a drawer yourself by instantiating the type Drawer. The drawer can be filled with custom content.

var drawer = tabris.create("Drawer");

PageSelector

To display a list of top-level pages, we provide a new type PageSelector for convenience. The page selector is a collection view that displays all top-level pages and allows to open one of them. It is pre-configured to be easily appendable to the drawer without setting any properties:

tabris.create("Drawer").append(tabris.create("PageSelector"));

For more details on Drawer and PageSelector, see the UI doc.

Access to Pages, Actions, and the Drawer

All Pages, Actions, and the Drawer are now children of the object tabris.ui. The selector API can be used to obtain them. For example, to get all pages, you can write:

var pages = tabris.ui.children("Page");

Changed Animation API

The animate() methods again returns the widget and enables method chaining. The events animationstart and animationend are now triggered on the widget itself.

More details can be found in the doc on animation.

Property bounds now read-only

Widgets should be positioned by setting the property layoutData. The property bounds can be used to obtain the actual position and size of the widget after layouting.

New widget method isDisposed

Widgets now have a method isDisposed() that returns true when a widget has been disposed.

ScrollComposite renamed to ScrollView

We decided to rename this widget because the new name fits better into our naming scheme.

Noteworthy fixes

• Fixed an issue related to caching of modules #316
• Adjusted setTimeout() and setInterval() functions to respect the second parameter #305

0.9.2

Dynamic CollectionViews

The CollectionView has new methods to modify the items property. Items can be added and removed using the methods insert and remove. For dynamic CollectionViews, please use these new methods instead of setting the items property. When the content of a particular item has changed, the view can be refreshed using the refresh method. For details, see the reference documentation.

Scrolling CollectionView items into view

There is a method reveal that can be used to scroll a given item into view.

Listeners on Animations

The animate() method now returns an object that can be used to attach listeners to the animation and to cancel it.

Apply Properties to multiple widgets

A new method apply allows to set properties on an entire widget hierarchy. This can be used to re-configure the widgets of a page, e.g. in case of an orientation change. It also allows to separate creation and configuration of widgets. Example:

page.apply({
  "#userView": {
    message: "Email Address",
    keyboard: "email",
    layoutData: { top: "30%", left: "25%", right: "25%" }
  },
  "#passView": {
    message: "Password",
    layoutData: { top: ["#userView", 10], left: "25%", right: "25%" }
  },
  ...
});

App information

A new object tabris.app represents the running application. This object currently supports events pause and resume to observe when the app goes into the background.

Device information, orientation changes

A new object tabris.device provides information on the device. All device information that are provided by Tabris.js itself are accessible on this object. Like Tabris.js widgets, this object has properties that can be accessed with get().

The device orientation is available as an additional property orientation. A change listener for the orientation can be attached. For an example, have a look at the device snippet.

The global device object now only has those properties that are also available from Cordova device plugin.

Select keyboard type for TextInput

Different keyboard types can now be configured for TextInput widgets using the keyboard property. See also the textinput-keyboard snippet.

Percentage strings in layoutData

Percentages used to be specified as arrays, which was not very readable. Now you can specify percentages as strings, e.g. "25%". Percentages can be combined with a fixed offset using an array, e.g. ["25%", 16]. For an example, have a look at the layout-relative-size snippet.

Custom properties and events on widgets

In addition from the supported properties, you can now also set and get custom properties. The same is true for events. You can attach listeners for a custom event type to any widget and then trigger the event using trigger("my-custom-event").

Available on npm

Tabris.js is now available on npm. The dependencies in the package.json now only require the version number (or a version range). Example:

{
  "main": "app.js",
  "dependencies": {
    "tabris": "0.9.2"
  }
}

0.9.1

Loading tabris.js as a Module

The tabris.js file is now loaded as a regular npm module. This changes the way application declare the Tabris.js version to use. The package.json should now contain a dependency to tabris.js. By calling npm install, the module is installed in the node_modules folder where it can be found by the Tabris.js client.

Assign custom IDs to Widgets

All widgets support a new property id that can be set to a custom string. This property will be copied to the field id. A new method find(), that is available on all widgets, can be used to find widgets by id. This method accepts filter strings of the form #id. The method children() also accepts this kind of filter strings.

Support for widget IDs in layoutData

When layoutData attributes refer to other widgets, a string of the form #id can now be used instead of a widget reference. This reduces the need for keeping widget references in variables.

Widgets renamed

Some widgets have been renamed:

• Label has been renamed to TextView, which fits in nicely with ImageView
• Text has been renamed to TextInput
• Combo has been renamed to Picker

Cordova Integration

The developer console can be activated using the config.xml preferences now. To activate the console the boolean preference EnableDeveloperConsole was introduced. The default value is false.

0.9.0

Pull-to-refresh in CollectionView

The pull-to-refresh gesture can be enabled by setting the new property refreshEnabled on CollectionView. When enabled, the user can trigger a refresh event by pulling down. A refresh message can be set using refreshMessage (iOS only).

More intuitive z-order

For widgets that overlap each other, the z-order is defined by the order in which the widgets are appended to their parent. We've changed the z-order to be more intuitive: new widgets will now be rendered on top of those widgets that have already been appended.

Limit number of lines in Label

The property maxLines on Label can be used to limit the number of lines to be displayed. This approach is preferable to setting a fixed height, as it prevents text lines to be cut off in half.

Access device language and screen size

• device.language contains the device's language as a RFC4747 compatible string (e.g. de_DE).
• device.screen.height and device.screen.width contain the size of the device's screen in device independent pixel.

React on page activation and deactivation

The events activate and deactivate have been introduced for Page. They're fired when a page is about to become the active page (appear) and when a page is no longer active (disappear). They can be used to pause certain tasks when a page becomes inactive and resume them when it becomes active again.

New type SearchAction

SearchActions are specialized Actions, that shows a search field on activation. Dynamic proposals can be displayed using the property proposals. In addition to the selection event, they fire a modify event on typing in the search field, and a submit event on submitting a search term.

Listeners to be notified only once

The new method once allows to add an event listener to a widget that will be notified only once. The listener will be automatically removed once it has been notified.

More new API

• Colors can be reset to the platform's default using the keyword initial.
• Page.open() now returns the page itself to enable chaining calls.
• Experimental: the Page's headers can be configured using the properties image, foreground, and background on the tabris.ui object.

0.9 M6

Module system

We've implemented a Node.js / CommonJS compatible module API. To start with the most drastic change, instead of an index.json file, Tabris.js applications must now contain a package.json file. This is the standard manifest file that describes a module. This file must contain a field main that points to the main JavaScript file. You can also use this file to declare dependencies and install them from npm.

If your application consists of multiple files, the main file must include other modules using the require() function. Modules can export variables using the exports or module.exports object. For details, please refer to the Node.js description or have a look at our examples.

Cordova integration

We've integrated support for Cordova plug-ins to access device functions. The developer clients have a number of built-in modules. Please have a look at our cordova example. We plan to make it possible to include custom Cordova plug-ins in a Tabris.js application.

In order to support Cordova, we've also improved DOM compatibility by providing common Web API such as the global navigator object.

Widget API changes

• The Widget property visibility has been renamed to visible.
• The image property has been removed from CheckBox and RadioButton.
• The ScrollComposite property scroll has been renamed to direction.
• The Action property placementPriority accepts only the lower case values (low, high, and normal)

New API

• A basic Video widget has been added. See the video snippet for an example.
• The TabFolder widget has a new property tabBarLocation to set the position of the tab bar. Supported values are top, bottom, and auto.
• The WebView widgets supports a new property html that accepts an entire HTML document.
• Composite now supports the events addchild and removechild that are fired whenever a new child is added to/removed from a Composite.
• Device information is provided by a global object device with the properties model, platform, and version.
• The Text widget supports a new event change:text that is fired on text modification (i.e. while typing).
• Images are now also accepted as a plain strings. This is a shortcut for {url: string}.
• Colors now support the keyword transparent as value. Just like in CSS, this is a synonym for rgba(0, 0, 0, 0).
• The Widget method children() accepts a new optional parameter selector to filter the returned elements (currently only by type).
  The method now returns an array-like collection with the methods first() and last() to access the first/last element.
  The methods toArray(), forEach(), and indexOf() are also available.

Non-functional changes

We've added checks for property names and values. In case of a misspelled property names or an illegal property value, you should now see a warning in the developer console in most cases.