Richfaces - Modal

[sincanvin]

Hi,

  I am new to richfaces and have few questions

  1. How can we launch a modal window on the click of a button after the action is performed?

  2. When a a4j:commandbutton is clicked and action is performed how can we show the progress or waiting bar for the user.

Pl. answer.

Thanks,

[sivaprasad9394]

Hi Vinnay,

1) Model window will be launched after action means you have to use oncomplete in commandbutton or commandlink.

    After processing the backing bean action it will load the popup in the screen.

<a:commandLink id="searchPOPUP" value="SearchPOPUP" action="#{docLibraryHome.searchByDocument}" reRender="imgPopUpPanel"

status="statusID" oncomplete="Richfaces.showModalPanel('imgPopUpPanel')" />

                                                                (OR)

<a:commandButton id="searchPOPUP" value="SearchPOPUP" action="#{docLibraryHome.searchByDocument}" reRender="imgPopUpPanel"

status="statusID" oncomplete="Richfaces.showModalPanel('imgPopUpPanel')" />

Popup inside jsp page or xhtml page:

<rich:modalPanel id="imgPopUpPanel" autosized="true" zindex="2000" width="300" height="250"

style="text-align: center; font-weight: bold;" resizeable="false">

<f:facet name="header">

<h:panelGroup>

<h:outputText value="Rating Details"></h:outputText>

</h:panelGroup>

</f:facet >

<f:facet name="controls" >

<h:panelGroup layout="block" >

<h:graphicImage value="Close" id="hidelinkcount" />

<rich:componentControl for="imgPopUpPanel" attachTo= "hidelinkcount" operation="hide" event="onclick" />

</h:panelGroup >

</f:facet >

---------------------------------------------------- UR CODE inside model panel -----------------------------------------------------

</rich:modalPanel >

2) For showing the progress bar while clicking the action button or link,

    here button's ststus attribute should be a4j:status id and a4j:status for attribute should mention the a4j:region.

   if you follow like below loading_page.xhtml is common page for displaying the progress bar in the page or modelpanel.You have to include the page using <a4j:include in every page where you like to display the loading bar and follow the steps as showed in the screen.

SomePage.xhtml:

<h:form id="trainingForm">

<a4j:region id="trainingRegion">

------- you code -------

</a4j:region>

</h:form>

<a4j:status id="statusID" for="trainingRegion" forceId="true"

            onstart="#{rich:component('wait')}.show()"

            onstop="#{rich:component('wait')}.hide()"/>

<a4j:include id="loadWindowaddEditTraining"

           viewId="/loading_page.xhtml"></a4j:include>

loading_page.xhtml:

<rich:modalPanel id="wait" autosized="true" width="50" height="50"

        moveable="false" resizeable="false">

       <h:graphicImage alt="Please Wait..." value="/img/loading_animation.gif"></h:graphicImage>         

</rich:modalPanel>

I think it will help to display please wait progress bar in the model panel.

Thanks,

Siva

[sincanvin]

Thanks Siva.

Thanks for sharing code snippet. I am able to follow this but there is no Modal Panel in Richfaces 4.2.2. Do you have any idea how to implement this functionality?

Pl. share some info on this.

[jhuska]

Hello,

I think that you can follow this example:

http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&sample=modalPopup&skin=blueSky

there is a modal popup panel used in RichFaces 4.x. I would also recommend you to use latest 4.3.1.Final.

Regards,

Juro