Dojo工具包使用说明.doc

Dojo工具包使用说明1相关资源官方网址:资源网站：Dojo手册(TheDojoManual)网址：/系统地介绍Dojo的机制，使用方法，示例代码等2Dojo邮件列表(TheDojoMailingLists)可以讨论交流在使用Dojo中遇到的问题，或希望改进的建议3Dojo错误跟踪系统(BugTracking)网址：/可以提交有效地发现bug，提交bug，以便能够及时地消除Dojo中的bug4代码仓库(TheDojoSubversionRepository)网址：/browser可以很方便地获得最新版本的Dojo程序包5TheDojoWiki网址：/DojoWiki的内容类别相对比较丰富，涉及到Dojo的各个方面。2各库功能简介codedojo.collections：很有用的集合数据结构（List、Query、Set、Stack、Dictionary.）dojo.crypto：实现加密功能的API（Blowfish、MD5、Rijndael、SHA.）dojo.date：无须编写复杂代码来显示日期和解析日期格式。dojo.dnd：拖放功能的辅助 API。我们将要建造一个支持拖放功能的应用。dojo.event：事件 动的API，支持AOP开发，以及主题/队列的功能。dojo.lfx：HTML和SVG 效果库。我们将在例子中使用这些效果。dojo.animation：基于DanPupius在动画方面的工作（http:/pupius.co.uk/js/Toolkit.Drawing.js）的动画 package（不再支持，应首选dojo.lfx）dojo.fx：不再支持，应首选dojo.lfxdojo.io：不同的IO 管道。cookie、IFrame、发布/订阅功能等等。所有神奇的Ajax工作都在这里完成。dojo.lang：对于整个JavaScript 环境进行增强的功能。包括你所希望拥有的很多特征，例如mixin、基于闭包（closure）的函数，以及大量的其他功能。dojo.logging：提供日志功能的框架dojo.math：数学函数（曲线、点、矩阵）dojo.reflect：提供反射功能的函数库dojo.rpc：与后端服务（例如理解 JSON语法的 Web 服务）进行通信dojo.storage：将数据保存在本地存储中（例如，在浏览器中利用 Flash的本地存储来实现）dojo.string：现在你可以对字符串进行如下的处理，修整、转换为大写、编码、esacpe、填充（pad）等等。dojo.undo：用来撤销用户操作的栈管理器dojo.uri：处理 URI的函数库dojo.widget：一个 widget 框架，允许你建造可重用的HTML/JavaScriptwidget，可以与简单的HTML 标记共同使用（例如，）。支持基于标记的应用开发（例如：XAML、XUL）dojo.xml、dojo.dom：帮助你处理DOM的辅助函数，以及其他的XML 辅助函数。我们将在这个例子中使用dojo.dom。dojo.style：CSS 功能，例如访问 style的大小、与浏览器的盒模型 合工作，以及更多的功能。/code3常用功能的使用进行介绍1.日期控件的使用包含文件： dojo.require(dojo.widget.*); 使用方法：参数说明：Id : 可通过dojo.widget.byId(foo).inputNode.value获得其值inputName 被填充的input框的name,在后台可通过request.getParameter(endDate);获得其值value,为初始值，today为可户客户端的当前时间事件捕捉： function test(rfcDate) alert(dojo.widget.byId(foo).inputNode.value); function ec() dojo.event.connect( dojo.widget.byId(foo).datePicker, setDate, test); dojo.addOnLoad(ec); 捕捉用户选择时间填充到input框时发生的事件2.在线excel表格Spreadsheet包含文件：dojo.require(dojo.widget.Spreadsheet);使用方法： 参数说明：textarea name,后台可通过request.getParameter(yourname );获得其值3.在线html编辑器包含文件：dojo.require(dojo.widget.Editor2);使用方法：testcase for editor in textarea, bug #377, broken in safarifoobarbazthudLorem!text below the textarea editor instance取值：document.myform.debugDiv.value后台可通过其name属性request.getParameter(debugDiv);获得其值4.在线richtext编辑包含文件：dojo.require(dojo.event.*);dojo.require(dojo.widget.Editor);使用方法：content参数说明，items为可选项，默认全部工具栏取值：document.myform.debugDiv.value或者var editor = dojo.widget.manager.getWidgetById(editdiv);editor._richText.getEditorContent()；后台可通过其name属性request.getParameter(debugDiv);获得其值5.ajax异步响应包含文件： dojo.require(dojo.event.*);客户端使用方法：Post到服务端的方法function postPressed() dojo.io.bind( url: hello.jsp, /服务端的响应页面 load: helloCallback, /服务端返回后回调的函数 error: helloCallbackError, /服务端出错回调的函数 encoding: UTF-8, /编码方式 content: user: 你好, b: 2 提交的的参数数据，以json数据方式，后台可用request.getParameter(“user”); request.getParameter(“b”)获得值 /formNode: dojo.byId(myForm) /整个id=myForm的form表单 /content: user: dojo.byId(name).value ); mimetype: text/html, /请求的页面的类型，应该设置为与你请求页面类型对应的mimetype，默认为 text/plain method：GET, /默认为GET sync: false, /默认为异步执行 useCache: false, /默认为不使用页面缓存，注意这里的缓存并不是浏览器的缓存，而是Dojo自身所维护的页面缓存 preventCache: false, /默认为启用浏览器缓存，否则将通过自动增加不同的参数来确保浏览器缓存失效 timeoutSeconds: 3000, /3秒后超时，如果为0则永不超时function helloCallback(type, data, evt) /data,服务端返回的数据/do something /type=”load” alert(data); function helloCallbackError(type, error) /type=”error” alert(Error when retrieving data from the server!) 服务器端：hello.jsp6.框架7.排序表格包含文件：dojo.require(dojo.html.*);dojo.require(dojo.widget.*);dojo.require(dojo.widget.SortableTable);function showSelected()/获得当前选中行的idvar w=dojo.widget.byId(testTable);if(w)var s=w.getValue();if(s.length0) alert(s);else alert(No rows are selected.);表格样式：（可根据需要自行修改）/*The following is just an example of how to use the table.You can override any class names to be used if you wish.*/table font-family:Lucida Grande, Verdana;font-size:0.8em;width:100%;border:1px solid #ccc;cursor:default;* html div.tableContainer /* IE only hack */width:95%;border:1px solid #ccc;height: 285px;overflow-x:hidden;overflow-y: auto;table td,table thborder-right:1px solid #999;padding:2px;font-weight:normal;table thead td, table thead th background:#94BEFF;* html div.tableContainer table thead tr td,* html div.tableContainer table thead tr th/* IE Only hacks */position:relative;top:expression(dojo.html.getFirstAncestorByTag(this,table).parentNode.scrollTop-2);htmlbody tbody.scrollContent height: 262px;overflow-x:hidden;overflow-y: auto;tbody.scrollContent td, tbody.scrollContent tr td background: #FFF;padding: 2px;tbody.scrollContent tr.alternateRow td background: #e3edfa;padding: 2px;tbody.scrollContent tr.selected td background: yellow;padding: 2px;tbody.scrollContent tr:hover td background: #a6c2e7;padding: 2px;tbody.scrollContent tr.selected:hover td background: #ff3;padding: 2px;使用方法：IdNameDate AddedDate ModifiedLabel1Adam3/1/200411/1/2003Lorem ipsum dolor sit amet.consectetuer8.进度条9.工具栏(toolbar)10伸缩titlepane包含文件：dojo.require(dojo.widget.TitlePane);dojo.hostenv.writeIncludes();使用方法： 参数说明：dojoType=TitlePane 固定格式label=Title Pane #1 标签名，可更改labelNodeClass=label，containerNodeClass=content 标签样式，可更改可选：href=doc0.html 标签显示内容为doc0.html，若有href属性，div中将显示所含页面的内容open=false 控制初始状态，true为伸，false为缩TitlePane中可嵌套TitlePane用法如下：this is first titlepane;sub-titlepane begin This is sub-titlepanesub-titlepane end11.拖拽包含文件：dojo.require(dojo.dnd.*);dojo.require(dojo.event.*);使用方法：页面加载时初始化需拖拽的对象function byId(id)return document.getElementById(id);function init()/ list onevar dl = byId(dragList1);new dojo.dnd.HtmlDropTarget(dl, li1);var lis = dl.getElementsByTagName(li);for(var x=0; xlis.length; x+)new dojo.dnd.HtmlDragSource(lisx, li1);/ list twovar dl = byId(dragList2);new dojo.dnd.HtmlDropTarget(dl, li1);var lis = dl.getElementsByTagName(li);for(var x=0; xlis.length; x+)new dojo.dnd.HtmlDragSource(lisx, li1);/ list threevar dl = byId(dragList3);new dojo.dnd.HtmlDropTarget(dl, li2);var lis = dl.getElementsByTagName(li);for(var x=0; xlis.length; x+)new dojo.dnd.HtmlDragSource(lisx, li2);dojo.addOnLoad(init); /页面加载时调用说明：new dojo.dnd.HtmlDropTarget(dl, li1);new dojo.dnd.HtmlDragSource(lisx, li1);li1说明这两个ul属于同一类，可以互相拖拽dragList3 是li2，就不能跟dragList1，dragList2的li拖拽对应的页面可拖拽元素：list 1 item 1 Google Inline Buttonlist 1 item 2list 1 item 3Here some text between two lists. You should be able to drag between the lists either side of me.list 2 item 1list 2 item 2list 2 item 3Here some text between two lists. You should only be able to drag items from the list below to the list below and not to the other two lists.list 3 item 1list 3 item 2list 3 item 312.树形菜单1.静态树形菜单（框架中）包含文件：dojo.require(dojo.widget.Tree);dojo.require(dojo.widget.TreeNode);dojo.require(dojo.widget.TreeSelector);dojo.require(dojo.widget.TreeRPCController);dojo.require(dojo.widget.TreeLoadingController);dojo.require(dojo.widget.TreeContextMenu);使用方法：Javascript脚本function treeSelectFired() / 获得选中的节点 var treeSelector = dojo.widget.manager.getWidgetById(treeSelector); var treeNode = treeSelector.selectedNode; var isFolder = treeNodeisFolder; alert(treeNodeisFolder); alert(treeNodeobject); /判断是否有子节点 if ( !isFolder) /获得页面地址 var url = treeNodeobject; link(url); else var url = treeNodeobject; link(url); function link(url) /alert(url); if(url) /框架中的链接页面 parent.MainFrame.location.href=url; function init() /get a reference to the treeSelector var treeSelector = dojo.widget.manager.getWidgetById(treeSelector); /connect the select event to the function treeSelectFired() dojo.event.connect(treeSelector,select,treeSelectFired); dojo.addOnLoad(init);html标签参数说明:type 为dojo类型，不可更改，title为树的节点名称，object为响应页面2.动态树形菜单（框架中）dojo.require(dojo.widget.Tree);dojo.require(dojo.widget.TreeNode);dojo.require(dojo.widget.TreeSelector);dojo.require(dojo.widget.TreeRPCController);dojo.require(dojo.widget.TreeLoadingController);dojo.require(dojo.widget.TreeContextMenu);使用方法：Javascript脚本function treeSelectFired() / 获得选中的节点 var treeSelector = dojo.widget.manager.getWidgetById(treeSelector); var treeNode = treeSelector.selectedNode; var isFolder = treeNodeisFolder; alert(treeNodeisFolder); alert(treeNodeobject); /判断是否有子节点 if ( !isFolder) /获得页面地址 var url = treeNodeobject; link(url); else var url = treeNodeobject; link(url); function link(url) /alert(url); if(url) /框架中的链接页面 parent.MainFrame.location.href=url; function init() /get a reference to the treeSelector var treeSelector = dojo.widget.manager.getWidgetById(treeSelector); /connect the select event to the function treeSelectFired() dojo.event.connect(treeSelector,select,treeSelectFired); dojo.addOnLoad(init);jsp标签最后页面中加代码。 / RPCUrl的值中加入树点击后的后台处理页面 yhtreeprc.jsp 。 /这里的title 填的主节点的名称。childIconSrc 是主节点前的图片。 div dojoType=TreeNode title= widgetId=root objectId=0 isFolder=true childIconSrc=/sypt/images/node_gs.gif expandLevel=1/参数说明: RPCUrl：为与后台通信的jsp页面，数据传输以json的数据格式进行 Title:树的节点名称 objected:节点的id isFolder:true:为有子节点，false：则无子节点 childIconSrc:为树节点的图片，可为空后台响应页面:yhtreeprc.jsp /获得树的节点传递的数据，以json格式 String data = request.getParameter(data); zkxx.ctais2.zj.tree.GetJsonTree tree=new zkxx.ctais2.zj.tree.GetJsonTree(); / System.out.println(data); String id=tree.getId(data);/得到节点的id 然后再加 zkxx.ctais2.zj.tree.TreeNode node1=new zkxx.ctais2.zj.tree.TreeNode(); node1.setTitle(zsxm); / 节点的名称 node1.setHasChild(false); /节点下是否有子节点。 有为true ，否为false。 node1.setId(yhm); /节点的id 。点击后如有子节点，传为id 。 node1.setChildIconSrc(/sypt/images/node_yh.gif); /显示节点前的图片。 node1.setUrl(1.jsp?x=ddd); /既树的该节点在点击后，响应页面的地址和所带的变量。 tree.putTreeNode(node1);这就是添加主节点下的一个子节点。 添加完毕后。加入 out.println(tree.getTree();/组成当前节点下的子节点。 13.菜单14.右键菜单包含文件：dojo.require(dojo.widget.Menu2);dojo.hostenv.writeIncludes();1. 静态右键菜单2. 动态右键菜单 上下文菜单分静态创建和动态创建两种，所谓静态创建即在页面中以html代码的方式创建，其菜单项在菜单创建之后不能动态更新右键单击我可以弹出菜单 dojoType=PopupMenu2 表示这是一个dojo的弹出菜单，dojoType=MenuItem2则表示这是个菜单项了，caption属性表示的是菜单项的标题，dojo会根据targetNodeIds的值查找需要显示这个菜单的元素，这里，右键点击id为test1的层就会显示这个菜单。同一个菜单还可以显示在不同的元素上，只需要修改targetNodeIds的值，比如要增加id为test2的层，则只要修改成targetNodeIds=test1;test2即可右键单击我可以弹出菜单右键单击我可以弹出菜单 这种方法还有个缺点就是不能绑定事件，其只能相应右键单击事件，即oncontextmenu事件。下面我们对上述方法进行改善改善，以使其能绑定各个事件。var menu;function testAroundPlace(e)menu.open(e.currentTarget, null, e.currentTarget);dojo.addOnLoad(function()menu=dojo.widget.byId(test3);dojo.event.connect(dojo.byId(test3), onclick, testAroundPlace);dojo.event.connect(dojo.byId(test3), oncontextmenu, testAroundPlace););左右键单击我都可以