log inhelp

View
 

UI Development using jQueryMobile

Page history last edited by Corrie Engelbrecht 4 months ago Saved with comment

  1. Introduction to jQueryMobile
    1. Demo Video
    2. Getting started with JQueryMobile
      1. jQuery Mobile - Event Handling
      2. jQuery Mobile UI 
        1. jQuery Mobile Declarative UI
        2. jQuery Mobile API
    3. jQueryMobile + PhoneGap
      1. Handling PhoneGap's deviceready event
      2. Rest of Integration
    4. Demo Apps
      1. Source Code
    5. Download Demo Source
    6. Issues to watch out

     

    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

     

        1. iOS
        2. Android
        3. BlackBerry™
        4. Bada
        5. Windows® Phone
        6. Palm webOS™
        7. Symbian
        8. 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

     

      1. jQuery Mobile event handling
      2. jQuery Mobile UI 

     

    jQuery Mobile - Event Handling

     

    For more information, read the jQuery Mobile documentation on events here


    jQuery Mobile UI 

     

    jQuery Mobile Declarative UI

    This is the best part about jQuery Mobile. The UI is 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

     

    <head>
    <link rel="stylesheet" href="/jquery.mobile-1.0a1.min.css" /> 
    <script src="jquery-1.4.3.min.js"></script> 
    <script src="jquery.mobile-1.0a1.min.js"></script>
    </head>

     

    Step 2 - Declare different Pages 

     

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

     

    <body>

         <div data-role="page" id="home"> 

              .....

         </div>

     

         <div data-role="page" id="search"> 

              .....

         </div>

     

         <div data-role="page" id="recent"> 

              .....

         </div>

     

    </body>

     

    Step 3 - Declare Header and Page Navigation

     

    <body>
         <div data-role="page" id="home"> 
      <div data-role="header"><!-- This div with data-role is the header, shown in the black -->
        <h1>AlternativeTo Home</h1> 
      </div> 
      <div data-role="content"><!-- This div is the body of the page -->
        <p>Find Alternatives To Your favourite Softwares </p>
        <p><a href="#search" data-role="button">Search Alternatives</a></p><!-- navigation button's href points to other page -->
        <p><a href="#recent" data-role="button">Recent Alternatives</a></p>
      </div>  
         </div> 
         <div data-role="page" id="search">  
              <div data-role="content"> 
                   <ul data-role="listview" id="list"><!-- Special Widget which is List View to show data in a list -->
                  </ul> 
             </div>
         </div>
    </body>

     

    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/

     

     

     

    jQueryMobile + PhoneGap

     

    Handling PhoneGap's deviceready event

     

    Handling PhoneGap's deviceready event in jQuery Mobile (as of v1.0):

     

    window.addEventListener('load', function () {
    document.addEventListener('deviceready', function () {
        alert("PhoneGap is now loaded!");
    }, false);
}, false);

     

    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

     

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>PhoneGap</title>
    <script type="text/javascript" charset="utf-8" src="phonegap-0.9.3.js"></script>
    <link rel="stylesheet" href="/jquery.mobile-1.0a1.min.css" /> 
    <script src="jquery-1.4.3.min.js"></script> 
    <script src="jquery.mobile-1.0a1.min.js"></script>
    <script type="text/javascript">
    $( function() {
    $('#searchButton').click(function() {
    $.getJSON('http://api.alternativeto.net/software/'+$('#searchBox').val()+'/?count=15', 
    function(data) {
    var items=data.Items;
    var list = $('#list');
    list.html("");
    $.each(items, function(key, val) {
    list.append($(document.createElement('li')).html(val.Name));
    });
    list.listview("destroy").listview()
    });
    });
    document.addEventListener("deviceready", onDeviceReady, false);
    });
    function reachableCallback(reachability) {
    // There is no consistency on the format of reachability
    var networkState = reachability.code || reachability;
    var states = {};
    states[NetworkStatus.NOT_REACHABLE]                      = 'No network connection';
    states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
    states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK]         = 'WiFi connection';
    alert('Connection type: ' + states[networkState]);
    }
    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    function onDeviceReady() {

    navigator.network.isReachable('phonegap.com', reachableCallback);
    }
    </script>  
    </head>
    <body>
    <div data-role="page" id="home"> 
    <div data-role="header"> 
    <h1>AlternativeTo Home</h1> 
    </div> 
    <div data-role="content">
    <p>Find Alternatives To Your favourite Softwares </p>
    <p><a href="#search" data-role="button">Search Alternatives</a></p>    
    <p><a href="#recent" data-role="button">Recent Alternatives</a></p>
    </div> 
    </div> 
    <div data-role="page" id="search"> 
    <div data-role="header" data-position="fixed"> 
    <h1>Search Alternatives</h1> 
    <div class="class= ui-body ui-body-b"> 
    <input type="text" name="search" id="searchBox" value="" data-theme="a" /> 
    <button type="submit" data-theme="a" id="searchButton">Search</button>     
    </div>

    </div>

    <div data-role="content"> 
    <ul data-role="listview" id="list"></ul> 
    </div> 
    </div>
    <div data-role="page" id="recent"> 
    <div data-role="header"> 
    <h1> Recent Alternatives</h1> 
    </div> 
    <div data-role="content"> 
    <p>This app rocks!</p> 
    </div>
    </div>
    </body>
    </html>

     

    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 

        

     

     

     

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

     

    Ideally we would want

     

    1. Scroll to start below header and end above footer
    2. 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. 

     

     

     

     

     

     

    PDF version