Overview

Table of Content

• Features
• Internationalization
• Storage
• Use of PEG and iScroll libraries
• Playing audio on button click
• Use of JSON Files
• Screenshots

Features

From a web application developer’s perspective, the features of interest are:

• Internationalization using Chromium API
• Use of local storage to save data as key value pairs.
• Use of PEG.js, a simple parser generator for JavaScript that produces fast parsers with excellent error reporting. It is based on Parsing expression grammar.
• Use of iScroll.js, as the mobile webkit does not provide a native way to scroll content inside a fixed width/height element.
• Some of the background images are rendered using -webkit-gradient, instead of the traditional use of a graphic.
• Animations are rendered using -webkit-transition and -webkit-keyframes.

Internationalization

To internationalize, all user-visible strings have to be placed in a file named messages.json (under a directory named _locales/LocaleCode, LocaleCode is a representation code like en for English). The Configuration files, CSS files, and JavaScript code use each string's name to get its localized version.

To retrieve the locales, the web application needs to call chrome.i18n.getMessage() method. In this example js/Localizer.js file, provides getTranslation function to retrieve the locales.

You'll find a lot more information about internationalization at Read more.

getTranslation: function(string) {
    if (window.chrome && window.chrome.i18n) {
        return chrome.i18n.getMessage(string);
    } else {
    return LOCALE[string];
    }
}

Storage

By using HTML5, web applications can store data on the client device.In earlier versions of HTML, data storage was done with cookies and flash storage. By using client-side storage, you can develop an application that works in offline mode, this reduces the number of network requests and improves the performance of the application.

Web applications can store data in following ways:

• Web Storage(Local Storage / Session Storage)
• Web SQL Database
• IndexedDB
• Application Cache
• Filesystem APIs
• Cookies

Web Storage

Using Web storage APIs, an application can store data in key/value pairs and it can only retrieve data stored by it.

• LocalStorage

  • Application can store data without any expiration date.
  • Data is persistent.
  • Avoids HTTP overhead of cookies.
  • Mainly used for storing settings.

  //Write data in localstorage
  this.createHistoryEntryInLocalStorage = function(formula, result) {
              var historyEntry = {
                  formula: formula,
                  result: result,
                  timestamp: new Date().getTime()
              };
  
              localStorage.setItem('history' + Calculator.nexthistoryindex, JSON.stringify(historyEntry));
              Calculator.nexthistoryindex++;
          };
  
  //Read data from local storage
  for (var i = firsthistoryindex; true; ++i) {
         var historyitemstr = localStorage.getItem('history' + i);
         }
  
  //Remove data from local storage
  for (var i = firsthistoryindex; true; ++i) {
  localStorage.removeItem('history' + i);
  }

• Session Storage

  • Stores data for one session.
  • Mainly used for sensitive data.

Use of PEG and iScroll libraries

Using the PEG.js, the app can parse the formulae entered by the user. You'll find a lot more information about PEG at Read more.

iScroll provides features such as Pinch / Zoom, Pull up/down to refresh, Customizable scrollbars, etc. You'll find a lot more information about iScroll at Read more.

// PEG parser
this.parser = PEG.buildParser(document.getElementById("grammar").innerText);
var entry = Calculator.parser.parse(formula); //Calculator = this

//Creates scroll bar for the history page

this.createScrollbars = function(){
    this.historyScrollbar = new iScroll('wrapper', {scrollbarClass: 'customScrollbar',
        hScrollbar: true, vScrollbar: true,
        hideScrollbar: true, checkDOMChanges: true});
    };
};

Playing audio on button click

Playing audio on button click enhances the user experience. The Calculator web app uses the HTML Audio DOM Reference to play an audio file on button press..

You'll find a lot more information about Audio DOM reference at Read more.

//Initializes the audio files and assigns audio for various button presses
        this.initAudio = function(){
            Calculator.buttonClickAudio = new Audio();
            Calculator.buttonClickAudio.src = "./audio/GeneralButtonPress_R2.ogg";
            Calculator.equalClickAudio = new Audio();
            Calculator.equalClickAudio.src = "./audio/EqualitySign_R2.ogg";
            $('#closehistorybutton').click(function(e){
                Calculator.buttonClickAudio.play();
            });

Use of JSON Files

JSON is a lightweight data exchange format. It can be written by following some simple norms that are familiar to programmers of the C-family of languages. JSON is language independent and is easy for humans to read and write. The main concepts used in JSON are Collection of key/value pairs and ordered list.

This example uses JSON to store and retrieve history items

You'll find a lot more information about JSON at Read more.

//Localization example.
this.createHistoryEntryInLocalStorage = function(formula, result) {
            var historyEntry = {
                formula: formula,
                result: result,
                timestamp: new Date().getTime()
            };

            localStorage.setItem('history' + Calculator.nexthistoryindex, JSON.stringify(historyEntry));
            Calculator.nexthistoryindex++;
        };

        // Parse the saved history item
        var historyitem = JSON.parse(historyitemstr);

Screenshots

Below are the screenshots of the Scientific Calculator application.

Figure-1: This is how it looks when the web page is loaded and phone is in portrait mode. 

Figure-2: This is how it looks when the web page is loaded and phone is in landscape mode. 

Figure-3: This is how it looks when the numeric input is entered.