Built with Seam
You can find the full source code for this website in the Seam package in the directory /examples/wiki. It is licensed under the LGPL.
This is a simple example to illustrate how to populate a JSF main form from a rich:modalPanel action. The key is the reRendering of the main form and/or the form in the modalPanel, as required, and not reRendering too many UI components to improve performance. This is just a basic example so limiting regions using s:div, etc. will not be demonstrated. Remember that you can embed just about any RF/A4J component in a form in a modalPanel. I have embedded rich:dataTables in rich:modalPanels many times and those are the more common and more complicated scenarios, especially when you consider SMPC management.
For more info and examples, refer to Practical RichFaces by Max Katz as well as the RichFaces reference documentation.
.xhtml:
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:s="http://jboss.com/products/seam/taglib"
template="/templates/normal.xhtml">
<ui:define name="body">
<h:form id="form1">
<h:outputText value="The value is null."
rendered="#{testPopup.myString eq null}"/>
<h:outputText value="The value is #{testPopup.myString}"
rendered="#{testPopup.myString ne null}"/>
<br/><br/>
<h:outputLink value="#" id="link">
Show modalPanel
<rich:componentControl for="modal1" attachTo="link" operation="show" event="onclick"/>
</h:outputLink>
</h:form>
<rich:modalPanel id="modal1" width="600" height="200">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Test Modal Panel"/>
</h:panelGroup>
</f:facet>
<h:form id="form2">
<h:commandButton value="set String value" action="#{testPopup.setMyString('foo')}" reRender="form1"/>
</h:form>
</rich:modalPanel>
</ui:define>
</ui:composition>
TestPopup JavaBean component:
@Name("testPopup")
@Scope(ScopeType.PAGE)
public class TestPopup implements Serializable {
private String myString;
public String getMyString() {
return myString;
}
public void setMyString(String myString) {
this.myString = myString;
}
}
Created: 10. Aug 2009, 19:02 America/New_York (Arbi Sookazian)
Looks good, I want to do something similar, but I don't know what approach to take.
1.- I have an input field on the parent form called customer and it has the search link right next to it.
2.- The user should be able to input some characters and after clicking on the search link the system will search on the database. If only one result is returned the customer name will be completed on that control, otherwise the child window will pop up.
3.- When the pop up window is opened a search form is shown. After the user searches for the desired record he selects a result and closes the window and the parent window is updated.
I also want to make the search window reusable, so I don't have to create more than one pop up search window for each time I need a look-up for the customer field. I know I can link an xhtml file to the modal window, but how do I do with the code? I just want to have one bean managing the customer search. Which scope should it use?
Hi, I tried to use the same idea and pass info from another modalPanel, to a form inside the first modalPanel, which has a link to popup the 2nd one. But it doesn't wotk :(
Do u have any idea plz ? Here is what I used, with the same bean you gave:
<ui:define name="body"> <h:form id="form1"> <h:outputText value="The value is null." rendered="#{testPopup.myString eq null}" /> <h:outputText value="The value is #{testPopup.myString}" rendered="#{testPopup.myString ne null}" /> <br /> <br /> <h:outputLink value="#" id="link"> Show modalPanel <rich:componentControl for="modal1" attachTo="link" operation="show" event="onclick" /> </h:outputLink> </h:form> <rich:modalPanel id="modal1" width="600" height="200"> <f:facet name="header"> <h:panelGroup> <h:outputText value="Test Modal Panel" /> </h:panelGroup> </f:facet> <h:form id="formx"> <h:outputText value="The value is null." rendered="#{testPopup.myString eq null}" /> <h:outputText value="The value is #{testPopup.myString}" rendered="#{testPopup.myString ne null}" /> <br /> <br /> <h:outputLink value="#" id="link2"> Show modalPanel <rich:componentControl for="modal2" attachTo="link2" operation="show" event="onclick" /> </h:outputLink> </h:form> <h:form id="form2"> <h:commandButton image="/img/add-icon.png" value="set String value" action="#{testPopup.setMyString('foo')}" reRender="form1" /> </h:form> </rich:modalPanel> <rich:modalPanel id="modal2" width="400" height="200"> <f:facet name="header"> <h:panelGroup> <h:outputText value="Test Modal2 Panel" /> </h:panelGroup> </f:facet> <h:commandButton image="/img/add-icon.png" value="set String value" action="#{testPopup.setMyString('bar')}" reRender="formx" /> </rich:modalPanel>I tried some stuff and I think this might do what I needed - onlyc changed to a4j kind of tags, forcing the modalPanel to close also, with
onclick="#{rich:component('modal1')}.hide(), for instance :
<h:form id="form1"> <h:outputText value="The value is null." rendered="#{testPopup.myString eq null}" /> <h:outputText value="The value is #{testPopup.myString}" rendered="#{testPopup.myString ne null}" /> <br /> <br /> <a4j:commandLink value="#" id="link"> Show modalPanel <rich:componentControl for="modal1" attachTo="link" operation="show" event="onclick" /> </a4j:commandLink> </h:form> <rich:modalPanel id="modal1" width="600" height="200"> <f:facet name="header"> <h:panelGroup> <h:outputText value="Test Modal Panel" /> </h:panelGroup> </f:facet> <a4j:form id="formx" ajaxSubmit="true"> <h:outputText value="The value is null." rendered="#{testPopup.myString eq null}" /> <h:outputText value="The value is #{testPopup.myString}" rendered="#{testPopup.myString ne null}" /> <br /> <br /> <a4j:commandLink value="#" id="link2"> Show modalPanel <rich:componentControl for="modal2" attachTo="link2" operation="show" event="onclick" /> </a4j:commandLink> </a4j:form> <a4j:form id="form2" ajaxSubmit="true"> <a4j:commandButton image="/img/add-icon.png" value="set String value" action="#{testPopup.setMyString('foo')}" onclick="#{rich:component('modal1')}.hide()" reRender="form1" /> </a4j:form> </rich:modalPanel> <rich:modalPanel id="modal2" width="400" height="200"> <f:facet name="header"> <h:panelGroup> <h:outputText value="Test Modal2 Panel" /> </h:panelGroup> </f:facet> <a4j:form ajaxSubmit="true"> <a4j:commandButton image="/img/add-icon.png" value="set String value" action="#{testPopup.setMyString('bar')}" onclick="#{rich:component('modal2')}.hide()" reRender="formx" /> </a4j:form> </rich:modalPanel>