Expandable tables lets you click in a row to get more information about the particular record in this row. In this example, another rich:dataTable component is used to display details about one of the selected wonders.

Click on any [+]/[-] to expand/collapse any row:

JSF page:
Wonder
Location
Image
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 getWonders() {
return service.getList();
}
}
WonderService class:
public class WonderService {
private ArrayList list;
public ArrayList getList() {
return list;
}
@PostConstruct
public void init () {
list = new ArrayList ();
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:
wonderBean
data.WonderBean
request
service
data.WonderService
#{service}
service
data.WonderService
session
Leave a comment