One of the dojo mobile tweetview series tutorials -- dojox. Mobile getting started

Source: Internet
Author: User
Tags dojo toolkit

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:

  • Lightweight, minimizing mutual dependence
  • Provides CSS themes for iOS and Android.
  • Provides space for iOS and Android styles.
  • Use css3-based animation (if the device supports css3)
  • Provide JavaScript animation for devices that do not support css3
  • Responds to location changes of mobile devices
  • Dojox. Mobile is a complete mobile widget framework. You do not need to search for widgets in many places.

 

The following figure shows how dojox. Mobile works on different platforms:

  • IPhone interface
  • Andriod Interface
  • IPad Interface
  • View All dojox. Mobile Samples

 

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:

 

  • Doctype
  • Meta Tags for mobile
  • A body element used to contain views

 

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

 

  • One topic: two themes are available: iPhone and andriod.
  • Dojo library with dojox. Mobile: the JavaScript code you will use
  • One or more views: Views play a "page" role in your application.

 

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. Mobile

Use 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:

 

  • View is a virtual page in a mobile application )". It can be switched to the previous or later view through left-side scrolling. A page can have any number of views.
  • Scrollingview-with a fixed header and footer, the content in the middle can be rolled.
  • Button-a simple button
  • Switch-a simple switch
  • Heading (title)-a simple title
  • Listitem (list)-a basic list
  • Tabbar & tabbarbutton (Tab Bar & tab bar button)-tab content management can be in the following two forms: navigation controls (Blue, usually at the top of the page), Tab bar (black, usually at the bottom of the page)
  • ... There are other!

! 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

 

  • Dojox. Mobile API
  • Dojox. Mobile Reference Guide
  • Dojox. Mobile 1.6 tests

 

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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.