Our examples are a good starting point for exploring Tabris.js capabilities and API. Examples can be run directly on your device from the Examples tab of your Tabris.js App. Source Code is available at GitHub.
Running the examples
- From within an examples sub directory, run the following commands:
npm install -g tabris-cli npm install tabris serve
In the console output, you will see the IP address and port number the application is listening on.
Install the Tabris 2 mobile developer companion app from the app store for your device
View the application by entering the address and port number into the 'URL' section of the developer companion app on your device
- Small Apps
- Web APIs
The animation examples consist of three parts, each part is on a separate Tabris page.
Animations with different easings make up this example.
Transform, Repeat, Reverse
The bouncing element demonstrates a very simple animation.
The tray example shows how to integrate a user controlled (event based) interaction with an animation. A typical usecase for this integration is a tray. You may drag it manually into place, but when you stop dragging an animation will finish the job for you and continue to move the tray into its final position. The demo uses touch events and combines them with animation start, progress and cancel.
The example provides basic setup for serving an app's content in multiple languages.
Dynamic internationalization with selectors and apply is explained in detail in this article.
The Input Elements example showcases various input elements like Text, Checkbox, Picker, Date and Slider.
This article discusses the example in detail.
The Canvas example consists of four parts, each part is on a separate tabris page. The Tabris.js Canvas implements a subset of the HTML5 canvas API.
The example showcases an animated canvas. Animation is done with a timer function. The example also displays the framerate the animation achieves on your device.
Demonstrates basic drawing functions with different shape types, path and transparency.
A set of arcs with their radiant definitions.
Positions and aligns text on the canvas.
This example demonstrates using timers with the established Web APIs setTimeout and setInterval. Find out yourself how often the timer can be called per second.