PIMShell中的介面都是用網頁的形式實現的。PIMShell所使用的網頁架構一般包含三個檔案，.htm/.xml/.js。.htm檔案定義介面中的DOM元素，.xml檔案為DOM元素附加所需要的行為（behavior），.js檔案實現javascript代碼。比如，要實現一個使用者列表，建立三個檔案list.htm/list.htm.xml/list.htm.js，代碼如下：
1、list.htm檔案
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>使用者列表</title>
- <link type="text/css" rel="Stylesheet" href="/css/main.css" />
- <xml src="list.htm.xml"></xml>
- <script type="text/javascript" src="list.htm.js" language="javascript"></script>
- </head>
- <body>
- <div id="List1"></div>
- </body>
- </html>
- 行4：定義了頁面的樣式。在main.css檔案中為body設定了如下的樣式
- body
- {
- behavior:url(#default#PIMShell);
- }
這個樣式為body元素添加了一個名叫PIMShell的預設行為。這個行為負責解析後續的xml檔案，並激發onpageload事件，從而執行js檔案中的代碼。
行5：定義xml檔案，為頁面中的DOM元素附加行為。
行6：定義js檔案，包含需要的javascript代碼。
行9：定義了一個名為List1的div元素，用於顯示列表資訊。
2、list.htm.xml檔案
- <?xml version="1.0" encoding="utf-16"?>
- <page>
- <root enableFrame="false" enableContextMenu="false">
- <controls>
- <control id="List1">
- <behaviors>
- <ListView autoFitRows="false" allowPage="false">
- <header>
- <cols>
- <col name="name" text="姓名" width="60">
- <bind>
- <text>[#Name#]</text>
- </bind>
- </col>
- <col name="sex" text="性別" width="40">
- <bind>
- <text>[#Sex#]</text>
- </bind>
- </col>
- <col name="email" text="電子郵件" width="80">
- <bind>
- <a href="mailto:[*Email*]"><img src="pim://images/mailsend.ico" border="0" /></a>
- </bind>
- </col>
- </cols>
- </header>
- </ListView>
- </behaviors>
- </control>
- </controls>
- <events>
- <onpageload handler="onpageload" />
- </events>
- </root>
- </page>
- 行5：將元素List1定義為組件
- 行7：為List1附加行為ListView
- 行8-26：定義列表中用到的屬性列
- 行32：綁定事件onpageload
3、list.htm.js檔案
- //事件：onpageload
- function onpageload()
- {
- //準備記錄集
- var oEntityset=__prepareEntityset();
-
- //綁定
- $("List1").dataSource=oEntityset;
- $("List1").dataBind();
- }
- //準備記錄集
- var g_sUsers="張三,男,zhangsan@msn.com;李四,男,lisi@msn.com;王霞,女,wangxia@msn.com";
- function __prepareEntityset()
- {
- //
- var oEntityset=Sys.Entityset;
-
- //
- var oUserArray=g_sUsers.split(";");
- for(var i=0;i<oUserArray.length;i++)
- {
- //添加一條新記錄
- oEntityset.addNew();
-
- //
- var oPropArray=oUserArray[i].split(",");
-
- oEntityset("Name")=oPropArray[0];
- oEntityset("Sex")=oPropArray[1];
- oEntityset("Email")=oPropArray[2];
- }
-
- //移到首部
- oEntityset.movefirst();
-
- return oEntityset;
- }
- 行2：響應事件onpageload
- 行5：構造一個測試用的記錄集oEntityset
- 行8-9：將記錄集oEntityset綁定到元素List1上，從而自動完成清單的顯示
4、網頁運行效果
