JSF中的h:commandLink 链接详解

一个常见的情况是在触发一个动作之前弹出一个确认对话框(例如:删除一条记录,取消编辑)。另一个常见的情况是在保存一些信息到服务器之前在客户端做验证,例如在传回服务器之前验证 password和Confirm password是否相等。 
这篇文章描述了在<h:commandLink>和<h:commandButton>组件里如何触发客户端的java script功能。 <h:commandLink> 关联一个java script和一个commandLink并不困难,但是为了能够成功关联你需要理解jsf是怎样解析<h:commandLink>组件的。 
下面的例子说明了<h:commandLink>是怎么被解析成HTML的: 
<h:form id=”userForm”> 
    <h:commandLink id=”lnkDeleteUser” value=”delete” action=”#{userBean.deleteUser}”/> 
</h:form> 
<a href="#" οnclick= "clear_userForm(); 
     document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser'; 
     if (document.forms['userForm'].onsubmit){ 
        if (document.forms['userForm'].onsubmit()) 
          document.forms['userForm'].submit(); 
      } 
     else { 
        document.forms['userForm'].submit(); 
      } 
     return false; " 
     id="userForm:lnkDeleteUser">delete</a> 
这里有几点需要注意: 
    1,<h:commandLink>被解析成了超级链接<a href/>。 
    2,这个超链接的href是"#";基本上是个无用的值。 
    3,JSF为这个超链接的'onclick'事件生成了一堆java script。忽略细节,它主要是调用 submit()函数来提交表单。 
    4,第三行比较有意思--这个组件的id (“userForm::lnkDeleteUser”) 被保存在了一个 hidden元素里。这也是jsf是如何知道哪个组件触发提交表单的操作并正确的调用 服务器端actions的关键。 

    大多数JSF组件允许我们为客户端的DHTML事件(比如onclick,ondoubleclick,onfocus等)注入java script的。但在<h:commandLink〉里JSF已经为onclick事件生成了相关的java script。下面的代码说明了如何在onclick事件里注入打开确认对话框的java script代码: 
<h:form id=”userForm”> 
  <h:commandLink id=”lnkDeleteUser” value=”delete” onClick=”if (!confirm('Are you sure you want to delete this record?')) return false” action=”#{userBean.deleteUser}”/> 
</h:form> 
<a href="#" οnclick= "if (!confirm('Are you sure you want to delete this record?')) return false; 
    clear_userForm(); 
    document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser'; 
    if (document.forms['userForm'].onsubmit){ 
         if (document.forms['userForm'].onsubmit()) 
           document.forms['userForm'].submit(); 
    } else { 
        document.forms['userForm'].submit(); 
    } 
    return false; " 
    id="userForm::lnkDeleteUser">delete</a> 
    另外一个需要注意的重点是java script在任何情况下都不能返回true值。如果返回true值的话,浏览器将会执行<a href="#"/>-这只是指向了一个虚拟的页。 <h:commandButton> commandButton组件要相对简单一些,下面的脚本说明了如何加入一个确认对话框: 
<h:commandButton id=”btnCancel” value=”Cancel” οnclick=”if (!confirm('You will lose all changes made. Are you sure?')) return false" /> 
<input id="userForm:btnCancel" name="userForm:btnCancel" type="submit" value="Cancel" οnclick=" if (!confirm('You will lose all changes made. Are you sure?')) return false; clear_userForm(); "/> 
  在这里的commandButton被解析成了一个提交按钮。如果java script返回true值这个表单会被提交,如果返回false将会忽略表单的提交。 在JSF里成功使用java script的关键是理解它是怎样被解析的。理解一些java script会更好。另外需要小心的是语法,因为大多数IDE都不支持java script的语法交验。如果你写了一个语法错误,例如少了一个打括号,代码将会简单的默默的执行失败:
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值