Correct use of ace:dialog

I'm having issues with the ace:dialog not appearing/disappearing as expected.

i'm using the visible attribute with ViewScoped and SessionScoped backing beans and a simple visible boolean flag.

The dialogs appear fine the first time and close ok using the auto close button in the header.
For some reason though the visibility is not getting set correctly on the backing bean and the dialogs re-appear. Often overlaying multiple dialogs.

What is the correct way to handle the rendering/visibility/closing of the ace dialogs?

Thanks

-Lee

Hi Lee,

The ace:dialog component was meant to be a more client side dialog as opposed to the older panelPopup which is completely controlled via the server side.

We have implemented some server-side functionality but it does have some issues as you have found.

Ideally it would be best to use the widgetVar property to control visibility as opposed to using the visible property. To display the popup you would use something like:
Code:

 <h:commandButton onclick="dialogWidget.show();"/>

The dialogs header close button also uses this JavaScript method. To close it your self you can use the following:
Code:

 <h:commandButton onclick="dialogWidget.hide();"/>

The comp-suite demo should show this in action also.

If you need to use the visible tag to toggle visibility you can use an <ace:ajax> tag to pick up the close event from the header close button. Here is some sample code:
Code:

 <ace:dialog ...>
      <ace:ajax event="close" listener="#{bean.closeListener}"/>
      ...

Regards,
Arran

Thanks a lot Arran,

I will implement as you suggest through the widgetVar.

The dialog is a great replacement for the old ice:panelPopup and I'm trying to replace as much of the older ice: components as possible with their ace counterparts.

Do you have an ETA on a milestone release of 2.1?

-Lee

No problem, I should have also mentioned that you can use either the widgetVar or the visible attribute but its not recommended to use both to toggle dialog visibility.

Last I heard we should have an RC release in the next few weeks and then the final release shortly after that.

Arran

Arran,

is it ok to do something like this on the back-end:

Code:

                 JavascriptContext.addJavascriptCall(FacesContext.getCurrentInstance(), "prdImgUpWidget.show();");

Or is there a better/cleaner method?

Doing something like that should be fine. There is also a new API for calling JavaScript on the client with the 2.1.0 release. Here is some sample code based off of your code:

Code:

 JavaScriptRunner.runScript(FacesContext.getCurrentInstance(), "prdImgUpWidget.show();");

Here are more details on this API:
http://www.icefaces.org/docs/v2_latest/core/api/org/icefaces/util/JavaScriptRunner.html

There is also a brief summary of this new API in the porting/compatibility wiki section:
http://wiki.icefaces.org/display/ICE/ICEfaces+1.x+Compatibility

Arran

In Icefaces 4 ice:panelPopup will be removed.
What is correct way to replace ice:panelPopup to ace:dialog?

Ice panelPopup was initiated by rendered attribute and action on server side,
close popup also calls actions on server side

In showcase with Icefaces 4 from trunk I don't see an answer.

Short test with visible attribute works but unstable
- dialog can be enabled by server bet response seems to big
- if any button is added inside behavior is strange, response is send to server without any action (buttons inside dialog do not work)

Code:

 <h:commandButton id="showaction" value="Show Dialog by listener" actionListener="#{modalDialogBean.showDialog}" >
                 	<f:ajax execute="@this" render="@all"/>
             	</h:commandButton>
                 <h:commandButton id="hideaction" value="Hide Dialog by listener" actionListener="#{modalDialogBean.hideDialog}" >
                 	<f:ajax execute="@this" render="@all"/>
             	</h:commandButton>
 
   <ace:dialog id="dialog2" 
                            header="Dialog example"
                            visible="#{modalDialogBean.visible}"
                            draggable="#{modalDialogBean.draggable}"
                            modal="#{modalDialogBean.modal}">
 <h:form>
             <h:panelGrid>dialog2
                 <h:outputText id="selectedDraggableOption2" value="I am draggable" rendered="#{modalDialogBean.draggable}"/>
                 <h:outputText id="selectedModalOption2" value="I am modal" rendered="#{modalDialogBean.modal}"/>
                 <h:commandButton value="Hide Dialog by listener" actionListener="#{modalDialogBean.hideDialog}" >
                 	<f:ajax execute="@this" render="@all"/>
             	</h:commandButton>
             	 <h:commandButton value="Click me once done with input" onclick="dialog2.hide();"/>
             	 
             	 <ace:pushButton id="clearValuesP" value="Clear values" actionListener="#{modalDialogBean.hideDialog}">
 					<ace:ajax execute="@this" render="@all" />
 				</ace:pushButton>
             </h:panelGrid>
 </h:form>
         </ace:dialog>

What is correct way to use server initiated modal and buttons inside ?

Hi,

I believe the issue may be that you need to have the buttons and dialog inside a form.

Regards,
Ken

On Icefaces 4 as an alternative to " ice:popupPanel rendered=#{something}"
we must use " ace:dialog visible=#{something} rendered=#{something} ".
Generally it works as server side rendered on demand popup except one case.
If we call popup from popup second popup is behind ui-widget-overlay and not editable.
Z-index for dialogs and layers is correct but it seems to be ignored by browser

The same problem occurs with Primefaces 4.0 library.

Hi,

Please attach a simple test that reproduces the issue or open a JIRA with a test case for it.

Regards,
Ken