Simple expandable table with RichFaces
<h:form>
<rich:dataTable value="#{wonderBean.wonders}" var="wonder">
<rich:column colspan="3">
<f:facet name="header">Wonder</f:facet>
<h:outputText value="#{wonder.name}" />
<a4j:commandLink id="link" value="#{!wonderBean.show?'[+]':'[-]'}"
reRender="link">
<a4j:actionparam name="val" value="#{!wonderBean.show}"
assignTo="#{wonderBean.show}" />
</a4j:commandLink>
</rich:column>
<rich:columnGroup>
<rich:column>
<a4j:outputPanel ajaxRendered="true">
<rich:dataTable value="#{wonder.details}" var="detail"
rendered="#{wonderBean.show}" style="border: 0px">
<rich:column>
<f:facet name="header">Location</f:facet>
<h:outputText value="#{detail.location}" />
</rich:column>
<rich:column>
<f:facet name="header">Image</f:facet>
<h:graphicImage value="#{detail.imageUrl}" />
</rich:column>
</rich:dataTable>
</a4j:outputPanel>
</rich:column>
</rich:columnGroup>
</rich:dataTable>
</h:form>
WonderBean class
public class WonderBean {
private WonderService service;
private Boolean show;
public Boolean getShow() {
return show;}
public void setShow(Boolean show) {
this.show = show;
}
public WonderService getService() {
return service;
}
public void setService(WonderService service) {
this.service = service;
}
public WonderBean() {
super();
}
public ArrayList<Wonder> getWonders() {
return service.getList();
}
}
WonderService class:
public class WonderService {
private ArrayList <Wonder> list;
public ArrayList<Wonder> getList() {
return list;
}
@PostConstruct
public void init () {
list = new ArrayList <Wonder>();
list.add(new Wonder("Chichen Itza", "Mexico", "http://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Chichen-Itza-Castillo-Seen-From-East.JPG/90px-Chichen-Itza-Castillo-Seen-From-East.JPG"));
list.add(new Wonder("Christ the Redeemer", "Brazil", "http://upload.wikimedia.org/wikipedia/commons/thumb/5/50/CorcovadofotoRJ.jpg/90px-CorcovadofotoRJ.jpg"));
list.add(new Wonder("Colosseum", "Italy", "http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Colosseum_in_Rome%2C_Italy_-_April_2007.jpg/90px-Colosseum_in_Rome%2C_Italy_-_April_2007.jpg"));
list.add(new Wonder("Great Wall of China", "China", "http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/GreatWallNearBeijingWinter.jpg/90px-GreatWallNearBeijingWinter.jpg"));
list.add(new Wonder("Machu Picchu", "Peru", "http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Before_Machu_Picchu.jpg/90px-Before_Machu_Picchu.jpg"));
list.add(new Wonder("Petra", "Jordan", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/PetraMonastery.JPG/90px-PetraMonastery.JPG"));
list.add(new Wonder("Taj Mahal", "India", "http://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Taj_Mahal_in_March_2004.jpg/90px-Taj_Mahal_in_March_2004.jpg"));
}
public WonderService() {
}
}
Wonder class:
public class Wonder implements java.io.Serializable{
private
String name;
private Details details;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Wonder(String name, String location, String imageUrl) {
super();
this.name = name;
this.details = new Details (location, imageUrl);
}
public Details getDetails() {
return details;
}
}
JSF configuration file
<managed-bean>
<managed-bean-name>wonderBean</managed-bean-name>
<managed-bean-class>data.WonderBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>service</property-name>
<property-class>data.WonderService</property-class>
<value>#{service}</value>
</managed-property>
</managed-bean>
<managed-bean>
<managed-bean-name>service</managed-bean-name>
<managed-bean-class>data.WonderService</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>