www.91084.com

GVKun编程网logo

Dojo mobile TweetView 系列教程之五 —— TweetView: Android，打包，回顾（dowload vitmate）

1

在这篇文章中，我们将为您详细介绍DojomobileTweetView系列教程之五——TweetView:Android，打包，回顾的内容，并且讨论关于dowloadvitmate的相关问题。此外，我

在这篇文章中，我们将为您详细介绍Dojo mobile TweetView 系列教程之五 —— TweetView: Android，打包，回顾的内容，并且讨论关于dowload vitmate的相关问题。此外，我们还会涉及一些关于data-dojo-id, dijit/registry.byId() and dojo/dom.byId()、Dojo -- Getting Started篇之Hello Dojo!、Dojo -- Getting Started篇之Modern Dojo(现代化Dojo)、dojo -- it is critical to pull in "dojo/domReady!"的知识，以帮助您更全面地了解这个主题。

本文目录一览：

Dojo mobile TweetView 系列教程之五 —— TweetView: Android，打包，回顾（dowload vitmate）

Dojo mobile TweetView 系列教程之五 —— TweetView: Android，打包，回顾（dowload vitmate）

翻译：Siqi （siqi.zhong@gmail.com ）

原文：TweetView: Android,Packaging,and Review

在前两篇教程Dojo mobile TweetView 系列教程之三 —— Tweets和Mentions视图 与 Dojo mobile TweetView 系列教程之四 —— 创建 Setting 视图 中，我们创建了TweetView 移动应用程序所需的HTML,CSS和JavaScript代码。本教程将重点介绍如何实现一套Android主题，并使用Dojo的打包系统来使应用程序更紧凑，之后我们将回顾一下整个基于dojox.mobile的应用程序。

版本：1.6

难度：中级

系列：TweetView

实现Android主题

在本系列教程中我们在app.html页面中硬编码了一套iPhone主题的CSS样式来美化整个应用程序。这使得我们可以更快地完成整个开发，并且在应用程序功能完备后再考虑Android主题样式。现在是时候开始为我们的应用程序设计Android风格的样式了！

制作Android风格样式的第一步是实现一段侦测客户端设备类型并相应使用Android或iPhone主题的代码（而不是写死iphone.css）。

！为了强制你的页面使用Android模式，你可以像我们之前使用iPhone主题一样写死Android主题。

现在你的应用程序可以在基于Android平台的设备上加载Android主题了；如果不是Android设备，将会使用iPhone主题。但是我们可能还需要一些针对Android定制的图片。首先，我们将djConfig中的parSEOnLoad设置为false：

接下来，我们将添加dojo.ready代码块来改变图片路径并手动告诉Dojo开始进行页面解析。

！注意我们使用了document.getElementsByClassName并使用dojo.forEach对其结果进行了遍历——还记得么，我们为了缩小代码大小，要避免使用dojo.query，接下来我们还会看到此类情况。

太棒了！我们简单的应用程序可以同时应对Android和iOS设备了。

移除防缓存Meta标签

还记得我们在开发控件时为了防止缓存而使用的Meta标签么？

移除上面这些，使得我们的应用程序可以正常进行缓存。

dojox.mobile 和打包

通常我们可以在Dojo Toolkit的 util/build目录下发现打包脚本。 但是， dojox.mobile的打包脚本被放在了dojox.mobile/build目录下。在这些"build.sh"和"build.bat"脚本中，你可以看到以下注释：

在创建你自己的Dojo发布包时，你须要打这个补丁。在你完成之后，记得把它改回来。

！请仔细阅读上面的注释。记得我们如何使用一个自定义方法， _ViewMixin.getElements来取代dojo.query的么?如果我们仅仅需要getElementByClassName的话，我们根本不需要添加dojo.query作为依赖项。这会缩减我们应用程序发布包的大小。

dojox.mobile打包选项

在build.sh和build.bat文件中你还可以看到一些特殊的打包参数。

我们将选择使用separate委派。但是build文件中有一些硬编码的值是我们不想要的，所以让我们复制该文件中的内容并创建一个我们自己的build-tweetview.sh文件:

我们针对tweetview的需求，更新了profile和dir的配置。

TweetView Build Profile

让我们为TweetView创建一个基于mobile-all.profile的Build Profile：

Dojo Toolkit提供的mobile profile包含了我们所需的dojox.mobile.app类，所以我移除了它们。我还为该build添加了一个tweetview-app.js，它包含了TweetView，SeetingsView，和dojox.mobile.TabBar（一个默认情况下，dojox.mobile没有包含的类）。之后tweetview命名空间被添加到了prefixes数组。

执行Build

让我们切换到命令行并使用上面的build profile打包我们的widget:

在build完成之后，可以到js/tweetview-release/dojo/tweetview/directory查看结果：

打包完毕后的目录内容

使用Build

现在可以使用打包好的文件了，打开app.html，更新Dojo路径，并创建一个新的script节点来导入我们打包过的tweetview-app.js。

！我们可以使用dojo.require来导入tweetview所需的资源，但是有一些移动操作系统不支持同步XHR，这会导致dojo.require失效，因此在这种情况下，直接导入资源更加可靠。我们应用程序中的requires使用不会发生问题，因为我们已经将所有代码打包，所有需要的依赖项都已经加载进来了。

TweetView 回顾

TweetView完成了！我们已经为我们简单的移动应用程序创建了模板（HTML），样式表（CSS）和代码（JavaScript），并进行了打包!让我们回顾一下我们在创建TweetView中所学到的：

  • dojox.mobile下的基本控件
  • 如何为dojox.mobile.application定制iOS和Android风格的样式
  • 如何以标签形式声明dojox.mobile.widgets和如何使用代码创建这些控件
  • 如何使用dojo.io.script和dojo.DeferredList来从Twitter获取JSON格式的内容
  • 如何扩展dojox.mobile基本控件
  • JavaScript最佳实践背后的策略，同时保证代码紧凑，依赖项最少。
  • dojox.mobile应用程序所需的独特打包流程。

我希望在完成这个项目时，你也能对dojox.mobile有同样的感受：dojox.mobile是一个出色的移动应用程序框架，它提供了与移动设备风格吻合的控件和样式主题。dojox.mobile易学、揖扩展，并可以动态加载内容。TweetView，一个基础的具有三个视图的应用程序，通过使用dojox.mobile便能很容易的创建出来！


dojox.mobile 将会变得更好！

dojox.mobile 在Dojo 开发团队的推动下正以惊人的速度成长着，它将为我们提供最佳的移动解决方案。在不久的将来，dojox.mobile会有更多、更高效的控件以及针对设备的各种新功能。希望大家可以花一些时间亲自尝试一下dojox.mobile下的内容，并与整个Dojo社区分享您的经验！

点击这里 查看完整的应用程序！

TweetView系列中文教程

Dojo mobile TweetView 系列教程之一 —— dojox.mobile入门

Dojo mobile TweetView 系列教程之二 —— TweetView 启程

Dojo mobile TweetView 系列教程之三 —— Tweets和Mentions视图

Dojo mobile TweetView 系列教程之四 —— 创建Setting视图

data-dojo-id, dijit/registry.byId() and dojo/dom.byId()

data-dojo-id, dijit/registry.byId() and dojo/dom.byId()

registry.byId和dom.byId经常混淆,尤其是初次使用者。

registry.byId应当用于： 当你想直接引用某个部件的JavaScript对象以及访问这个部件的方法时。

dom.byId 应当用于：当你想直接访问一个DOM节点。

下面这个ContentPane部件有一个id属性(标准HTML属性)以及一个data-dojo-id属性(dojo 特有id属性):

<div id="myDivId"
     data-dojo-type="dijit/layout/ContentPane"
     data-dojo-id="myDojoId">
   Hello Everyone!
</div>

dom.byId()

dom.byId()和我们经常使用的document.getElementById()在访问DOM节点的div标签时没有区别: 都是通过标签的id属性值。

例如：

dom.byId("myDivId").style.height = '300px';

用来设置高度。

registry.byId()

registry.byId() 有一点不同。首先，用data-dojo-type声明的节点或者dojo编程实现的部件被dojo解析后才能使用registry.byId()。这时，id作为一个参数,返回值是一个对象，这个对象当data-dojo-type被解析转换成dijit部件时由dojo创建。这样，你就可以改变部件的dojo属性，或者调用其中定义的方法(在这个例子里，我们能调用ContentPane的方法)。例如，通过set(“content”,value)方法，设置ContentPane内容。

registry.byId("myDivId").set("content", "Hello World!");

