My first phone application with jQuery Mobile and Chaka

Introduction

Chaka, is an extension to jQuery Mobile to be able to develop HTML5 applications with Visual Studio 2010.

Developing HTML5 applications with jQuery Mobile give you a lot, but there are few things that you have to manage on your own.

• How to organize your Html and JavaScript files
• Concept of code behind with events as seen in Win Form or ASP.NET
• JavaScript syntax verification before execution (Google Closure Compiler)
• F5 run and debug
• Writing your application in CoffeeScript rather than JavaScript
• DEBUG or RELEASE mode (In RELEASE mode html, js, css files are minified and the number of js files is reduced)
• Publishing the application to the web in RELEASE mode
• Remote debugging with jsconsole.com for instance
• PhoneGap integration

These are  things that Chaka bring to the table.

I intend to release it, on github at some point, it is still in prototype mode.

The main idea is to use Visual Studio and click  File -> New -> Project. Select Chaka Project.
The project will come with:  a main page, an about page, an options page and from there you can add your own pages from a template and start coding away.
Press F5 and start running and debugging your HTML5 application with Chrome or FireFox. then use the Visual Studio 2010 Publish feature, to publish your app to the web via FTP.
Then yo can run it from all devices supported by jQuery Mobile.

A First Application

The application is a restaurant tip calculator and total bill divider.

The splash screen: The splash screen will only work on iOS.

The main page:

Let's enter an amount and press done

Here the results

The about page:

The Visual Studio Project 

In Visual Studio the project looks like this

The pages folder contains for each page of the application an Html file and a JavaScript file.

Here is the file aboutPage.html.
The page id is aboutPage and it contains an ok button named butOK.
This is strictly jQuery Mobile syntax except that the html is in its own file.

<div data-role="page" data-theme="a" id="aboutPage">
 <div data-role="header">
  <h1>Tip Calculator</h1>
 </div>
 <div data-role="content">
        <div align="center">
            <div id="aboutText"></div>
        </div>
        <div data-role="fieldcontain">
            <ul id="lvDeviceInfo" data-role="listview" data-theme="a" data-inset="true">
            </ul>
        </div>
        <div align="center">
            <a id = "butOK" data-role="button"  style=" width:80px;" >OK</a>
        </div>
    </div>    
</div>

Code Behind
Here is the JavaScript Code behind from file aboutPage.js.
The file contains a class aboutPage which will automatically inherit from a Chaka.Page. A Chaka.Page expose methods and properties, for example the property Application which returns the Application instance.
I implemented the event Page_Load which will be called when the page load.
To get or set control value, you can use jQuery or you can use some method from the Chaka.Page, because JQuery Mobile control behave differently than the regular HTML controls.
I also implemented the event butOK_Click, which be called when the user click the OK button.

function aboutPage(){

    /////////////////////////////////////////////////////////////////////
    ///
    this.Page_Load = function(event, ui){
        var
            aboutText = this.getControl("aboutText");

        // Inherited
        this.setListViewWithDeviceInformation("lvDeviceInfo");

        aboutText.html(this.ABOUT_TEXT);
    }
    /////////////////////////////////////////////////////////////////////
    ///
    this.butOK_Click =  function(control){

        this.Application.mainPage.show();
    }
    this.ABOUT_TEXT = '\
    <i><b>Tip Calculator</b></i>\
 is an HTML5 jQuery Mobile sample application developed with the Chaka Framework and Visual Studio 2010.\
<br /><br />\
See <a rel=external href="http://frederictorres.net/chaka/">Chaka</a> web site for details.\
<br /><br />\
Chaka (C) Torres Frederic 2011\
';
}

The Application class
A JavaScript Application class must be defined in the file app/app.main.js. The Application class will automatically inherit from the Chaka.Application class.

In the constructor the class calls the base method initializePage() to pass the name and the class type for each page. The application instance can be refered by using the global variable MyApp. Each Chaka page can reference the application by using the property Application.

The Application instance allows to access each page by its name. See event butOK_Click above, how we go back to the main page when the user click ok.

/////////////////////////////////////////////////////////////////////
///
function Application() {
    var
        $base = this;

    $base.initializePages(
        {
            mainPage    : mainPage ,
            aboutPage   : aboutPage,
        }
    );
}