Monday, November 19, 2012

Jquery Mobile

Jquery Mobile is simply amazing.  If you haven't used it before, check out the demos/docs here.  Here's why you want to use it:

  • It's HTML5.  This means that it will not only work as a mobile application site but it is directly portable to native apps on iphone, android, blackberry, etc through the PhoneGap framework (I'll write more on that at a later time).
  • It comes with all of the basic widgets that you would expect any mobile app to have.  Pretty much nothing required from you except to embed the html5 tags.
  • It is easier to build than a normal website.  This is because the structure of the framework is that you create every view of the application on a single html document.  This means that you have one document as the source of truth for pretty much everything, and if you get lazy (as I do, to my disappointment) and put all of your code in that document, there are no dependencies to worry about later.
Here are the key things to pay attention to, that took me a little while to get a hang of:
  • Since you have multiple views (each treated as it's own 'site'), using $.(document).ready doesn't work the same.  The code loaded in that view gets loaded as soon as the entire html document is loaded to the page- NOT WHEN ANY SINGLE VIEW IS LOADED.  To have some JS executed when a view loads, you bind to the following events:
    • $(document).delegate("#my_patients_view", "pageinit", function(){ //Your code here});
      • This will execute your JS code when the view is initialized for the first time (ie: first time the homepage view is shown
    • $(document).delegate("#my_patients_view", "pageshow", function(){ //Your code here});
      • This will execute every single time the view is shown
      • This is an important distinction because if you do event binding in this block of code, you will attach bind multiple event handlers to an item, which can give you trouble down the line
        • Ex: You bind a click event to a button in a given view.  If the view is loaded twice, the second time you click the button it will issue 2 separate ajax call instead of one.
Seriously though, this is amazing.  Love everything about it.  Please use it.

No comments: