Henri Blog

It’s almost 2 months I did’nt update my blog . Here we go. As the title suggest, I want to write about Jsf, Facelets, and Richfaces. But for as part 1 of all (don’t know the exact number hahaha) I’m just writing about preparation that is tools and resources needed to make simple things simple. It’s ok if you don’t know what all of this stuffs (jsf, facelets and richfaces) because soon we’ll understand by learning . Let’s go!

Here’s tools required and used to make our work simple. Download and install.

1. JDK 1.6, always needed because we’re learning java right?
2. Netbeans 6.5, JEE version
3. facelets support for netbeans 6.5
4. richfaces support and palette for netbeans 6.5

To install facelets support, richfaces support and palette go to Tools – Plugins in netbeans, open Downloaded tab and click “Add Plugins..” button, select all .nbm files downloaded and click “Install”.

Now we’re ready to create Jsf – Facelets – Richfaces project. Follow these steps:

1. Create New Project (Ctrl+Shift+N), select Java Web Category and select Web Application Project and click Next
2. Set Project name and location and click Next
3. Make sure we are using GlassFish as application server and click Next
4. Check Facelets and Richfaces option at Framework selection and click Finish.
5. Now project artifacts is automatically generated and we’re ready to make a bit changes.
6. Open web.xml file and change its content with below:

   <?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">
   
       <!-- Jsf params -->
       <context-param>
   <param-name>com.sun.faces.verifyObjects</param-name>
   <param-value>false</param-value>
       </context-param>
       <context-param>
   <param-name>com.sun.faces.validateXml</param-name>
   <param-value>true</param-value>
       </context-param>
       <context-param>
   <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
   <param-value>server</param-value>
       </context-param>
   
       <!-- Facelets params -->
       <context-param>
   <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
   <param-value>.xhtml</param-value>
       </context-param>
       <context-param>
   <param-name>facelets.DEVELOPMENT</param-name>
   <param-value>true</param-value>
       </context-param>
       <context-param>
   <param-name>facelets.SKIP_COMMENTS</param-name>
   <param-value>true</param-value>
       </context-param>
   
       <!-- Richfaces -->
       <context-param>
   <param-name>org.richfaces.SKIN</param-name>
   <param-value>blueSky</param-value>
       </context-param>
       <filter>
           <display-name>RichFaces Filter</display-name>
           <filter-name>richfaces</filter-name>
           <filter-class>org.ajax4jsf.Filter</filter-class>
       </filter>
       <filter-mapping>
           <filter-name>richfaces</filter-name>
           <servlet-name>Faces Servlet</servlet-name>
           <dispatcher>REQUEST</dispatcher>
           <dispatcher>FORWARD</dispatcher>
           <dispatcher>INCLUDE</dispatcher>
       </filter-mapping>
   
       <!-- Faces Servlet -->
       <servlet>
           <servlet-name>Faces Servlet</servlet-name>
           <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
           <load-on-startup>1</load-on-startup>
       </servlet>
   
       <!-- Faces Servlet Mapping -->
       <servlet-mapping>
           <servlet-name>Faces Servlet</servlet-name>
           <url-pattern>*.jsf</url-pattern>
       </servlet-mapping>
   
       <session-config>
           <session-timeout>
               30
           </session-timeout>
       </session-config>
   </web-app>

7. Open faces-config.xml and change its content with below:

   <?xml version='1.0' encoding='UTF-8'?>
   
   <faces-config version="1.2"
       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-facesconfig_1_2.xsd">
   
       <application>
           <view-handler>
               com.sun.facelets.FaceletViewHandler
           </view-handler>
       </application> 
   
   </faces-config>

8. Delete all generated java code and its corresponding package by right clicking at org.my.richfaces and click delete.
9. Rename forward.jsp to index.jsp
10. Try to run project by clicking project and click Run.

Till this point we are ready to code nitty gritty stuffs but there are some problems with the plugins (google it and you’ll find some). First, autocomplete doesn’t work as expected (try to type  “<ui” in .xhtml file). Second, if we open .xhtml file then A4J and RichFaces palette won’t appear (they appear if you open .jsp file). Okay, let’s fix this.

Problem 1, richfaces support (plugins) includes richfaces 3.3.0 library, it’s causing problem to netbeans parser,  let’s change this to richfaces 3.2.1.

1. Download richfaces 3.2.1, extract.
2. Change richfaces library in netbeans by opening Tools – Libraries, select RichFaces.
3. Remove richfaces-api-3.3.0, richfaces-impl-3.3.0 and richfaces-ui-3.3.0.
4. Add richfaces-api-3.2.1, richfaces-impl-3.2.1 and richfaces-ui-3.2.1 jar file from lib folder of the extracted file.
5. click OK to close Library Manager.
6. Now try to type “<ui” in .xhtml file, autocomplete should be work as expected.

Problem 2, A4J and RichFaces palette for .xhtml file. This technique is a bit tricky

1. Open Palette Manager for jsp file by opening menu Tools – Palette – HTML/JSP Code Clips
2. expand A4J and select all its child then drag to HTML
3. close Palette Manager
4. Open Palette Manager for xhtml file by opening menu Tools – Palette – Facelets Code Clips
5. Create new category and name it A4J
6. expand HTML and select all a4j component then drag to A4J
7. close Palette Manager.
8. Do step 1 to 7 for RichFaces tag
9. Open Palette Manager for jsp file (as step 1) and click Reset Palette.

Now, .jsp and .xhtml file have A4J and RichFaces at its Palette and we are ready for coding . But before we do let’s take a quick review at developer documentation and taglibs for each framework so we can get familiar with it.

JSF.

1. JSF Overview
2. JSF taglibs

Facelets is a view template for jsf, we won’t need jsp .

1. Developer Documentation

Richfaces is one of component library for jsf. Find more about component library at jsfmatrix

1. RichFaces Developer Guide, available at docs folder from the extracted file
2. RichFaces showcase or you can download and run in your own computer.

Happy programming!