基于 XPages 的 Web 2.0 应用开发技巧(5)
|
- UID
- 1066743
|
基于 XPages 的 Web 2.0 应用开发技巧(5)
案例改进与论证通过以上案例我们实现了服务器端 JavaScript 脚本向客户端 JavaScript 脚本传递消息进行展现的操作，信息的传递方向为服务器端向客户端。让我们考虑如下情况，用户点击 XPage 页面中的某个按钮，触发该按钮绑定的服务器端 JavaScript 脚本，该服务器端脚本要求用户输入相关信息后才能继续操作。该案例的消息传递流为服务器端 JavaScript 至客户端 JavaScript 至服务器端 JavaScript，那么如何才能实现这么复杂的服务器端 JavaScript 与客户端 JavaScript 的交互操作呢？
由前述案例我们已经完成了服务器端脚本至客户端脚本单向的交互操作，而本案例服务器端与客户端交互部分我们也可以用上述原理实现。但是有两点区别：
- 按钮绑定的服务器端 JavaScript 事件在执行到等待用户输入操作时，应停止执行剩下的服务器端脚本。
- 用户完成在客户端 JavaScript 生成的输入框内的输入操作时，应再次触发该按钮绑定的服务器端 JavaScript 事件。这次在执行到等待用户完成输入操作时，因为已经取得了用户的输入值，所以可以继续执行剩余部分的事件脚本。直至完成该按钮绑定的事件脚本。
显然，该按钮绑定的事件脚本要执行两遍，第一遍跳转至用户输入，而第二遍则完成所有的操作。那么，我们该如何来实现这样的功能呢？其实这可以简单的在页面中放置一个隐藏的控件来实现，该控件初始值为 false, 当在执行事件脚本时，判断该控件值，则值为 true，则完成执行所有的事件脚本，如果该控件值为 false, 则将该控件值设为 true，然后跳转至用户输入功能模块。
清单 10. 事件脚本执行情况标识控件代码1
2
| <xp:inputText id="Prompt_Function_Exec" style="Display:None" value="false">
</xp:inputText>
|
另外，我们还需要一个在 XPage 页面中添加一个隐藏的控件来存储用户从弹出框里输入的值，该值在第二次执行按钮事件脚本时，该会被直接使用。
清单 11. 用户输入值隐藏控件代码1
| <xp:inputText id="Prompt_Function_MiddleValue" style="Display:None"></xp:inputText>
|
接下来，向大家展示完整的示例代码。
清单 12. 复杂交互示例 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
| <xp:panel themeId="Panel.actionsBar">
<xp:button dojoType="dijit.form.Button" id="AbT0" value="Click me to input name">
<xp:eventHandler event="onclick"
refreshId="cvtHelperParagraph" refreshMode="full"
submit="true">
<xp:this.action>
<![CDATA[
#{javascript:
try{
var n = "User Input Name: ";
var name = Function_Prompt_FromFormula(this,"[OkCancelEdit]",
"Enter Your Name",
"Type your name in the box below.",
@UserName());
@SetField("value", @List(n, name));
}catch(e){
print("exception occur");
}
}]]>
</xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
<xp:panel style="">
<xp:inputText id="value" style="" value="#{currentDocument.value}"></xp:inputText>
</xp:panel>
|
从此段代码中可以看出，该 XPage 页面有一个按钮，当用户点击它时，将弹出一个输入框供用户进行名称的输入，当用户完成用户名输入以后，则在 value 控件里显示”User Input Name ：”加上用户所输入的用户名。而 Function_Prompt_FromFormula函数实现了动态判断是否需要弹出输入框，该函数代码如下。
清单 13. Function_Prompt_FromFormula 函数代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| function Function_Prompt_FromFormula(param0,param1,param2,param3,param4){
if(param1!=null&¶m1!=undefined) setFunctionPara1(param1);
if(param2!=null&¶m2!=undefined) setFunctionPara2(param2);
if(param3!=null&¶m3!=undefined) setFunctionPara3(param3);
if(param4!=null&¶m4!=undefined) setFunctionPara4(param4);
setFunctionPara5(param0.getParent().getId());
if(param1=="[Ok]") {
setFunctionName("Function_Prompt_Alert_FromFormula");
}else{
var Prompt_Function_Exec:String=getComponent("Prompt_Function_Exec").getValue();
if(Prompt_Function_Exec.equals("false")){
getComponent("Prompt_Function_Exec").setValue("true");
}else{
getComponent("Prompt_Function_Exec").setValue("false");
setFunctionName("");
var returnValue=getComponent("Prompt_Function_MiddleValue").getValue();
return returnValue;
}
if(param1.equals("[OkCancelEdit]")){
setFunctionName("Function_Prompt_Prompt_FromFormula");
return;
}
}
}
|
当控件 Prompt_Function_Exec 的值为 true 时，直接返回 Prompt_Function_MiddleValue 的控件值，否则，则调用 setFunctionName("Function_Prompt_Prompt_FromFormula")函数来实现用户名数据的输入操作。函数 setFunctionName 的实现原理我们在前一章的案例中已经介绍了，接下来，将为大家讲解一下客户端 JavaScript 函数 Function_Prompt_Prompt_FromFormula的实现。
清单 14. 客户端函数 Function_Prompt_Prompt_FromFormula 实现代码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
| function Function_Prompt_Prompt_FromFormula(){
var para1 = getPara1();
var para2 = getPara2();
var para3 = getPara3();
var para4 = getPara4();
var para5 = getPara5();
var value=window.prompt(para3,"");
var hiddenList=document.getElementsByTagName("input");
for(var i=0;i<hiddenList.length;i++){
var inputCompId=hiddenList.id;
if(inputCompId!=""&&inputCompId.indexOf("Prompt_Function_MiddleValue")>-1){
hiddenList.value=value;
break;
}
}
var refreshButtonID=null;
var buttonList=document.getElementsByTagName("button");
for(var i=0;i<buttonList.length;i++){
var inputCompId=buttonList.id;
if(inputCompId!=""&&inputCompId.indexOf(para5)>-1){
refreshButtonID=inputCompId;
break;
}
}
setTimeout("document.getElementById('"+refreshButtonID+"').click()",1000);
}
|
当用户在 window.prompt 输入框内完成数据输入操作时，将该输入值存储在 Prompt_Function_MiddleValue 控件中，并再次触发事件绑定按钮，将该输入值传递给服务器端脚本，完成该按钮绑定的全部服务器端脚本操作。具体实现效果如下图所示。
图 7. 服务器端与客户端脚本复杂交互示例运行效果 ( 第一部分 ) 图 8. 服务器端与客户端脚本复杂交互示例运行效果 ( 第二部分 ) 图 9. 服务器端与客户端脚本复杂交互示例运行效果 ( 第三部分 ) 至此，我们已经完成了该服务器端 JavaScript 与客户端 JavaScript 进行交互的复杂案例设计与实现。当然，要用纯客户端 JavaScript 实现类似的的功能很简单，本文主要是借助这样一个案例向读者讲述在 XPage 中如何实现服务器端 JavaScript 和客户端 JavaScript 之间的交互操作。 |
|
|
|
|
|
