XPAGE学习笔记

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 通过插入<div>标签生成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)
1Theme
主题在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.4Xpage的页面html代码
2.5在xpage中使用dojo编程
2.5.1按钮(dijit.form.Button)
通过插入<div>标签生成dojo按钮
使用xpage按钮控件
在按钮控件上使用事件处理程序控件
2.5.1.1通过插入<div>标签生成dojo按钮
第一步：在xpage中插入<div dojoType=”dijit.form.Button” id=”dojoBtn”></div> 第二步：在xpage中插入<xp:scriptBlock></xp:scriptBlock>
第三步：编写客户端javascript
<div dojoType="dijit.form.Button"id="dojoBtn"></div>
<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.2Xpage中使用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)
<div dojoType="dijit.ProgressBar"style="width:300px"jsId="jsProgress"id="div1"> </div>
<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.1JSON与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.2Box树与Order树
<div dojoType="dojo.data.ItemFileWriteStore"jsId="boxStore"
url="/tree/box.json">
</div>
<div dojoType="dojox.data.XmlStore"jsId="orderStore"
label="description"keyAttribute="orderNumber"
url="/tree/order.xml">
</div>
<div dojoType="dijit.tree.ForestStoreModel"jsId="boxModel"
store="boxStore"rootLabel="退货物品"childrenAttrs="orders,items"> </div>
<div dojoType="dijit.tree.ForestStoreModel"jsId="orderModel"
store="orderStore"rootLabel="订单"childrenAttrs="line,order"> </div>
<xp:td style="height:200.0px"valign="top">
<xp:panel>
<div dojoType="dijit.Tree"id="boxTree"
model="boxModel">
<script type="dojo/method"event="onClick"args="item">
lastBoxSelected = item;
</script>
</div>
</xp:panel>
</xp:td>
<xp:td style="height:200.0px"valign="top">
<xp:panel>
<div dojoType="dijit.Tree"id="orderTree"
model="orderModel">
</div>
</xp:panel>
</xp:td>
2.5.4.3对树进行添加、删除及重命名操作
<xp:table>
<xp:tr>
<xp:td>
<div dojoType="dijit.form.Button"
id="addBtn">
添加
<script type="dojo/method"
event="onClick">
boxStore.newItem({id:2,name:"盒子
2",type:"box",weight:0,orders:[]});
</script>
</div>
</xp:td>
<xp:td>
<div dojoType="dijit.form.Button"
id="delBtn">
删除
<script type="dojo/method"
event="onClick">
if(boxStore.isItem(lastBoxSelected)){
boxStore.deleteItem(lastBoxSelected);
}
</script>
</div>
</xp:td>
<xp:td>
<div dojoType="dijit.form.Button"id="reBtn">重命名
<script type="dojo/method"
event="onClick">
if(boxStore.isItem(lastBoxSelected)){ boxStore.setValue(lastBoxSelected,"name","新盒子");
}
</script>
</div>
</xp:td>
</xp:tr>
</xp:table>
2.5.4.4将树的操作记录到后台数据库
<div dojoType="dojo.data.ItemFileWriteStore"jsId="boxStore"
url="/tree/box.json">
<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>
</div>
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())得到对象
不同的控件的getV alue()返回值类型不一样
在xpage中对于<div>标签可能使用期dijit.byId(“myid”),对于<xp:>标签是不可以的
dijit.byId().getV alue()
dijit.byId().setV alue()
3.4理解XSP.getElementById
这是XSPClientDojo 库中定义的，XSP全局变量相当于document对象，为客户端访问xpage 控件提供方法
XSP.getElementById(“#{id:myid}”)使用JSF表达式查询控件
var xid = XSP.getElementById(“#{id:myid}”)
xid.value = “myvalue”
= “myname”
xid.disabled = false
3.5理解getComponent
javascript服务器端访问控件
getComponet(“myid”).getV alue();
getComponet(“myid”).getSubmittedV alue();
getComponent(“myid”).setV alue();
getComponent(“myid”).setSubmittedV alue();
4Xpage VS 表单
5使用oneui主题
6参考
6.1JSON与String转换
dojo.fromJson(string) 返回json对象
dojo.toJson(object) 返回string对象
eval(…(…+string+‟)‟) 返回json对象
6.2XPage中调试代码
window.alert 函数不可用于服务器脚本。

使用以下函数写入服务器上的console.log（例如
C:\Notes\Data\IBM_TECHNICAL_SUPPORT\console.log）：print(string) 写入一个字符串。

_dump(object) 写入表示对象的字符串。