加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

第一部份：开始Dojo Mobile

发布时间：2020-12-16 21:23:22 所属栏目：百科 来源：网络整理
导读：Part 1 - Getting Started with Dojo Mobile Content on the web is evolving at a rapid pace,and the path is quickly moving towards mobile devices. As with many other problems on the web,the Dojo Toolkit has the solution: Dojo Mobile. Dojo Mob

Part 1 - Getting Started with Dojo Mobile

Content on the web is evolving at a rapid pace,and the path is quickly moving towards mobile devices. As with many other problems on the web,the Dojo Toolkit has the solution: Dojo Mobile. Dojo Mobile is a framework that allow you to effortlessly create cross-device-compatible mobile web applications. This is the introductory post in a series of posts exploring Dojo Mobile. Throughout the series,we will create a Dojo Mobile application called FlickrView. Before we can get to that,we'll need to learn about why and how to use Dojo Mobile.

Introduction to Dojo Mobile

Dojo Mobile is the Dojo Toolkit's answer to your mobile web application needs. It is a collection of classes has been architected to be lightweight,flexible,and extendable. Dojo Mobile has also been created to mimic the interface of the most commonly used devices: Android,iOS,BlackBerry,WindowsPhone so that your web application is seamless to your user.

Key features of Dojo Mobile include:

  • Complete and consistent mobile widget library (dojox/mobile) -- no need to collect widgets from multiple sources

  • Lightweight,minimal dependencies

  • Native style controls and widgets

  • Same functional behavior on desktop and mobile devices

  • Responds to both orientations as well orientation changes

  • CSS themes for most commonly used device

  • Uses CSS3-based animation where possible

Check out a few quick examples of Dojo Mobile in action:

  • Browse all dojox/mobile Tests (1.10.4)

These mobile interfaces also perform well in desktop browser clients,but take the time to use your iOS and Android-powered devices to browse each test. You'll be impressed byDojo Mobile's widgets and CSS themes!

Structuring Your Mobile Page

Consider this template to start your mobile application with:

<!DOCTYPEhtml><html>
<head>
<metahttp-equiv="Content-type"content="text/html;charset=utf-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<metaname="apple-mobile-web-app-capable"content="yes"/>
<title>YourApplicationName</title>
<!--stylesheetwillgohere-->
<!--dojo/javascriptwillgohere-->
</head>
<body>
<!--applicationwillgohere-->
</body></html>

Adding Dojo Mobile to your page requires:

  • A theme
    There are multiplepredefined themes: iPhone,iPad,Android 2.x,Android Holodark,Windows Phone and a generic custom theme.

  • Dojo bootstrap and configuration
    The JavaScript to use dojo mobile.

  • One or more views
    Views will act as "pages" of your application.

Let's set up each one of these pieces separately,discussing details about each piece as we go along.

The Theme

Dojo Mobile is able todynamically apply a visual themeto your application in order to give it a native look depending on the browser user agent. To apply a native theme (that is,a theme that makes your application look like a native application on the mobile device on which it is displayed),you just need to include the following statement in your HTML pages:

<scripttype="text/javascript"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/mobile/deviceTheme.js"></script>

Dojo bootstrap and configuration

Including Dojo happens per the traditionalscripttag:

<scripttype="text/javascript"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

Dojo configuration can be specified like this:

<scripttype="text/javascript">
dojoConfig={async:true,parSEOnLoad:false
};</script>

  • async: true
    Configures the loader in asynchronous mode.

  • parSEOnLoad: false
    Lets developers explicitly requiredojox/mobile/parserand callparser.parse().

Now,therequirepart:

  • We explicitly requireparser.parse(). The parser will analyze the dojo HTML tags (widgets) that we will define in the next part.

  • The compatibility moduledojox/mobile/compatis required to ensure functional compatibility when the client is not WebKit-based,such as non-CSS3 desktop PC browsers.

  • Thedojo/domReady!is a special kind of AMD module (called a loader_plugin_noticeable by the trailing ‘!’ character) and is required to ensure our function that runs the parser is called once the DOM is ready.

require(["dojox/mobile/parser","dojox/mobile/compat","dojo/domReady!"],function(parser){//nowparsethepageforwidgets
parser.parse();
});

Requiringdojox/mobile/compatis not necessary but is certainly best practice and it does not degrade the performance of mobile browsers.

Dojo Mobile template

Putting all together gives the following template for your Dojo Mobile application:

<html><head>
<metahttp-equiv="Content-type"content="text/html;charset=utf-8"/>
<metaname="viewport"content="width=device-width,user-scalable=no"/>
<metaname="apple-mobile-web-app-capable"content="yes"/>
<title>YourApplicationName</title>
<!--applicationstylesheetwillgohere-->
<!--dynamicallyapplynativevisualthemeaccordingtothebrowseruseragent-->
<scripttype="text/javascript"src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/mobile/deviceTheme.js"></script>
<!--dojoconfigurationoptions-->
<scripttype="text/javascript">
dojoConfig={async:true,parSEOnLoad:false
};</script>
<!--dojobootstrap-->
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<!--dojoapplicationcode-->
<scripttype="text/javascript">
require(["dojox/mobile/parser","dojo/domReady!"
],function(parser){//nowparsethepageforwidgets
parser.parse();
});</script></head><bodystyle="visibility:hidden;">
<!--applicationwillgohere--></body></html>

Did you notice the stylevisibility=hiddenin the <body>? This will ensure the page is displayed only when all Dojo mobile widgets are rendered.