你也可以像上面我们使用dom.byId() 那样改变其样式，通过ContentPane的domNode属性。 (事实上，domNode定义的比继承树高，所以每个dijit部件都有domNode。非常方便！例如

myContentPane = registry.byId("myDivId");
myContentPane.domNode.style.height = '300px';
myContentPane.set("content", "Hello World!");

data-dojo-id (dojo 1.6之前是jsId)

HTML 属性data-dojo-id通过自动创建一个全局JavaScript变量，节省你在使用过程中的很多步骤(这是由dojo parser实现的)。这个变量包含的对象和registry.byId()返回的对象相同。无论你给data-dojo-id这个属性什么值，都会变为全局变量名，所以，要当心保留字，还要当心两个部件使用相同data-dojo-id！既然Content Pane有一个data-dojo-id 属性值“myDojoId”，那么我可以稍微简化一下上面的代码，移除registry.byId()，使用data-dojo-id属性作为变量名：

myDojoId.domNode.style.height = '300px';
myDojoId.set("content", "Hello World!");

属性data-dojo-id不是必须，在这里只是为了使用方便。

注意：如果有两个相同data-dojo-id，那么起作用的是最后那个，而不是返回一个包含这两个部件的数组。所以要避免相同，否则会很难发现错误。

Dojo -- Getting Started篇之Hello Dojo!

Dojo -- Getting Started篇之Hello Dojo!

一直都想尝试使用dojo，毕竟它是众多JavaScript高手眼中的”瑰宝”。本文是dojo系列的第一篇，会介绍一下dojo的搭建和编写两个简单的hello word程序。

下载dojo

在网络通畅的情况下，可以用最简单的方式使用dojo，如下：

<!DOCTYPE html>
<html>
<head>
   <Meta charset="utf-8">
   <title>Tutorial: Hello Dojo!</title>
</head>
<body>
   <h1 id="greeting">Hello</h1>
   <!-- load Dojo -->
   <scriptsrc="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
           data-dojo-config="async: true"></script>
</body>
</html>

这样，会从cdn中下载dojo相关的js文件。另一种做法，是将dojo的js文件下载下来，直接在本地使用dojo。

下载地址：http://dojotoolkit.org/download/


下载完解压后，目录结构如下：


Eclipse中编写dojo helloworld程序h


在Eclipse中建立一个java web工程，然后把dojo中的dijit/dojo/dojox拷贝到工程中。

ok，现在可以编写dojo程序了。下面将会简单编写两个例子，一个简单的hello world程序，另一个是使用dojo的动画模块，编写一个文字滑动的例子。

第一个例子：hello-domready.html

<!DOCTYPE html>
<html>
<head>
   <Meta charset="utf-8">
   <title>Tutorial: Hello Dojo!</title>
</head>
<body>
   <h1 id="greeting">Hello</h1>
   <!-- load Dojo -->
   <script src="dojo/dojo.js" data-dojo-config="async:true"></script>
 
   <script>
      require([
            'dojo/dom','dojo/domready!'
        ],function (dom) {
            var greeting = dom.byId('greeting');
            greeting.innerHTML += ' from Dojo!';
        });
   </script>
</body>
</html>


Dojo中是使用异步加载(AsynchronousModule DeFinition (AMD))的形式加载模块的。成功运行上面的代码后，效果如下：


第二个例子hello-fx.html

<!DOCTYPE html>
<html>
<head>
   <Meta charset="utf-8">
   <title>Tutorial: Hello Dojo!</title>
</head>
<body>
   <h1 id="greeting">Hello</h1>
   <!-- load Dojo -->
   <script src="dojo/dojo.js" data-dojo-config="async:true"></script>
 
   <script>
   require([
            'dojo/dom','dojo/fx',function (dom,fx) {
            // The piece we had before...
            var greeting = dom.byId('greeting');
            greeting.innerHTML += ' from Dojo!';
 
            // ...but Now,with an animation!
             fx.slideto({
                 node: greeting,top: 100,left: 200
            }).play();
        });
   </script>
</body>
</html>

运行成功后，“Hello from Dojo!”会自动往右下方法偏移。

hello world程序简单介绍

  • require方法的第一个参数 : dojo模块 id 数组，每个id是对应模块的引用，通过该引用可以调用对应的api。像上面例子中的模块'dojo/dom'，其实是对应dojo目录下的dom.js文件。
  • require方法的第二个参数，callback function: Javascript语言使用回调的方式来实现异步，可以在该回调方法中，使用对应模块的api。
  • domready模块,当浏览器DOM可用后，才开始执行JavaScript代码，那么可以使用domready模块，如上面的例子。

Dojo -- Getting Started篇之Modern Dojo(现代化Dojo)

Dojo -- Getting Started篇之Modern Dojo(现代化Dojo)

“modern”dojo

本文会介绍一下，dojo1.10带来的新的变化。

准备开始

Dojo1.7是一个重要里程碑，整体的架构更加灵活，也更加“现代化”。Dojo1.10则在1.7的基础上，引入了一些新的特性和概念，例如dojo/on。如果你想让dojo代码跑的更快，更加高效，并且想提高代码的可维护性，那就赶紧升级到dojo1.10吧。另外，dojo是完全向后兼容的。

新hello world

modern dojo其中一个核心概念是：禁止使用全局命名空间。dojo为了向后兼容，原先放置在全局命名空间中的函数和变量，仍然是可用的，但在新版的dojo中，最好别用。因为其他开发人员随时可能自己定义一个名字跟全局命名空间中的函数名一样的函数出来，这样会造成冲突的。像下面的使用方式就不推荐。

dojo.* or dijit.* or dojox.*

其实只需简单的引入dojo.js，然后使用require() 方法加载其他模块即可。

另一个核心概念是：同步操作慢，异步操作快。dojo 1.7(包括1.7),支持Asynchronous Module DeFinition (AMD)的概念，可以使用require()来异步加载用到的dojo 模块。

旧版用法

dojo.ready(function(){
    dojo.byId("helloworld").innerHTML = "Hello World!";
  });

新版用法

require(["dojo/dom","dojo/domready!"],function(dom){
    dom.byId("helloworld").innerHTML = "Hello New World!";
  });

dojo -- it is critical to pull in

dojo -- it is critical to pull in "dojo/domReady!"

Issue: Can not get handler of an element by using dojo.byId(“element id”) ;

You want to add an event to a button,code goes like this: 

<script>

require(["dojo","dojo/on","dijit/registry","dojo/dom","dojox/mobile","dojox/mobile/parser","dojox/mobile/SwapView","dojox/mobile/PageIndicator","dojox/mobile/heading","dojox/mobile/ScrollableView","dojox/mobile/EdgetoEdgeList","dojox/mobile/Button”

],function(dojo,on,registry,dom){

     var handler = dojo.byId("btn");

     on(handler,"click",function(e){

           alert("i am clicked");

     });

});

</script>

     <script type="text/javascript" src="engmain.js"></script>

 

</head>

<body>

     <div id="mainview"data-dojo-type="dojox/mobile/ScrollableView">

    

     <button id="btn" data-dojo-type="dojox/mobile/Button">click me

           <img src="images/bottomarrow.png"/>

     </button>

     <div id="result" ></div>

                maincontent

     </div>

</body>

No matter how hard you clicked the button,the button just did not give you any response.

And you will see this in your debugging environment (FireBug) – target is null

Possible Cause:

DOM tree didn't ready when dojo.byId(“elementID” executed,so the element you specified cannot be identified.

Reference: http://www.jetwu.cn/archives/101


Solution:

Ensure that you pull in dojo/domready! when you need to do something with element of the DOM tree.


The code is as below,for your reference. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

	<title>slip view</title>
	<link rel="stylesheet" href="">
	<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>

	<script type="text/javascript" src="dojo/dojo.js" 
    	data-dojo-config="isDebug:false,parSEOnLoad: true,debugAtAllCosts:false"></script>

<script>
require(["dojo","dojox/mobile/Button","dojo/domready!"
],dom){
	var handler = dojo.byId("btn");	
	on(handler,function(e){
		alert("i am clicked");
	});
});

</script>
	<script type="text/javascript" src="engmain.js"></script>

</head>
<body>
	<div id="mainview"data-dojo-type="dojox/mobile/ScrollableView">
	
		<button id="btn" data-dojo-type="dojox/mobile/Button">click me
		<img src="images/bottomarrow.png"/>
		</button>
	<div id="result" ></div>
			main content
	</div>
</body>


</html>

关于Dojo mobile TweetView 系列教程之五 —— TweetView: Android，打包，回顾和dowload vitmate的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于data-dojo-id, dijit/registry.byId() and dojo/dom.byId()、Dojo -- Getting Started篇之Hello Dojo!、Dojo -- Getting Started篇之Modern Dojo(现代化Dojo)、dojo -- it is critical to pull in "dojo/domReady!"的相关知识，请在本站寻找。

本文标签：

上一篇Android Historian安装使用（android的安装步骤）

下一篇android – IBM Worklight 6.0 – dojo.js中的scriptError：21（js script error怎么解决）

相关文章