HtmlInputText + カスタム レンダラーを拡張して Twitter Bootstrap html マークアップを作成するカスタム コンポーネントがあります。例えば:
<bf:inputText id="a" label="L1" value="#{dummyMB.str}" formLayout="horizontal" labelSize="2" inputSize="6"/>
それはレンダリングします:
<div id="form:a-componente" class="form-group ">
<label for="form:a" class=" control-label col-md-2">L1</label>
<div class="col-md-3 ">
<input id="form:a" type="text" name="form:a" class="form-control form_a" dir="ltr">
</div>
</div>
ajax render 属性を介してこの特定のコンポーネントを更新する必要があるまで、すべてが正常に機能します。コンポーネントは html マークアップを失います。
アヤックスの後:
<div id="form:a-componente" class="form-group ">
<label for="form:a" class=" control-label col-md-2">L1</label>
<div class="col-md-6 ">
<input id="form:a" class="form-group " dir="">
</div>
</div>
フォーム全体を ajax で更新しようとすると、できます。ah:panelGroup 内にネストすると機能します。
render 属性内の id を使用してコンポーネントを具体的に更新しようとした場合にのみ機能しません。
これは、カスタム コンポーネントの getStyleClass() のオーバーライドです。
@Override
public String getStyleClass() {
String styleClass = super.getStyleClass();
if(StringUtils.isEmpty(styleClass)) {
styleClass = "";
}
if(!styleClass.contains(BFConstantes.DEFAULT_STYLE_CLASS)) {
styleClass += BFConstantes.DEFAULT_STYLE_CLASS;
}
if(!styleClass.contains(FaceletsFunctions.styleClassId(this))) {
// O JSF usa o caracter ":" para identificar o componente
// O jQuery usa o caracter ":" como reservado
// Para evitar o conflito, eu substituo os ":" do id do componente por "_" e adiciono como classe CSS
// Assim o jQuery o código referenciar os componentes JSF individualmente.
styleClass += FaceletsFunctions.styleClassId(this);
}
setStyleClass(styleClass);
return super.getStyleClass();
}