Tuesday, March 5, 2013

Build cross platform mobile application with jQ.Mobi and PhoneGap

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.

I must say I haven't tried that.In this case I only used jQMobi library.

But, I'm sure you can get conflicted calls or dependencies if you use both JS libs. I would suggest you to use only one library in order to avoid jams. Also, you could try to reference only one JS in your HTML that's needed, but not both in the same HTML.

When I run in this inside Ripple I get 'object has no method "launch"'. Even though jq.ui.min.js is loaded, it's "launch" method is not visible. Timing issue? Ripple is configured to run as if with PhoneGap 2.

Also, When I run this on my HTC Evo with Android 4.0, the screen shakes like it's having an epileptic fit!

Your code waits for a 'appMobie.device.ready' event. What creates this?

- I give it a spin with Ripple emulator (Chrome plugin) so far in runs correctly with PhoneGap 2.I don't know if you made any changes in your sample, but you can test it with dev tools in Chrome or Firebug and check if the error still persists. Than it probably doesn't reference .js file correctly. Maybe you place it in a different folder or something.$.ui.launch() is called when you want to launch jqUi (see container div). If autoLaunch is set to true, it gets called on DOMContentLoaded.If autoLaunch is set to false, you can manually invoke it. ``` $.ui.autoLaunch=false; $.ui.launch();The timeout is added only as a simple delay (like splash screen). You can try to avoid this by commenting that part of JavaScript. $.ui.backButtonText = "Back"; /* $.ui.autoLaunch = false; //By default, it is set to true and you're app will run right away. We set it to false to show a splashscreen*/ /* This function runs when the body is loaded.*/ /*var init = function () { window.setTimeout(function () { $.ui.launch(); }, 1500);//We wait 1.5 seconds to call $.ui.launch after DOMContentLoaded fires };*/ //document.addEventListener("DOMContentLoaded", init, false);

- Huh, I really don't know what can be the source of your problem with HTC. So far I ran it only on Nexus S Andorid 4.1.2 without problems.Maybe try to install my .apk from the blog sample > bit.ly/ZuHI6b

- From api documentation: "This event ('appMobie.device.ready') will fire once all AppMobi library information is loaded. Be sure to allow this event to fire before attempting any AppMobi commands. In order to load the AppMobi JavaScript library, be sure to include the following JavaScript library in your HTML file."

- In this blog post I used PhoneGap build service and for this all steps have been descibed in the post. No additional steps are required.

You are totally right about this. I'm missing these two libraries: appmobi.js and xhr.js that needs to be also included.

Funny I still didn't find these libraries within jsMobi.I'll need to update my post again after I find solution. If it's any help check this forum post: http://forums.appmobi.com/viewtopic.php?f=9&t=1181

Short followup:I removed this code from my sample, since it is not required for this very simple sample.I'll need to cover more of AppMobi details in some additional post.So far with my research I found out that if you want to develop fully usable mobile application (using sensors, db...) you'll need to use XDK server that will run locally on your smartphone.

This can be done in a simple way ( I tried it :) ). Step 01: visit http://html5dev-software.intel.com/Step 02: click "Create an app now"Step 03: follow the wizard which will guide you through building your appStep 04: once you confirm your registration your app will be downloaded to your pcStep 05: there you'll get all the necessary code (including bundled .js libs) and emulator that will run in Chrome

I agree with you that for developing programmers certainly should choose one cross-platform API over the another, and not to mix it together.

What I used is simply PhoneGap cloud service that generates installs for each platform. It's easy to use, and has one purpose only - to allow people who don't want to learn about PhoneGap or any other cross-platform API or SDK, but to reuse their knowledge about JS and HTML or some previous app they already developed. Here is a talk that explains two different approaches with PG: http://www.hanselminutes.com/304/making-your-first-phonegap-application-with-peter-mourfield

In my case, I used jqMobi specifically only for animation, native similarities and stuff so I don't need to develop it myself :)

Regarding relation between jsMobi and AppMobi is indeed confusing. I really can't say much since I wasn't sure about that either. But it's definitely an area that needs more research.

I also want to use jqmobi since I have read that it solves a lot of animation issues on Android 2, 3 and 4. I know what PhoneGap is used for :) I am trying to understand how to use jqmobi with PhoneGap. So, short story - I must packaged AppMobi inside PhoneGap in order to use jqmobi. Seems like APIs will be repeated but no other way.