Mobile Development with JQTouch

Over the past few days I have been looking at the JQTouch Javascript Application Framework for Touchscreen Mobile Devices. It looks really interesting and has a whole bunch of features, so I decided it was time to dust off this section of my website and finally get some code on here!

Implementation

The project I have decided to pursue is a simple a AJAX based photo gallery; the gallery itself will be powered by a Javascript application parsing an XML file. The XML file will hold all the required data for the gallery - file names, locations and titles. The idea on the whole is very simplistic, and is merely to demonstrate the power of JQTouch. The target will be the 320x480 resolution display of an iPod Touch or iPhone.

To get started with the development side of things, its as simple as loading a few scripts in your webpage and a few style sheets.

1  <scripttype="text/javascript"src="http://www.google.com/jsapi"></script>
2  <script type="text/javascript">google.load("jquery","1.3.2");</script>
3  <script type="text/javascript" src="igall.js"></script>
4  <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
5  <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
6  <style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>
7  
8 <script type="text/javascript" charset="utf-8">
9  var jQT = new $.jQTouch({
10  icon:'img/apple-touch-icon-precomposed.png',
11  addGlossToIcon: false,
12  startupScreen: 'jqt_startup.png',
13  statusBar: 'black'
14  });
15 
16 </script>

Lines 1 and 2 take care of loading the JQuery JS scripts, all housed on the google.com servers - these are the foundation of the application itself, with JQTouch acting as an intermediate layer between JQuery and our own code. Line 3 is my own line - and this links my gallery script. (my script is overly simplistic and I shall explain my implementation in detail later - when its fully complete) Line 4 is the JQTouch framework itself - this provides many many cool features, including geolocation options surprisingly! The next two lines are the stylesheets. JQTouch itself comes with two themes, one that is identical to the native look and feel of iPhone applications, and another that is darker. In this example I have opted for the darker version.

The Javascript below declares a new JQTouch interface - which has a massive variety of options. The options I have selected above are mainly default - "apple-touch-icon-precomposed.png" is the App icon the user will see should they decide to install the app to their phone (which works through a feature of safari which allows users to store shortcuts to websites). I do like the fact that the function demonstrated above uses "named parameters"; something which I only really came across when researching Objective-C, and which I didn't think was possible using Javascript. (Further research proves it is possible, but through a bit of a dirty hack)

Every different screen your app can show is housed on the same XHTML page - the application screens are differentiated by <div> layers. This makes for a faster application when it comes to changing screen, but I imagine large/bloat filled apps could be a real problem - as they are essentially web pages built for mobile phones. (So in addition to the usual web development issues, you have to remember you AREN'T developing for a fully fledged web browser, whilst the WebKit based Safari that iPhoneOS implements is very good - it is still a mobile web browser; and one with quite a few restrictions at that!)

Once you have the scripts and stylesheets linked to your page, it becomes like any other web development task - utilsing the CSS files to ensure that the app looks native and renders correctly, then actually coding the "brains" of it using the standard AJAX features. You could use PHP - but I would eer on the side of caution when using Server Side features, as it will ruin the application should you want it to function offline. (However, for things such as RSS feeds, Social Networking clients and other apps which require web functionality, I see no issues with having Server Side coding - however its worth bearing in mind the load this could place on your server should your app gain any kind of success/popularity)

Once you have the stylesheets and JQT scripts set up, its the "simple" matter of doing your own thing! For mine I have opted to develop a simple XML powered photo gallery. Here's the concept in pseudocode (Poor pseudocode at that! I find it hard not to just write it in normal code!)

open up gall.xml



read the "title" attribute of the "root" element

	place this string in the toolbar of the app



numPhotos = the number of <photo> elements



for(int i; i <= numPhotos; i++){

	create menu entry(

		title:	photoelement[i].title

		link:	photoelement[i].id

		)



}



for(i=0; i < numPhotos; i++){

	create <div> layer(

		<div id= photoelement[i].id >

		toolbar - with title photoelement[i].title

		<img src= photoelement[i].loc >

		</div>

	)

}

I have a firm codebase at the moment that I am tweaking, as I have a few issues with it rendering on Safari/WebKit installations. Being the perfectionist I am, I don't want to release anything that doesn't work flawlessy! Plus I intend to release a few extra features - including RSS feed support! So stay tuned! However, I shall give you a few sneaky previews of what I have so far...


Note: These are both being rendered on a PC - hence the mouse. When rendered in the correct WebKit browser, these will look different - mainly there will be buttons on the toolbar for "Back" and "About", additionally "Close" (on the about page) will also take the form of a rounded button. (This is due to the WebKit-specific additions to the CSS3 implementation)

Final thoughts

The JQTouch framework makes developing content rich mobile applications as easy as developing a dynamic website; with access to the usual DHTML/Javascript features and the ability to style your applications with CSS.

For developing mobile applications with a background in Web Design/Development it makes the whole process a breeze, whilst also making it possible to develop iPhone applications which look native without the hassle of delving into Objective-C. For simple applications it offers a fast and easy route to getting your applications on the handset of your target.

Whilst it may not have the hardware interaction that some apps require (Camera or Microphone support for instance), it does offer a very powerful set of features ideal for simple apps.

Mobile Development with JQTouch

Implementation

Final thoughts

Further Reading: