struts结合Dojo

1、Struts2内置对dojotoolkit的支持TODO 基于Ajax标签做更详细的使用讲解，由于dojo ajax标签在struts2中还处于试验阶段，所以我们主要讲解dojo在不使用struts2内置功能的情况下怎么和struts2结合使用。Dojotoolkit介绍Dojotoolkit是当前比较流行的JavaScript框架，dojo主要提供了以下功能：Java Script Web组件（例如Tree，Grid，Button，Menu等），事件处理框架，Ajax异步调用等功能，非常好用。Dojo现在主要有两个版本： 现在流行的版本，优点是，功能非常强大，非常稳定，缺点是类库本身比较低，

2、执行效率较低0.9 beta是新的版本，是为了保留的有点同时提升性能而重写的一个版本，但是现在还处在beta阶段，bug相会还比较多。但是系列绝对是将来的发展方向。我们主要以0.9 beta版本为讲解对象，主要讲解以下内容：Widget组件，事件处理，Ajax等功能。但是情大家注意，dojo的功能远不止这么多。Dojo安装1 从下述网站下载dojo0.9 beta压缩文件2 在你的Web项目目录中建立一个名字叫做js的目录（名字任意，这里叫js）3 将压缩文件在上面建立的目录中解压缩，得到如下文件结构：4 打开浏览器，在地址栏中输入如下内容： http:/hostname:port/js/do

3、jo-beta/dijit/themes/themeTester.html 如果看到如下页面说明安装成功：Dojo Widget 组件我们回头看/themeTester.html 画面，上面的组件要比HTML默认的组件漂亮很多。他们都是使用dojo的widget（又叫dijit）来完成的。Dojo widget在目录dijit中。下面我们使用一个小例子还逐步的说明dijit的使用方法，通过如下步骤，我们将todo的insert画面改编为dijit组件。我们有一个小小的Todo输入的页面，静态的效果如下：这里有很多地方不是很方便，例如：1 日期能不能出现一个日历选择对话框，只要选择就好？2 日期

4、能不能自动校验，例如如果输入，2007/02/29可以判断为错误日期？3 时间需要校验，需要校验格式（HH:mm:ss）和数字内容例如不会有25:89:60。4 下拉列表能不能支持手工编写？能不能支持根据已经输入的值自动过滤选择项？5 能否让系统提示必须填入项目？通过使用dojo的dijit组件这些都可以做到，并且dijit组件有两种使用方式：标签和JS编程动态实现。无论那种方式实现都需要了解一些基本的步骤：第一步，由于dojo是JavaScript编写的，所以第一步必须首先引用dojo框架的JavaScript，同时dojo提供了一些初始化配置，可以在引用dojo的时候同时配置，代码如下：s

5、cript type=text/javascript src=/dojo- djConfig=isDebug: true, parseOnLoad: true其中src指向的是dojo在web项目中的存放路径。djConfig是dojo追加的自定义属性，在HTML标准里并没有。使用djConfig可以做一些基本的配置，isDebug表示了当前页面中使用的dojo内容是否处在调试状态，在调试状态可以输出更多的内容，一般开发的时候我么选择true。parseOnLoad表示所有的dijit组件是否在html页面装载的时候自动的做展现（Render）处理，使用dijit组件的时候我们选择true，没

6、有使用的时候使用false可以获得更好的性能。第二步，引用需要使用的dojo类，这一步有些像Java中的import，注意添加引用的类会增加页面加载是JavaScript的下载量，所以应该尽量的精简引用的dojo对象。代码为： dojo.require(dijit.form.ValidationTextbox); dojo.require(dijit.form.DateTextbox); dojo.require(dijit.form.ComboBox); dojo.require(dijit.form.Button); dojo.require(dijit.form.Textbox); do

7、jo.require(dijit.form.NumberTextbox); dojo.require(dijit.form.CurrencyTextbox); dojo.require(dojo.currency); dojo.require(dojo.date.locale); dojo.require(dojo.parser);上述的代码说明了我们需要在后续的代码中使用的dojo组件。第三步，引用需要使用的CSS文件，由于dojo使用CSS实现了主题的概念，所以我们在使用dojo的时候一定要选择合适的主题。代码为：import /teamware/dojo-beta/dojo/resour

8、ces/dojo.css;import /teamware/dojo-beta/dijit/themes/dijit.css;import /teamware/dojo-beta/dijit/themes/tundra/tundra.css;当然，也可以加入自己的内容，自定以主题。默认的主题时tundra主题。另外需要注意，使用主题的时候需要在html的body元素上使用class属性，代码为：第四步（标签），使用dojo的dijit组件。所有的组件都有一个dojo自定义的属性dojoType，dojoType决定了这个组件的dijit类型。例如：日期组件这里dojoType=”dijit.f

