Richfaces 组件控制切换弹出窗口

Question

我希望单个控件显示 rich:popupPanel （如果它不可见），并隐藏它（如果它已经可见）。

通过教程和代码示例，我想出了：

<h:outputLink value="#" id="loginLink">Login
    <rich:componentControl event="click"  operation="show" target="loginPane" >
        <a4j:param name="event" value="event" noEscape="true" />
        ... more params for positioning ...
    </rich:componentControl>
</h:outputLink>

<rich:popupPanel id="loginPane" autosized="true" modal="false" moveable="false" resizeable="false" followByScroll="false" onshow="#{rich:element('userName')}.focus()" >
    <h:form>
   ...
    </h:form>
</rich:popupPanel>

它很好地显示了我的 popupPanel 和后续表单。我只是无法识别一种方法来重载该outputLink的componentControl以隐藏和显示。当然，“toggle”不是一个关键字 - 那太简单了:) 我对 JSF 和 javascript 还很陌生，并且在今天的大部分时间里一直在尝试各种事情。谁能推荐一些东西让我朝着正确的方向前进？

Answer 1

对我来说，以下解决方案有效，而confirmPanel是弹出窗口中包含更新数据的面板。

<rich:column>
    <a4j:commandButton value="Delete" render="confirmPanel"
        oncomplete="#{rich:component('confirmPane')}.show()"
        ajaxSingle="true">
        <a4j:param value="#{record.id}" assignTo="#{showActivitiesAsTableView.selectedActivityId}" />
    </a4j:commandButton>
</rich:column>

Answer 2

最后，我最终选择了懒惰的路线：

我内联编辑了页面的 css，以采用 rf-p-shade 样式而不影响 alpha，并创建了一个 onmaskclick 事件来关闭弹出窗口。我无法让它用 javascript 或 jsf 符号复制“切换”之类的行为。

Answer 3

我刚刚偶然发现了这一点。希望经过这么长时间，有人会发现我相对简单的解决方案很有用：

<h:form id="myForm">

  <h:outputScript>
    var popupVisible = false;

    function toggleComponent(component, currentVisibility) {
      if (!currentVisibility) {
        component.show();
      } else {
        component.hide();
      }
    }
  </h:outputScript>

  <rich:popupPanel id="myPopup" domElementAttachment="form" modal="false"
                   onshow="popupVisible = true;"
                   onhide="popupVisible = false;">
    <!-- popup content here -->
  </rich:popupPanel>

  <a4j:commandLink onclick="toggleComponent( #{rich:component('myPopup')}, popupVisible );">
    <h:graphicImage value="/images/some_fancy_icon.jpg" />
  </a4j:commandLink>

</h:form>

请注意：它仅适用于非模式面板。

您甚至可以有多个弹出窗口，并且在一个弹出窗口的 onshow() 上，您可以关闭所有其他弹出窗口。当然，每个人都需要一个单独的 ...Visible 变量。