当前位置： 移动技术网 > IT编程>网页制作>Html5 > 15. 如何在XPages中提示操作成功

15. 如何在XPages中提示操作成功

2018年10月30日  | 移动技术网IT编程  | 我要评论

江户盗贼团五叶ost,乳房瓜,凯立德家园

web将开发分成前端和后端两部分，两端的代码就有了各种交互的需要和模式。前端的javascript进行校验和界面操作，业务逻辑则在服务器上运行。早期两者交互的模式是，前端脚本完成校验后提交，服务器运行业务逻辑后，转向另一页面或者更改原页面的显示。ajax流行之后，前端的javascript以不刷新页面的方式提交后等待服务器的结果再更新页面。在更新页面部分又可以分为两种情况，一种是较为普遍的服务器返回少量运行结果，javascript在中根据这些结果修改html；另一种是xpages采用的方式，它基于的jsf在一个页面的生命周期里已经包含生成html的阶段，显示的更改是在服务器而不是浏览器中完成的，javascript只是负责将指定了id的某个节点的html替换掉。

 

一个web应用中，在诸如保存和提交成功之类的情况下，页面没有变化，显示也差别不大，有时就需要额外提示用户上一个操作的结果。这时候可以简单在返回的页面中利用alert()函数弹出窗口（较早的做法），也可以更温和地在页面的某一部分用特殊的背景和字体显示消息（当前流行的做法）。这两种方法在xpages下都很容易实现。

 

方案一：下面在一个按钮的单击事件中先执行业务逻辑，然后在返回的页面中弹出提示。

 

[html]  

<xp:button value="label" id="button1">  

    <xp:eventhandler event="onclick" submit="true"  

            refreshmode="complete">  

<xp:this.action><![cdata[#{javascript://business logic goes here. 

view.postscript("alert('done')"); }]]>  

</xp:this.action>  

    </xp:eventhandler>  

</xp:button>  

postscript是xpages为view对象建立的一个很有趣且有用的方法，它会将参数中的脚本传递到前端执行。

 

方案二：在页面上添加一个用于显示操作结果的计算文本（这里使用的风格是粗体黑字黄色背景色），它的值绑定到requestscope.message。同样在按钮中执行完业务逻辑后，将状态传入requestscope.message。

 

[html]  

<xp:p style="text-align:center">  

<xp:text escape="true" id="message" contenttype="html" value="#{requestscope.message}" style="background-color:rgb(255,255,0);font-weight:bold"></xp:text>  

</xp:p>  

  

<xp:button value="label" id="button1">  

    <xp:eventhandler event="onclick" submit="true"  

            refreshmode="complete">  

<xp:this.action><![cdata[#{javascript://business logic goes here. 

requestscope.put("message", "done");}]]>  

</xp:this.action>  

    </xp:eventhandler>  

</xp:button>  

如果业务逻辑是在bean中用java编写，也能够很方便地实现上述两种方案:

 

[java]  

uiviewrootex2 view=(uiviewrootex2) facescontext.getcurrentinstance().getviewroot();  

view.postscript("alert('done')");  

  

facescontext.getcurrentinstance().getexternalcontext().getrequestmap().put("message", "done");  

可以看到上面服务器端javascript中的view是一个java的uiviewrootex2对象，是xpages将jsf的viewroot接口扩展而成的，仍然从facescontext实例的getviewroot方法获得

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网