Releases: eclipsesource/tabris-js
1.10.0
Support for WebSockets
The WebSockets API is now supported by Tabris.js. This allows to send messages to a server and receive event-driven responses without having to poll the server for a reply.
New InactivityTimer
A new type InactivityTimer has been added. This timer will elapse after a given period of user inactivity.
var timer = new tabris.InactivityTimer({
delay: 2000
}).on("timeout", function() {
label.set("text", "inactive!");
});
timer.start();Extended API for Video widget
The API of the Video widget has been extended. You can now hide the player controls with the property controlsVisible, start and pause a video with the methods play() and pause(), and set a position with seek().
New event on WebView for Android
When a link to a file is selected in the WebView, a download event will now be fired. This event provides the properties url, mimeType, contentLength and contentDisposition. The event could be used to trigger a download when a link to an unsupported file type is clicked. This event is only supported on Android.
Support for images in Page header
The new Page property icon can now be used to set an image on a page header. It is named icon to prevent a collision with the existing property image which is used by the PageSelector. It will be renamed in Tabris.js 2.0.
1.9.0
ImageData API
The CanvasContext object now supports the methods getImageData, createImageData and putImageData.
Web messaging API on WebView
This new API allows the Tabris.js application to communicate with the HTML document loaded inside a WebView via an HTML5 compatible API. String messages can be exchanged via the postMessage method and message event, which are available on the WebView itself and on the window object inside the WebView.
New property "selectedImage" on Tab widget
You can now give an additional image to be displayed if the tab is currently selected.
New property "focused" on TextInput
This property can be used to bring up the virtual keyboard by setting it to true. The user can then immediately start typing.
New events on Drawer
The Drawer widget now has the events open and close, which are fired after the opening/closing animation of the drawer completes.
Animation with promises
The widget method "animate" now returns a promise that is resolved when the animation completes, and rejected when the animation is aborted.
New lifecycle events
In addition to pause and resume there are now three new events on the tabris.app object to react to changes in the app running state: foreground, background and terminate.
Crypto object
The W3C conform global object crypto has been added. It can be used to generate cryptographically secure random numbers.
Full access to http headers via XMLHttpRequest
In a strictly W3C/browser conform implementation of XMLHttpRequest it is not allowed to access certain headers. Tabris.js no longer implements these restrictions. All headers can now be set and read, including previously "forbidden" headers like "Cookie".
Updated permission handling on Android
Cordova plugins can now receive permission request callbacks.
The Tabris.js playground
To make it easier for everyone to play with their code, we have now made a public Playground available without signing in. Go to tabrisjs.com/playground and scan the QR code with your device using the Tabris.js Developer App. You will see your code in action right away.
1.8.0
Grid mode for CollectionView
It is now possible to align a given number of CollectionView cells in a single row, resulting in a grid layout as is common in image galleries or file explorers. The number of columns is controlled via the columnCount property, with the default 1 representing the traditional list layout.
Customize TextView line spacing
Control the amount of space between each line of a multi-line TextView using the property lineSpacing. The value 1.0 represents the font's default, 2.0 doubles the spacing, and so on.
Tint Images in a solid color
Using the new tintColorproperty you can tint all opaque pixels of an image with the given color. This is useful to represent different states, or just to better align the UI with the platform look & feel.
Get event when images are done loading
Since it may take some time to download an image from a remote location, a load event has been introduced. It fires once the image is visible on screen, or if the image could not be found. Example:
new tabris.ImageView({
image: "http://mycloudstorage/foo.png"
}).on("load", function(imageView, event) {
hidePlaceholder();
if (event.error) {
showFileNotFound();
}
});Improved TypeScript support
Type definitions are now bundled with Tabris.js and can be used without any additional installation. The property and event APIs now provide full auto completion and type information support.
To access type definitions for the promise and fetch APIs provided by Tabris.js, their respective type definitions files have to be explicitly referenced in the tsconfig.json file:
"files": [
"./node_modules/tabris/promise.d.ts",
"./node_modules/tabris/whatwg-fetch.d.ts",
...
]
Yeoman generator update
You can now use Yeoman to create more advanced Tabris.js projects, for example with EcmaScript 6 or TypeScript transpilers already set up.
Simply type:
npm install -g yo generator-tabris-js
yo tabris-js
1.7.0
Widget constructors
Widgets can now be created using their constructors. Instead of tabris.create("Button", { text: "Submit" }), you can now write:
new tabris.Button({ text: "Submit" });This syntax is shorter and more common. While tabris.create() will remain available in all 1.x releases, we encourage you to use constructors from now on. We've also adjusted all our snippets and examples to the new syntax.
Access all siblings of a widget
In addition to the parent() children() methods, widgets now also provide a method siblings(). This method will return a WidgetCollection of all widgets that have the same parent, excluding the target widget itself. The method can also be called with a selector expression, which makes it easy to select all siblings of a certain type:
checkbox.on("select", function() {
checkbox.siblings("CheckBox").set("selection", false);
});Rounded corners on widgets
The new property cornerRadius allows you to apply a rounded clipping to the corners of a widget. See the snippet on GitHub.
This property is supported on iOS and Android 5.0+.
System bar theme
The theme used for the system status bar can now be controlled using a new property systemBarTheme. Possible values are "light", "dark", and "default" (which selects the platform default). This property will control the foreground text and icons on the status bar. Note that the light theme will result in a dark foreground and vice-versa. See the snippet on GitHub.
This property is supported on iOS and Android 6+.
Fetch API included
As a simpler and more flexible alternative to XmlHttpRequest, the Fetch API is now available in Tabris.js. The npm module whatwg-fetch is no longer required.
Promise included
Tabris.js now includes a full Promise implementation on all platforms. There is no need to include a promise shim anymore.
1.6.0
New widget ActivityIndicator
To indicate a pending operation of indeterminate time, you can now use the widget ActivityIndicator that displays a spinning indicator on both platforms. Have a look at the snippet.
New property displayMode to enable fullscreen
The new property displayMode on tabris.ui can be set to "fullscreen" to enable fullscreen mode, i.e. to hide the system bar. The default display mode is called "normal".
New properties scrollX and scrollY on ScrollView
The new properties scrollX and scrollY can be used to get and to set the current scroll position of a ScrollView.
backnavigation: preventDefault is now a function
In order to prevent the default effect of the back-button on Android, you can now call event.preventDefault() as a function in your backnavigation listener. Before you had to set a field of this name to false. This method is still supported, but discouraged.
1.5.0
Allow for TabFolders without a tab bar
The TabFolder property tabBarLocation now accepts the value "hidden". Together with paging: true, this enables a swipe-widget like experience. There's a new snippet for this use case.
Note that the property tabBarLocation is static, i.e. it can only be set at creation time.
Support for Tab images on Android
The image property on Tab is now also available on Android. You can use it with or without the text property.
Support for elevation and z-translation on Android 5+
As of Android 5.0, widgets can have an elevation that defines their relative position on the z-axis. The elevation is visually represented by a shadow effect. Transformations now support the additional property translationZ. While elevation represents the base state of a widget, the translationZ property should be altered for animations. Have a look at the new snippets for elevation and translationZ.
Both elevation and translationZ are only respected by Android 5.0+.
SearchAction open method
SearchActions can now be invoked programmatically using the new method open().
1.4.0
Support for any data type in the Picker items array
Where the Picker previously only accepted an array of strings it can now deal with any kind of item. This is especially convenient when handling an item in the select and change:selection events.
By default the Picker calls toString() on the item to convert it to string, but you can also provide a custom function to do this in the new itemText property:
tabris.create("Picker", {
items: airports,
itemText: function(airport) {
return airport.name;
}
});
Scroll event for CollectionView
Just like in ScrollView, CollectionView now has a scroll event that lets you know when the user has scrolled. The callback contains information about the scrolling direction and distance.
New "firstVisibleIndex" and "lastVisibleIndex" properties in CollectionView
To determine which items are currently visible on screen the firstVisibleIndex and lastVisibleIndex properties have been added to CollectionView. These also come with matching change events, which are very well suited to implement an "endless scrolling list". Simply listen to "change:lastVisibleIndex" and start loading more items once the value exceeds a limit of your choosing.
1.3.0
iOS 9 support
The iOS client now works on iOS 9.
TypeScript support
We provide type definitions to assist you developing Tabris.js apps in TypeScript. See this blog post for details.
Insert widgets before/after others
In addition to appendTo(), you can now use the new methods insertBefore() and insertAfter() to insert widgets at a given position. This is particularly useful in conjunction with the "prev()" keyword in layout data.
Support additional colors in Switch
Switch buttons now offer fine-grained control over colors using the following new properties:
thumbOnColorthumbOffColortrackOnColortrackOffColor
Access to bundled resources
A new method getResourceLocation() on tabris.app provides absolute locations for resources that are bundled with the app, such as images, videos, etc.
1.2.0
Layout: symbolic reference "prev()"
In all layout attributes that support referencing other widgets, "prev()" can now be given (as a string) to refer to the preceding sibling. This is superior to parent.children().last() or a direct reference for several reasons:
- It's less code.
- It requires no access to the parent.
- The reference is dynamically resolved - meaning if the preceding sibling is removed or replaced the layout is adjusted automatically.
Layout: Alternative notation for top/left/right/bottom
- Instead of
["20%", 10]it's now also possible to write"20% 10". - Instead of
["#foo", 10]or["prev()", 10], it's now also possible to write"#foo 10"or"prev() 10".
Layout: Setting layoutData attributes as widget properties
All attributes of layoutData are now also properties of Widget. So if you want to change only a single attribute of layoutData without affecting the other, simply set the widget property:
widget.set("layoutData", {width: 100, height: 10});
//...
widget.set("left", 100); // width and height do not change
If you wish to set an entirely new layout, use layoutData:
widget.set("layoutData", {width: 100, height: 10});
//...
widget.set("layoutData": {left: 100}); // width and height are reset
Android back button support
The back button in Android is usually used in Tabris.js to close the current page. However, with the new backnavigation event on the app object this behavior can now be overwritten:
tabris.app.on("backnavigation", function(app, options) {
options.preventDefault = true;
// do something else than closing the page
});
Hide navigation UI elements
To create a "fullscreen" app, simply call tabris.ui.set("toolbarVisible", false); Note that there is currently a minor issue when using the feature on iOS, see #597.
Provisional Custom Widget API
We have been working on defining a public API that will allow application developer to create their own Tabris.js widgets using JavaScript and Java/Objective-C. The API is neither complete nor final, but already allows creating simple widgets like a Map or Date input.
View all relevant GitHub issues closed in this release here
1.1.0
Switch widget
Switches are common widgets in mobile UIs. We provide a new widget Switch with exactly the same API as the existing CheckBox.
Patching apps
It is now possible to update the JavaScript files and resources of your app without updating the app. See the documentation. The API is considered provisional as we plan to add more functionality to this feature, which may have an impact on the existing API.
Different cell types and heights for CollectionView
It is now possible to use different types of cells (containing different widgets) for different types of data items in a CollectionView. Also, cells may now have different heights depending on the item. Check out the cell types snippet for an example.
Class selector support
Widgets now support the class property, which is a white-space separated list of labels that can be be used with a class selector (e.g. ".foo") in the children, find, and apply methods.
setTimeout / setInterval support optional parameters
These methods now support additional parameters that will be passed to the callback. These methods are part of the spec, but had not been implemented yet.
Material Design for Android
The Android client now uses the the appcompat support library, giving Tabris.js apps a consistent material design look and feel across all supported Android versions. It also adds custom theme support.
Cordova 5 Support
The Tabris.js online build service now uses Cordova 5.1.1, and supports installing Cordova plug-ins from npm.
View all relevant GitHub issues closed in this release here.