UI Development using jQueryMobile

eonbell

浏览: 59441 次
性别:
来自: 成都

最近访客更多访客>>

tanyun1111

在路上333

djyotm

qryl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

网文收藏

UI jQuery Mobile Windows Mobile Bada

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

<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">                            

    <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="content">

               <ul data-role="listview" id="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/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

<!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



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.

分享到：

解决MySQL error 1036: table is read only ... | Draw Graph using Graphviz � ...

2011-03-20 14:49
浏览 1448
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论