Examples


Tabris.js Examples

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.

For example http://192.168.1.1:8080

  • 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

Animation

Animations

Animation Examples

The animation examples consist of three parts, each part is on a separate Tabris page.

Easings

Animations with different easings make up this example.

Animations at work

Transform, Repeat, Reverse

The bouncing element demonstrates a very simple animation.

Simple Button Animation

Tray

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.

Tray in Action

Parallax scrolling

Parallax scrolling

This example demonstrates a parallax scrolling effect. It is implemented with a scroll event that changes the translation of the parallax elements.

Parallax scrolling

Small Apps

Bookstore

Bookstore

The bookstore example implements a typical list based application with native navigation. A CollectionView displays book entries with images and text and enables filtering of book lists.

Bookstore

Hello, World!

Hello World

Our interactive Hello World. Also a good template for your first own app. This article discusses the example in detail.

Hello world

Running this example

Can be found here

Internationalization

I18n Example

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.

I18n

Input Elements

Input Elements

The Input Elements example showcases various input elements like Text, Checkbox, Picker, Date and Slider.
This article discusses the example in detail.

Input elements

Reddit Pet Pictures

Reddit Example

A small app which uses Reddit API to show a listing of pet pictures.

Reddit pet pictures

Web APIs

Canvas

Canvas Example

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.

Animation

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.

Canvas Animation

Basic Shapes

Demonstrates basic drawing functions with different shape types, path and transparency.

Arcs

A set of arcs with their radiant definitions.

Text

Positions and aligns text on the canvas.

Chart.js

Chart Example

Drawing charts is easy with Tabris.js. This demo uses the charting library from chartjs.org to draw natively on the Canvas. No WebView involved! The demo provides a useful default chart configuration for the currently supported subset of Canvas API.

Line chart by chartjs

fetch()

Fetch Example

The fetch example shows how to make network requests using the fetch() function. In this case it is used to display geoIP data.

Fetch

Setting timers and intervals

Timer

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.

Cordova

Cordova Demo

Cordova Example

The Cordova demo demonstrates several Cordova plugins which can be accessed from a Tabris.js app by default, including plugins for toasts, badges, motion, dialogs, network connectivity, camera and barcode scanner.

Cordova toast demo