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

来源：互联网发布：筑龙投标软件编辑：程序博客网时间：2024/05/01 12:17

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文件

<?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、网页运行效果