Add printing support for your mobile application with pinch-to-zoom on images in Tabris.js 2.4
We are happy to announce the release of Tabris.js 2.4. This update adds features to Tabris.js:
- a simple way to implement the pull-to-refresh gesture,
- print a PDF document from your app,
- use a pinch-to-zoom gesture to magnify an image.
With additional enhancements to the TextInput
and TabFolder
, the release should contain something for everybody. Full details can be obtained from the release notes.
[UPDATE] The 2.4.0 release has been updated with a 2.4.1 revision to address several issues found in 2.4.0.
New RefreshComposite for “pull-to-refresh” gesture
The new widget RefreshComposite
allows to perform the “pull-to-refresh” gesture on a simple layout hierarchy. The API and features are similar to the CollectionView
but the usage is as simple as replacing a regular Composite
with a RefreshComposite
.
The following example lets the RefreshComposite
show activity for 2 seconds.
1 2 3 4 |
new RefreshComposite({ left: 0, right: 0, top: 0, bottom: 0, }).on('refresh', () => setTimeout(({target}) => target.refreshIndicator = false, 2000)) .appendTo(ui.contentView); |
New printing support via tabris.Printer
Support for native printing has been added via tabris.Printer
. Currently only documents in PDF format are supported.
A Printer
has a method print(..)
which takes the data to print as a ByteArray
and an options object where a jobName
can be provided. A native printing dialog will be shown where additional settings can be applied. The print(..)
method returns a promise which resolves when the print job has been dispatched or throws an error otherwise.
1 2 3 4 5 6 7 |
<img class="size-full wp-image-1776 aligncenter" src="https://tabris.com/wp-content/uploads/2018/03/print-768x683-1.png" alt="" width="768" height="683" />The following snippet shows how a local pdf is printed from Tabris.js. fetch(app.getResourceLocation('resources/example.pdf')) .then(res => res.arrayBuffer()) .then(data => printer.print(data, {jobName: 'tabris print example'})) .then(event => console.log('Finished', event)) .catch(err => console.error(err)); |
ImageView supports “pinch-to-zoom” gesture
A new “pinch-to-zoom” gesture can be used on an ImageView
to magnify an image. To enable the gesture a new property zoomEnabled
along with a zoomLevel
, minZoomLevel
and maxZoomLevel
has been added. The properties also dispatch the expected change events when the user uses a gesture to zoom.
The resting position of a zoomed image is 1.0 with the minZoomLevel
also on 1.0 and the maxZoomLevel
at 3.0.
1 2 3 4 5 |
let imageView = new ImageView({ left: 0, right: 0, top: 0, bottom: 0, image: 'resources/salad.jpg', zoomEnabled: true< }).on('zoomChanged', ({value: zoomLevel}) => console.log(zoomLevel) .appendTo(ui.contentView); |
Added support for “next()” in layout references
Similar to the keyword prev()
, next()
can be used in a layout declaration. It references the next widget sibling in the parent widget after the current widget.
New API to close a running app
To close a running app the following call can be made on the tabris.App
. Closing a running app is only supported on Android.
1 |
tabris.app.close(); |
API additions for the TextInput widget
The TextInput
gained two new properties to better integrate into the UI theme and to deal with passwords.
- The new property
cursorColor
allows to give the cursor a specific color. Only supported on iOS. - The new property
revealPassword
toggles the visibility of a password inside aTextInput
withtype
password. This addition allows to create common sign-in UIs with a checkbox “Show password”.
New TabFolder navigation events
The TabFolder
has received new events for tab switching. The appear
event is fired on a Tab
when the tab becomes the selected tab. Complementary, the previously selected Tab
fires the disappear
event.
In case the currently selected Tab
is disposed, the TabFolder
now correctly fires a selectionChanged
event with the newly selected tab as the selection.
Get Started with Tabris.js 2.4
- Install the new Tabris.js 2 developer app on your device
- Try out the examples bundled in this app
- Run your own code snippets from the playground, our online Tabris.js editor
To start developing real apps,
- Install the latest Tabris CLI on your machine:
npm install -g tabris-cli
- Type
tabris init
in an empty directory – this will create a simple example app - Type
tabris serve
and load it in the developer app
The documentation contains everything you need to know (tip: try the doc search). Beginners find a step-by-step guide in this ebook. If you have questions or comments, you’re also invited to join the community chat.
Happy coding!
Feedback is welcome!
Want to join the discussion?Feel free to contribute!