Primefaces switches between multiple dialogs - primefaces

Question

I`m using PrimeFaces 4.0. I have a page with three dialog components (Dialog 1, Dialog 2, Dialog 3) and three button components (Button 1, Button 2, Button 3), Dialog 1 will be showed by click button 1, Dialog 2 will be showed by click button 2, and Dialog 3 will be showed by click button 3. User can open these three dialogs in the same time, it means user can do some work with these three dialogs all been on show, just like this:
When user do some work in a dialog, I need to change some values in backing bean and update some components at first, and when user show a dialog by click a button, there is no problem and I can change some values when ActionListener of the button that user clicked fired, but when user showed three dialogs, and changes active dialog by click dialog like this:
How can I change active dialog from 'Dialog 1' to 'Dialog 2'?
Here is my xhtml code:
<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>
And my view bean:
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;
}
}
I googled it but I didn't find the solution on my problem. Any suggestion will be appreciated, thanks in advance.

Answer 1

Although opening multiple dialogs in the same time is not a good idea, but you can always use javascript to achieve what you want.
The z-index would be changed when the dialog is clicked or dragged, making it "active"/above the other elements, in that case you can setup two main events to listen on: click and dragstop then send that dialog id to the managedBean by a remoteCommand, here's an example:
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
}
A little demo, and a working example on github.
Note: you should keep the actionListener on the first time the dialog is opened.

Answer 2

I think you should never open more than 1 dialog at the same time.
Try to change your design (for example, create 1 large dialog instead of the 3 ones).