XPAGE学习笔记.doc

XPAGE学习笔记1 Theme22 在Xpage中使用Dojo22.1 加载dojo.js22.2 设置应用程序主题引入tundra.css22.3 设置xpage属性引入dojo模块32.4 Xpage的页面html代码42.5 在xpage中使用dojo编程42.5.1 按钮(dijit.form.Button) 通过插入标签生成dojo按钮 使用xpage按钮控件 在按钮控件上使用事件处理程序控件72.5.2 Xpage中使用 Spinner(dijit.form.NumberSpinner)92.5.3 在xpage中使用ProgressBar(dijit.ProgressBar)102.5.4 在Xpage中使用树(dijit.Tree) JSON与XML数据源 Box树与Order树 对树进行添加、删除及重命名操作 将树的操作记录到后台数据库 树的拖放153 在Xpage中如何查找控件163.1 理解document.getElementById163.2 理解dojo.byId173.3 理解dijit.byId173.4 理解XSP.getElementById173.5 理解getComponent174 Xpage VS 表单185 使用oneui主题186 参考186.1 JSON与String转换186.2 XPage中调试代码181 Theme主题在Domino中的路径：D:IBMLotusDominoxspnsfthemes2 在Xpage中使用Dojo Xpage自动加载dojo.js 通过设置应用程序主题将tundra.css引用到xpage 设置xpage属性，引用dojo模块 在xpage中使用dojo编程2.1 加载dojo.jsXpage会自动加载dojo.js，默认情况下xpage自动查找datadominojs下的最新版本。也可以通过设置perties文件来修改dojo版本，重命名perties.sample 文件(D:IBMLotusDominodataproperties perties.sample)2.2 设置应用程序主题引入tundra.css通过设置应用程序主题将tundra.css引用到xpage2.3 设置xpage属性引入dojo模块2.4 Xpage的页面html代码2.5 在xpage中使用dojo编程2.5.1 按钮(dijit.form.Button) 通过插入标签生成dojo按钮 使用xpage按钮控件 在按钮控件上使用事件处理程序控件 通过插入标签生成dojo按钮第一步：在xpage中插入第二步：在xpage中插入第三步：编写客户端javascript!CDATAfunction 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); 使用xpage按钮控件!CDATAvar dia = new dijit.Dialog(title:提示：,style:width:150px;);var pane = document.createElement(div);pane.innerHTML = dojo按钮演示！;dia.setContent(pane);dia.show(); 在按钮控件上使用事件处理程序控件将事件处理程序控件拖放到按钮控件上2.5.2 Xpage中使用 Spinner(dijit.form.NumberSpinner)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)!CDATAvar numParts = Math.floor(100/7);jsProgress.update( maximum: numParts, progress:0 );for (var i=0; i2.5.4 在Xpage中使用树(dijit.Tree) JSON与XML数据源 Box树与Order树 对树进行添加、删除及重命名操作 将树的操作记录到后台数据库 树的拖放 JSON与XML数据源box.json文件identifier:id,label:name,items:id:1,name:盒子1,type:box,weight:0order.xml文件001订单001航通DOJ目管理那些事儿002订单002快通J2E越对手 Box树与Order树lastBoxSelected = item; 对树进行添加、删除及重命名操作添加boxStore.newItem(id:2,name:盒子2,type:box,weight:0,orders:);删除if(boxStore.isItem(lastBoxSelected)boxStore.deleteItem(lastBoxSelected);重命名if(boxStore.isItem(lastBoxSelected)boxStore.setValue(lastBoxSelected,name,新盒子); 将树的操作记录到后台数据库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(数据保存成功！);); 树的拖放要使树具有拖放功能，仅仅需要设置dndController属性（dijit._tree.dndSource已废弃）：要限制拖放的行为，仅仅需要实现checkAcceptance或checkItemAcceptance处理函数即可：以上已经实现了树的拖放功能了！但是，如果要将拖放的结果保存起来，也就是说要改变树的模型并将模型数据保存，那么应该编写onDndDrop的处理函数（通过增加jsId获得dndController会出现this.avaria is null 错误，所以下面通过小部件初始化时将dndController传递给变量controller）：在boxDrop中与checkAcceptance一样可以得到target与source，另外，onDndDrop中的source与nodes有些相似source.selectionsomething=nodessomethin结合ItemFileWriteStore 可以实现对模型数据的保存3 在Xpage中如何查找控件3.1 理解document.getElementById得到node，创建node可以用document.createElement这样访问或设置节点的所有属性node.innerHTML = “”node.value=”var id = node.idvar style = node.style3.2 理解dojo.byId得到node，也可以通过dijit.byId().domNode得到节点dojo.byId(“myid”).valuedojo.byid(“myid”).iddojo.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” = “myname”xid.disabled = false3.5 理解getComponentjavascript服务器端访问控件getComponet(“myid”).getValue();getComponet(“myid”).getSubmittedValue();getComponent(“myid”).setValue();getComponent(“myid”).setSubmittedValue();4 Xpage VS 表单5 使用oneui主题6 参考6.1 JSON与S