UI Development using jQueryMobile

阅读更多

Introduction to jQueryMobile



Following is an extract from jQueryMobile site -





jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets



A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. Alpha Release Notes







Seriously cross-platform & cross-device



jQuery mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms. Device support grid



iOS
Android
BlackBerry™
Bada
Windows® Phone
Palm webOS™
Symbian
MeeGo™








Touch-optimized layouts & UI widgets



Our aim is to provide tools to build dynamic touch interfaces that will adapt gracefully to a range of device form factors. The system will include both layouts (lists, detail panes, overlays) and a rich set of form controls and UI widgets (toggles, sliders, tabs). Demos











Themable designs: Bigger and better

To make building mobile themes easy, we’re dramatically expanding the CSS framework to have the power to design full applications. For more polished visuals without the bloat, we added support for more CSS3 properties liketext-shadow, box-shadow, and gradients.







Demo Video





Getting started with JQueryMobile



There are two parts to jQueryMobile





jQuery - (Event Handling, DOM Manipulation and Ajax)
jQuery Mobile UI




jQuery - ( Event Handling, DOM Manipulation and Ajax)



This is out of scope for this Article. Please refer to w3c Tutorial on jQuery - http://www.w3schools.com/jquery/default.asp





jQuery Mobile UI



jQuery Mobile Declarative UI

This is the best part about jQuery Mobile. The UI is not declared by using HTML 5 style "data-role". This makes the UI development a breeze. Building a prototype of jQuery Mobile UI (wireframe) would not require any coding, but just html tags.



Lets try to build the following Page in Phone Gap









Step 1 - Include needed Javascript and CSS













Step 2 - Declare different Pages



home is the first screenshot and search is the second screen shot.





    

          .....

    

    

          .....

    

    

          .....

    

Step 3 - Declare Header and Page Navigation





    

 

                           

   

AlternativeTo Home

 

 

                          

   

Find Alternatives To Your favourite Softwares

   

Search Alternatives

   

   

Recent Alternatives

 

 

    

    

 

         

              

                    

             

        

    

jQuery Mobile API



          The jQuery Mobile API talks about Page Loading, Transition, Dialog box handling, List View manipulation, item click etc.



          Complete API reference - http://jquerymobile.com/demos/1.0a3/







JQueryMobile + PhoneGap



     Boot Events

     The main thing when using any Javascript library is to be handle the library boot strap event. A Boot strap event is when js library hells that it is ok to start using its api





         A Boot strap event handling in case of jquery is the as follows





$(document).ready(function() {
   //Its ok to use all jquery functions here
});

A Boot strap event handling in case of jQuery mobile is as follows (read more here)


$(document).bind("deviceready", function(){
 
});

or

document.addEventListener("deviceready", onDeviceReady, false);



These bootstraps need to be chained (i,e one calling another one), in order to properly bootstrap both jquery/jquerymobile and phonegap.

Ideally following should be enough ( PS- I need to verify the following code)



$(document).ready(function() {
  
$(document).bind("deviceready", function(){
 
});
});





     Rest of Integration

     The Rest of the Integration is using jQuery selector, event handling  to call jQueryMobile and  phonegap api.





Demo Apps



Following is the Demo App, with complete index.html file of the UI







Source Code

























 









   

 

   

AlternativeTo Home

 

 

   

Find Alternatives To Your favourite Softwares

   

Search Alternatives

   

   

Recent Alternatives

 

 

   

Search Alternatives

   

        

         Search    



   

 

 

 

    

   

 

 

   

Recent Alternatives

 

 

   

This app rocks!

 

Download Demo Source



Download Demo Source here - PhoneGap.zip



This is a working Demo of PhoneGap Client of site - http://alternativeto.net



Issues to watch out



The issue you will notice first and not like is that of ListView with header and footer.



Here is an example

   







Notice the scrollbar starting from top of page and going it the bottom
Notice the header missing in the second image, (it is missing because it has moved up)


Ideally we would want



Scroll to start below header and end above footer
Header and Footer to be fixed


Fortunately, the fix for this could be provided very soon. Here is an experimental source of jQuery mobile handling the issue - http://jquerymobile.com/test/experiments/scrollview



I would wait for this fix and still bet on jQuery Mobile.