X
PAGE学习笔记
1 Theme 2
2 在X
page中使用Dojo 2
2.1 加载dojo.js 2
2.2 设置应用程序主题引入tundra.css 2
2.3 设置x
page属性引入dojo模块 3
2.4 X
page的页面html代码 4
2.5 在x
page中使用dojo编程 4
2.5.1 按钮(dijit.form.Button) 4
2.5.1.1 通过插入<div>标签生成dojo按钮 5
2.5.1.2 使用x
page按钮控件 7
2.5.1.3 在按钮控件上使用事件处理程序控件 7
2.5.2 X
page中使用 Spinner(dijit.form.NumberSpinner) 9
2.5.3 在x
page中使用ProgressBar(dijit.ProgressBar) 10
2.5.4 在X
page中使用树(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 在X
page中如何查找控件 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 X
page VS 表单 18
5 使用oneui主题 18
6 参考 18
6.1 JSON与String转换 18
6.2 X
Page中调试代码 18
1 Theme
主题在Domino中的路径：D:\IBM\Lotus\Domino\xsp\nsf\themes
2 在X
page中使用Dojo
X
page自动加载dojo.js
通过设置应用程序主题将tundra.css引用到x
page
设置x
page属性，引用dojo模块
在x
page中使用dojo编程
2.1 加载dojo.js
X
page会自动加载dojo.js，默认情况下x
page自动查找data\domino\js下的最
新版本。也可以通过设置xsp.properties文件来修改dojo版本，重命名xsp.properties.sample 文件(D:\IBM\Lotus\Domino\data\properties\ xsp.properties.sample)
2.2 设置应用程序主题引入tundra.css
通过设置应用程序主题将tundra.css引用到x
page
2.3 设置x
page属性引入dojo模块
2.4 X
page的页面html代码
2.5 在x
page中使用dojo编程
2.5.1 按钮(dijit.form.Button)
通过插入<div>标签生成dojo按钮
使用x
page按钮控件
在按钮控件上使用事件处理程序控件
2.5.1.1 通过插入<div>标签生成dojo按钮
第一步：在x
page中插入<div dojoType=”dijit.form.Button” id=”dojoBtn”></div>
第二步：在x
page中插入<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 使用x
page按钮控件
<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 X
page中使用 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 在x
page中使用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 在X
page中使用树(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树
<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 在X
page中如何查找控件
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()返回值类型不一样
在x
page中对于<div>标签可能使用期dijit.byId(“myid”),对于<xp:>标签是不可以的
dijit.byId().getValue()
dijit.byId().setValue()
3.4 理解XSP.getElementById
这是XSPClientDojo 库中定义的，XSP全局变量相当于document对象，为客户端访问x
page控件提供方法
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 X
page VS 表单
5 使用oneui主题
6 参考
6.1 JSON与String转换
dojo.fromJson(string) 返回json对象
dojo.toJson(object) 返回string对象
eval(‘(‘+string+’)’) 返回json对象
6.2 X
Page中调试代码
window.alert 函数不可用于服务器脚本。
使用以下函数写入服务器上的 console.log（例如 C:\Notes\Data\IBM_TECHNICAL_SUPPORT\console.log）：
print(string) 写入一个字符串。
_dump(object) 写入表示对象的字符串。
项目地址: https://gitcode.com/gh_mirrors/xp/XPage 
扫一扫
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
