Primefaces 在多个对话框之间切换

Question

我正在使用 PrimeFaces 4.0。我有一个包含三个对话框组件（对话框 1、对话框 2、对话框 3）和三个按钮组件（按钮 1、按钮 2、按钮 3）的页面，单击按钮 1 将显示对话框 1，单击按钮将显示对话框 2按钮2，点击按钮3会显示对话框3。用户可以同时打开这三个对话框，这意味着用户可以在这三个对话框都显示的情况下做一些工作，就像这样：

当用户在对话框中做一些工作时，我首先需要更改 backing bean 中的一些值并更新一些组件，当用户通过单击按钮显示对话框时，没有问题，我可以更改一些值用户单击的按钮的 ActionListener 被触发，但是当用户显示三个对话框并通过单击对话框更改活动对话框时，如下所示：

如何将活动对话框从“对话框 1”更改为“对话框 2”？

这是我的 xhtml 代码：

    <p:commandLink onclick="dialog1.show()" update="outputText" actionListener="#{testBean.changeActiveDialog('Dialog 1')}">button 1</p:commandLink><br/>
    <p:commandLink onclick="dialog2.show()" update="outputText" actionListener="#{testBean.changeActiveDialog('Dialog 2')}">button 2</p:commandLink><br/>
    <p:commandLink onclick="dialog3.show()" update="outputText" actionListener="#{testBean.changeActiveDialog('Dialog 3')}">button 3</p:commandLink><br/>
    <br/><hr/><h:outputText id="outputText" value="Active dialog: #{testBean.activeDialog}"/>

    <p:dialog id="dialog1"
          header="dialog 1"
          resizable="true" 
          dynamic="false" 
          modal="false" 
          draggable="true" 
          widgetVar="dialog1"
          minimizable="true" 
          maximizable="true">
            dialog1
    </p:dialog>
    <p:dialog id="dialog2"
          header="dialog 2"
          resizable="true" 
          dynamic="false" 
          modal="false" 
          draggable="true" 
          widgetVar="dialog2"
          minimizable="true" 
          maximizable="true">
            dialog2
    </p:dialog>
    <p:dialog id="dialog3"
          header="dialog 3"
          resizable="true" 
          dynamic="false" 
          modal="false" 
          draggable="true" 
          widgetVar="dialog3"
          minimizable="true" 
          maximizable="true">
            dialog3
    </p:dialog>

还有我的观点豆：

public class TestBean extends BaseBean {

    private String activeDialog;

    public void changeActiveDialog(String dialog)
    {
        activeDialog = dialog;
    }

    public String getActiveDialog() {
        return activeDialog;
    }

    public void setActiveDialog(String activeDialog) {
        this.activeDialog = activeDialog;
    }
}

我搜索了它，但我没有找到解决问题的方法。任何建议将不胜感激，在此先感谢。

Answer 1

虽然同时打开多个对话框不是一个好主意，但你总是可以使用 javascript 来实现你想要的。

当单击或拖动对话框时，z-index 将被更改，使其“活动”/在其他元素之上，在这种情况下，您可以设置两个主要事件来监听：click 和 dragstop 然后通过remoteCommand 将该对话框 id 发送到 managedBean，这是一个示例：

javascript

 $('.ui-dialog').on('click dragstop',function () {
    activeDialog([{name: 'activeDialog', value: $(this).attr('id')}]);//remoteCommand
 });

xhtml

<p:remoteCommand name="activeDialog" actionListener="#{mainBean.activeDialog}"/>

managedBean

public void activeDialog() {
    FacesContext facesContext = FacesContext.getCurrentInstance();
    Map map = facesContext.getExternalContext().getRequestParameterMap();
    String activeDialog = (String) map.get("activeDialog");//Active dialog
}

一点demo，以及github 上的一个工作示例。

注意：您应该在第一次打开对话框时保持 actionListener。

Answer 2

我认为您不应该同时打开超过 1 个对话框。
尝试更改您的设计（例如，创建 1 个大对话框而不是 3 个）。