Web apps or PhoneGap: SQL local storage + iUI. A live Demo.
Some month ago I posted an article named Into PhoneGap: an example of API-aware native iPhone app with HTML5 and SQL local database and several readers asked me for the full source code of the example app.
In this post I would like to do more. In recent times I had to chance to work a lot on mobile apps based on web technologies, so I came in iUI framework.
iUI is a small javascript+css library that aims to provide iOs native-like basic UI / behavior. It’s quite nice as it comes with a basic HTML knowledge. Becomes awesome if integrated with some advanced JavaScript and CSS skills. Then we come to PhoneGap, we all know what it does, right? basically a wrapper of your web app into an iOS application, with – of course – support for some native functions.
The topic of the article is about using webkit local database for storing information. SQL db becomes very useful when dealing with relational-based data. However, in this example, we will see how to use SQL database for storing basically username and password to retrieve the current Tumblr Dashboard via official API. Note that, in this sense, sometimes a good replacement for SQL db is localStorage (which replaces cookies).
We begin from the default iUI app folder, there are some library files but the starting point, for us, is just index.html: I decided to use mainly native JavaScript with just a function of SnackJS framework that makes JSONP call a piece of cake.
First, iUI development paradigm lets to create your app pages just in one place, our index.html, by creating div blocks. So in our app we will include the possibility to set username and password for Tumblr, and one for reading dashboard via API.
The basic structure should look this way:
At this point, from the home section, we link other pages via iUI syntax, setting anchor’s href to the corresponding div’s id:
If you are new to iUI read the official getting started page.
The amazing thing of iUI is that you might detect when user’s comes into a certain page by attaching a simple focus event on relative element.
This means that detecting when user lands into dashboard page is extremely simple:
document.getElementById('dashboard').addEventListener('focus', function(e)
{
//code here
}, false);
Into this event listener we’ll check if we already have username and password and file, otherwise, we’ll show a link to login page.
iUI usage is the only big difference between this example and my previous one (Into PhoneGap: an example of API-aware native iPhone app with HTML5 and SQL local database), where code is explained step after step.
The other difference is that I’m releasing source code. Enjoy and have a good hacking.
(remember that username/password authentication is not tested in this demo, should be implemented after user inserts credentials in login div with an ajax call).
Maykel Barcala says:
