`
seandeng888
  • 浏览: 158172 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

dojo之初体验

阅读更多

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工具包和样式文件:

<style type=”text/css”>

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

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

</style>

<script type=”text/javascript” src=”/dojoroot/dojo/dojo.js” djConfig=”parseOnLoad”true”></script>  //使用声明式的Dojo元素。

1.2              为body标签设置样式类

<body class=”tundra”>

1.3              添加dojo.require语句

<script type=”text/javascript”>

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都有一个显示显示在选项卡上的标签。

<div dojoType=”dijit.layout.ContentPane” title=”Personal Data”>

<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”);

<input type=”text” name=”firstName” id=”firstName” dojoType=”dijit.form.ValidationTextBox” trim=”true” propercase=”true” required=”true” invalidMessage=”You must enter your first name”/>

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

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

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

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

2.2.2      简单输入日期

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

<input type=”text” name=”dateMove” id=”dateMove” size=”11” dojoType=”dijit.form.DateTextBox” />

3       调试

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

如果使用的是IE等,使用Firebug Lite。如下:

<script type=”text/javascript” src=”/dojoroot/dojo/dojo.js” djConfig=”parseOnLoad:true,isDebug:true”></script>

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

0
0
分享到:
评论

相关推荐

    基于J2EE的Ajax宝典.docx

    **第二章 Ajax初体验**中,作者通过一个聊天室的实例展示了Ajax的应用。传统JSP聊天室需要每次新消息到来时整个页面刷新,而采用Ajax技术的聊天室则可以仅更新聊天内容,避免了多余的页面刷新,提高了效率。书中详细...

    移动终端应用开发(HTML5)报告

    - **典型业务场景**:调研发现,信息推送与订阅、报表信息展示与交互等功能是用户最关心的核心需求之一。特别是在iOS、Android和Windows Mobile等主流智能终端上的应用开发更是受到广泛关注。 #### (三)技术价值...

    四种流行的AJAX框架.doc

    - **简介**:jQuery是由John Resig于2006年初创建的JavaScript库,旨在简化DOM操作和AJAX通信。它适用于初级和高级开发者,无论您是新手还是经验丰富的JavaScript专家,jQuery都能提供简洁易读的代码。 - **特点**...

    Jqueryrumrn

    - **广泛的浏览器支持**:JQuery 在设计之初就充分考虑了跨浏览器兼容性问题,确保在各种浏览器环境下都能正常运行。 - **丰富的插件生态**:JQuery 社区庞大,拥有大量的第三方插件和组件,极大地方便了开发者的...

    Ajax 修炼之道 Web 2.0 入门 2007

    通过阅读《Ajax修炼之道:Web 2.0入门 2007》,开发者能够掌握Ajax技术,从而构建出更加互动、高效的Web应用程序,为用户提供更加流畅的浏览体验。同时,书中的案例和实践指导也能帮助读者将理论知识转化为实际操作...

    Pragmatic Ajax - A Web 2.0 Primer

    Ajax是21世纪初互联网技术的一次重大飞跃,它使得网页无需刷新即可实现数据的动态更新,极大地提升了用户体验。这本书旨在帮助开发者理解Ajax的基本原理,掌握其实施技巧,并将其有效地应用到Web 2.0项目中。 Ajax...

    struts学习学习

    Struts 2具有强大的插件扩展性,例如Struts2-dojo-plugin用于集成Dojo库,Struts2-convention-plugin简化了Action的配置,还有其他如Struts2-json-plugin、Struts2-spring-plugin等,极大地丰富了框架的功能。...

    ajax in action(中文版)

    Ajax,全称Asynchronous JavaScript and XML(异步JavaScript与XML),是21世纪初Web开发领域的一项革命性技术,它允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容,极大地提升了用户体验。...

Global site tag (gtag.js) - Google Analytics