Tuesday, March 5, 2013

Introduction

In this blog post we’ll learn how to build a mobile application for multiple platforms by using JavaScript library called jQ.Mobi and PhoneGap cloud build service.

In the first part, there will be shown steps of building a “Hello, world” mobile application in HTML5/JavaScript/CSS3. This will be done by using free jQ.Mobi library that allow us to build application with native look&feel of the specific platforms in very easy way.

The second part will describe how to use PhoneGap cloud build service which allow us to build our previous “Hello, world” project for multiple platforms. What this service is providing, is it will build executable install files for each of the platforms: iOS, Android, WP, Blackberry, HP and Symbian.

Part 01 – “Hello, world”

Now create a separate folder for your new “Hello, world” project. Inside the directory create another directory named “www”. Copy plugins, kitchensink and ui folders from extracted jQ.Mobi folder. Also, copy jq.mobi.js and jq.mobi.min.js. In the “www” folder, create index.html empty file. Now the current folder structure should look like this:

<body><divid="jQUi"><!-- this is the main container div. This way, you can have only part of your app use jqUi --><!-- this is the header div at the top --><divid="header">

</div><divid="content"><!-- here is where you can add your panels --><divtitle='Welcome'id="main"class="panel">This is a "Hello, world" sample.</div><divtitle="Targeting platforms"id="jqmweb"class="panel"data-header="testheader"><h2class='expanded'onclick='showHide(this,"jqweb_info");'>Platforms</h2><pid='jqweb_info'> We wish to support following platforms:</p><ul><li>iOS</li><li>Android</li><li>Windows Phone</li><li>Blackberry</li><li>HP</li><li>Symbian</li></ul><br/><br/></div></div><!-- bottom navbar. Add additional tabs here --><divid="navbar"><divclass="horzRule"></div><ahref="#main"id='navbar_home'class='icon home'>home</a><ahref="#jqmweb"id='navbar_target'class='icon target'>target</a></div></div></body></html>

In the head tag you can see we referenced JavaScript files and CSS from the jQ.Mobi library. There is additional initialization JavaScript that runs first time the app starts. In the body part there are two divs that are loaded depending on button click from the navigation bar (“navbar”). First div with id="main" is the main page, while other div with id="jqmweb" represents the second page with list of items.

TIP: If you want to use Visual Studio for easy project editing, simply go File>Open>Web Site and browse to your project folder.

Now you can test index.html page preview in browser. After you navigate with “home” and “target” buttons you should see slide animation.

Picture 02 – Main page

Picture 03 – Target page

Now when your “Hello, world” app is done, zip the entire folder to .zip archive.