Now we can add some widgets to the page!

Creating Views and Widgets

As you've seen,there are minimal requirements to create a Dojo Mobile-ready page; adding widgets to the page is no different. Before we start creating widgets,let's review a few of the widgets Dojo Mobile provides:

  • View- A view is a virtual "page" within a mobile app.

  • ScrollableView- Allows for a header and/or footer to be anchored to the top or bottom allowing the middle content portion to be scrolled

  • Button- A simple button

  • Switch- An on/off toggling switch

  • Heading- A simple heading

  • ListItem- A basic list item

  • TabBar & TabBarButton- Tabbed content management

  • ...and more!

Remember that all widgets are styled to look like the device's OS. Also remember that you will likely want to make your icons and widgets work and look like each device you intend to support.

Now that you're acquainted with some of the widgets baked into Dojo Mobile,let's create a basic view with aHeading,a fewListItems,and aSwitch:

<!--theviewor"page";selectitasthe"home"screen--><divid="settings"data-dojo-type="dojox/mobile/View"data-dojo-props="selected:true"><!--asampleheading--><h1data-dojo-type="dojox/mobile/Heading">"Homepage"View</h1><!--aroundedrectanglelistcontainer--><uldata-dojo-type="dojox/mobile/RoundRectList">
<!--listitemwithaniconcontainingaswitch-->
<lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="icon:'images/icon-1.png'">AirplaneMode<!--theswitch-->
<divdata-dojo-type="dojox/mobile/Switch"></div>
</li>
<!--listitemwithaniconthatslidesthisviewawayandthenloadsanotherpage-->
<lidata-dojo-type="dojox/mobile/ListItem"
data-dojo-props="icon:'images/icon-2.png',rightText:'mac'">Wi-Fi</li>
<!--listitemwithaniconthatslidestoaviewcalled"general"-->
<lidata-dojo-type="dojox/mobile/ListItem"
data-dojo-props="icon:'images/icon-3.png',rightText:'AcmePhone',moveTo:'general'">Carrier</li></ul></div>

Note the custom attributes used within the widgets. A complete listing of custom options/attributes is available within thedojox/mobile API docsfor each widget. Note in particulardata-dojo-props="selected:true": It tells Dojo Mobile to display this view by default. Also note that the markup provides for search engine friendly content strategies!

To make this work you’ll need to require the widgets used by the application:

require([//...
"dojox/mobile/View","dojox/mobile/Heading","dojox/mobile/RoundRectList","dojox/mobile/ListItem","dojox/mobile/Switch"],function(parser){//...});

Let see the result:

View Demo

Above we created one simple view. Of course most mobile applications will want more than one view so let's create theGeneralview we reference in the sample above,as well as a basicAboutview:

<!--The"General"sub-page--><divid="general"data-dojo-type="dojox/mobile/View">
<!--asampleheading-->
<h1data-dojo-type="dojox/mobile/Heading"data-dojo-props="back:'Settings',moveTo:'settings'">GeneralView</h1>
<!--aroundedrectanglelistcontainer-->
<uldata-dojo-type="dojox/mobile/RoundRectList">
<lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="moveTo:'about'">About</li>
<lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="rightText:'2h40m',moveTo:'about'">Usage</li>
</ul></div><!--Andlet'saddanotherview"About"--><divid="about"data-dojo-type="dojox/mobile/View">
<!--Mainviewheading-->
<h1data-dojo-type="dojox/mobile/Heading"data-dojo-props="back:'General',moveTo:'general'">About</h1>
<!--subheading-->
<h2data-dojo-type="dojox/mobile/RoundRectCategory">GenericMobileDevice</h2>
<!--aroundedrectanglelistcontainer-->
<uldata-dojo-type="dojox/mobile/RoundRectList">
<lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="rightText:'AcmePhone'">Network</li>
<lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="rightText:'AcmePhone'">Line</li>
<lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="rightText:'1024'">Songs</li>
<lidata-dojo-type="dojox/mobile/ListItem"data-dojo-props="rightText:'10'">Videos</li>
</ul></div>

As usual,you must require the new widgetdojox/mobile/RoundRectCategoryyou just declare in your HTML.

Congratulations,you've just created your first Dojo Mobile application!

Dojo Mobile makes creating the basic elements of a mobile application a breeze! While your mobile application will be more complex than our sample above,it's important to note that Dojo Mobile provides the basic themes,widgets,methodology for creating multi-view web applications.

Keep Going!

Now that we've covered the basics of the using Dojo Mobile,the next series of posts will focus on creating a dynamic,data-driven mobile application calledFlickrView. It will feature numerous Dojo Mobile widgets and work with Android,iOS-based,BlackBerry or WindowsPhone devices.

Download The Source

DownloadPart 1 - Getting Started with Dojo Mobile.

Resources & references

  • Dojo Mobile Reference Guide

  • The Dojo Toolkit API

  • dojox/mobile deviceTheme(Reference Guide)

  • Themes currently available(Reference Guide)

  • Configuring Dojo(Tutorial)

  • Dojo HTML5 Data-Attribute Support(Feature)

The FlickrView Series

  • Part 1 - Getting Started with Dojo Mobile

  • Part 2 - Developing a Dojo Mobile Application: FlickrView

  • Part 3 - FlickrView: Implementing FeedView

  • Part 4 - FlickrView: Implementing SettingsView

  • Part 5 - Build FlickrView for production

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同