imageData support is here, together with new lifecycle events, enhancements to WebView handling, and much more. In addition, Tabris.js now has a public playground! Read on for more highlights.
No more need to sign in via GitHub to see your code in action. In the online playground, the changes you make are instantly available on your device after scanning the QR code from the website. Now follow these two steps:
- Download the Developer App to your device
- In the app, scan the QR code from tabrisjs.com/playground
…and see the code working on your device right away!
imageData() is now available on Android and iOS. You can use it to manipulate images, add watermarks and overlays, create custom map markers etc. There will be improvements to the implementation in the next months, but we’re happy to say that imageData is finally here. If you use it, we’d love to hear your impressions and what you’ve built!
Some example code:
var context = canvas.getContext("2d", bounds.width, bounds.height); context.beginPath(); context.rect(20, 50, 100, 50); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 4; context.strokeStyle = 'black'; context.stroke(); context.fillStyle = 'black'; context.textAlign = 'center'; context.fillText('Original', 70, 120); // copy region var data = context.getImageData(18, 48, 104, 54); context.putImageData(data, 138, 48); context.fillText('Copy', 190, 120);
New lifecycle events
In addition to
resume there are three new lifecycle events on the tabris.app:
Fired when the app returns from background.
Fired when the app becomes invisible, either because another app is in the foreground or because the user has returned to the home screen.
Fired when the app is being destroyed. After this callback no more interaction with the app is possible.
The new events bring finer control over how the app reacts to running state changes.
Web messaging API on WebView
Your Tabris.js app can talk to the WebView! It is now possible to send back-and-forth messages between the two. 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.
See it in action in the Web messaging snippet on GitHub.
Full access to HTTP headers
In a strictly W3C/browser conform implementation of XMLHttpRequest it is not allowed to access certain headers. But on mobile platforms, enforcing security restrictions is the responsibility of the operating system. For this reason, Tabris.js no longer implements header restrictions. All headers can now be set and read, including previously forbidden headers like “Cookie”.
New property “selectedImage” on Tab widget
You can now display an additional image if the tab is currently selected. This design concept is primarily used in the iOS Tab Bar, where a “filled” and an “outline” version of the same icon often represent the “selected” and “non-selected” state. But you can also use it to provide an entirely different image. The property is also available on Android.
Check out the updated TabFolder snippet.
Theming improvements on Android
The release also brings improvements specific to Android theming: InputText and Picker no longer have a padding, which will make horizontal alignment easier, and Picker now uses an underline to separate from surrounding widgets.
We added a W3C-conformant global crypto object, which allows you to generate cryptographically secure random numbers. You can call it with
The Crypto snippet is also available on GitHub.
(If you’re interested in cryptography, Ian writes more about it on his blog. Check out his post about decoding symmetric cyphers with crypto.js.)
The “Getting started” ebook
Check it out here:
Getting started with Tabris.js 1.9.
That’s it for the highlights. But of course there are many more features, bug fixes and performance improvements than listed here. For more details about this release, take a look at the Tabris.js 1.9 release notes on GitHub.