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.

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

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

LocalStorage

Web Storage

Tabris.js implements a subset of the W3C Web Storage Recommendation. The example demonstrates the use of the localstorage object to store and retrieve key-value pair data. This article discusses the example in detail.

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

Image, Video

Image

ImageView

The ImageView example lets you interactively explore the scaling of images with different scale modes.

Image view

WebSocket

WebSocket

Chat example

To run this example, start your own chat server.

In web-socket.js, adjust CHAT_SERVER_URL to your server IP.

In the server folder execute:

npm install
node chat-server.js