RichFacesのポップアップパネルは、正直なところ、かなり醜いです。 JavaScriptにはいくつかの呼び出しがあり、一般的に動作するものを派生させることは容易ではありません。とにかく、私はしようとしていた次RichFacesポップアップパネルをFaceletsのサブビュー/コンポジションとして作成することはできません
<?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:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:commandLink>
<h:graphicImage library="images/icons" name="#{buttonImageFileName}" />
<rich:tooltip value="#{buttonTooltipText}" direction="bottomRight" />
<rich:componentControl target="#{popupId}" operation="show" />
</h:commandLink>
<rich:popupPanel modal="true"
height="#{popupHeight}"
resizeable="#{popupResizable}"
onmaskclick="#{componentCallToId}.hide(); return false;"
id="#{popupId}">
<f:facet name="header">
<h:outputText value="#{popupHeaderText}" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{componentCallToId}.hide(); return false;">
<h:outputText value="X" />
</h:outputLink>
</f:facet>
<p>#{popupSubject}</p>
<p>
<h:inputText value="#{inputTextBean[inputTextProperty]}" styleClass="full-width" id="#{inputTextId}" />
</p>
<h:panelGrid columns="2" style="margin: 0 auto;">
<h:commandButton value="OK"
action="#{acceptButtonBean[acceptButtonMethod](acceptButtonMethodArg)}"
onclick="#{componentCallToId}.hide(); return true;">
<a4j:ajax execute="@this #{inputTextId}" render="@form" />
</h:commandButton>
<h:commandButton value="Cancel" onclick="#{componentCallToId}.hide(); return false;" immediate="true" />
</h:panelGrid>
</rich:popupPanel>
</ui:composition>
これはなっポップアップの外側をクリックして非表示にする単純な入力ダイアログをポップアップ表示画像ボタンを表示(onmaskclick =「...」)右上のポップアップ(<f:facet>
にonclick="..."
)をX'ingするか、キャンセル<h:commandButton onclick="...">
を押してください。 OKでAJAXフォームはと提出されたと考えられているであり、ポップアップも隠されています。しかし、何も(閉じることはできません)起こらない:
EL式#{componentCallToId}.hide(); return false;
は、上記の「問題児」です。そのようには機能しません。
ここでその元、非Faceletsのバリアント(http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&sample=modalPopup&skin=classic)でコンポーネントを制御するための呼び出しは次のようになります。
<h:commandButton value="Cancel" onclick="#{rich:component('add-root-chapter-popup')}.hide(); return false;" immediate="true" />
私は<ui:include>
に次のパラメータを渡す:
<ui:include src="/subviews/add-node-clink-input-popup.xhtml">
<ui:param name="buttonImageFileName" value="add.png" />
...
<ui:param name="popupId" value="add-root-chapter-popup" />
<ui:param name="componentControlCallToId" value="rich:component('add-root-chapter-popup')" />
...
</ui:include>
長いエントリ(残りの部分は動作しているようですが、Bean +メソッド+ argの奇妙な構文でさえ、これはここでは焦点ではありません)。
Q:
なぜ働いていない<ui:param name="componentControlCallToId" value="rich:component('add-root-chapter-popup')" />
ですか?現在のところ、ポップアップの外側をクリックしたり、X'ingしたり、[OK]または[キャンセル](ポップアップ滞在)を押しても何も起こりません。
Firebugのが唯一の例を示します式がヌル/空の文字列に評価されるように
syntax error
.hide(); return false;
が見えます。
何が問題なのですか。それは修正できますか?私の選択肢は何ですか?
PS:注意、私は以前
<h:commandButton value="Cancel" onclick="#{rich:component('popupId')}.hide(); return false;" immediate="true" />
ようFaceletsの表現で "popupId" を使用しようとしたが、これは同じ結果を持っていること。単一引用符を省略