走进PIMShell(4)--网页的架构htm/xml/js

PIMShell中的界面都是用网页的形式实现的。PIMShell所使用的网页架构一般包含三个文件，.htm/.xml/.js。.htm文件定义界面中的DOM元素，.xml文件为DOM元素附加所需要的行为（behavior），.js文件实现javascript代码。比如，要实现一个用户列表，建立三个文件list.htm/list.htm.xml/list.htm.js，代码如下：

1、list.htm文件

1. <html xmlns="http://www.w3.org/1999/xhtml">
2. <head>
3. <title>用户列表</title>
4. <link type="text/css" rel="Stylesheet" href="/css/main.css" />
5. <xml src="list.htm.xml"></xml>
6. <script type="text/javascript" src="list.htm.js" language="javascript"></script>
7. </head>
8. <body>
9. <div id="List1"></div>
10. </body>
11. </html>

• 行4：定义了页面的样式。在main.css文件中为body设置了如下的样式
  

  
  

  1. body
  2. {
  3.  behavior:url(#default#PIMShell);
  4. }

  这个样式为body元素添加了一个名叫PIMShell的缺省行为。这个行为负责解析后续的xml文件，并激发onpageload事件，从而执行js文件中的代码。

• 行5：定义xml文件，为页面中的DOM元素附加行为。

• 行6：定义js文件，包含需要的javascript代码。

• 行9：定义了一个名为List1的div元素，用于显示列表信息。

2、list.htm.xml文件

• 1. <?xml version="1.0" encoding="utf-16"?>
  2. <page>
  3.     <root enableFrame="false" enableContextMenu="false">
  4.         <controls>
  5.             <control id="List1">
  6.                 <behaviors>
  7.                     <ListView autoFitRows="false" allowPage="false">
  8.                         <header>
  9.                             <cols>
  10.                                 <col name="name" text="姓名" width="60">
  11.                                     <bind>
  12.                                         <text>[#Name#]</text>
  13.                                     </bind>
  14.                                 </col>
  15.                                 <col name="sex" text="性别" width="40">
  16.                                     <bind>
  17.                                         <text>[#Sex#]</text>
  18.                                     </bind>
  19.                                 </col>
  20.                                 <col name="email" text="电子邮件" width="80">
  21.                                     <bind>
  22.                                         <a href="mailto:[*Email*]"><img src="pim://images/mailsend.ico" border="0" /></a>
  23.                                     </bind>
  24.                                 </col>
  25.                             </cols>
  26.                         </header>
  27.                     </ListView>
  28.                 </behaviors>
  29.             </control>
  30.         </controls>
  31.         <events>
  32.             <onpageload handler="onpageload" />
  33.         </events>
  34.     </root>
  35. </page>
• 行5：将元素List1定义为部件
• 行7：为List1附加行为ListView
• 行8-26：定义列表中用到的属性列
• 行32：绑定事件onpageload

3、list.htm.js文件

• 1. //事件：onpageload
  2. function onpageload()
  3. {
  4.     //准备记录集
  5.     var oEntityset=__prepareEntityset();
  6.     
  7.     //绑定
  8.     $("List1").dataSource=oEntityset;
  9.     $("List1").dataBind();
  10. }
  12. //准备记录集
  13. var g_sUsers="张三,男,zhangsan@msn.com;李四,男,lisi@msn.com;王霞,女,wangxia@msn.com";
  14. function __prepareEntityset()
  15. {
  16.     //
  17.     var oEntityset=Sys.Entityset;
  18.     
  19.     //
  20.     var oUserArray=g_sUsers.split(";");
  21.     for(var i=0;i<oUserArray.length;i++)
  22.     {
  23.         //添加一条新记录
  24.         oEntityset.addNew();
  25.         
  26.         //
  27.         var oPropArray=oUserArray[i].split(",");
  28.         
  29.         oEntityset("Name")=oPropArray[0];
  30.         oEntityset("Sex")=oPropArray[1];
  31.         oEntityset("Email")=oPropArray[2];
  32.     }
  33.     
  34.     //移到首部
  35.     oEntityset.movefirst();
  36.     
  37.     return oEntityset;
  38. }
• 行2：响应事件onpageload
• 行5：构造一个测试用的记录集oEntityset
• 行8-9：将记录集oEntityset绑定到元素List1上，从而完成列表的显示

4、网页运行效果

•