JavaScript API, Top Tabris.js Feature #5

Tabris.js is a mobile app development framework that gives you the tools to develop your mobile apps entirely in JavaScript. Tabris.js 1.0 was released on April 30th and to celebrate the release, I’ve been counting down the Top 10 Tabris.js 1.0 Features. JavaScript is ubiquitous, and according to one study, it’s currently the most popular programming language in the world. It is also a very powerful language, and by leveraging a fluent API and the thousands of existing libraries, very little JavaScript is often needed to write complex applications.

Number 5 on my list is the JavaScript API.

The Tabris.js JavaScript API uses a fluent programming model inspired by backbone. With a fluent programming model you can create a widget, set properties on the widget, add an event listener and position it on the page, all with a single call chain.

tabris.create("Button", {
  layoutData: {left: 10, top: 10},
  text: "Button"
}).on("select", function() {
  this.set("text", "Pressed " + (++count) + " times");
}).appendTo(page);

With the Selector API, you can access widgets dynamically and apply or change the properties on those widgets. For example, using a selector you could select all the widgets that contain text and translate them to a particular locale.

page.apply({
  "#okbutton": {"text": "OK!"},
  "#cancelbutton": {"text": "Cancel!"}
});

And using the module system, the translations can be encapsulated into their own files.

Tabris.js also supports the Window Object, Console Object and several W3C standards such as the Timer, XMLHttpRequest and Storage.

  var xhr = new tabris.XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === xhr.DONE) {
      tabris.create("TextView", {
        layoutData: {left: 10, right: 10, top: [page.children().last(), 10]},
        text: JSON.parse(xhr.responseText)[1].join(", ")
      }).appendTo(page);
    }
  };
  xhr.open("GET", "https://en.wiktionary.org/w/api.php?action=opensearch&search=mobile&limit=100");
  xhr.send();

And finally, since Tabris.js executes the JavaScript directly on your device using the native JavaScript runtimes, standard JavaScript libraries work without modification. For example, you can use Chart.js to render beautiful charts for your mobile application.

  var Chart = require("chart.js/Chart.min.js");
  var ctx = createCanvasContext();
  ctx.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
  new Chart(ctx)["Doughnut"](chartData, {
      animation: checkboxAnimate.get("selection"),
      showScale: true,
      showTooltips: false,
      scaleShowLabels: true
  });

A special thanks to Ralf Sternberg and Tim Buschtöns for driving all the API work! To try out these examples install the developer apps, or sign-up at https://tabrisjs.com. To stay up-to-date with the latest on Tabris.js, follow us on Twitter.