535
社区成员
发帖
与我相关
我的任务
分享
...全文
请发表友善的回复…
发表回复
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中插入
DATA[function showDia(){
var dia = new dijit.Dialog({title:"dojo按钮演示",style:"width:150px"});
var pane = document.createElement("div");
pane.innerHTML = "Hello Dojo!";
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);]]>
2.5.1.2 使用xpage按钮控件
DATA[
var dia = new dijit.Dialog({title:"提示：",style:"width:150px;"});
var pane = document.createElement("div");
pane.innerHTML = "dojo按钮演示！";
dia.setContent(pane);
dia.show();
]]>
2.5.1.3 在按钮控件上使用事件处理程序控件
将事件处理程序控件拖放到按钮控件上
2.5.2 Xpage中使用 Spinner(dijit.form.NumberSpinner)
DATA[
dojo.addOnLoad(function(){
new dijit.form.NumberSpinner({
name:"#{id:numSales}",
value:50,
smallDelta:1,
min:0,
places:0},XSP.getElementById("#{id:numSales}"));
});
]]>
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)
DATA[
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));
}
]]>
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文件
001
订单001
航运
001-1
1
11761
精通DOJO
001-2
3
11789
项目管理那些事儿
002
订单002
快递
002-1
10
11763
精通J2EE
002-2
30
11799
超越对手
2.5.4.2 Box树与Order树
<script type="dojo/method" event="onClick" args="item">
lastBoxSelected = item;
2.5.4.3 对树进行添加、删除及重命名操作
添加
<script type="dojo/method"
event="onClick">
boxStore.newItem({id:2,name:"盒子2",type:"box",weight:0,orders:[]});
删除
<script type="dojo/method"
event="onClick">
if(boxStore.isItem(lastBoxSelected)){
boxStore.deleteItem(lastBoxSelected);
}
重命名
<script type="dojo/method"
event="onClick">
if(boxStore.isItem(lastBoxSelected)){
boxStore.setValue(lastBoxSelected,"name","新盒子");
}
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("数据保存成功！");}
});
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”),对于标签是不可以的
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) 写入表示对象的字符串。
