Wednesday, June 26, 2013

Mobile App Journey - Part III

I highly recommend the PhoneGap (and other) articles by Raymond Camden.  I also encourage you to view the PhoneGap and Twitter Bootstrap classes on Pluralsight (even if you only get as much done as you can using the Trial license).

Typically, your application will have a file/folder structure something like this (ignore the "childbrowser" folder for now, and all other files besides index.html are up to you):


Each of your .html files would need (given that I am using jQuery and Twitter Bootstrap) to look something like this at the top:


And like this at the bottom (please ignore phonegap.js and childbrowser.js for now):


I would start out with downloading a Twitter Bootstrap template as your index.html, and add the jQuery references.  "main.js" is my application's javascript file.  Test your index.html both as a "normal" web page and also in an emulator (such as Google + Ripple).

Learn how the Twitter Bootstrap menus work.  Their responsive capabilities will cause them to display differently based on screen size.  Learn the TB classes.

As to user input, HTML5 has many validation niceties -- unfortunately many browsers do not use them!  So while, yes, you should code them in your HTML, you will also need to manually validate in your javascript, and if you are passing the values up the wire somewhere to a service of yours, validate there too.

My form code has this:


But since the validations are ignored on my phone's browser, I also have this code:


And this too, once I'm sure I have a number:


The code for isNumber (my apologies for forgetting the author whose post I lifted this from):
// is it a number...
function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

to be continued...

No comments: