Tabris.js Examples - Network Access

Johannes Eickhold
April 24, 2015 | 3 min Read

Writing mobile applications is not only about the UI. Apps also need content. Often times they fetch dynamic content over the network. This post introduces the basic mechanism for network access in Tabris.js: XMLHttpRequest. The post also explains how higher level networking API can be used.

Tabris.js supports a subset of the W3C browser APIs. Part of that API is the XMLHttpRequest. You can use it in the JavaScript source of your Tabris.js app to communicate via HTTP. Tabris.js implements the API natively on iOS and Android using existing libraries of the respective target platform.

XMLHttpRequest

Let’s take a look at a code snippet which gets a URL and displays the result in a new TextView:

// requires an existing page in the UI
var xhr = new tabris.XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === xhr.DONE) {
    tabris.create("TextView",{
      text: xhr.responseText
    }).appendTo(page);
  }
};
xhr.open("GET", "https://httpbin.org/ip");
xhr.send();

It is important to note that we are using an event handler here that is called whenever the readyState of our XMLHttprequest object changes. We wait until we get the DONE readyState. To learn about the other available readyStates, and different ways to influence your HTTP request, please visit the documentation of XMLHttpRequest at the Mozilla Developer Network. You can find a complete code snippet ready to be pasted into your scratchpad in the snippets folder of the Tabris.js project at GitHub.

Response Code

The snippet above assumes that the HTTP request is always successful. Of course this might sometimes not be the case. The following snippet shows how you can handle response status other than 200:

xhr.onreadystatechange = function() {
  if(xhr.readyState === xhr.DONE) {
    if(xhr.status === 200) {
      tabris.create("TextView",{
        text: xhr.responseText
      }).appendTo(page);
    } else {
      tabris.create("TextView",{
        text: "not OK: " + xhr.status
      }).appendTo(page);
    }
  }
};

SSL

You might also have spotted that the snippet above uses an HTTPS URL. This works out-of-the-box in Tabris.js. In some cases you might want to circumvent strict handling of SSL (self-signed certificates for example). You can disable strict SSL handling by setting the UseStrictSSL to false in the config.xml of your app’s Cordova build. Note that the Tabris.js Developer App uses non-strict SSL handling as do all apps built in debug mode by our build service.

fetch()

Next to the XMLHttpRequest, Tabris.js also supports the newer fetch API. To use it in your app, you have to declare dependencies to fetch and promises. The following snippet is taken from our recent fetch example.

Promise = require("promise");
require("whatwg-fetch");

/* code to create a page ommitted */
/* implementation of createTextView() ommitted */
 
fetch("https://www.telize.com/geoip").then(function(response) {
  return response.json();
}).then(function(json) {
  createTextView("The IP address is: " + json.ip);
  createTextView("Latitude: " + json.latitude);
  createTextView("Longitude: " + json.longitude);
});
// ...

Don’t forget to add the dependencies to your package.json:

"dependencies": {
    "promise": "^6.1.0",
    "whatwg-fetch": "^0.7.0"
}

If you’d like to check out a more complex app on your device, one that fetches data from the web, we recommend our reddit example. You just need the Tabris.js Developer App:

[

The Developer App is connected to the Scratchpad on the Tabris.js website so you can easily play with the code yourself.

Here’s the list of “Tabris.js Examples” posts we’ve published so far:

  1. Tabris.js Examples – Hello World!
  2. Tabris.js Examples – User Input
  3. Tabris.js Examples – Local Storage
  4. Tabris.js Examples – Images
  5. Tabris.js Examples – Parallax Scrolling
  6. Tabris.js Examples – Animations
  7. Tabris.js Examples – Drawing on the Canvas
  8. Tabris.js Examples – Network Access

Stay in the loop! Follow @tabrisjs on Twitter.

Johannes Eickhold