Using JQuery Mobile and JSON to Create Mobile Applications
2011-03-09 14:17
531 查看
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:
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:
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:
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.
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:
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?
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>
<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?
相关文章推荐
- Send and Receive JSON objects to Web Service Methods using jQuery AJAX in ASP.Net
- csharp:Learn how to post JSON string to generic Handler using jQuery in ASP.Net
- Using jQueryUI accordion to create a vertical menu
- Step By Step Guide To Create Physical Standby Database Using RMAN Backup and Restore
- Using Visual Studio 2005, MakeCab.exe and MSBuild to Create Window SharePoint Services v3 Solution Files (*.WSP's)
- using iscroll.js and iscroll jquery plugin in android webview to scroll div and ajax load data.
- zhuanzai: AJAX: How to create a "Processing" modal window using UpdateProgress and ModalPopup ASP.net AJAX controls
- HTML5, jQuery Mobile and ASP.NET MVC 4 – Using the ViewModel between the model and controller
- Using Microsoft Virtual Server 2005 to Create and Configure a Two-Node Microsoft Windows Server 2003 Cluster
- Flash Professional CS5 will enable you to build applications for iPhone and iPod touch using ActionScript 3.
- How to use JSon data in mvc action and post form data use JQuery ajax
- using HttpClient and sending json data to RESTful server in adroind
- [转]HTML5 Day 4: Add Drop Down Menu to ASP.NET MVC HTML5 Template using CSS and jQuery
- Creating Mobile Games: Using Java ME Platform to Put the Fun into Your Mobile Device and Cell Phone
- 转载:How to create an automation project using MFC and a type library
- 【raspberry pi】server assistant to shutdown and reboot raspberry pi using mobile app
- Using .Net, Flex, and Red5 to create a flash web application
- Lesson10 Using DDL Statements to Create and Manage Tables
- Using Android Studio to build applications with NDK and Boost C++ libraries
- MSDN: Using HTTP Modules and Handlers to Create Pluggable ASP.NET Components