认识Dojo中的界面控件：Dijit

Dojo框架区别于其他Ajax框架的一个显著特征就是它的界面控件系统：Dijit。Dijit是Dojo中界面控件的总称，他们使用灵活而且易于理解。每个Dijit控件都是由Dojo类以及控件中使用的图片，CSS等资源文件共同组成。通过Dijit架构，可以方便的创建灵活、可扩展、可定制外观的控件。下面将逐步介绍如何创建、配置Dijit控件，从而将其用在自己的web应用中。

 

开始使用Dijit：引入需要的类和资源

 

前面提到Dijit的组成中除了Dojo类，还有图片和CSS。这些外观是通过Dojo框架的主题来提供的，Dojo包含了4个主题，分别是：nihilo, soria, tundra和claro，其中claro是最新的Dojo1.5新增加的一个外观主题。每个主题中都包含了用于定义控件外观的css和图片文件。因此，为了使用某一个主题，我们首先需要将其导入到Web页面中：

<style type="text/css"><!-- /* use the tundra theme */ @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css"; /* Note that if you don’t specify a minor revision, e.g. 1.5.0 or 1.4.3, the CDN will deliver the latest version */ </style>

 

当然，这个地址你也可以用你自己的： @import "dojoroot/dijit/themes/tundra/tundra.css";

你可以用Dijit的主题查看器 来查看每个主题的外观，本地也可以访问到这个主题查看器：<dojoroot>/dijit/themes/themeTester.html，你也可以定义自己的主题。

除了引入样式文件，当然还要引入Dojo核心本身，和其他类库一样，需要引入一个js文件。但Dojo中可以在引用js文件的同时对其进行参数配置。这里有一个比较重要的就是parseOnLoad参数。这个参数使得在页面载入完成之后自动解析页面上的所有Dijit控件。因此，引入Dojo核心库的代码如下：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js.uncompressed.js" djConfig="parseOnLoad:true"></script>
同理，这里的dojo.js文件你也可以直接使用本地文件。

引入Dojo核心之后，你还需要引入你所用到的控件的代码文件，这是通过dojo.require语句完成的。例如，你需要在页面上使用一个按钮控件：dijit.form.Button，那么你就需要在页面载入的最开始加入：dojo.require('dijit.form.Button')。这个和java的import语句或者.net中using语句的作用是类似的。

准备工作完成之后，下面我们来看如何使用dojo控