- 浏览: 1652414 次
- 性别:
- 来自: 福州
文章分类
- 全部博客 (583)
- strust2.0 (14)
- hibernate2.0 (5)
- java (13)
- javaScript (59)
- AJAX (8)
- TFS (6)
- 其它 (20)
- CSS (23)
- asp (18)
- Dojo (5)
- 项目管理 (3)
- SQLServer (25)
- oracle (26)
- .NET (221)
- 开源系统 (6)
- 常识 (41)
- 软件架构 (1)
- My SQL (1)
- SilverLight (10)
- Flex (1)
- window7 (1)
- 网络安全 (2)
- CMS (1)
- ECShop (4)
- 邮件系统 (9)
- Linq (0)
- 淘宝店铺经营宝典 (0)
- flash插件 (1)
- Hubble.net全文检索 (1)
- 在线编辑器 (1)
- 正则表达式 (1)
- 创业 (1)
- asp.net mvc (1)
- 全文检索 (0)
- 全文检索 HubbleDotNet (1)
- Android (27)
- TFS bin (1)
最新评论
-
z小小Jean:
有具体的解决方法吗
用命名imp导入DMP时报无法解析指定的连接标识符的解决办法 -
njoiop:
这些都是常用接口,IP地址、手机归属和身份证查询接口,基站定位 ...
IP地址、手机归属和身份证查询接口 -
Fs_sky:
那导出DMP如何包含序列等其他东西?
在plsql中如何导出dmp文件 -
qiywtc:
请问该怎么判断视频的格式再选择对应的播放格式来播放啊?
asp.net各种类型视频播放代码(全) -
xinghenhouzi:
楼主说的版本不同无法导入导出是什么意思?我用10g的exp.e ...
在plsql中如何导出dmp文件
Struts2内置对dojotoolkit的支持
@TODO 基于Ajax标签做更详细的使用讲解,由于dojo ajax标签在struts2中还处于试验阶段,所以我们主要讲解dojo在不使用struts2内置功能的情况下怎么和struts2结合使用。
Dojotoolkit介绍
Dojotoolkit是当前比较流行的JavaScript框架,dojo主要提供了以下功能:Java Script Web组件(例如Tree,Grid,Button,Menu等),事件处理框架,Ajax异步调用等功能,非常好用。
Dojo现在主要有两个版本:
0.4.3 现在流行的版本,优点是,功能非常强大,非常稳定,缺点是类库本身比较低,执行效率较低
0.9 beta是新的版本,是为了保留0.4.3的有点同时提升性能而重写的一个版本,但是现在还处在beta阶段,bug相会还比较多。但是0.9系列绝对是将来的发展方向。
我们主要以0.9 beta版本为讲解对象,主要讲解以下内容:Widget组件,事件处理,Ajax等功能。但是情大家注意,dojo的功能远不止这么多。
Dojo安装
1 从下述网站下载dojo0.9 beta压缩文件
http://dojotoolkit.org/downloads
2 在你的Web项目目录中建立一个名字叫做js的目录(名字任意,这里叫js)
3 将压缩文件在上面建立的目录中解压缩,得到如下文件结构:
4 打开浏览器,在地址栏中输入如下内容:
http://hostname:port/js/dojo-0.9.0beta/dijit/themes/themeTester.html
如果看到如下页面说明安装成功:
<!--[if !vml]--><!--[endif]-->
Dojo Widget 组件
我们回头看/themeTester.html 画面,上面的组件要比HTML默认的组件漂亮很多。他们都是使用dojo的widget(又叫dijit)来完成的。
Dojo widget在目录dijit中。
下面我们使用一个小例子还逐步的说明dijit的使用方法,通过如下步骤,我们将todo的insert画面改编为dijit组件。
我们有一个小小的Todo输入的页面,静态的效果如下:
<!--[if !vml]--><!--[endif]-->
这里有很多地方不是很方便,例如:
1 日期能不能出现一个日历选择对话框,只要选择就好?
2 日期能不能自动校验,例如如果输入,2007/02/29可以判断为错误日期?
3 时间需要校验,需要校验格式(HH:mm:ss)和数字内容例如不会有25:89:60。
4 下拉列表能不能支持手工编写?能不能支持根据已经输入的值自动过滤选择项?
5 能否让系统提示必须填入项目?
通过使用dojo的dijit组件这些都可以做到,并且dijit组件有两种使用方式:标签和JS编程动态实现。
无论那种方式实现都需要了解一些基本的步骤:
第一步,由于dojo是JavaScript编写的,所以第一步必须首先引用dojo框架的JavaScript,同时dojo提供了一些初始化配置,可以在引用dojo的时候同时配置,代码如下:
<script type="text/javascript"
src="<%= request.getContextPath()%>/dojo-0.9.0beta/dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true">
</script>
其中src指向的是dojo在web项目中的存放路径。
djConfig是dojo追加的自定义属性,在HTML标准里并没有。使用djConfig可以做一些基本的配置,isDebug表示了当前页面中使用的dojo内容是否处在调试状态,在调试状态可以输出更多的内容,一般开发的时候我么选择true。parseOnLoad表示所有的dijit组件是否在html页面装载的时候自动的做展现(Render)处理,使用dijit组件的时候我们选择true,没有使用的时候使用false可以获得更好的性能。
第二步,引用需要使用的dojo类,这一步有些像Java中的import,注意添加引用的类会增加页面加载是JavaScript的下载量,所以应该尽量的精简引用的dojo对象。代码为:
<script type="text/javascript"> 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"); dojo.require("dijit.form.NumberTextbox"); dojo.require("dijit.form.CurrencyTextbox"); dojo.require("dojo.currency"); dojo.require("dojo.date.locale"); dojo.require("dojo.parser");</script>上述的代码说明了我们需要在后续的代码中使用的dojo组件。
第三步,引用需要使用的CSS文件,由于dojo使用CSS实现了主题的概念,所以我们在使用dojo的时候一定要选择合适的主题。代码为:
<style type="text/css">@import "/teamware/dojo-0.9.0beta/dojo/resources/dojo.css";@import "/teamware/dojo-0.9.0beta/dijit/themes/dijit.css";@import "/teamware/dojo-0.9.0beta/dijit/themes/tundra/tundra.css";</style>当然,也可以加入自己的内容,自定以主题。默认的主题时tundra主题。
另外需要注意,使用主题的时候需要在html的body元素上使用class属性,代码为:
<body class="tundra">
第四步(标签),使用dojo的dijit组件。
所有的组件都有一个dojo自定义的属性dojoType,dojoType决定了这个组件的dijit类型。例如: 日期组件<input id="startDate" type="text" name="todo.startDate" class="medium" value="2005-12-30" dojoType="dijit.form.DateTextbox" constraints={min:'2004-01-01',max:'2006-12-31'} required="true" promptMessage="mm/dd/yyyy" invalidMessage="Invalid date. Use mm/dd/yyyy format." />这里dojoType=”dijit.form.DateTextbox”,表示这个组件的类型为DateTextbox类型,具体表现形式为:
<!--[if !vml]--><!--[endif]-->
时间组件:
<input id="startTime" type="text" name="todo.startTime" class="medium" value="5:45:00 pm" dojoType="dijit.form.ValidationTextbox" validator="dojo.date.locale.parse" constraints={formatLength:'medium',selector:'time'} trim="true" required="true" invalidMessage="Invalid time." />
具体表现形式为:
<!--[if !vml]--><!--[endif]-->
第四步(JS编程动态实现),使用dojo的dijit组件。
在使用Struts2的过程中,为了方便操作,我们一般使用Struts2的内置标签,例如:<s:text/>等。但是使用这些标签有一个问题,这些标签都是Struts2的标签,在定制这些标签的时候没有考虑到dojo,所以这些标签中不能使用dojoType属性,所以要想在Struts2中要想使用dojo,就得:要么放弃这些好用的Struts2标签,要么,就是我们要讲的使用JS动态的使用dojo。
例如,我们有了如下的JSP页面(只讲述form部分),其中使用了struts2标签:
<s:form action="insert" namespace="/todo">
<s:textfield id="startDate"
name="todo.startDate" label="Start Date" />
<s:textfield id="startTime"
name="todo.startTime" label="Start Time" />
<s:textfield id="endDate"
name="todo.endDate" label="End Date" />
<s:textfield id="endTime"
name="todo.endTime" label="Emd Time" />
<s:select list="%{#{'完成':'完成','未完成':'未完成'}}"
name="status" id="status" label="Status">
</s:select>
<s:select list="%{#{'高':'高','中':'中','低':'低'}}"
name="priority"
id="priority" label="Priority">
</s:select>
<s:select list="%{#{'个人':'个人','商务':'商务'}}"
name="category"
id="category" label="Category"></s:select>
<s:textfield id="title"
name="todo.title" label="Title"></s:textfield>
<s:textarea id="content"
name="todo.content" label="Content" cols="20"
rows="10"></s:textarea>
<s:submit id="insertButton" label="insert" />
</s:form>
那么我们如何使用JavaScript来动态的使用Dojo呢?
基本原理如下:
<!--[if !supportLists]-->(1) <!--[endif]-->构造组件需要使用的dojo属性
<!--[if !supportLists]-->(2) <!--[endif]-->找到需要套用dojo组件的HTML 元素,使用前面定义的属性建立新的替代组件,
例如,现在要将
<s:textfield id="startDate"
name="todo.startDate" label="Start Date" />
替换为dijit.form.DateTextbox类型,代码为:
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"));
首先我们定义了一个Map型的对象paramsStartDate用来存储我们在构建dijit组件时使用的属性和值。之后我们使用dijit.form.DateTextbox的构造方法来创建dojo类型的组件。
但是需要注意一点,上述代码必须在HTML页面load的时候执行,否则无法正常创建dojo组件,这里我们使用了dojo对象的addOnLoad方法吧这段代码加入到HTML页面load时运行的代码中。全部的JavaScript代码如下:
<script type="text/javascript">
dojo.addOnLoad(
function () {
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 paramsStartTime = {
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,
document.getElementById("startTime"));
/* init title */
var paramsTitleText = {
required: "true",
promptMessage: "Enter a Title"
}
var titleText =
new dijit.form.ValidationTextbox(paramsTitleText,
document.getElementById("title"));
}
);
</script>
Dojo事件处理
传统的使用JavaScript Event的方式和dojo.connect的方式
JavaScript中使用事件的方式为:
<script type="text/javascript">
function foo() {
alert("Hello!");
}
</script>
<button id="firstButton" onclick="foo();" >Hello!</button>
上述代码表示firstButton被点击(onclick)的时候,触发foo()方法。
使用上述方式很简单,但是存在不好的地方,所有的画面表示内容(例如<button>标签)会和事件处理(onclick=”foo();”)关联起来。当画面事件处理比较简单的时候,这个缺点体现不出来,但是当画面时间比较多,并且经常需要调整JavaScript方法和表示内容的时候就会暴露出来修改比较困难的问题。
Dojo.connect方法
可以使用connect将JavaScript方法和表示组件联合起来,例如:
dojo.addOnLoad(
function() {
dojo.connect(dojo.byId("firstButton"), "onclick", foo);
}
);
上述的代码表示将firstButton的onclick事件和foo方法联系起来,当firstButton被点击的时候会触发foo方法。
这里就解决了画面表示内容(例如<button>标签)和事件处理之间关联的问题。我们可以在onLoad方法内部将所有的关联链接起来。
Event Object 说明
我们接着dojo.connect方法说,能不能在JavaScript方法内部看到事件的详细信息?
我们把事件的相关信息认为Event Object对象,例如,在做方法的时候,我们可以使用一个dojo的内置对象叫做EventObject
EventObject属性:
event.target — 触发事件的HTML元素(the element that generated 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, relative 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 events, the character code of the key pressed )
EventObject方法:
event.preventDefault — 阻止了时间的默认行为( prevent an event's default behavior (e.g., a link from loading a new page) )
event.stopPropagation — 阻止了父Node的事件触发( prevent an event from triggering a parent node's event)
例如:
<script type="text/javascript">
function echo(event) {
key = event.charCode;
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);
});
</script>
<body>
<a href="http://dojotoolkit.org" id="link">Dojo</a> is great.
<form>
<label for="infield"> Type some text: </label>
<input id="interactive" type="text" name="infield">
</form>
</body>
Dijit组件和Event
@TODO
Topic
@TODO
DojoAjax异步调用
HelloWorld Dojo Ajax 程序
我们做一个画面,在画面中使用ajax从服务器中取得动态的内容,将这些内容显示在页面中。
首先我们在服务器上做一个txt文件,例如文件为ajax.txt,内容为:
Hello World!
This is a simple ajax text file.
然后做一个jsp画面,其中有一个div内容从服务器上的ajax.txt文件取得,代码为:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Hello World!</title>
<script type="text/javascript"
src="<%= request.getContextPath()%>/dojo-0.9.0beta/dojo/dojo.js">
<!-- ① -->
</script>
<script type="text/javascript">
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, ioArgs) { <!-- ⑦ -->
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;
}
});
}
</script>
<script type="text/javascript">
dojo.addOnLoad(hello); <!-- ② -->
</script>
</head>
<body>
<div id="cargo" style="font-size: big"></div> <!-- ③ -->
</body>
</html>
说明:
① 引入dojo框架
② 把方法hello注册到onload中,当画面全部装载以后运行该方法。
③ 显示ajax.txt文件内容的div
④ Ajax方法,取得服务器ajax.txt的内容,在cargo div中显示这些内容。
⑤ 指向ajax.txt的url路径。
⑥ 服务器文件类型
⑦ Ajax调用成功的情况下,调用的方法,包括将ajax.txt文件中的内容放在div中
⑧ 错误处理
@TODO 基于Ajax标签做更详细的使用讲解,由于dojo ajax标签在struts2中还处于试验阶段,所以我们主要讲解dojo在不使用struts2内置功能的情况下怎么和struts2结合使用。
Dojotoolkit介绍
Dojotoolkit是当前比较流行的JavaScript框架,dojo主要提供了以下功能:Java Script Web组件(例如Tree,Grid,Button,Menu等),事件处理框架,Ajax异步调用等功能,非常好用。
Dojo现在主要有两个版本:
0.4.3 现在流行的版本,优点是,功能非常强大,非常稳定,缺点是类库本身比较低,执行效率较低
0.9 beta是新的版本,是为了保留0.4.3的有点同时提升性能而重写的一个版本,但是现在还处在beta阶段,bug相会还比较多。但是0.9系列绝对是将来的发展方向。
我们主要以0.9 beta版本为讲解对象,主要讲解以下内容:Widget组件,事件处理,Ajax等功能。但是情大家注意,dojo的功能远不止这么多。
Dojo安装
1 从下述网站下载dojo0.9 beta压缩文件
http://dojotoolkit.org/downloads
2 在你的Web项目目录中建立一个名字叫做js的目录(名字任意,这里叫js)
3 将压缩文件在上面建立的目录中解压缩,得到如下文件结构:
4 打开浏览器,在地址栏中输入如下内容:
http://hostname:port/js/dojo-0.9.0beta/dijit/themes/themeTester.html
如果看到如下页面说明安装成功:
<!--[if !vml]--><!--[endif]-->
Dojo Widget 组件
我们回头看/themeTester.html 画面,上面的组件要比HTML默认的组件漂亮很多。他们都是使用dojo的widget(又叫dijit)来完成的。
Dojo widget在目录dijit中。
下面我们使用一个小例子还逐步的说明dijit的使用方法,通过如下步骤,我们将todo的insert画面改编为dijit组件。
我们有一个小小的Todo输入的页面,静态的效果如下:
<!--[if !vml]--><!--[endif]-->
这里有很多地方不是很方便,例如:
1 日期能不能出现一个日历选择对话框,只要选择就好?
2 日期能不能自动校验,例如如果输入,2007/02/29可以判断为错误日期?
3 时间需要校验,需要校验格式(HH:mm:ss)和数字内容例如不会有25:89:60。
4 下拉列表能不能支持手工编写?能不能支持根据已经输入的值自动过滤选择项?
5 能否让系统提示必须填入项目?
通过使用dojo的dijit组件这些都可以做到,并且dijit组件有两种使用方式:标签和JS编程动态实现。
无论那种方式实现都需要了解一些基本的步骤:
第一步,由于dojo是JavaScript编写的,所以第一步必须首先引用dojo框架的JavaScript,同时dojo提供了一些初始化配置,可以在引用dojo的时候同时配置,代码如下:
<script type="text/javascript"
src="<%= request.getContextPath()%>/dojo-0.9.0beta/dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true">
</script>
其中src指向的是dojo在web项目中的存放路径。
djConfig是dojo追加的自定义属性,在HTML标准里并没有。使用djConfig可以做一些基本的配置,isDebug表示了当前页面中使用的dojo内容是否处在调试状态,在调试状态可以输出更多的内容,一般开发的时候我么选择true。parseOnLoad表示所有的dijit组件是否在html页面装载的时候自动的做展现(Render)处理,使用dijit组件的时候我们选择true,没有使用的时候使用false可以获得更好的性能。
第二步,引用需要使用的dojo类,这一步有些像Java中的import,注意添加引用的类会增加页面加载是JavaScript的下载量,所以应该尽量的精简引用的dojo对象。代码为:
<script type="text/javascript"> 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"); dojo.require("dijit.form.NumberTextbox"); dojo.require("dijit.form.CurrencyTextbox"); dojo.require("dojo.currency"); dojo.require("dojo.date.locale"); dojo.require("dojo.parser");</script>上述的代码说明了我们需要在后续的代码中使用的dojo组件。
第三步,引用需要使用的CSS文件,由于dojo使用CSS实现了主题的概念,所以我们在使用dojo的时候一定要选择合适的主题。代码为:
<style type="text/css">@import "/teamware/dojo-0.9.0beta/dojo/resources/dojo.css";@import "/teamware/dojo-0.9.0beta/dijit/themes/dijit.css";@import "/teamware/dojo-0.9.0beta/dijit/themes/tundra/tundra.css";</style>当然,也可以加入自己的内容,自定以主题。默认的主题时tundra主题。
另外需要注意,使用主题的时候需要在html的body元素上使用class属性,代码为:
<body class="tundra">
第四步(标签),使用dojo的dijit组件。
所有的组件都有一个dojo自定义的属性dojoType,dojoType决定了这个组件的dijit类型。例如: 日期组件<input id="startDate" type="text" name="todo.startDate" class="medium" value="2005-12-30" dojoType="dijit.form.DateTextbox" constraints={min:'2004-01-01',max:'2006-12-31'} required="true" promptMessage="mm/dd/yyyy" invalidMessage="Invalid date. Use mm/dd/yyyy format." />这里dojoType=”dijit.form.DateTextbox”,表示这个组件的类型为DateTextbox类型,具体表现形式为:
<!--[if !vml]--><!--[endif]-->
时间组件:
<input id="startTime" type="text" name="todo.startTime" class="medium" value="5:45:00 pm" dojoType="dijit.form.ValidationTextbox" validator="dojo.date.locale.parse" constraints={formatLength:'medium',selector:'time'} trim="true" required="true" invalidMessage="Invalid time." />
具体表现形式为:
<!--[if !vml]--><!--[endif]-->
第四步(JS编程动态实现),使用dojo的dijit组件。
在使用Struts2的过程中,为了方便操作,我们一般使用Struts2的内置标签,例如:<s:text/>等。但是使用这些标签有一个问题,这些标签都是Struts2的标签,在定制这些标签的时候没有考虑到dojo,所以这些标签中不能使用dojoType属性,所以要想在Struts2中要想使用dojo,就得:要么放弃这些好用的Struts2标签,要么,就是我们要讲的使用JS动态的使用dojo。
例如,我们有了如下的JSP页面(只讲述form部分),其中使用了struts2标签:
<s:form action="insert" namespace="/todo">
<s:textfield id="startDate"
name="todo.startDate" label="Start Date" />
<s:textfield id="startTime"
name="todo.startTime" label="Start Time" />
<s:textfield id="endDate"
name="todo.endDate" label="End Date" />
<s:textfield id="endTime"
name="todo.endTime" label="Emd Time" />
<s:select list="%{#{'完成':'完成','未完成':'未完成'}}"
name="status" id="status" label="Status">
</s:select>
<s:select list="%{#{'高':'高','中':'中','低':'低'}}"
name="priority"
id="priority" label="Priority">
</s:select>
<s:select list="%{#{'个人':'个人','商务':'商务'}}"
name="category"
id="category" label="Category"></s:select>
<s:textfield id="title"
name="todo.title" label="Title"></s:textfield>
<s:textarea id="content"
name="todo.content" label="Content" cols="20"
rows="10"></s:textarea>
<s:submit id="insertButton" label="insert" />
</s:form>
那么我们如何使用JavaScript来动态的使用Dojo呢?
基本原理如下:
<!--[if !supportLists]-->(1) <!--[endif]-->构造组件需要使用的dojo属性
<!--[if !supportLists]-->(2) <!--[endif]-->找到需要套用dojo组件的HTML 元素,使用前面定义的属性建立新的替代组件,
例如,现在要将
<s:textfield id="startDate"
name="todo.startDate" label="Start Date" />
替换为dijit.form.DateTextbox类型,代码为:
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"));
首先我们定义了一个Map型的对象paramsStartDate用来存储我们在构建dijit组件时使用的属性和值。之后我们使用dijit.form.DateTextbox的构造方法来创建dojo类型的组件。
但是需要注意一点,上述代码必须在HTML页面load的时候执行,否则无法正常创建dojo组件,这里我们使用了dojo对象的addOnLoad方法吧这段代码加入到HTML页面load时运行的代码中。全部的JavaScript代码如下:
<script type="text/javascript">
dojo.addOnLoad(
function () {
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 paramsStartTime = {
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,
document.getElementById("startTime"));
/* init title */
var paramsTitleText = {
required: "true",
promptMessage: "Enter a Title"
}
var titleText =
new dijit.form.ValidationTextbox(paramsTitleText,
document.getElementById("title"));
}
);
</script>
Dojo事件处理
传统的使用JavaScript Event的方式和dojo.connect的方式
JavaScript中使用事件的方式为:
<script type="text/javascript">
function foo() {
alert("Hello!");
}
</script>
<button id="firstButton" onclick="foo();" >Hello!</button>
上述代码表示firstButton被点击(onclick)的时候,触发foo()方法。
使用上述方式很简单,但是存在不好的地方,所有的画面表示内容(例如<button>标签)会和事件处理(onclick=”foo();”)关联起来。当画面事件处理比较简单的时候,这个缺点体现不出来,但是当画面时间比较多,并且经常需要调整JavaScript方法和表示内容的时候就会暴露出来修改比较困难的问题。
Dojo.connect方法
可以使用connect将JavaScript方法和表示组件联合起来,例如:
dojo.addOnLoad(
function() {
dojo.connect(dojo.byId("firstButton"), "onclick", foo);
}
);
上述的代码表示将firstButton的onclick事件和foo方法联系起来,当firstButton被点击的时候会触发foo方法。
这里就解决了画面表示内容(例如<button>标签)和事件处理之间关联的问题。我们可以在onLoad方法内部将所有的关联链接起来。
Event Object 说明
我们接着dojo.connect方法说,能不能在JavaScript方法内部看到事件的详细信息?
我们把事件的相关信息认为Event Object对象,例如,在做方法的时候,我们可以使用一个dojo的内置对象叫做EventObject
EventObject属性:
event.target — 触发事件的HTML元素(the element that generated 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, relative 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 events, the character code of the key pressed )
EventObject方法:
event.preventDefault — 阻止了时间的默认行为( prevent an event's default behavior (e.g., a link from loading a new page) )
event.stopPropagation — 阻止了父Node的事件触发( prevent an event from triggering a parent node's event)
例如:
<script type="text/javascript">
function echo(event) {
key = event.charCode;
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);
});
</script>
<body>
<a href="http://dojotoolkit.org" id="link">Dojo</a> is great.
<form>
<label for="infield"> Type some text: </label>
<input id="interactive" type="text" name="infield">
</form>
</body>
Dijit组件和Event
@TODO
Topic
@TODO
DojoAjax异步调用
HelloWorld Dojo Ajax 程序
我们做一个画面,在画面中使用ajax从服务器中取得动态的内容,将这些内容显示在页面中。
首先我们在服务器上做一个txt文件,例如文件为ajax.txt,内容为:
Hello World!
This is a simple ajax text file.
然后做一个jsp画面,其中有一个div内容从服务器上的ajax.txt文件取得,代码为:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Hello World!</title>
<script type="text/javascript"
src="<%= request.getContextPath()%>/dojo-0.9.0beta/dojo/dojo.js">
<!-- ① -->
</script>
<script type="text/javascript">
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, ioArgs) { <!-- ⑦ -->
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;
}
});
}
</script>
<script type="text/javascript">
dojo.addOnLoad(hello); <!-- ② -->
</script>
</head>
<body>
<div id="cargo" style="font-size: big"></div> <!-- ③ -->
</body>
</html>
说明:
① 引入dojo框架
② 把方法hello注册到onload中,当画面全部装载以后运行该方法。
③ 显示ajax.txt文件内容的div
④ Ajax方法,取得服务器ajax.txt的内容,在cargo div中显示这些内容。
⑤ 指向ajax.txt的url路径。
⑥ 服务器文件类型
⑦ Ajax调用成功的情况下,调用的方法,包括将ajax.txt文件中的内容放在div中
⑧ 错误处理
相关推荐
Apache Struts Copyright 2000-2007 The Apache Software Foundation This product includes software developed by The Apache Software Foundation (http://www.apache.org/). Dojo (http://dojotoolkit.org/). ...
Apache Struts Copyright 2000-2011 The Apache Software Foundation This product includes software developed by The Apache Software Foundation (http://www.apache.org/). Dojo (http://dojotoolkit.org/). ...
6. **插件体系**:Struts2有一个强大的插件系统,可以轻松地扩展其功能,例如,Struts2-convention-plugin简化了Action和Action方法的配置,而Struts2-dojo-plugin提供了与Dojo JavaScript库的集成。 7. **表达式...
Apache Struts Copyright 2000-2011 The Apache Software Foundation This product includes software developed by The Apache Software Foundation (http://www.apache.org/). Dojo (http://dojotoolkit.org/). ...
Apache Struts Copyright 2000-2011 The Apache Software Foundation This product includes software developed by The Apache Software Foundation (http://www.apache.org/). Dojo (http://dojotoolkit.org/). ...
- **特点**: MochiKit 是一个功能丰富的 JavaScript 框架,支持 AJAX 操作和其他高级特性。 - **优势**: MochiKit 提供了一组模块化的工具集,使得开发人员可以根据项目需求选择所需的功能。 ### 6. Rialto - **...
描述中提到的链接指向了一个2008年的CSDN博客文章,虽然无法直接访问,但我们可以推断作者可能在文章中详细介绍了如何配置Struts2与Dojo,以及如何创建一个简单的表单,包含一个需要即时验证的字段。即时验证通常...
### 几种流行的AJAX框架介绍 #### 一、引言 随着Web 2.0技术的发展,异步JavaScript和XML(简称AJAX)成为构建动态网页应用的关键技术之一。AJAX框架则大大简化了这一过程,使得开发者能够更加轻松地创建高性能、...
dojotoolkit svn版本20130630 分卷1/2
dojotoolkit svn版本20130630 分卷1/2
jar包,官方版本,自测可用
Dojotoolkit是当前比较流行的JavaScript框架,dojo主要提供了以下功能:JavaScript Web组件(例如Tree,Grid,Button,Menu等),事件处理框架,Ajax异步调用等功能,非常好用。 Dojo现在主要有两个版本: 0.4.3 ...
- **单元测试支持**:通过内置工具,可以轻松地为代码编写命令行单元测试。 - **代码管理**:DOJO的包管理系统使得代码更易于维护,降低了代码之间的耦合度。 ##### 3. 多入口点和渲染支持 - **多入口点**:DOJO...
- **浏览器兼容性**: 框架是否支持目标浏览器(如IE、Firefox等)。 - **文档质量**: 是否拥有完善的文档,包括教程、API指南和代码示例等。 - **可扩展性**: 是否易于编写插件或自定义扩展。 - **API风格**: 是否...
Dojo Toolkit是一个功能丰富的JavaScript框架,包含大量的模块和组件,未经压缩的源码体积较大。为了在实际项目中高效利用Dojo,开发者通常会使用工具对Dojo的源码进行压缩。 JavaScript压缩通常有两种方式:代码...
Dojo 是一个功能强大的面向对象 JavaScript 框架,它能够帮助开发者构建高性能、跨平台的 Web 应用程序。本教程将详细介绍 Dojo 的核心概念、基本用法以及如何利用 Dojo 开发 Web 应用。 #### 一、Dojo 概览 Dojo ...
Struts2框架的源码可以通过以下地址获取: - `http://svn.apache.org/repos/asf/struts/struts2/trunk/struts2` - `http://svn.apache.org/repos/asf/struts/xwork/trunk/xwork` - `...
jar包,官方版本,自测可用
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,尤其在AJAX、DOM操作、动画效果以及模块化开发等方面表现卓越。"dojo-release-1.2.1-demos" 是一个针对Dojo 1.2.1版本的示例集合,非常适合...
2. **DOH测试框架**:DOH(Dojo Objective Harness)是Dojo内置的单元测试框架,用于确保代码的质量和稳定性。 3. **Widget系统**:Dojo提供了丰富的可复用UI组件,如按钮、表单控件、布局容器等,这些组件支持主题...