Update: working sample could be already checked live at richfaces-demo
Note: code is untested and may not work!! Copy/pasted and modified some work stuff I can't post as is.
Here is a quick howto for those of you who would like to click on a details link in table and have it show a modal panel with information loaded from the server.
This example uses the Seam enhanced EL to set the proper object in the backing bean, but you should be able to use a4j:actionparam and lookup an identifier to achieve the same.
What happens when show link is clicked the following:
The MyBean instance for the clicked row is set on the backing bean
The content inside "modalContent" is updated with values from the server
The now updated modal panel is shown
Backing bean:
import java.util.ArrayList;
import java.util.List;
import org.jboss.seam.annotations.Name;
import org.jboss.seam.annotations.Scope;
import org.jboss.seam.ScopeType;
@Name("myBacking")
@Scope(ScopeType.SESSION)
public class MyBacking {
private List<MyBean> someDataList = null;
private MyBean detailed;
public MyBacking(){
//Add some dummy data to "someDataList"
}
public String showDetails(MyBean aSelected){
detailed = aSelected;
return null;
}
public MyBean getDetailed(){
return detailed;
}
public List<MyBean> getSomeDataList(){
return someDataList;
}
}
Value bean:
public class MyBean{
private String someData1;
private String someData2;
// Implement getters and setters yourself
}
XHTML Code:
<html 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:rich="http://richfaces.ajax4jsf.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<body>
<rich:modalPanel id="detailsMp" width="400" height="420" zindex="2000">
<f:facet name="header">
Details
</f:facet>
<f:facet name="controls">
<a href="#" onclick="Richfaces.hideModalPanel('detailsMp')">X</a>
</f:facet>
<a4j:outputPanel id="modalContent" layout="inline">
<h:panelGrid columns="2">
<h:outputText value="Some data1:"></h:outputText>
<h:outputText value="#{myBacking.detailed.someData1}"></h:outputText>
<h:outputText value="Some data2:"></h:outputText>
<h:outputText value="#{myBacking.detailed.someData2}"></h:outputText>
</h:panelGrid>
<a href="#" onclick="Richfaces.hideModalPanel('detailsMp')">Close</a>
</a4j:outputPanel>
</rich:modalPanel>
<rich:dataTable
id="resultTable"
value="#{myBacking.theDataList}"
var="row">
<rich:column>
<f:facet name="header">
Some data1
</f:facet>
#{row.someData1}
</rich:column>
<rich:column>
<f:facet name="header">
Details
</f:facet>
<a4j:commandLink action="#{myBacking.showDetails(row)}"
reRender="modalContent"
oncomplete="Richfaces.showModalPanel('detailsMp',{width:450, top:200})">
Show
</a4j:commandLink>
</rich:column>
</rich:dataTable>
<rich:messages showDetail="true" showSummary="true"></rich:messages>
</h:form>
</body>
</html>
Comments