走进PIMShell(5)--Form(窗体)的应用

最新推荐文章于 2023-01-21 02:00:21 发布

剑心1977

最新推荐文章于 2023-01-21 02:00:21 发布

阅读量2.6k

点赞数

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

本文链接：https://blog.csdn.net/pimshell/article/details/3298510

版权

PIMShell 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在pimshell中实现一个网页建议采用htm/xml/js三个文件。.htm文件定义界面中的DOM元素，.xml文件为DOM元素附加所需要的行为（behavior），.js文件实现javascript代码。但是在实际应用时,需要将这些文件放入到某个插件（可以是自制的插件）的目录中才能正常运行。为了方便网页的编写和运行，PIMShell提供了一个特制的Form(窗体)插件。一个Form可代表一个网页，也由htm/xml/javascript三部分组成。所不同的是，Form的内容都保存在PIMShell的数据文件中。这样，Form的编辑和执行唾手可得，而且Form可以像其他类型的数据一样导入导出，与他人分享。

这与Access中的Form是不是有些类似呢？由于PIMShell中的Form是网页的形式，所以相对Access中的Form而言，设计更灵活。每个Form可以实现一个应用，多个Form可以组成一个更复杂的应用。还可以为Form设置图标，从而方便标识。

在PIMShell的官方网站上还提供了一个Form Gallery(窗体库)：http://www.pimshell.com/pimshell/go.asp?LinkId=7，从而方便Form的共享与交流。

我们仍以用户列表为例，看看在Form中是如何实现的。

1、Form的编辑界面

2、htm部分

 
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>用户列表</title>
<link type="text/css" rel="Stylesheet" href="/css/main.css" />
<xml src="do.bin?ItemId={E143F7B8-3088-4DD8-8DBD-AF6114B73B0A}&type=xml"></xml>
<script type="text/javascript" src="do.bin?ItemId={E143F7B8-3088-4DD8-8DBD-AF6114B73B0A}&type=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元素，用于显示列表信息。
3、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
4、javascript部分
- 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上，从而完成列表的显示
5、网页运行效果