Project Confucius: JSF

Let us use a Richfaces component - Collapsible Panel to create some "special effects" in our UI.

Update your template.xhtml to envelope the content inside a Collapsible Panel, like this:

 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:ui="http://java.sun.com/jsf/facelets"  
      xmlns:rich="http://richfaces.org/rich">  
   
      <h:head>  
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
           <title><ui:insert name="title">Default Title</ui:insert></title>  
      </h:head>  
   
      <h:body>  
           <h3>Basic Java Series</h3>  
           <rich:collapsiblePanel header="RichFaces Greeter" switchType="client">  
                <ui:insert name="content">Default content</ui:insert>  
           </rich:collapsiblePanel>       
           <p>Visit us at www.projectconfucius.org</p>  
      </h:body>  
 </html>

Notice that we are including the richfaces tag library.

The "switchType" attribute specifies that the collapsibility should be managed in the browser, with no AJAX calls to the server. This makes the client respond faster, and the "View State" of the component is saved on the client side.

Let us also update our web.xml to choose a "skin" for richfaces - this customizes the look-and-feel of Richfaces components.

Your web.xml will not look like this:

 <?xml version="1.0" encoding="UTF-8"?>  
 <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
   
   <context-param>  
     <param-name>org.richfaces.skin</param-name>  
     <param-value>blueSky</param-value>  
   </context-param>    
   
   <servlet>  
     <servlet-name>Faces Servlet</servlet-name>  
     <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>  
     <load-on-startup>1</load-on-startup>  
   </servlet>  
   
   <servlet-mapping>  
     <servlet-name>Faces Servlet</servlet-name>  
     <url-pattern>*.faces</url-pattern>  
   </servlet-mapping>  
   
   <welcome-file-list>  
     <welcome-file>greet.faces</welcome-file>  
   </welcome-file-list>  
   
 </web-app>

If you rebuild and redeploy HelloWorldJSF, you will see Richfaces Collapsible Panel, with a sky blue header, which collapses if you click on it.

Project Confucius

Wednesday, May 23, 2012

JSF - Richfaces

No comments: