primefaces 4-每次事件发生时如何创建新的对话框实例

Question

是否可以在同一按钮单击事件上打开新的对话框实例？

例如 ：

click -> open dialog
click again -> open a second dialog, keeping the first one opened
click again -> ... and so on

Answer 1

这是根据您的要求提供的解决方案（iframe）

XHTML

    <h:form id="form">

        <div id="dialogs"></div>

        <p:commandButton value="New Terminal" 
                         update="dilaogContainer"
                         oncomplete="handleNewDialog()"/>

        <h:panelGroup id="dilaogContainer">
            <p:dialog id="#{bean.nextDialogId()}" height="300" width="300" >                     
                <iframe src="http://www.w3schools.com/" width="100%" height="100%"></iframe>
            </p:dialog>
        </h:panelGroup>

    </h:form>

豆角，扁豆

public String nextDialogId() {
    // Generate random id of 5 char
    return org.apache.commons.lang.RandomStringUtils.random(5, true, false);
}

JS

var dialogs = [];

function handleNewDialog() {
   newDialog = $(PrimeFaces.escapeClientId('form:dilaogContainer')).find(">:first-child");
   newDialog.appendTo("#dialogs");
   newDialogVar = getWidgetVar(newDialog.attr('id'));        
   newDialogVar.show();
   moveDialog(newDialogVar);
   dialogs.push(newDialogVar); 
}

function moveDialog(dialog) {
   if(dialogs.length > 0) {
       lastDialog = dialogs[dialogs.length -1];
       dialog.jq.css({'left' : lastDialog.jq.position().left+ 300 +'px'})
   } else {
       dialog.jq.css({'left' : '0px'})
   }
}

function getWidgetVar(id) {
   widgetName = 'widget_' + id.replace(/\:/g, '_');
   return window[widgetName];
}

在按钮上单击，我们更新我们的dialogContainer，从而更新并使用新的ID生成我们的对话框。 通过将生成的Dialog附加到对话框div中，我们将其生成到容器之外，进行显示，并根据其他显示的对话框重新放置它。

注意：请记住，这种方法仅在iframe情况下有效，在这种情况下，我们的DOM树未与JSF组件树同步。

就像这样。

Answer 2

我可以根据需要添加一个新对话框，只需将此代码添加到p：command事件中

UIComponent panelGroup = FacesContext.getCurrentInstance().getViewRoot().findComponent(":sm:yourSites");
Dialog dialog = new Dialog();
String id = "Sample"+System.currentTimeMillis();
dialog.setId(id );
dialog.setHeader(id);
dialog.setVisible(true);
dialog.setMinimizable(true);
dialog.setWidgetVar("W"+id);
panelGroup.getChildren().add(dialog);
this.dialogWidget = dialog.getWidgetVar();

和

<p:commandButton  icon="ui-icon-person" action="#{myMB.connect}" title="Connect" update=":sm:yourSites" oncomplete="#{myMB.dialogWidget}.show();">  
<f:setPropertyActionListener value="#{site.name}" target="#{myMB.siteId}"  />  
</p:commandButton>              

但后来我注意到对话框仅存在于同一页面上下文中，这与新的浏览器弹出窗口不同：-(

同样，在父组件刷新时，打开的对话框会关闭（它们的大小不会保持调整大小）

所以我想我不能避免这种弹出窗口的方法。