Simple expandable table with RichFaces - No Fluff Just Stuff

Simple expandable table with RichFaces

Posted by: Max Katz on February 25, 2009

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.

screenshot01.png

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

JSF page:

<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>
Max Katz

About Max Katz

Max Katz is a Senior Systems Engineer at Exadel. He has been helping customers jump-start their RIA development as well as providing mentoring, consulting, and training. Max is a recognized subject matter expert in the JSF developer community. He has provided JSF/RichFaces training for the past three years, presented at many conferences, and written several published articles on JSF-related topics. Max also leads Exadel's RIA strategy and writes about RIA technologies in his blog, http://mkblog.exadel.com. He is an author of “Practical RichFaces” book (Apress). Max holds a BS in computer science from the University of California, Davis.

Why Attend the NFJS Tour?

  • » Cutting-Edge Technologies
  • » Agile Practices
  • » Peer Exchange

Current Topics:

  • Languages on the JVM: Scala, Groovy, Clojure
  • Enterprise Java
  • Core Java, Java 8
  • Agility
  • Testing: Geb, Spock, Easyb
  • REST
  • NoSQL: MongoDB, Cassandra
  • Hadoop
  • Spring 4
  • Cloud
  • Automation Tools: Gradle, Git, Jenkins, Sonar
  • HTML5, CSS3, AngularJS, jQuery, Usability
  • Mobile Apps - iPhone and Android
  • More...
Learn More »