3

入力要素をラップし、「オプションのフィールド」指定とその下の h:message 要素でそれを拡張することを目的とした複合コンポーネントを作成しています。コンポーネントは次のとおりです (input.xhtml ファイル内)。

<composite:interface/>
<composite:implementation>
  <div>
  #{component.children[1].setStyleClass(component.children[1].valid ? '' : 'inputError')}
    <composite:insertChildren/>
  </div>
  <h:panelGroup styleClass="optional" 
      rendered="#{!component.parent.children[1].required}" 
      layout="block" >
    #{msgs['common.optional.field']}
  </h:panelGroup>
  <h:message id="msgId" 
       for="#{component.parent.children[1].id}" errorClass="error"/>
</composite:implementation>

繰り返しになりますが、このコンポーネントの使用目的は、使用中のページで最初で直接の子であると予想される h:input* 要素をラップすることです。

using ページでは、次のように記述します。

    <h:form id="f1">
    <h:panelGrid border="0" columns="2" style="width: 80%">
        <f:facet name="header">
            <col width="40%" />
            <col width="60%" />
        </f:facet>
        <h:outputLabel styleClass="sectionBody" for="i1"
            value="Input 1"></h:outputLabel>
            <my:input id="ii1">
            <h:inputText id="i1" size="20" maxlength="20" tabindex="0"
            required="true" label="Input 1">
            </h:inputText>
            </my:input>
        <h:outputLabel styleClass="sectionBody" for="i2"
            value="Input 2"></h:outputLabel>
            <my:input id="ii2">
            <h:inputText id="i2" size="20" maxlength="20" tabindex="0"
                label="Input 2">
            </h:inputText>
            </my:input>
    </h:panelGrid>
    <br />
    <h:commandButton value="Submit" tabindex="1">
        <f:ajax listener="#{terminalImportBean.addTerminal}" 
          execute="@form" render="@form"/>
    </h:commandButton>
</h:form>

これは、通常の投稿を使用して問題なく機能します。ただし、「入力 1」(id="i1") に f:ajax 検証を追加し、次を使用してコンポジット (ii1) を再レンダリングしようとすると、次のようになります。

...   
         <h:outputLabel styleClass="sectionBody" for="i1"
            value="Input 1"></h:outputLabel>
         <my:input id="ii1">
            <h:inputText id="i1" size="20" maxlength="20" tabindex="0"
            required="true" label="Input 1">
               <f:ajax listener="#{myBean.checkInput1}" 
                  event="blur" 
                  render="ii1"/>
            </h:inputText>
         </my:input>
...

ajax 応答処理中にブラウザーでエラーを生成します。

malformedXML: During update: f1:ii1 not found

f1:ii1、を使用してみ:f1:ii1ましたが、役に立ちませんでした。私が使用するとき、msgIdまたは:f1:ii1:msgIdそれが機能するとき。理由を知っている人はいますか？

Mojarra 2.1.3 を使用しています

ありがとう

4

1 に答える 1

5

これは、複合コンポーネント自体が HTML に何もレンダリングしないためです。その子のみが HTML にレンダリングされています。f1:i11生成された HTML 出力には、ID を持つ HTML 要素は存在しません。ブラウザでページを開き、右クリックしてソースを表示します。そこを自分で見てください。その ID を持つ要素はありません。JavaScript/Ajax でもまったく同じ問題が発生しています。更新するための要素が見つかりません。

これを解決するには、複合体全体を HTML でラップする<div>か、基本的には を出力<span>する ID を割り当てる必要があります。#{cc.clientId}UIComponent#getClientId()

<cc:implementation>
    <div id="#{cc.clientId}">
        ...
    </div>
</cc:implementation>

次に、以下のように参照できます。

<my:input id="foo" />
...
<f:ajax ... render="foo" />

特定の複合コンポーネントの子を参照することもできます。

<f:ajax ... render="foo:inputId" />

以下も参照してください。

于 2012-11-09T20:43:02.367 に答える