基于 XPages 的 Web 2.0 应用开发技巧(4)
|
- UID
- 1066743
|
基于 XPages 的 Web 2.0 应用开发技巧(4)
基于上述交互技术实现一个类似传统 Notes Form 的强交互式应用回到上一章获取 Notes 用户名的场景，我们新建一个 XPage 页面，在上面添加一个按钮，用户点击此按钮用来获取 Notes 用户名，并通过客户端脚本弹出框将用户名弹出显示，此 XPage 页面代码如下。
清单 8. 获取 Notes 用户名 XPage 源码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:script clientSide="false" src="/cvtHelperFuncSvr.jss"></xp:script>
</xp:this.resources>
<xp:button value="Click Me" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[
#{javascript:var name=context.getUser().getCommonName();
setFunctionName("Function_Prompt_Alert_FromFormula");
setFunctionPara1(name);
}]]></xp:this.action>
</xp:eventHandler></xp:button>
<xp:scriptBlock>
<xp:this.value>
function refreshToGetDataFromMap(type){
if(type=='confirm')
document.getElementById("#{id:refreshButtonToHandlerDataMap}").click();
else
document.getElementById("#{id:refreshButtonToClosePopupDialog}").click();
}
function getCtrlValue(controlId)
{
var nameCtrl = XSP.getElementById(controlId);
return nameCtrl.value;
}
function getFunctionName(){
return getCtrlValue("#{id:convertHelperFunName}");
}
function getPara1(){
return getCtrlValue("#{id:convertHelperFunPara1}");
}
function getPara2(){
return getCtrlValue("#{id:convertHelperFunPara2}");
}
function getPara3(){
return getCtrlValue("#{id:convertHelperFunPara3}");
}
function getPara4(){
return getCtrlValue("#{id:convertHelperFunPara4}");
}
function getPara5(){
return getCtrlValue("#{id:convertHelperFunPara5}");
}
function clearConvertFunction()
{XSP.getElementById("#{id:convertHelperFunName}").value = "";}
</xp:this.value>
</xp:scriptBlock>
<xp:div id="cvtHelperParagraph">
<xp:inputText id="convertHelperFunName" style="Display:None"></xp:inputText>
<xp:inputText id="convertHelperFunPara1" style="Display:None"></xp:inputText>
<xp:inputText id="convertHelperFunPara2" style="Display:None"></xp:inputText>
<xp:inputText id="convertHelperFunPara3" style="Display:None"></xp:inputText>
<xp:inputText id="convertHelperFunPara4" style="Display:None"></xp:inputText>
<xp:inputText id="convertHelperFunPara5" style="Display:None"></xp:inputText>
<xp:inputText id="Prompt_Function_MiddleValue" style="Display:None">
</xp:inputText>
<xp:inputText id="Prompt_Function_Exec" style="Display:None" value="false">
</xp:inputText>
<xp:text escape="false" id="cvtComputedField">
<xp:this.value>
#{javascript:return "<script>initConvertHelper();</script>"}
</xp:this.value>
</xp:text>
</xp:div>
</xp:view>
|
客户端 JavaScript 函数 Function_Prompt_Alert_FromFormula实现弹出用户名操作，该函数的唯一参数为弹出框上显示的提示信息。
清单 9.Function_Prompt_Alert_FromFormula 代码实例1
2
3
4
| function Function_Prompt_Alert_FromFormula(){
var para1 = getPara1();
alert(para1);
}
|
当用户点击“Click me”按钮时，该按钮绑定的服务器端脚本将调用 context.getUser().getCommonName()语句来实现 Notes 用户名的获取，再通过本文所提供的服务器端 JavaScript 与客户端 JavaScript 交互解决方案来完成通过弹出框向用户展示用户名信息。示例运行效果如下图。
图 6. 服务器端 JavaScript 与客户端 JavaScript 交互示例运行效果 因为本示例中 Notes 用户尚未经过登陆操作，所以返回的用户名为 anonymous 匿名用户。 |
|
|
|
|
|
