dojo0.9在JSP下的使用之粗略

来源：互联网发布：js canvas切图编辑：程序博客网时间：2024/06/05 08:24

最近要开发一些基于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);

  var fakeProgress = 0;
  function getProgressReport(){
   var deferred = new dojo.Deferred();
   fakeProgress = Math.min(fakeProgress + 10, 100);
   deferred.callback(fakeProgress+"%");
   return deferred;
  }

  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="111111" />
<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。