Thursday, May 25, 2006

Using Facelets in NetBeans 5.5 (beta)



Although NetBeans 5.5 beta has no direct support for Facelets (yet?), you can successfully develop JSF Facelets applications with it, and take advantage of NetBeans' Java EE 5 platform support and other cool things.

In this this tutorial I will create a new Web Application in NetBeans 5.5 beta, based on the NumberGuess example included in the Facelets distribution. This tutorial assumes that you have basic JSF, Facelets and NetBeans knowledge. Before starting make sure you have the following in place:


The NumberGuess example is a simple application consisting of a couple of JSF pages and navigation rules and a single JSF managed bean. Follow the steps below to set up the NumberGuess project in NetBeans and deploy and run it from within the IDE.



  1. Register the Facelets library in NetBeans (Tools --> Library Manager). Create a New Library containing the jsf-facelets.jar from the Facelets distribution.

  2. Create a new Web Application project. Choose as Project Name numberguess (make sure the context path is also set to numberguess) and select the Java EE 5 server you installed as Server. Select Java Server Faces in the Frameworks step. Click Finish to create the project.

  3. NetBeans will automatically create an index.jsp and welcomeJSF.jsp. Delete both files as we will not be using JSP pages, but xhtml formatted JSF pages.

  4. Add the Facelets library to your project (Project Properties --> Libraries --> Add Library).

  5. Copy the tutorial directory (containing the managed bean class) from \facelets-1.1.4\demo\numberguess\src\ to your projects \src\java\ directory. NetBeans will refresh your project content automatically.

  6. Also copy all files from \facelets-1.1.4\demo\numberguess\web\ to your projects \web\ directory. Do NOT copy the \WEB-INF\ directory.

  7. Open your projects web.xml and add the folowing:
    <context-param>

    <param-name>javax.faces.DEFAULT_SUFFIX</param-name>

    <param-value>.xhtml</param-value>

    </context-param>

    Next, change the the Faces Servlet url pattern from /faces/* to *.jsf (next time you can do this when creating the project).

    Also completely remove the welcome file list configuration which was pointing to the deleted index.jsp file.

  8. Open your projects faces-config.xml and add the folowing:
    <application>

    <view-handler>

    com.sun.facelets.FaceletViewHandler

    </view-handler>

    </application>





    <!-- our NumberBean we created before -->

    <managed-bean>

    <managed-bean-name>NumberBean</managed-bean-name>

    <managed-bean-class>tutorial.NumberBean</managed-bean-class>

    <managed-bean-scope>session</managed-bean-scope>

    <managed-property>

    <property-name>min</property-name>

    <value>1</value>

    </managed-property>

    <managed-property>

    <property-name>max</property-name>

    <value>10</value>

    </managed-property>

    </managed-bean>

    <!-- going from guess.xhtml to response.xhtml -->

    <navigation-rule>

    <from-view-id>/guess.xhtml</from-view-id>

    <navigation-case>

    <from-outcome>success</from-outcome>

    <to-view-id>/response.xhtml</to-view-id>

    </navigation-case>

    </navigation-rule>

    <!-- going from response.xhtml to guess.xhtml -->

    <navigation-rule>

    <from-view-id>/response.xhtml</from-view-id>

    <navigation-case>

    <from-outcome>success</from-outcome>

    <to-view-id>/guess.xhtml</to-view-id>

    </navigation-case>

    </navigation-rule>



    The most important part is to configure the FaceletViewHandler to use Facelets as view technology. The other parts are just 'normal' JSF managed beans and navigation rules which you would also need without using Facelets.

  9. Deploy and Run your project.