0

正直に言うと、RichFaces のポップアップ パネルは非常に扱いにくいものです。いくつかの JavaScript へのいくつかの呼び出しが含まれているため、一般的に機能するものを簡単に派生させることはできません。とにかく、私は次のことを試していました：

<?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="...") か、右上隅のポップアップを X する ( with )ことによって非表示になるはずです。キャンセルを押します。OK では、AJAX フォームが送信され、ポップアップも非表示になります。しかし、何も起こりません (閉じることができません):<f:facet>onclick="..."<h:commandButton onclick="...">

ここに画像の説明を入力

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 を押したり、[OK] または [キャンセル] を押したりしても何も起こりません (ポップアップはそのままです)。

Firebug のみが表示されます:

syntax error
.hide(); return false;

式が null/空の文字列に評価されるようです。

どうしたの？修正できますか？私の代替手段は何ですか？

PS: 以前、Facelets 式で「popupId」を使用しようとしたことに注意してください。

<h:commandButton value="Cancel" onclick="#{rich:component('popupId')}.hide(); return false;" immediate="true" />

しかし、これは同じ結果になります。

4

2 に答える 2

1

一重引用符を省略すると、うまくいきました：

<h:commandButton value="Cancel" onclick="#{rich:component(popupId)}.hide(); return false;" immediate="true" />

JSの一部だと思っていたのですが、ここではELのようです。

于 2012-05-08T02:19:32.010 に答える
0

また、これを試すこともできます：-onmaskclick = "＃{rich：component（'cc.attrs.popupId'）}。hide（）"引用符で問題が発生する場合は、 ＆quot ;を使用してください。それらの代わりに。

ここでは、カスタムコンポーネントの公開変数を介して、ポップアップパネルのIDを動的に解析しようとしていると思います。idの値を次のように解析している可能性があります

popupId = "xyz"これがこの状況である場合、上記の解決策は問題なく機能します。

于 2012-05-08T17:46:14.700 に答える