欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【翻译】Part 1 - Getting Started with Dojo Mobile

程序员文章站 2022-05-30 09:58:13
...
英文原链接：http://dojotoolkit.org/documentation/tutorials/1.9/mobile/flickrview/part1/
    web上的内容正快速的发展，并迅速蔓延到移动设备。跟其他web问题一样，Dojo Toolkit给出了解决方案：Dojo Mobile。Dojo Mobile是一个允许你轻松创建跨设备兼容的移动web应用的框架。这是一系统探索Dojo Mobile文章的导读部分。通过这些文章，你将创建出一个叫FlickrView的移动应用。在开始之前，我们要学习什么和怎么使用Dojo Mobile。
介绍Dojo Mobile
    Dojo Mobile是Dojo Toolkit的移动web应用解决方案。它是一些经过架构优秀的类，它轻量化，灵活性，可扩展。Dojo Mobile已经可以模拟大部分通常设备的接口：Android、iOS、BlackBerry、WindowsPhone，所以你的web应用该跟您的设备将配合得天衣无缝。
Dojo Mobile的关键特性包括：
  • 完整和一致的移动小部件库(dojox/mobile)--不需要从多个来源收集小部件。
  • 轻量级，最小的依赖关系。
  • 本地化风格的控件和小部件。
  • 在桌面和移动设备上一致的功能行为。
  • 响应方向和方向变化。
  • 提供通常设备的CSS主题。
  • 尽可能使用基于CSS3的动画。

看一下几个Dojo Mobile的例子：
Browse all dojox/mobile Tests (1.9.2)
这些移动接口在桌面浏览器上一样表样良好，但花点时间在你的iOS和Android上每一个都测试一下，你将会对Dojo Mobile的部件和CSS主题印象深刻。

构建你的移动页面
考虑使用这个模板来开始你的移动应用： 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <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>
        <!-- stylesheet will go here -->
        <!-- dojo/javascript will go here -->
    </head>
    <body>
        <!-- application will go here -->
    </body>
</html>

添加Dojo Mobile到你的页面需要：
  • 一个主题
    • 包括了多个预定义的主题： iPhone, iPad, Android 2.x, Android Holodark, BlackBerry, Windows Phone和一个通用的自定义主题。
  • Dojo引导和配置
    • 使用dojo mobile的JavaScript。
  • 一个或更多的视图(views)
    • 视图(views)就是你的应用“页面”

让我们组建每一个部分，接下来讨论每个部分的细节。
主题
Dojo Mobile可以根据浏览器的user agent动态改变应用视觉主题来达到本地界面相同的风格，应用一个本地主题（意思是，这个主题，让你的应用看起来跟移动设备上的本地应用风格一致）你只需要将下面的代码片段加入你的HTML页面中： 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/mobile/deviceTheme.js"></script>

Dojo引导和配置
跟传统scritp标签一样加入Dojo： 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>

可以这样指定Dojo配置： 
<script type="text/javascript">
    dojoConfig = {
        async: true,
        parseOnLoad: false
    };
</script>

  • async: true
    • 配置加载为异常模式。
  • parseOnLoad: false
    • 让开发人员显性请求(require)dojox/mobile/parser和调用(call)parser.parse()。

现在，require部分:
  • 我们要显性请求(require)dojox/mobile/parser和调用(call)parser.parse()。Parser将分析dojo HTML tags(widgets)，这些我们在下一部分定义。
  • 兼容模块dojox/mobile/compat 是确保当客户端为非WebKit-based时能功能兼容，比如non-CSS3的桌面PC版浏览器。
  • dojo/domReady! 是特殊的AMD模块（调用加载插件以"!"符号结尾）并用于确保当DOM准备好时，我们运行parser的方法可被调用。 

require([
    "dojox/mobile/parser",
    "dojox/mobile/compat",
    "dojo/domReady!"
], function (parser) {
    // now parse the page for widgets
    parser.parse();
});


请求dojox/mobile/compat不是必需的，但却是最好的实践，它并不会降低移动浏览器的性能。
Dojo Mobile模板
将下面的模板一起放到你的移动应用中： 
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <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>
    <!-- application stylesheet will go here -->
    <!-- dynamically apply native visual theme according to the browser user agent -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/mobile/deviceTheme.js"></script>
    <!-- dojo configuration options -->
    <script type="text/javascript">
        dojoConfig = {
            async: true,
            parseOnLoad: false
        };
    </script>
    <!-- dojo bootstrap -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
    <!-- dojo application code -->
    <script type="text/javascript">
        require([
            "dojox/mobile/parser",
            "dojox/mobile/compat",
            "dojo/domReady!"
        ], function (parser) {
            // now parse the page for widgets
            parser.parse();
        });
    </script>
</head>
<body style="visibility:hidden;">
    <!-- application will go here -->
</body>
</html>

