I’ve worked with jQuery Mobile in the past and been both pleased and frustrated with how it tackles certain aspects of HTML5 app development. For those that don’t know, jQuery Mobile is what some would call a full stack mobile framework dealing with the UI, routing and some of the architectural structure.
In this post I’ll be using WebSQL for data storage. WebSQL is a client-side web technology that allows developers to build applications that are able to store data locally. Unlike LocalStorage, which enables the storage of simple key/value pairs, WebSQL supports the storage of structured data in a relational database. This enables developers to build more complex applications.
WebSQL, although widely supported on mobile browsers has been deprecated (more information on WebSQL Databases can be found here - http://www.w3.org/TR/webdatabase/). In the future you we might want use IndexedDB, server side storage or some other method so we need to allow for this and structure our app accordingly, abstracting away data storage functions.
Building the Application View
Create a new file called
index.html that contains the following HTML code.
<head> of the document rather than just before the closing
</body> as is normally recommended. This is due to how jQuery Mobile handles pages. Rather than having individual pages (as you may be used to on a static website) jQuery mobile loads the
index.html page first and then grabs the contents of other pages (anything between
data-role="page", which can be a separate file or multiple
index.html) and injects it into the dom. Therefore JQM needs to load first. You can read more about how JQM handles pages here - http://view.jquerymobile.com/1.3.2/dist/demos/widgets/pages/
Next lets add our
add.html. These view will be responsible for viewing/editing and adding todos.
You might have noticed I’ve left the
script links in the header. Whilst JQM will ignore these when loading the pages through
index.html (remember it grabs the
data-role="page" content via an ajax request and injects it into the DOM) if for some reason
view.html gets displayed before
index.html (the user would have to know the exact URL to them – which wouldn’t happen if the app was packaged in PhoneGap) the page would be not function without these links.
Lastly, we’ll add small stylesheet to add a strikethrough to items when they have been completed. Create
style.css in our css folder with the following contents:
Ok, with our front end in place, next post we’ll start on our storage object that will handle our database transactions.