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

最新推荐文章于 2022-05-11 14:36:21 发布

剑心1977

最新推荐文章于 2022-05-11 14:36:21 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： PIMShell 文章标签： javascript list stylesheet behavior listview email

本文链接：https://blog.youkuaiyun.com/pimshell/article/details/3298242

PIMShell 专栏收录该内容

7 篇文章

订阅专栏

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设置了如下的样式
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();
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;
19. //
20. var oUserArray=g_sUsers.split(";");
21. for(var i=0;i<oUserArray.length;i++)
22. {
23. //添加一条新记录
24. oEntityset.addNew();
26. //
27. var oPropArray=oUserArray[i].split(",");
29. oEntityset("Name")=oPropArray[0];
30. oEntityset("Sex")=oPropArray[1];
31. oEntityset("Email")=oPropArray[2];
32. }
34. //移到首部
35. oEntityset.movefirst();
37. return oEntityset;
38. }
行2：响应事件onpageload
行5：构造一个测试用的记录集oEntityset
行8-9：将记录集oEntityset绑定到元素List1上，从而完成列表的显示

4、网页运行效果