使用Xpage技术构建Lotus Domino通讯录应用
3星 · 超过75%的资源 需积分: 10 7 浏览量
更新于2024-10-05
收藏 190KB PDF 举报
"在Lotus Domino中使用Xpage技术创建通讯录是一项常见的任务,这涉及到数据库设计、用户界面构建以及服务器端逻辑的实现。Xpage是Lotus Domino Designer中的一个强大工具,用于构建现代、交互式的Web应用程序。本文将详细介绍如何利用Xpage技术来构建一个简单的通讯录应用,包括添加、查看、编辑和删除联系人功能。
首先,通讯录的核心数据结构通常包含姓名和年龄等基本字段。在Xpage中,这些数据将存储在Notes文档中,每个文档代表一个联系人。为了展示通讯录,我们需要创建一个主页面(CaryMain),在这个页面上,用户可以看到列表中的所有联系人,并进行操作。
在CaryMain页面中,我们使用DataTable组件来显示联系人列表。DataTable的每一行都对应一个联系人文档,Name、Age和LastModified等字段的值通过计算域来获取。例如,Name字段的值由`rowdoc.getItemValueString("name")`计算得出,这将从当前行的文档中获取名字字段的值。编辑和删除按钮则分别触发对应的服务器端事件。
编辑按钮的点击事件会将当前选中文档的UniversalID、姓名和年龄保存到sessionScope中,然后重定向到编辑页面(CaryUpdate)。这样,编辑页面就可以加载并显示这些信息供用户修改。删除按钮的事件代码`rowdoc.remove(true)`会直接删除选定的文档。
创建新联系人的页面(CaryCreate)包含两个EditBox,分别用于输入姓名和年龄。EditBox的属性需要正确配置,如设置DisplayType为Number以确保年龄字段能正确处理数字输入。页面上的“OK”按钮负责创建新的文档,将输入的姓名和年龄保存到新文档中。
在"OK"按钮的服务器端代码中,首先创建一个新的文档实例,然后使用`replaceItemValue`方法设置字段值,最后保存文档。"Cancel"按钮则会简单地取消当前操作,不保存任何更改。
总结起来,通过Lotus Domino的Xpage技术,我们可以构建一个功能完备的通讯录应用,它具有友好的用户界面和高效的服务器端逻辑。Xpage提供了丰富的组件和API,使得开发人员能够轻松地实现各种复杂功能,同时保持与Lotus Domino的强大集成,确保数据的安全性和管理效率。在实际项目中,可以根据需求扩展此基础架构,添加更多字段、搜索功能、权限控制等,以满足更复杂的业务场景。"
2014-04-18 上传
2013-04-24 上传
XPAGE学习笔记
1 Theme 2
2 在Xpage中使用Dojo 2
2.1 加载dojo.js 2
2.2 设置应用程序主题引入tundra.css 2
2.3 设置xpage属性引入dojo模块 3
2.4 Xpage的页面html代码 4
2.5 在xpage中使用dojo编程 4
2.5.1 按钮(dijit.form.Button) 4
2.5.1.1 通过插入
标签生成dojo按钮 5
2.5.1.2 使用xpage按钮控件 7
2.5.1.3 在按钮控件上使用事件处理程序控件 7
2.5.2 Xpage中使用 Spinner(dijit.form.NumberSpinner) 9
2.5.3 在xpage中使用ProgressBar(dijit.ProgressBar) 10
2.5.4 在Xpage中使用树(dijit.Tree) 10
2.5.4.1 JSON与XML数据源 11
2.5.4.2 Box树与Order树 12
2.5.4.3 对树进行添加、删除及重命名操作 13
2.5.4.4 将树的操作记录到后台数据库 14
2.5.4.5 树的拖放 15
3 在Xpage中如何查找控件 16
3.1 理解document.getElementById 16
3.2 理解dojo.byId 17
3.3 理解dijit.byId 17
3.4 理解XSP.getElementById 17
3.5 理解getComponent 17
4 Xpage VS 表单 18
5 使用oneui主题 18
6 参考 18
6.1 JSON与String转换 18
6.2 XPage中调试代码 18
1 Theme
主题在Domino中的路径:D:\IBM\Lotus\Domino\xsp\nsf\themes
2 在Xpage中使用Dojo
Xpage自动加载dojo.js
通过设置应用程序主题将tundra.css引用到xpage
设置xpage属性,引用dojo模块
在xpage中使用dojo编程
2.1 加载dojo.js
Xpage会自动加载dojo.js,默认情况下xpage自动查找data\domino\js下的最新版本。也可以通过设置xsp.properties文件来修改dojo版本,重命名xsp.properties.sample 文件(D:\IBM\Lotus\Domino\data\properties\ xsp.properties.sample)
2.2 设置应用程序主题引入tundra.css
通过设置应用程序主题将tundra.css引用到xpage
2.3 设置xpage属性引入dojo模块
2.4 Xpage的页面html代码
2.5 在xpage中使用dojo编程
2.5.1 按钮(dijit.form.Button)
通过插入
标签生成dojo按钮
使用xpage按钮控件
在按钮控件上使用事件处理程序控件
2.5.1.1 通过插入
标签生成dojo按钮
第一步:在xpage中插入
第二步:在xpage中插入<xp:scriptBlock></xp:scriptBlock>
第三步:编写客户端javascript
<xp:scriptBlock>
<xp:this.value><![CDATA[function showDia(){
var dia = new dijit.Dialog({title:"dojo按钮演示",style:"width:150px"});
var pane = document.createElement("div");
pane.innerHTML = "<span>Hello Dojo!</span>";
dia.setContent(pane);
dia.show();
}
function btnDemo(){
var dojoBtn = dijit.byId("dojoBtn");
var dojoBtnNode = dojo.byId("dojoBtn");
dojoBtn.setLabel("Dojo Button");
// dojo.connect(dojoBtn.domNode,"onclick","showDia");
dojo.connect(dojoBtnNode,"onclick","showDia");
}
dojo.addOnLoad(btnDemo);]]></xp:this.value>
</xp:scriptBlock>
2.5.1.2 使用xpage按钮控件
<xp:button id="button1" value="按钮控件">
<xp:this.onclick>
<![CDATA[
var dia = new dijit.Dialog({title:"提示:",style:"width:150px;"});
var pane = document.createElement("div");
pane.innerHTML = "<span>dojo按钮演示!</span>";
dia.setContent(pane);
dia.show();
]]>
</xp:this.onclick>
</xp:button>
2.5.1.3 在按钮控件上使用事件处理程序控件
将事件处理程序控件拖放到按钮控件上
2.5.2 Xpage中使用 Spinner(dijit.form.NumberSpinner)
<xp:inputText id="numSales"></xp:inputText>
<xp:scriptBlock>
<xp:this.value><![CDATA[
dojo.addOnLoad(function(){
new dijit.form.NumberSpinner({
name:"#{id:numSales}",
value:50,
smallDelta:1,
min:0,
places:0},XSP.getElementById("#{id:numSales}"));
});
]]></xp:this.value>
</xp:scriptBlock>
var myvalue = "#{javascript:
var value;
if(getComponent("numSales").getValue() != null){
value = getComponent("numSales").getValue().intValue();
}else{
value = 50;
}
return value.toFixed(0);}";
new dijit.form.NumberSpinner({name:"#{id:numSales}", value:myvalue, smallDelta:1, constraints:{min:0,places:0}}, XSP.getElementById("#{id:numSales}"));
2.5.3 在xpage中使用ProgressBar(dijit.ProgressBar)
<xp:button value="Start" id="button2">
<xp:eventHandler event="onclick" submit="false">
<xp:this.handlers>
<xp:handler type="text/javascript">
<xp:this.script><![CDATA[
var numParts = Math.floor(100/7);
jsProgress.update({ maximum: numParts, progress:0 });
for (var i=0; i<=numParts; i++){
setTimeout("jsProgress.update({ progress: " + i + " })",(i+1)*100 + Math.floor(Math.random()*100));
}
]]></xp:this.script>
</xp:handler>
</xp:this.handlers>
</xp:eventHandler>
</xp:button>
2.5.4 在Xpage中使用树(dijit.Tree)
JSON与XML数据源
Box树与Order树
对树进行添加、删除及重命名操作
将树的操作记录到后台数据库
树的拖放
2.5.4.1 JSON与XML数据源
box.json文件
{
identifier:'id',
label:'name',
items:[
{id:1,name:"盒子1",type:"box",weight:0}
]
}
order.xml文件
<orders>
<order>
<orderNumber>001</orderNumber>
<description>订单001</description>
<priority>航运</priority>
<line>
<orderNumber>001-1</orderNumber>
<qty>1</qty>
<sku>11761</sku>
<description>精通DOJO</description>
</line>
<line>
<orderNumber>001-2</orderNumber>
<qty>3</qty>
<sku>11789</sku>
<description>项目管理那些事儿</description>
</line>
</order>
<order>
<orderNumber>002</orderNumber>
<description>订单002</description>
<priority>快递</priority>
<line>
<orderNumber>002-1</orderNumber>
<qty>10</qty>
<sku>11763</sku>
<description>精通J2EE</description>
</line>
<line>
<orderNumber>002-2</orderNumber>
<qty>30</qty>
<sku>11799</sku>
<description>超越对手</description>
</line>
</order>
</orders>
2.5.4.2 Box树与Order树
<xp:td style="height:200.0px" valign="top">
<xp:panel>
</xp:panel>
</xp:td>
2.5.4.3 对树进行添加、删除及重命名操作
<xp:table>
<xp:tr>
<xp:td>
<script type="dojo/method" event="onClick" args="item">
lastBoxSelected = item;
</script>
</xp:panel>
</xp:td>
<xp:td style="height:200.0px" valign="top">
<xp:panel>
添加
<script type="dojo/method"
event="onClick">
boxStore.newItem({id:2,name:"盒子2",type:"box",weight:0,orders:[]});
</script>
</xp:td>
<xp:td>
删除
<script type="dojo/method"
event="onClick">
if(boxStore.isItem(lastBoxSelected)){
boxStore.deleteItem(lastBoxSelected);
}
</script>
</xp:td>
<xp:td>
重命名
<script type="dojo/method"
event="onClick">
if(boxStore.isItem(lastBoxSelected)){
boxStore.setValue(lastBoxSelected,"name","新盒子");
}
</script>
</xp:td>
</xp:tr>
</xp:table>
2.5.4.4 将树的操作记录到后台数据库
<script type="dojo/connect" event="onNew" args="newItem">
var itemId = this.getValue(newItem,"id");
var itemName = this.getValue(newItem,"name");
dojo.xhrPost({
url:"agCreateNewBox?OpenAgent",
content:{id:itemId,name:itemName},
timeout:10000,
error:function(){alert("对不起,出错啦!");},
load:function(){alert("数据保存成功!");console.debug("数据保存成功!");}
});
</script>
<script type=”dojo/connect” event=”onDelete” args=”delItem”>
</script>
2.5.4.5 树的拖放
要使树具有拖放功能,仅仅需要设置dndController属性(dijit._tree.dndSource已废弃):
要限制拖放的行为,仅仅需要实现checkAcceptance或checkItemAcceptance处理函数即可:
以上已经实现了树的拖放功能了!
但是,如果要将拖放的结果保存起来,也就是说要改变树的模型并将模型数据保存,那么应该编写onDndDrop的处理函数(通过增加jsId获得dndController会出现this.avaria is null 错误,所以下面通过小部件初始化时将dndController传递给变量controller):
在boxDrop中与checkAcceptance一样可以得到target与source,另外,onDndDrop中的source与nodes有些相似source.selection[something]=nodes[somethin]
结合ItemFileWriteStore 可以实现对模型数据的保存
3 在Xpage中如何查找控件
3.1 理解document.getElementById
得到node,创建node可以用document.createElement
这样访问或设置节点的所有属性
node.innerHTML = “”
node.value=””
var id = node.id
var style = node.style
3.2 理解dojo.byId
得到node,也可以通过dijit.byId().domNode得到节点
dojo.byId(“myid”).value
dojo.byid(“myid”).id
dojo.attr(node,attribute) 如读取dojo.attr(node,”id”)
dojo.attr(node,attribute,value) 如设置dojo.attr(node,”id”,”myid”)
dojo.hasAttr(node,attribute) 如判断 dojo.hasAttr(node,”id”)
dojo.connect(node,”onclick”,handler)
dojo.removeClass(node,”myclass”)
3.3 理解dijit.byId
得到dojo控件对象,也可以通过dijit.byNode(dojo.byId())得到对象
不同的控件的getValue()返回值类型不一样
在xpage中对于标签可能使用期dijit.byId(“myid”),对于<xp:>标签是不可以的
dijit.byId().getValue()
dijit.byId().setValue()
3.4 理解XSP.getElementById
这是XSPClientDojo 库中定义的,XSP全局变量相当于document对象,为客户端访问xpage控件提供方法
XSP.getElementById(“#{id:myid}”)使用JSF表达式查询控件
var xid = XSP.getElementById(“#{id:myid}”)
xid.value = “myvalue”
xid.name = “myname”
xid.disabled = false
3.5 理解getComponent
javascript服务器端访问控件
getComponet(“myid”).getValue();
getComponet(“myid”).getSubmittedValue();
getComponent(“myid”).setValue();
getComponent(“myid”).setSubmittedValue();
4 Xpage VS 表单
5 使用oneui主题
6 参考
6.1 JSON与String转换
dojo.fromJson(string) 返回json对象
dojo.toJson(object) 返回string对象
eval(‘(‘+string+’)’) 返回json对象
6.2 XPage中调试代码
window.alert 函数不可用于服务器脚本。
使用以下函数写入服务器上的 console.log(例如 C:\Notes\Data\IBM_TECHNICAL_SUPPORT\console.log):
print(string) 写入一个字符串。
_dump(object) 写入表示对象的字符串。
2014-02-14 上传
点击了解资源详情
2024-05-28 上传
2022-03-03 上传
2017-09-29 上传
2009-06-28 上传
Sing_He
- 粉丝: 10
- 资源: 94
最新资源
- 平尾装配工作平台运输支撑系统设计与应用
- MAX-MIN Ant System:用MATLAB解决旅行商问题
- Flutter状态管理新秀:sealed_flutter_bloc包整合seal_unions
- Pong²开源游戏:双人对战图形化的经典竞技体验
- jQuery spriteAnimator插件:创建精灵动画的利器
- 广播媒体对象传输方法与设备的技术分析
- MATLAB HDF5数据提取工具:深层结构化数据处理
- 适用于arm64的Valgrind交叉编译包发布
- 基于canvas和Java后端的小程序“飞翔的小鸟”完整示例
- 全面升级STM32F7 Discovery LCD BSP驱动程序
- React Router v4 入门教程与示例代码解析
- 下载OpenCV各版本安装包,全面覆盖2.4至4.5
- 手写笔画分割技术的新突破:智能分割方法与装置
- 基于Koplowitz & Bruckstein算法的MATLAB周长估计方法
- Modbus4j-3.0.3版本免费下载指南
- PoqetPresenter:Sharp Zaurus上的开源OpenOffice演示查看器