Author: David Walsh
Siqi (siqi.zhong@gmail.com)
Original article: get started with dojox. Mobile
The Web technology is rapidly updated, and the current trend of web is gradually migrating to mobile devices. Like other Web problems, the dojo toolkit provides you with a solution-dojox. Mobile. Dojox. Mobile is composed of controllers, css3-based themes, and widgets that match your mobile devices. With dojox. Mobile, you can easily create smart, flexible, and cross-platform mobile Web applications. This is the first tutorial in the dojox. Mobile series. In this series, we will create a great Twitter-based Web application "tweetview ". Before we start, let's learn how to use dojox. Mobile.
Difficulty: Beginner
Version: 1.6
Series: tweetview
Introduction to dojox. Mobile
Dojox. Mobile is a dojo toolkit tailored to users' needs for mobile Web applications. The architecture of dojox. Mobile is lightweight, flexible, and scalable. At the same time, dojox. Mobile also imitates the interfaces of iOS and Android devices. Therefore, the applications you create with dojo. Mobile will bring you a seamless user experience. Dojox. Mobile has the following core features:
The following figure shows how dojox. Mobile works on different platforms:
With dojox. Mobile, we will create a simple mobile Web Application: tweetview.
! These interfaces can also be used in a desktop browser, but it is recommended that you take some time to try each example on your iOS and Android devices. You will be deeply impressed with dojox. Mobile's widgets and CSS themes.
Build your mobile page
Like any other mobile application, the design of the page structure is very important. Dojox. Mobile does not need any special page structure. You only need to add several key items:
! You can refer to mobile safari supported meta tags to learn more about meta tags.
You can use the following template to create your application:
<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <pead> <meta name = "viewport" content = "width = Device -width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = No "/> <meta name =" apple-mobile-web-app-capable "content =" yes "/> <title> your application name </title> <link href = "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/ Iphone.css "mce_href =" http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css "rel =" stylesheet "> </link> <! -- Stylesheet will go here --> <! -- Dojo/JavaScript will go here --> </pead> <body> <! -- Application will go here --> </body> </ptml>
With the above HTML template, we can now add dojo and dojox. Mobile to the page!
Add dojox. Mobile to your mobile page
Dojox. Mobile looks like a simplified and customized dijit. Add dojox. Mobile to your page. You need:
Next we will explain each part separately.
Topic
As mentioned above, dojox. Mobile provides two themes: iPhone and andriod. The iPhone topic provides a style sheet for iPhone/iPod and iPad devices. Dojo. Mobile introduces a compatibility layer to maximize compatibility between the two iOS devices. Dojox. Mobile also provides a special style sheet for non-WebKit kernel devices. To simplify our page, we will use the iPhone theme:
<Link href = "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" mce_href = "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" rel = "stylesheet" type = "text/CSS"> </link>
! Dojox. Mobile does not detect the device type to import the topic of the device. A good practice is to detect the device type on the server and write the corresponding style sheet to the page. The HTML page is only used to create widgets, so that the page will not be affected by the device type.
Import dojo and dojox. MobileUse chuanrong's script tag to import dojo
<MCE: script src = "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" mce_src = "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djconfig = "isdebug: True, parseonload: True"> </MCE: SCRIPT>
Dojox. Mobile and dojox. Mobile. parser can be imported through the dojo. Require method of chuanrong.
// Load the widget parserdojo. Require ("dojox. Mobile. parser"); // load the basic library dojo. Require ("dojox. Mobile ")
Do you still remember that dojox. Mobile is similar to dijit? Another similarity is that dojox. Mobile also has its own parser to find the nodes that need to be converted into widgets. Widgets under dojox. Mobile also use the dojotype (or other custom) attribute in the tag like dijit widgets.
The last step to import dojox. Mobile is to use a requireif statement to ensure you are well compatible when your client is not a WebKit kernel. (For example, you are using Firefox to browse the site ):
// If it is not a WebKit client, load the compat module dojo. requireif (! Dojo. iswebkit, "dojox. Mobile. compat ");
! Dojox. Mobile currently does not support the new widget declaration attributes in Dojo 1.6, such as data-Dojo-type and data-Dojo-props. These attributes will be supported in dojox. mobile in the future. In the current version, use dojotype and other inline attributes temporarily.
Dojox. mobile. compat loads additional style sheets and JavaScript to ensure dojox. mobile can use JavaScript-based animation effects to solve the problem that widgets cannot work due to the inability to use the css3 animation effects provided by the WebKit kernel.
! Dojox. Mobile. compat is not required. But using it is a good habit. It is not added to the core of dojox. Mobile to keep the core of dojo. Mobile as compact as possible.
Now we have loaded the iPhone theme and dojox. Mobile resources. Next we can add widgets to the page!
Create views and widgets
As you can see, creating a page that can use dojox. Mobile is that simple. It is not difficult to add dojox. Mobile widgets to the page. Before creating widgets, let's take a look at what widgets dojox. Mobile provides:
! Remember that all widgets styles are similar to those on the device (You have customized them in the style sheet you provided ). You will definitely want to make your widgets and icons consistent with the device style you will support.
Now that you know some built-in widgets of dojox. Mobile, we will create a view with a title bar, a list, and a switch:
<! -- View or "page"; it will be the home page --> <Div id = "Settings" dojotype = "dojox. Mobile. View" selected = "true"> <! -- A simple title bar --> <H1 dojotype = "dojox. Mobile. Heading"> "Homepage" view </p> <! -- A list of rounded corners --> <ul dojotype = "dojox. Mobile. roundrectlist"> <! -- A list element with icons and switches --> <li dojotype = "dojox. Mobile. listitem" icon = "images/icon-1.png"> airplane mode <! -- Switch --> <Div class = "itemswitch" dojotype = "dojox. Mobile. Switch"> </div> </LI> <! -- A list element with an icon to switch to another view --> <li dojotype = "dojox. mobile. listitem "icon =" images/icon-2.png "righttext =" Mac "> Wi-Fi </LI> <! -- A list element with an icon to switch to a view named "general" --> <li dojotype = "dojox. mobile. listitem "icon =" images/icon-3.png "righttext =" acmephone "moveTo =" general "> carrier </LI> </ul> </div>
! When you click the "carrier" element and switch to the "General" view (or any view other than the home page), an iPhone-style "back" button is displayed in the upper left corner. You do not need to add a "back" button to your view. You only need to set the "back" attribute in the heading (title bar) widget of the subview.
We have created a simple view. Of course, most applications require more views. Now let's create the "General" view and "about" view for the above column.
<! -- "General" subview --> <Div id = "general" dojotype = "dojox. Mobile. View"> <! -- Title bar --> <H1 dojotype = "dojox. Mobile. Heading" Back = "Settings" moveTo = "Settings"> General View </p> <! -- A list of rounded corners --> <ul dojotype = "dojox. mobile. roundrectlist "> <li dojotype =" dojox. mobile. listitem "moveTo =" about "> about </LI> <li dojotype =" dojox. mobile. listitem "righttext =" 2 h 40 m "moveTo =" about "> usage </LI> </ul> </div> <! -- Add another "about" View --> <Div id = "about" dojotype = "dojox. Mobile. View"> <! -- Title bar of the main view --> <H1 dojotype = "dojox. Mobile. Heading" Back = "general" moveTo = "general"> about </p> <! -- Sub-title bar --> <H2 dojotype = "dojox. Mobile. roundrectcategory"> generic mobile device </H2> <! -- List of rounded corners --> <ul dojotype = "dojox. mobile. roundrectlist "> <li dojotype =" dojox. mobile. listitem "righttext =" acmephone "> Network </LI> <li dojotype =" dojox. mobile. listitem "righttext =" acmephone "> line </LI> <li dojotype =" dojox. mobile. listitem "righttext =" 1024 "> songs </LI> <li dojotype =" dojox. mobile. listitem "righttext =" 10 "> Videos </LI> </ul> </div>
Demo
! Note the custom properties used by widgets. For a complete list of custom properties, see dojox. Mobile API docs for each widgets. Note that widgets in the label form are more friendly to search engines.
Congratulations, you have created your first dojox. Mobile web application! Dojox. Mobile makes it easy to create basic elements in a mobile app! In the future, your mobile applications will become more complex. Remember that dojox. Mobile provides the basic theme, widgets, and the method for creating multi-view applications.
Dojox. Mobile Resources
Continue learning!
Now we have learned the basics of dojox. Mobile. The following tutorials in this series will introduce how to create a dynamic, data-driven mobile app "tweetview ". Tweetview will use many dojox. Mobile widgets and be compatible with Android and iOS devices. This application will get Weibo information from Twitter, format it, and output it to users beautifully.
Chinese tutorials for the tweetview Series
One of the dojo mobile tweetview series tutorials -- dojox. Mobile getting started
Dojo mobile tweetview series tutorial 2 -- start with tweetview
Dojo mobile tweetview Series 3-tweets and mentions views
Dojo mobile tweetview Series 4-create a setting View
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
