Using JQuery Mobile and JSON to Create Mobile Applications

Mobile Application Development is rapidly becoming a major focus for most organizations which seek to add a mobile presence or "touch point" to existing products and applications. Most if not all mobile application development frameworks have been adapted one way or another from an existing "desktop" development platform. Web based frameworks are no different. JQuery is currently being adapted to build mobile web applications (JQuery Mobile Alpha 3 was released last month).

One of the main issues in the mobile world, beyond support for device specific attributes, is size as Aaron Quint explained:

jQuery compressed even is like 40-50 K, maybe a little more than that, plus if you want jQuery UI and some of the animation stuff, that's like another 100 K. For mobile, it's not quite there yet.

JQM Alpha 3 is now down to 17k, plus the corresponding CSS.

Enrique Ortiz sees other advantages to JQM:

• General simplicity: you can develop pages mainly using markup driven with minimal or no JavaScript.
• Progressive enhancement and graceful degradation: jQuery Mobile philosophy is to support both high-end and less capable devices, such as those without JavaScript support, and still provide the best possible experience.
• Accessibility: jQuery has support for Accessible Rich Internet Applications (WAI-ARIA) to help make web pages accessible for visitors with disabilities using assistive technologies.
• Small size
• Theming

 Installing JQM is as simple as adding a one stylesheet and three JavaScript files:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1 /jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </script>
<script src="http://jquery.ibm.navitend.com/utils.js"></script>

In addition, Frank explains that one of the key benefit of JQM in the Mobile world is its ability to use AJAX to smooth the user interface:

JQM takes Ajax to the next level by intercepting page requests and in most cases converting those requests to specialized Ajax calls. The net result is that as a visitor navigates a web application constructed with JQM, the DOM of the page is manipulated rather than each page being replaced at every turn.

This is achieved by the use of the HTML5 data-* attribute. In HTML5, any attribute with a prefix of data- is essentially ignored by the validating parser, and the application is free to interpret those attributes at will. JQM relies on the data-role attribute for stringing together its core functionality.

When a JQM application switches from one page to the next, the primary activity that takes place is that the content div is swapped out for the new page's content.

The data-rel attribute is used to request how the new window should appear when it is shown and the data-transition tells JQM to make the transition. The data-filter attribute is used to specify the behavior of a list data-role which can display a filtered list of value based on some keyword input. Frank also explains how to create customer data-* attributes to implement application specific attributes.

JQM will ship in the first half of this year. Frank concludes:

Over time, look for it to be incorporated into frameworks such as PhoneGap and possibly even alternative development environments such as Appcelerator's Titanium.

Do you think Web based Mobile Applications have a future? Is only a question of framework and simplicity of development or could it be that mobile applications are specific enough (as users bring their client with them and expect the highest level of user experience and security) that Web based applications will remain marginal on this new platform?

转载于:https://www.cnblogs.com/mengheyun/archive/2011/03/09/1978301.html