最近要开发一些基于WEB的东东了,这对于一直干C/S的我还是个新课题。不过,偶还是比较乐于面对挑战的。呵呵,项目本身要求以WEB的方式显示一些实时采集的数据。天哪,这不是要用AJAX了吗?无耐之下,只有上网查了查相关资料,听说有个叫Dojo的插件比较好。于是,我就下了一个,还好,文档还比较多,虽然都是英文的,但擅长中式英语的我还能看懂一点,呵呵呵,看来坚持study English还是有成效的。 AJAX是近来被业界吹捧的技术,对它我也是刚刚接触,不便于评论太多。但使用了它,的确使得原先古板的WEB开发变得有了生机。而这方面做得较好的有两个javascript封装的库:Prototype和Dojo,但为什么我选用了Dojo我也弄不明白,也许它好记吧...... 下载Dojo0.9.0: http://download.dojotoolkit.org/release-0.9.0/dojo-release-0.9.0.tar.gz
下载1.0.2:
http://download.dojotoolkit.org/release-1.0.2/dojo-release-1.0.2.tar.gz
安装: 解压缩dojo-release-0.9.0.tar.gz包(1.0.2也一样),将其下的四个文件夹复制到WEB项目的位置就可以了。
测试安装: 安装完成后即可测试一下,看看dojo0.9为我们带来的现成样式。具体请在安装目录下运行dijit/themes/themeTester.html剖析其结构,可以对dojo0.9.0有一个较全面的认识。 dojo的使用: 同以往的dojo版本相同,要想将dojo框架加载到本页面,需要添加以下代码: <script type="text/javascript" src="./dojo/dojo.js" djConfig="parSEOnLoad: true,isDebug: true"></script> 其中src后的路径一定要与你当前路径相匹配,假设我当前页面位于“c:/1.htm”,则刚才安装的那四个文件夹一定也都位于1.htm同级的路径下。当然开发时一定要放到开发路径下啰。如果你是调试方式,请将“isDebug”后置为true,因为这样会在页面下方出现一下调试框,将您的操作显示于下。 <script language="JavaScript" type="text/javascript"> dojo.require("dijit.Dialog"); dojo.require("dijit.form.Button"); </script> 此句也很重要,它相当于类声明,如果你想在页面中使用某一dojo的控件,请勿必在<head>中先声明。 还有一个很好的东西: <style type="text/css"> @import "./dojo/resources/dojo.css"; @import "./dijit/themes/tundra/tundra.css"; @import "./dijit/themes/tundra/tundra_rtl.css"; @import "./dijit/tests/css/dijitTests.css"; </style> 这是dojo为你提供的样式,如果不满意,可以自己修改tundra.css文件。 以下即为各效果的使用: 一、提示框 <html> <head> <script type="text/javascript" src="./dojo/dojo.js" //请勿必将路径写正确 djConfig="parSEOnLoad: true,isDebug: true"></script>
<script language="JavaScript" type="text/javascript"> dojo.require("dijit.Tooltip"); //声明使用的控件 dojo.require("dojo.parser"); </script>
<style type="text/css"> @import "./dojo/resources/dojo.css"; @import "./dijit/themes/tundra/tundra.css"; @import "./dijit/themes/tundra/tundra_rtl.css"; @import "./dijit/tests/css/dijitTests.css"; //请勿必将路径写正确 </style> </head> //以上为使用前的准备 <body class="tundra"> //此处让页面应用样式 <a id="three" href="#bogus">anchor</a> <span dojoType="dijit.Tooltip" connectId="three">这是一个提示框</span> //通过connectId属性将提示框与页面内容联系起来 <form> <input type="input" id="id1" value="#1"><br> <input type="input" id="id2" value="#2"><br> <input type="input" id="id3" value="#3"><br> <input type="input" id="id4" value="#4"><br> <input type="input" id="id5" value="#5"><br> <input type="input" id="id6" value="#6"><br> </form> <br>
<div style="overflow: auto; height: 100px; position: relative; border: solid blue 3px;"> <span id="s1">s1 text</span><br><br><br> <span id="s2">s2 text</span><br><br><br> <span id="s3">s3 text</span><br><br><br> <span id="s4">s4 text</span><br><br><br> <span id="s5">s5 text</span><br><br><br> </div>
<span dojoType="dijit.Tooltip" connectId="id2">tooltip for #2</span> <span dojoType="dijit.Tooltip" connectId="id3">tooltip for #3</span> <span dojoType="dijit.Tooltip" connectId="id4">tooltip for #4</span> <span dojoType="dijit.Tooltip" connectId="id5">tooltip for #5</span> <span dojoType="dijit.Tooltip" connectId="id6">tooltip for #6</span> //通过ID属性将span与控件联系,但此处dojoType属性不可缺少 <span dojoType="dijit.Tooltip" connectId="s1">s1 tooltip</span> <span dojoType="dijit.Tooltip" connectId="s2">s2 tooltip</span> <span dojoType="dijit.Tooltip" connectId="s3">s3 tooltip</span> <span dojoType="dijit.Tooltip" connectId="s4">s4 tooltip</span> <span dojoType="dijit.Tooltip" connectId="s5">s5 tooltip</span> </body> </html> 二、对话框 <html> <head> <script type="text/javascript" src="./dojo/dojo.js" djConfig="parSEOnLoad: true,isDebug: true"></script>
<script language="JavaScript" type="text/javascript"> dojo.require("dijit.Dialog"); dojo.require("dijit.form.Button"); dojo.require("dijit.form.TextBox"); dojo.require("dojo.parser");
dojo.declare("dijit.TestWidget", [dijit._Widget,dijit._Templated],{ templateString: "<span class='dijitTestWidget'></span>" }); </script>
<style type="text/css"> @import "./dojo/resources/dojo.css"; @import "./dijit/themes/tundra/tundra.css"; @import "./dijit/themes/tundra/tundra_rtl.css"; @import "./dijit/tests/css/dijitTests.css"; </style> </head> <body class="tundra"> <button dojoType="dijit.form.Button" onclick="dijit.byId('dialog1').show()">Show Dialog</button> <div dojoType="dijit.Dialog" id="dialog1" title="First Dialog"> 这是提示对话框 <button dojoType=dijit.form.Button type="submit">close</button> </div> </body> </html> 三、进度条 <html> <head> <script type="text/javascript" src="./dojo/dojo.js" djConfig="parSEOnLoad: true,isDebug: true"></script>
<script language="JavaScript" type="text/javascript"> dojo.require("dijit.ProgressBar"); dojo.require("dojo.parser");// scan page for widgets dojo.require("dojo.string"); </script>
<style type="text/css"> @import "./dojo/resources/dojo.css"; @import "./dijit/themes/tundra/tundra.css"; @import "./dijit/themes/tundra/tundra_rtl.css"; @import "./dijit/tests/css/dijitTests.css"; </style>
<script type="text/javascript">
dojo.addOnLoad(go);
function go(){ //TODO: it's a little strange that id must be specified again? var theBar = new dijit.ProgressBar({id: "testBar",width: 400,annotate: true,maximum: 256,duration: 2000, report:function(percent){ return dojo.string.substitute("${0} out of ${1} max chars",[this.progress,this.maximum]); } },dojo.byId("testBar")); dojo.byId("progressValue").focus(); dojo.byId("progressValue").value = dijit.byId("setTestBar").progress; dojo.byId("maximum").value = dijit.byId("setTestBar").maximum; dojo.connect(dojo.byId("set"),"onclick",null,setParameters); //此处将按钮与事件绑定 dojo.connect(dojo.byId("startTimer"), function(){ remoteProgress(dijit.byId("timerBar")); } );
function indeterminateSetter(id,value){ return function(){ dijit.byId(id).update({'indeterminate': value}); } } dojo.connect(dojo.byId("setIndeterminate1True"), indeterminateSetter("indeterminateBar1",true)); dojo.connect(dojo.byId("setIndeterminate1False"),false)); dojo.connect(dojo.byId("setIndeterminate2True"), indeterminateSetter("indeterminateBar2",true)); dojo.connect(dojo.byId("setIndeterminate2False"),false)); }
var fakeProgress = 0; function getProgressReport(){ var deferred = new dojo.Deferred(); fakeProgress = Math.min(fakeProgress + 10,100); deferred.callback(fakeProgress+"%"); return deferred; }
function remoteProgress(bar){ var _timer = setInterval(function(){ var report = getProgressReport(); report.addCallback(function(response){ bar.update({progress: response}); if(response == "100%"){ clearInterval(_timer); _timer = null; return; } }); },3000); // on 3 second intervals }
function setParameters(){ dijit.byId("setTestBar").update({maximum: dojo.byId("maximum").value,progress: dojo.byId("progressValue").value});//此处设置进度条数值 }
</script> </head> <body class="tundra"> Progress Value <input type="text" name="progressValue" id="progressValue" /> <br> Max Progress Value <input type="text" name="maximum" id="maximum" /> <br> <input type="button" name="set" id="set" value="set!" /> <br> <div style="width:400px" annotate="true" maximum="200" id="setTestBar" progress="20" dojoType="dijit.ProgressBar"></div> </body> </html> 四、树形结构 .......... .......... <script language="JavaScript" type="text/javascript"> dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dijit.Tree"); dojo.require("dijit.ColorPalette"); dojo.require("dijit.Menu"); dojo.require("dojo.parser"); </script> .......... .......... <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore" url="./dijit/tests/countries.json"></div> //countries.json文件即为树型文件内容,文件版段如下所示 <div dojoType="dijit.Tree" id="tree2" store="continentStore" query="{type:'continent'}" labelAttr="name" typeAttr="type"> <script type="dojo/connect"> dojo.connect(menu,"_openMyself",this,function(e){ var tn = this._domElement2TreeNode(e.target); console.debug(tn); console.debug(tn.item); menu.getChildren().forEach(function(i){ i.setDisabled(!tn.item.children); }); }); //连接事件并加载结点 </script> </div> 以下为countries.json文件部分内容 {identifier:"abbreviation", items: [ {name:"Alabama",label:"<img width='97px' height='127px' src='images/Alabama.jpg'/>Alabama",abbreviation:"AL"}, {name:"Alaska",label:"Alaska",abbreviation:"AK"}, {name:"American Samoa",label:"American Samoa",abbreviation:"AS"}, {name:"Arizona",label:"Arizona",abbreviation:"AZ"}, {name:"Arkansas",label:"Arkansas",abbreviation:"AR"}, ]} //真复杂,里面的东西也很值得研究呀,有时间再慢慢看吧 以上是运用dojo最简单的控件例子,其它实例可以参考安装包下的 dijit/tests/*.*的内容。你有没有注意到dojo使用的都是html标签的ID属性,而没有用过name属性,所以今后在使用含dojo的html时请记着加写上id属性,否则dojo.byId是找不见的。
注:其它效果请参阅安装路径下 dijit/tests/*.html
但dojo最值得使用的还是其封装了Ajax功能。我们来看看: 一、照着demo做 先在tomcat的webapps/ROOT下建立一个名为ajax.txt的文件,用记事本打开随便写一些内容。 html代码: <html> <head> <script type="text/javascript" src="./dojo/dojo.js" djConfig="parSEOnLoad: true,isDebug: true"></script>
<script type="text/javascript"> function hello() { dojo.xhrGet( { // 调用Get方法. url: "http://localhost:8080/ajax.txt",//这是方法的url handleAs: "text",//此处规定了返回值类型为text
timeout: 5000,// 5秒为超时时长
// 访问成功后返回时执行的代码 load: function(response,ioArgs) { dojo.byId("cargo").innerHTML = response; return response; },
// 若调用远程服务错,则执行. error: function(response,ioArgs) { console.error("HTTP status code: ",ioArgs.xhr.status); return response; } }); }
</script>
</head> <body> <div id="cargo" style="font-size: big"></div> <input type="button" value="fdsa" onclick="hello()" /> </body> </html> 启动tomcat执行这个html后会在单击按钮后在上面显示ajax.txt文件的内容。 二、返回一个form给servlet 代码为: var kw = { url: "http://localhost:8080/dojotest/formtest",//发送给Servlet load: function(data){ dojo.byId('cargo').value = data; }, error: function(data){ alert("Holy Bomb Box,Batman! An error occurred: " + data); }, timeout: 2000, form: "Form1" }; dojo.xhrPost(kw); //这回用Post,注意大小写!!!
Form为: <form id="Form1"> <input type="hidden" name="key" value="222221" /> <input type="text" name="firstname" length="50" /> <input type="text" name="lastname" length="50" />
<input type="text" id="myBox" name="myBox" length="50" /> </form>
执行,OK。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|