dojo之初体验

最新推荐文章于 2024-09-11 15:33:18 发布

lingdian23

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量108

点赞数

文章标签： javascript dojo 简单实例 ViewUI

Dojo是客户端JavaScript工具包，其核心是一些高度优化的JavaScript脚本。在一个基于Dojo的Web应用程序中，你只需要创建少量的HTML和一些被称为Dojo工具代码的JavaScript代码。

如果你想知道详细情况，比如“是否安装正确？”，只要在浏览器输入地址http://yourserver.com/dojoroot/dojo/tests/runTests.html，就可以通过一连串的单元测试来运行Dojo。

1 把Dojo和Dijit添加到网页

每个使用dojo或dijit的页面中都须执行如下三个步骤。

1.1 添加标准Dojo首部

以下语句从服务器加载Dojo工具包和样式文件：

@import “/dojoroot/dijit/themes/tundra/tundra.css”; //加载Tundra主题

@ import “/dojoroot/dojo/resources/dojo.css”

</style>

1.2 为body标签设置样式类

1.3 添加dojo.require语句

Dojo.require(“dojo.parser”);

Dojo.require(“dijit.layout.ContentPane”);

</script>

2 Dijit小部件系统

Dijit是建立在Dojo上的小部件系统。小部件，或称Dijit组件，是用于HTML和JavaScript语言建立起来的用户界面控件。你可以向HTML标签里添加一个简单的”dojoType=属性”来创建小部件。用这种方法添加表单功能显然是简单不过了。Dijit确实很强大！整个Dijit有超过40个图形控件。

2.1 组件

1. Dijit.layout.ContentPane组件，用于存放单个选项卡的数据。每个ContentPane都有一个显示显示在选项卡上的标签。

<label for=”first_name”>First Name:</label>

… …

</div>

2. Dijit.layout.TabContainer组件，用于存放一组ContentPane.

<div class=”formContainer” dojoType=”dijit.layout.TabContainer” style=”width:600px;height=600px”> //高度样式是必须的。

2.2 增强表单控制

2.2.1 验证字段

验证已经成为了最普遍的JavaScript应用。Dijit则更进一步，仅仅通过HTML的属性就可以实现一些流行的验证器，而不需要可见的JavaScript代码。如下：

dojo.require(“dijit.form.ValidationTextBox”);

Require=”true”;//让此字段为必填。

Trim=”true”;//自动去除输入框中头尾的空格。

Propercase=”true”;//当前输入框变化时，首字母变成大写，其余的变为小写。

regExt=”.*@.*”;//验证Email地址。

2.2.2 简单输入日期

dojo.require(“dijit.form.DateTextBox”);

3 调试

如果浏览器是firefox,则使用firebug。或许Firebug最吸引人的特点是JavaScript控制台。Firebug公开了一些控制台API，使用它们你可以在自己的页面中记录日志。这个控制台还允许你输入或粘贴JavaScript代码并即时运行。你可以方便的变化环境，而且往往会因此大幅缩短开发新功能或调试错误的时间。Firebug的DOM树、CSS样式、布局查看工具是如此方便，以至于你不再需要把信息和对象转存到控制台或以编程方式更改属性和样式。最后，Firebug是个功能完备的JavaScript调试工具，拥有完整的栈和变量检查、断点和逐步测试功能。

如果使用的是IE等，使用Firebug Lite。如下：

在正式的应用程序里要把isDebug标志关闭。