JSF中UI控件binding属性的用法

最新推荐文章于 2024-10-15 20:08:38 发布

老崔

最新推荐文章于 2024-10-15 20:08:38 发布

阅读量2.1k

点赞数

分类专栏： OpenSource-JSF 文章标签： binding jsf ui richfaces action javascript

OpenSource-JSF 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsf/core" %> <html> <head> <title> Simple jsp page </title> </head> <body> <c:view> <c:loadBundle basename="jsfResource" var="msg"></c:loadBundle> <h:form> <h:outputText value="#{msg.username}"></h:outputText> : <h:inputText value="" binding="#{Backing.txtComponentInput}"></h:inputText> <br> <h:commandButton value="#{msg.btnSubmit}" actionListener="#{Backing.listen}"></h:commandButton> </h:form> </c:view> </body> </html>

index.jsp文件说明，16行就是binding绑定，18行是action事件。其实binding就是把控件的实例以属性的形式存储到bean里面，便于其他函数或方法操作这个控件。在.Net中，每个服务器控件就相当于一个类，服务器控件的属性就是类中的属性。程序编写人员对控件value，color等属性的操作其实就是对类中属性的操作(理解不正确之处，望给予斧正)。这里，JSF的思想和.Net是一致的。把控件的以实例的形式放到bean中，这样就可以用程序随意操作这个控件的各个属性了。

BackingBean.java

import javax.faces.component.UIInput; import javax.faces.event.ActionEvent; import javax.faces.context.FacesContext; /** * Created by IntelliJ IDEA. * User: Administrator * Date: 2006-1-15 * Time: 10:02:59 * To change this template use File | Settings | File Templates. */ public class BackingBean { UIInput txtComponentInput; public UIInput getTxtComponentInput() { return txtComponentInput; } public void setTxtComponentInput(UIInput txtComponentInput) { this.txtComponentInput = txtComponentInput; } public void listen(ActionEvent e) { FacesContext context = FacesContext.getCurrentInstance(); txtComponentInput.setValue("@@@@@@"); txtComponentInput.setRendered(true); System.out.println(e.getComponent().getClientId(context)); } }

BackingBean.java文件说明：主要是27，28行，其意思是当按钮的action事件触发后，就控件txtComponentInput进行操作，这里，我只是对Value和Rendered两个属性进行了操作，当然可以对其他属性进行随意操纵。这里的txtComponentInput其实就是<h:inputText value="" binding="#{Backing.txtComponentInput}"></h:inputText>，把此控件绑定到bean中，便于用程序对其进行动态控制。

Example:

rich:tabPanel在后台进行切换

前台页面:
<rich:tabPanel binding="#{monetaryBean.mytabPanel}">
                <rich:tab id="queryMonetary" binding="#{monetaryBean.queryMonetaryTab}">
                    <h:form>
                        <h:commandButton action="#{monetaryBean.skipOperMonetaryTab}"></h:commandButton>
                    </h:form>
                </rich:tab>
                <rich:tab id="operMonetary" binding="#{monetaryBean.operMonetaryTab}">
                    <h:outputText value="this is what"></h:outputText>
                </rich:tab>
            </rich:tabPanel>
后台方法:
public void skipOperMonetaryTab(){
        mytabPanel.setSelectedTab(operMonetaryTab.getId());
}
前台页面:
<rich:tabPanel binding="#{monetaryBean.mytabPanel}">
                <rich:tab id="queryMonetary" binding="#{monetaryBean.queryMonetaryTab}">
                    <h:form>
                        <h:commandButton action="#{monetaryBean.skipOperMonetaryTab}"></h:commandButton>
                    </h:form>
                </rich:tab>
                <rich:tab id="operMonetary" binding="#{monetaryBean.operMonetaryTab}">
                    <h:outputText value="this is what"></h:outputText>
                </rich:tab>
            </rich:tabPanel>
后台方法:
public void skipOperMonetaryTab(){
        mytabPanel.setSelectedTab(operMonetaryTab.getId());
}
使用Richface通过js脚本直接局部刷新

解释：tabPanel 的switchType有server client ajax三种。Server会产生页面的刷新，ajax会异步的刷新，client则不会跟服务器进行交互。

         <a4j:outputPanel id="accountHTable">
          <h:dataTable headerClass="title2" >
          </h:dataTable>
       </a4j:outputPanel>

RichFaces的官方文档没有提供javascript的API，但仔细观察RichFaces组件生成的页面代码后，发现还是有规律可循，下面仅举一例子：

RichFaces的Tab页默认的切换方式是点击(Click)，但我要想换成鼠标移动就切换呢？以下是实现代码：

<h:form id="f1">

    <rich:tabPanel id="abc" switchType="client" selectedTab="bb"
width="210">
        <rich:tab id="aa" label="a"
onlabelmousemove="if (RichFaces.onTabChange(event, 'f1:abc','f1:aa'))RichFaces.switchTab('f1:abc','f1:aa','')">a</rich:tab>
        <rich:tab id="bb" label="b"
onlabelmousemove="if (RichFaces.onTabChange(event, 'f1:abc','f1:bb'))RichFaces.switchTab('f1:abc','f1:bb','')">b</rich:tab>
        <rich:tab id="cc" label="c"
onlabelmousemove="if (RichFaces.onTabChange(event, 'f1:abc','f1:cc'))RichFaces.switchTab('f1:abc','f1:cc','')">c</rich:tab>
</rich:tabPanel>

</h:form>
可以看出，RichFaces有它专门的一套JavaScript库，但官方并没有公布（也可能是小弟不才，从没发现）。在本例中，主要应用了 RichFaces.switchTab(arg1,arg2,arg3)函数，其中，arg1指tabPanel的ID，arg2指Tab的 ID，arg3指Tab的name（可省略为''）。