你注意到BODY中style visibility=hidden吗？这是确保当所有Dojo mobile widgets都渲染完成后才显示页面。
现在我们能加一些widgets到页面中了！
创建Views和Widgets
如你所完成的，创建一个Dojo Mobile-ready 页面只需要很少的要求。添加widgets到页面也不难。在开始创建widgets之前，让我们过一眼Dojo Mobile提供的widgets。
  • View - 一个View是一个移动应用中的虚拟页面。
  • ScrollableView - 允许头部和/或底部固定在顶部或底部，中间内容部分滚动。
  • Button - 简单按钮
  • Switch - 开关
  • Heading - 简单heading
  • ListItem - 基本列表的元素
  • TabBar & TabBarButton - Tabbed内容管理
  • ...其它!

记得所有widgets跟设备操作系统的风格是一致的。也记住你可能希望你的图标和小部件在每一台你打算支持的设备上工作和看起来都一样。
现在你已经了解Dojo Mobile中的一些widgets了，让我们创建一个带标题的基础view，一些ListItems和一个开关(Switch): 
<!-- the view or "page"; select it as the "home" screen -->
<div id="settings" data-dojo-type="dojox/mobile/View" data-dojo-props="selected:true">
<!-- a sample heading -->
<h1 data-dojo-type="dojox/mobile/Heading">"Homepage" View</h1>
<!-- a rounded rectangle list container -->
<ul data-dojo-type="dojox/mobile/RoundRectList">
    <!-- list item with an icon containing a switch -->
    <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon:'images/icon-1.png'">Airplane Mode
        <!-- the switch -->
        <div data-dojo-type="dojox/mobile/Switch"></div>
    </li>
    <!-- list item with an icon that slides this view away and then loads another page -->
    <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon:'images/icon-2.png', rightText:'mac'">Wi-Fi</li>
    <!-- list item with an icon that slides to a view called "general" -->
    <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon:'images/icon-3.png', rightText:'AcmePhone', moveTo:'general'">Carrier</li>
</ul>
</div>

注意使用了自定义属性的widgets，每一个widget完整可用的自定义选项/属性列表，见dojox/mobile API docs(http://dojotoolkit.org/api/dojox/mobile.html),注意这个特殊点的data-dojo-props="selected:true":它告诉Dojo Mobile默认显示这个view，也注意那些提供搜索引擎友好的标记和内容。

你还需要在应用中require下面的widgets来完成整个工作。 
require([
    //...
    "dojox/mobile/View",
    "dojox/mobile/Heading",
    "dojox/mobile/RoundRectList",
    "dojox/mobile/ListItem",
    "dojox/mobile/Switch"
], function (parser) {
    //...
});


我们来看看效果：
View Demo
上面我们创建了一个简单的view，但大多数的移动应用程序都需要多个view，所以，我们参考上面这个简单view来创建一个“General”的view，和一个“About”的view： 
<!-- The "General" sub-page -->
<div id="general" data-dojo-type="dojox/mobile/View">
    <!-- a sample heading -->
    <h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="back:'Settings', moveTo:'settings'">General View</h1>
    <!-- a rounded rectangle list container -->
    <ul data-dojo-type="dojox/mobile/RoundRectList">
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="moveTo:'about'">About</li>
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:'2h 40m', moveTo:'about'">Usage</li>
    </ul>
</div>
<!-- And let's add another view "About" -->
<div id="about" data-dojo-type="dojox/mobile/View">
    <!-- Main view heading -->
    <h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="back:'General', moveTo:'general'">About</h1>
    <!-- subheading -->
    <h2 data-dojo-type="dojox/mobile/RoundRectCategory">Generic Mobile Device</h2>
    <!-- a rounded rectangle list container -->
    <ul data-dojo-type="dojox/mobile/RoundRectList">
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:'AcmePhone'">Network</li>
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:'AcmePhone'">Line</li>
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:'1024'">Songs</li>
        <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:'10'">Videos</li>
    </ul>
</div>

像原来一样，你需要require新widget dojox/mobile/RoundRectCategory到你的HTML声明中。
恭喜！你已经创建完你的第一个Dojo移动应用了！
View Demo
Dojo Mobile使得创建移动应用上的基本元素变得轻面易举！虽然你的移动应用比上面的简单例子要复杂很多，但Dojo Mobile已经为创建多视图的web应用提供了基本的主题，小部件和方法。
继续！
现在我们已经介绍了使用Dojo Mobile的基础知识，接下来的文章将关注怎么创建一个动态的，数据驱动的移动应用：FlickrView。它将显示很多的Dojo Mobile小部件功能，以及在Android、iOS-based,BlackBerry或者WindowsPhone设备上的运行。
下载源代码
Download Part 1 - Getting Started with Dojo Mobile.
============================================
Part 1 END
next Part 2 Developing a Dojo Mobile Application: FlickrView
相关标签： dojo mobile web 移动开发

上一篇： 如何单独设定php接受的值的字体颜色

下一篇： 通过网页爬虫中cookie自动获取及过期自动更新（详细教程）

推荐阅读