9、orm.DateTextbox”，表示这个组件的类型为DateTextbox类型，具体表现形式为：时间组件：具体表现形式为：第四步（JS编程动态实现），使用dojo的dijit组件。在使用Struts2的过程中，为了方便操作，我们一般使用Struts2的内置标签，例如：等。但是使用这些标签有一个问题，这些标签都是Struts2的标签，在定制这些标签的时候没有考虑到dojo，所以这些标签中不能使用dojoType属性，所以要想在Struts2中要想使用dojo，就得：要么放弃这些好用的Struts2标签，要么，就是我们要讲的使用JS动态的使用dojo。例如，我们有了如下的JSP页面（只讲述for

10、m部分），其中使用了struts2标签： 那么我们如何使用JavaScript来动态的使用Dojo呢？基本原理如下：（1） 构造组件需要使用的dojo属性（2） 找到需要套用dojo组件的HTML 元素，使用前面定义的属性建立新的替代组件，例如，现在要将替换为类型，代码为：var paramsStartDate = required: true, constraints: selector: date, formatLength: short, datePattern: yyyy-MM-dd, timePattern: HH:mm:ss, locale: zh-cnvar startDateT

11、ext = new dijit.form.DateTextbox(paramsStartDate, document.getElementById(startDate);首先我们定义了一个Map型的对象paramsStartDate用来存储我们在构建dijit组件时使用的属性和值。之后我们使用的构造方法来创建dojo类型的组件。但是需要注意一点，上述代码必须在HTML页面load的时候执行，否则无法正常创建dojo组件，这里我们使用了dojo对象的addOnLoad方法吧这段代码加入到HTML页面load时运行的代码中。全部的JavaScript代码如下： dojo.addOnLoad( fu

12、nction () var paramsStartDate = required: true, constraints: selector: date, formatLength: short, datePattern: yyyy-MM-dd, timePattern: HH:mm:ss, locale: zh-cn var startDateText = new dijit.form.DateTextbox(paramsStartDate, document.getElementById(startDate); /* init start time */ var paramsStartTim

13、e = value: 08:30:00, validator: dojo.date.locale.parse, constraints: formatLength: short, selector: time, timePattern: HH:mm:ss, trim: true, required: true,invalidMessage: Invalid time. Use HH:mm:ss where HH is 00 - 23 hours. var startTimeText = new dijit.form.ValidationTextbox(paramsStartTime, docu

14、ment.getElementById(startTime); /* init title */ var paramsTitleText = required: true, promptMessage: Enter a Title var titleText = new dijit.form.ValidationTextbox(paramsTitleText, document.getElementById(title); ); Dojo事件处理JavaScript中使用事件的方式为： function foo() alert(Hello!); Hello!上述代码表示firstButton被

15、点击（onclick）的时候，触发foo()方法。使用上述方式很简单，但是存在不好的地方，所有的画面表示内容（例如标签）会和事件处理（onclick=”foo();”）关联起来。当画面事件处理比较简单的时候，这个缺点体现不出来，但是当画面时间比较多，并且经常需要调整JavaScript方法和表示内容的时候就会暴露出来修改比较困难的问题。可以使用connect将JavaScript方法和表示组件联合起来，例如：dojo.addOnLoad( function() dojo.connect(dojo.byId(firstButton), onclick, foo); );上述的代码表示将first

16、Button的onclick事件和foo方法联系起来，当firstButton被点击的时候会触发foo方法。这里就解决了画面表示内容（例如标签）和事件处理之间关联的问题。我们可以在onLoad方法内部将所有的关联链接起来。Event Object 说明我们接着dojo.connect方法说，能不能在JavaScript方法内部看到事件的详细信息？我们把事件的相关信息认为Event Object对象，例如，在做方法的时候，我们可以使用一个dojo的内置对象叫做EventObjectEventObject属性：event.target 触发事件的HTML元素（the element that ge

17、nerated the event）event.currentTarget 当前的Target（the current target）event.layerX 跟currentTarget相关的X坐标（ the x coordinate, relative to the event.currentTarget）event.layerY 跟currentTarget相关的Y坐标（ the y coordinate, relative to the event.currentTarget ）event.pageX 当前View Point的X坐标（the x coordinate, relativ

18、e to the view port）event.pageY 当前View Point的Y坐标the y coordinate, relative to the view port event.relatedTarget 对于onmouseover and onmouseout 时间，指鼠标进入或者退出的对象。（For onmouseover and onmouseout, the object that the mouse pointer is moving to or out of）event.charCode 针对于keypress时间表示key code（ For keypress e

19、vents, the character code of the key pressed ）EventObject方法：event.preventDefault 阻止了时间的默认行为（ prevent an events default behavior (e.g., a link from loading a new page) ）event.stopPropagation 阻止了父Node的事件触发（ prevent an event from triggering a parent nodes event）例如：function echo(event) key = event.charC

20、ode; console.debug(event.charCode);function foo(event) dojo.stopEvent(event); console.debug(The link was clicked);dojo.addOnLoad(function() interactiveNode = dojo.byId(interactive); linkNode = dojo.byId(link); dojo.connect(interactiveNode, onkeypress, echo); dojo.connect(linkNode, onclick, foo);); D

21、ojo is great. Type some text: Dijit组件和Event TODOTopicTODODojoAjax异步调用HelloWorld Dojo Ajax 程序我们做一个画面，在画面中使用ajax从服务器中取得动态的内容，将这些内容显示在页面中。首先我们在服务器上做一个txt文件，例如文件为ajax.txt，内容为：Hello World!This is a simple ajax text file.然后做一个jsp画面，其中有一个div内容从服务器上的ajax.txt文件取得，代码为：Ajax Hello World!script type=text/javascr

22、ipt src=/dojo- function hello() dojo.xhrGet( / The following URL must match that used to test the server. url: http:/localhost:8080/teamware/test/ajax.txt, handleAs: text, timeout: 5000, / Time in milliseconds / The LOAD function will be called on a successful response. load: function(response, ioAr

23、gs) dojo.byId(cargo).innerHTML = response; return response; ,/ The ERROR function will be called in an error case. error: function(response, ioArgs) console.error(HTTP status code: , ioArgs.xhr.status); return response; ); dojo.addOnLoad(hello); 说明：引入dojo框架把方法hello注册到onload中，当画面全部装载以后运行该方法。Ajax方法，取得

24、服务器ajax.txt的内容，在cargo div中显示这些内容。指向ajax.txt的url路径。服务器文件类型错误处理第十五章 AJAX JQueryJQuery是另外一个非常流行的JavaScript框架，相对于Dojo来说JQuery更加的轻便，JQuery代码文件的大小为20kb，但是丝毫没有影响到JQuery的强大功能，也许在了解JQuery之后你会有更深刻的体会。并且JQuery使用了插件的体系结构，开发人员可以在JQuery的基础上利用插件的机制扩展JQuery的功能。和JQuery详细的JavaScript框架有Prototype，虽然Prototype和也可以制作出强大的功

25、能的页面。但是我更喜欢JQuery的简介方式和强大的插件群。JQuery官方网站: Prototype官方网站: 官方网站: JQuery核心只有一个文件，其中表示了文件的版本，现在最新的版本为.1。并且为了提高jquery的下载效率，官方网站提供了一个压缩版本的文件，这个文件只有20kb。安装jqueyr只需要将拷贝到对应web项目的javascript脚本目录即可。JQuery 核心Onload 使用我们有些时候需要在页面初始化完成的时候调用一些JavaScript预处理操作，例如设置某些Button不可用等，这个时候我们通常有两种选择。第一：第二：window.onload = some

26、Function;上述代码意义相同，都会在页面初始化完成之后执行someFunction这个预先定义的JavaScript函数。但是，页面初始化完成到底是什么含义呢？页面初始化完成意味着页面全部被浏览器显示，也就是说所有的image都加载完成。有些时候这个过程非常的常，有些时候我们可以看到有些网站的button先是可用，后来等所有页面显示之后又不可用了就是这个原因。那么我们到底在什么时候执行someFunction是比较合适的呢？我们倾向于页面的全部document内容被加载，而不是所有内容正确显示之后别调用。以img为例说明上述的区别，例如当上述字面内容被浏览器下载完成时，我们可以说img被

27、加载了，当指向的内容被下载并且被正确显示之后，可以说img被正确显示了。如何使用JQuery来达到页面内容别加载就执行someFunction？$(document).ready(someFunction);$()是什么？$()是JQuery的核心方法，$()方法有几种不同的调用方式，但是这几种方式都有一个共通的特点，就是通过$()方法，可以将一个普通的HTML DOM对象（p, div, body, doucment等）封装成为一个特殊的，增强了JQuery功能的JQuery对象。说道这里大家可能会知道了JQuery其实相当于一个对象，一个封装了不同HTMLDOM对象的对象。$(string

28、) 凭空创建一个JQuery包装起来的HTML DOM对象，例如： $(Hello).appendTo(body)上述代码建立了一个Hello段，Hello段在一个div内部，之后将这个div追加到了doby内部。$( elems ) 讲一个已经存在的HTML DOM对象包装为JQuery对象，例如： $(document.body).css( background, black ); 上述代码把body的background设置为black $( myForm.elements ).hide() 隐藏myForm中所有的对象$( function)$(document).ready(func

29、tion)的简写，总共有三种方法让一个function在dom初始化完成之后被调用： $(document).ready(function) $( function) JQuery(function)$( expr, context )在上下文（）中查找表达式（）所只是的对象，context不存在的情况下在document上下文中查找，例如：DOM对象： one two three调用： $(div p)结果： two$(input:radio, document.forms0)查找第一个form中的所有redio类型的输入框。$(div, xml.responseXML)查找指示的XML文件

30、内容中所有的div项。扩展JQuery的功能可以使用$.fn.extend( prop )来扩展JQuery提供的功能，例如，JQuery并没有提供check和uncheck方法，但是我们可以通过如下的代码扩展JQquery，使JQuery增加check和uncheck功能：jQuery.fn.extend( check: function() return this.each(function() this.checked = true; ); , uncheck: function() return this.each(function() this.checked = false; );

31、 );之后我们可以选择一个对象来使用扩展的check和uncheck方法，例如：$(inputtype=checkbox).check();$(inputtype=radio).uncheck();解决和其他框架的冲突$在JQuery中有着特殊的含义，但是有些时候我们的项目已经集成了其他的框架）（例如Prototype），在其他框架中$已经被使用了，那么我们怎么消除JQuery对$指定的特殊含义呢？我们可以使用jQuery.noConflict()方法，在调用这个方法之后，$已经不在具有我们前面说的JQuery赋予的功能，所以所有的后续代码必须使用JQuery调用，例如：jQuery.noCo

32、nflict(); / 调用JQuery的方法 jQuery(div p).hide(); / 调用其他框架的$()方法 $(content).style.display = none;我们也可以指定自己喜欢的名字来替换$，例如：var j = jQuery.noConflict();/ 调用jQuery的方法j(div p).hide();/ 调用其他框架的 $( ) 方法$(content).style.display = none;其他常用方法each( fn ) 这对数组中的每一个对象调用fn方法。例如： HTML DOM代码： 调用方法： $(img).each(function(i

33、) this.src = test + i + .jpg;); 结果： eq( pos ) 定位具体的HTML DOM对象 HTML DOM代码：This is just a test.So is this 调用方法： $(p).eq(1) 结果： So is thisget( pos ) 定位具体的HTML DOM对象（脱掉了JQuery的包装，原始的DOM对象） HTML DOM代码： 调用方法： $(img).get( num ) 结果： get() 针对所有的对象，脱掉了JQuery的包装，获取原始的DOM对象 HTML DOM代码： 调用方法： $(img).get() 结果： gt

34、( pos ) 取出pos之后的所有对象 HTML DOM代码： 调用方法： $(img).gt(0) 结果： index( subject ) 找到subject在数组中对应的index，不存在时返回-1 HTML DOM代码： 调用方法： $(*).index( $(#foobar)0 ) 结果： 0Length 返回对象数组的长度。 HTML DOM代码： 调用方法： $(img).length 结果： 2lt( pos ) 与gt相反 HTML DOM代码：This is just a test.So is this 调用方法： $(p).lt(1) 结果： This is just

35、a test.size() 与length相同JQuery HTML DOM遍历和选择器JQuery的功能很强大，可以包装任何一个HTML DOM元素添加强大的功能，那么如何找到需要的元素呢？这就需要JQuery Selector来帮慢，原理上讲，JQuery Selector可以超找到HTML DOM里的任何元素JQuery Selector主要包含三个方面的实现：CSS方式，XPath方式，和JQuery自定义的方式。为了逐个讲解这些Selector，首先给大家一些基本的例子：隐藏所有包含链接（a）的段（p）：$(pa).hide();显示一个页面的第一个段（p）：$(p:eq(0).sh

36、ow();将所有显示（visible=true）的div隐藏：$(div:visible).hide();所有无须列表（ul）的项目（li）：$(ul/li)或者 $(ul li) */获得所有class类型为foo，并且包含链接（a）的段：$(p.fooa);获得所有字符内容包含Register的项目（li）$(lia:contains(Register);得到name=bar的输入项目的值： $(inputname=bar).val();获得所有被选中的button：$(inputtype=radiochecked)CSS方式JQuery的CSS方式的Selector支持CSS1-CSS3标准。与CSS中的实现完全一致的：* 任何的元素E 任何类型为E的元素E:nth-child(n) E元素的第n个子元素E:first-child E的第一个子元素E:last-child E的最后一个元素E:only-child E的唯一的子元素E:empty E没有子元素，也不能包含text内容E:e