基于 XPages 的 Web 2.0 应用开发技巧(3)
|
- UID
- 1066743
|
基于 XPages 的 Web 2.0 应用开发技巧(3)
服务器端 JavaScript 与客户端 JavaScript 交互分析与实现服务器端 JavaScript 在与 Domino 文档、数据库交互方面有着及其强大的功能及丰富的内置函数支持，而客户端 JavaScript 则在与用户交互、信息提示等有着更大的优势。那么，如何才能完成服务器端 JavaScript 和客户端 JavaScript 的交互使用，充分发挥两种脚本语言的优势和长项呢？
考虑这样一个简单的场景，我们要获取当前 Notes 用户的用户名，并用弹出框展示出来。分为两个部分，第一个部分为获取 Notes 用户的用户名，我们可以使用服务器端 JavaScript 脚本 context.getUser().getDistinguishedName()来正确获取到。第二个部分为用弹出框向用户展示用户名称，这个操作也相当简单，通过客户端 JavaScript 函数 alert()就可以实现。但是问题是，服务器端脚本获取到用户名以后，如何传递给客户端脚本进行展示呢？ XPages 本身并不支持服务器端脚本与客户端脚本的直接性交互，这需要我们设计出一种可行的服务器端脚本与客户端脚本的交互模式来。
由于服务器端 JavaScript 脚本运行在 Domino 服务器端，而客户端 JavaScript 脚本运行在浏览器客户端，要实现服务器端 JavaScript 与客户端 JavaScript 进行交互，我们可以采用如下的设计。
在 XPage 页面中添加一个 id 为 convertHelperFunName 的 inputText 控件，用来存放服务器端将要调用的客户端 JavaScript 函数名。并在 XPage 页面中添加多个存放函数参数的输入控件，当然，把这些控件设为不可见。在 XPage 页面初始化时，取出控件 convertHelperFunName 中的值，通过 eval 函数实现对该函数的调用操作，具体代码如下。
清单 5.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
| <xp:scriptBlock>
<xp:this.value>
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:text escape="false" id="cvtComputedField">
<xp:this.value>
#{javascript:return "<script>initConvertHelper();</script>"}
</xp:this.value>
</xp:text>
</xp:div>
|
定义函数 getFunctionName 来获取存放在 convertHelperFunName 控件中的函数名称，并定义了多个函数来获取不同的函数参数。这里，我们采用客户端 JavaScript 内置的 XSP 对象来获取控件值，在 XPage 页面初始化完成之后，将会调用 initConvertHelper() 函数来实现对客户端函数的调用。函数 initConvertHelper 代码如下。
清单 6. 客户端函数调用实现代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| function initConvertHelper()
{
var funName = getFunctionName();
if(funName != null && funName != ""){
executeFunction(funName);
clearConvertFunction();
}
}
function executeFunction(functionName)
{
if(functionName != null && functionName != ""){
eval(functionName+"()");
}
}
|
这样我们已经完成客户端 JavaScript 代码对服务器端 JavaScript 传递过来的函数进行调用的功能，这是一个“取”的操作。要完成整个服务器、客户端脚本的交互功能，还需要完成一个“存”的操作，即完成将服务器端要求客户端进行调用的函数的函数名放置在控件 convertHelperFunName 中，代码如下。
清单 7. 服务器端函数名称传递实现代码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 setFunctionName(functionName)
{
getComponent("convertHelperFunName").setValue(functionName);
}
function setFunctionPara1(para)
{
getComponent("convertHelperFunPara1").setValue(para);
}
function setFunctionPara2(para)
{
getComponent("convertHelperFunPara2").setValue(para);
}
function setFunctionPara3(para)
{
getComponent("convertHelperFunPara3").setValue(para);
}
function setFunctionPara4(para)
{
getComponent("convertHelperFunPara4").setValue(para);
}
function setFunctionPara5(para)
{
getComponent("convertHelperFunPara5").setValue(para);
}
|
这样，我们通过设置中转控件的方式，完成了服务器端脚本与客户端脚本的交互设计。下面将举例来论证和验证该交互模式。 |
|
|
|
|
|
