Wednesday, February 15, 2012

How to create a popup in seam using <rich:ModalPanel/> component
(Seam, JSF, Richfaces)

In this popup a '' component is used as the popup.
In your page body, create a Modal Panel component as below. I am using the 'header' facet to display the title.

You can add more components such as tables, input fields, etc. between <rich:ModalPanel></rich:ModalPanel>
tags.
Look that I am using a command button to hide the popup.
<rich:modalPanel id="myPopup" width="600" height="400">
  <f:facet name="header"> 
    <h:panelGroup>
      <h:outputText value="Hello Popup!!"></h:outputText>
    </h:panelGroup>
  </f:facet>
  <a4j:commandButton value="Hide" id="btn_hide"
              onclick="Richfaces.hideModalPanel('myPopup');"/>
</rich:modalPanel>

That is it.
Now run your page and open it using a browser. It displays nothing. This is because components are hidden by default.
Now edit your page and add another button as below.

<a4j:commandButton value="Show" onclick="Richfaces.showModalPanel('myPopup');"/>

Note that in this button our javascript is "Richfaces.showModalPanel('myPopup');".
Now run your page and click on 'Show' button. You will see the popup. Now click the 'Hide' button and the popup will be closed.

Another Way To Show/ Hide Popup
Instead of using javascripts you can use a '<rich:componentControl/>' tags to show and hide the popup.
In that case your 'Show' button would be as below.
<a4j:commandButton value="Show" id="btn_show">
  <rich:componentControl for="myPopup" attachTo="btn_show"
        operation="show" event="onclick"/>
</a4j:commandButton>
'Hide' button can be changed as below.
<a4j:commandButton value="Hide" id="btn_hide">
  <rich:componentControl for="myPopup" attachTo="btn_hide" 
        operation="hide" event="onclick"/>
</a4j:commandButton>

1 comment: