启用 Ajax 的复合组件答案

【问题标题】：Ajax-enabled composite component启用 Ajax 的复合组件
【发布时间】：2010-05-29 15:38:42
【问题描述】：

我在我的 JSF 2.0 项目中使用复合组件，我想将我的复合组件与这样的组合：

<ex:mycompositecomponent>
    <f:ajax event="change" render="anotherComponent" />
</ex:mycompositecomponent>

有什么办法吗？

【问题讨论】：

标签： java ajax jsf composite-component

【解决方案1】：

应该是。

以下代码值得一试：

<!-- mycompositecomponent.xhtml -->
    ...
    <composite:implementation>
      <h:inputText ...>
        <composite:insertChildren /> <!-- contents within <ex:mycompositecomponent>...</ex:mycom....> goes here -->
      </h:inputText>
    </composite:implementation>
    ...

现在您可以使用 mycompositecomponent.xhtml 了。

【讨论】：

如果他想在复合组件内的多个位置添加多个 AJAX 处理程序怎么办？

【解决方案2】：

我知道旧线程，但是您可以使用未记录的 clientBehavior 来执行此操作属性。此代码将 keyup 事件从 h:inputText 映射到逻辑事件“我的事件”。希望这是不言自明的。

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:sqcc="http://java.sun.com/jsf/composite/sqcc"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form id="mainform" prependId="false">
            <sqcc:testcomp value="#{indexBean.inputText1}">
                <f:ajax render=":mainform:echo1"/>
            </sqcc:testcomp>
            <h:outputText id="echo1" value="a:#{indexBean.inputText1}"/>
            <br/>
        </h:form>
    </h:body>
</html>

testcomp.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:cc="http://java.sun.com/jsf/composite"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:ui="http://java.sun.com/jsf/facelets">

    <cc:interface>
        <cc:attribute name="value"/>
        <cc:clientBehavior name="myevent" default="true" event="keyup" targets="#{cc.clientId}:ccinput"/>
    </cc:interface>

    <cc:implementation>
        <h:outputLabel for="#{cc.clientId}:ccinput" value="Input: "/>
        <h:inputText id="ccinput" value="#{cc.attrs.value}"
                     autocomplete="off">
            <f:ajax event="keyup" render="#{cc.clientId}:ccoutput"/>
        </h:inputText>
        <h:outputText id="ccoutput" value="cc:#{cc.attrs.value}"/>
    </cc:implementation>
</ui:component>

IndexBean.java

package testAjaxCC;


import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class IndexBean implements Serializable {

    private String inputText1;
    private String inputText2;

    public IndexBean() {
    }

    public String getInputText1() {
        return inputText1;
    }

    public void setInputText1(String inputText1) {
        this.inputText1 = inputText1;
    }

    public String getInputText2() {
        return inputText2;
    }

    public void setInputText2(String inputText2) {
        this.inputText2 = inputText2;
    }

}

【讨论】：