This blog updates TOTD #45 to use Facelets as view technology.

Powerful templating system, re-use and ease-of-development, designer-friendly are the key benefits of Facelets. Facelets are already an integral part of Java Server Faces 2.0. But this blog shows how to use them with JSF 1.2.

1. Download Facelets from here (or specifically 1.1.14). Facelets Developer Documentation is a comprehensive source of information.
2. Add “jsf-facelets.jar” from the expanded directory to Project/Libraries as shown:

   

3. Change the JSF view documents to “.xhtml” by adding the a new context parameter in “web.xml” as:
   

   <context-param>     <param-name>javax.faces.DEFAULT_SUFFIX</param-name>     <param-value>.xhtml</param-value>   </context-param>

   The updated “web.xml” looks like:

   

4. Specify Facelets as the ViewHandler of JSF application by adding the following fragment to “faces-config.xml”:
   

   <application>     <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>      </application>

   The updated document looks like:

   

5. Create three new XHTML pages by right-clicking on the project, selecting “New”, “XHTML” and name them as “template”, “welcome” and “result”. This creates “template.xhtml”, “welcome.xhtml” and “result.xhtml” in “Web Pages” folder. 
   1. Replace the generated code in “template.xtml” with the code given here. Change the <title> text “Facelets: What’s your favorite City ?”.
   2. Replace the generated code in “welcome.xhtml” with the code given here. Refactor “welcomeJSF.jsp” such that H1 tag and the associated text goes in <ui:define name=”title”> and rest of the content goes in <ui:define name=”body”>. Also change the value of “template” attribute of <ui:composition> by removing “/”. The updated page looks like:

      

   3. Replace the generated code in “result.xhtml” with the code given here. Refactor “result.jsp” such that H1 tag and the associated text goes in <ui:define name=”title”> and rest of the content goes in <ui:define name=”body”>. Also add a namespace declaration for “http://java.sun.com/jsf/core”.

      Optionally change the <h:form> associated with the command button to:

      <form jsfc=”h:form”>                     <input jsfc=”h:commandButton” action=”back” value=”Back”/>                 </form>

      The updated page looks like:

      

6. Add couple of more navigation rules to “faces-config.xml”:
   

   <navigation-rule>         <from-view-id>/welcome.xhtml</from-view-id>         <navigation-case>             <from-outcome>submit</from-outcome>             <to-view-id>/result.xhtml</to-view-id>         </navigation-case>     </navigation-rule>     <navigation-rule>         <from-view-id>/result.xhtml</from-view-id>         <navigation-case>             <from-outcome>back</from-outcome>             <to-view-id>/welcome.xhtml</to-view-id>         </navigation-case>     </navigation-rule>

And that’s it, Facelets-based application is now available at “http://localhost:8080/Cities/faces/welcome.xhtml”. The interaction is exactly similar to as shown in TOTD #45 and some of the sample images (borrowed from TOTD #45) are:

Now this applic
ation is using Facelets as the view technology instead of the in-built view definition framework.
Please leave suggestions on other TOTD (Tip Of The Day) that you’d like to see. A complete archive of all tips is available here.

Technorati: totd javaserverfaces facelets netbeans glassfish

TOTD #42 explained how to create a simple Java Server Faces application using NetBeans 6.1 and deploy on GlassFish. In the process it explained some basic JSF concepts as well. If you remember, it built an application that allows you to create a database of cities/country of your choice. In that application, any city/country combination can be entered twice and no errors are reported.

This blog entry extends TOTD #42 and show the list of cities, that have already been entered, starting with the letters entered in the text box. And instead of refreshing the entire page, it uses JSF Extensions to make an Ajax call to the endpoint and show the list of cities based upon the text entered. This behavior is similar to Autocomplete and shows the suggestions in a separate text box.

Let’s get started!

1. Download latest JSF-Extensions release.
2. Unzip the bundle as:
   

   ~/tools >gunzip -c ~/Downloads/jsf-extensions-0.1.tar.gz | tar xvf -

3. In NetBeans IDE, add the following jars to Project/Libraries

   

4. Edit “welcomeJSF.jsp”
   1. Add the following to the required tag libraries

      <%@taglib prefix=”jsfExt” uri=”http://java.sun.com/jsf/extensions/dynafaces” %>

      The updated page looks like:

      

   2. Add the following tag as the first tag inside <f:view>
      

      <jsfExt:scripts />

      The updated page looks like:

      

   3. Add prependId=”false” to “<h:form>” tag. The updated tag looks like:

      

   4. Add the following fragment as an attribute to <h:inputText> tag with “cityName” id:
      

      onkeyup=”DynaFaces.fireAjaxTransaction(this, { execute: ‘cityName’, render: ‘city_choices’, immediate: true});”

      This is the magic fragment that issues an Ajax call to the endpoint. It ensures execute portion of the request lifecycle is executed for “cityName” and “city_choices” (defined later) is rendered.

      The updated page looks like:

      

   5. Add a new <h:outputText> tag after <h:commandButton> tag (to hold the suggestions output):
      

      <h:outputText id=”city_choices” value=”#{dbUtil.cityChoices}”></h:outputText>

      The updated page looks like:

      

5. Add the following fragment to web.xml
   

   <init-param>           <param-name>javax.faces.LIFECYCLE_ID</param-name>           <param-value>com.sun.faces.lifecycle.PARTIAL</param-value>         </init-param>

   The updated file looks like:

   

6. Edit “server.Cities” class
   1. Add a new NamedQuery in Cities class (at the mark after yellow-highlighted parentheses):

      

      The query is:

      @NamedQuery(name = “Cities.findSimilarName”, query = “SELECT c FROM Cities c WHERE LOWER(c.cityName) LIKE :searchString”),

      This NamedQuery queries the database and return a list of city names that matches the pattern specified in “searchString” parameter.

   2. Change the toString() method implementation to return “cityName”. The updated method looks like:

      

      This allows the city name to be printed clearly.

7. Add a new method in “server.DatabaseUtil” as:
   

   public Collection<Cities> getCityChoices() {         Collection<Cities> allCities = new ArrayList<Cities>();         if (cities.getCityName() != null && !cities.getCityName().equals(”")) {             List list = entityManager.createNamedQuery(”Cities.findSimilarName”).                     setParameter(”searchString”, cities.getCityName().toLowerCase() + “%”).                      getResultList();             for (int i = 0; i < list.size(); i++) {                 allCities.add((Cities) list.get(i));             }                     }         return allCities;     }

   This method uses previously defined NamedQuery and adds a parameter for pattern matching.

Now, play time!

The list of created cities is:

If “S” is entered in the text box (http://localhost:8080/Cities/), then the following output is shown:

Entering “San”, shows:

Entering “Sant” shows:

Entering “De” updates the page as:

And finally entering “Ber” shows the output as:

So you built a simple Ajaxified Java Server Faces application using JSF Extensions.

Here are some more references to look at:

1. JSF Extensions Getting Started Guide
2. Tech Tip: Adding Ajax to Java Server Faces Technology with Dynamic Faces
3. JSF Extensions Ajax Reference

Java Server Faces 2.0 has Ajax functionality integrated into the spec and this should be more seamless. I’ll try that next!

Please leave suggestions on other TOTD (Tip Of The Day) that you’d like to see. A complete archive of all tips is available here.

Technorati: totd mysql javaserverfaces netbeans glassfish ajax

This TOTD (Tip Of The Day) shows how to create a simple Java Server Faces application using NetBeans IDE 6.1. This is my first ever Java Server Faces application Much more comprehensive applications are already available in NetBeans and GlassFish tutorials.

The application is really simple – it allows you to create a database of cities/country that you like. You enter the city & country name on a page and click on Submit. This stores the data entered in the backend database and displays all the stored values in a new page. This application demonstrates simple JSF concepts:

• How to create a JSF application using NetBeans IDE ?
• How to populate a JSF widget with a Managed Bean ?
• How to use a Persistence Unit with JSF widgets ?
• How to setup navigation rules between multiple pages ?
• How to print simple error validation messages ?
• How to inject a bean into another class ?

This particular TOTD is using JSF 1.2 that is already bundled with GlassFish v2. Let’s get started.

1. In NetBeans IDE, create a new project
   1. Create a new NetBeans Web project and enter the values (”Cities”) as shown:

      

      and click on “Next”.

   2. Choose GlassFish v2 as the deployment server and click on “Next”.
   3. Select “JavaServer Faces” framework as shown below:

      

      take defaults and click on “Finish”.

2. Create a Persistence Unit as explained in TOTD #38. The values required for this TOTD are slightly different and given below.
   1. Use the following table definition:

      create table cities(id integer AUTO_INCREMENT,                     city_name varchar(20),                     country_name varchar(20),                     PRIMARY KEY(id));

   2. There is no need to populate the table.
   3. Use “jndi/cities” as Data Source name.
   4. There is no need to create a Servlet.
   5. Add the following NamedQuery:
      

      @NamedQuery(name = “Cities.findAll”, query = “SELECT c FROM Cities c”),

      right after the highlighted parentheses shown below:

      
3. Create a new bean which will perform all the database operations
   1. Right-click on “Source Packages”, select “New”, “Java Class…” and specify the values as shown below:

      

      and click on “Finish”.

   2. Create a new class instance variable for “Cities” entity class by adding a new variable and accessor methods as shown below:
      

      private Cities cities;          public void setCities(Cities cities) {         this.cities = cities;     }

      and then injecting in “faces-config.xml” as shown by the fragment below:

      <managed-bean>         <managed-bean-name>cities</managed-bean-name>         <managed-bean-class>server.Cities</managed-bean-class>         <managed-bean-scope>request</managed-bean-scope>     </managed-bean>     <managed-bean>         <managed-bean-name>dbUtil</managed-bean-name>         <managed-bean-class>server.DatabaseUtil</managed-bean-class>         <managed-bean-scope>request</managed-bean-scope>         <managed-property>             <property-name>cities</property-name>             <value>#{cities}</value>         </managed-property>     </managed-bean>

   3. In “server.DatabaseUtil”
      1. Inject EntityManager and UserTransaction as shown:

         @PersistenceContext(unitName=”CitiesPU”)     private EntityManager entityManager;          @Resource     UserTransaction utx;

      2. Add a method that returns a Collection of all entries in the database table as shown below:
         

         public Collection<Cities> getAllCities() {         Collection<Cities> allCities = new ArrayList<Cities>();         List list = entityManager.createNamedQuery(”Cities.findAll”).getResultList();         for (int i = 0; i < list.size(); i++) {             allCities.add((Cities)list.get(i));         }         return allCities;     }

      3. Add a method that
         will save a new entry in the database by using values from the injected “Cities” entity class as shown below:

         public String saveCity() throws NotSupportedException, SystemException, RollbackException, HeuristicMixedException, HeuristicRollbackException {         utx.begin();         entityManager.persist(cities);         utx.commit();                  return “submit”;     }

      4. Finally, right-click in the editor pane and select “Fix Imports”:

         

         and click on “OK”. Make sure to pick the right package name for “NotSupportedException” and “RollbackException”.

4. Add Java Server Faces widgets in the main entry page
   1. In “welcomeJSF.jsp”, drag/drop “JSF Form” widget on line 22 as shown below:

      

   2. Select “Form Generated from Entity Class” and specify “server.Cities” entity class in the text box as shown:

      

   3. The generated code fragment looks like:
      

      <h2>Detail</h2>  <h:form>   <h:panelGrid columns=”2″>     <h:outputText value=”Id:”/>     <h:outputText value=”#{anInstanceOfserver.Cities.id}” title=”Id” />     <h:outputText value=”CityName:”/>     <h:outputText value=”#{anInstanceOfserver.Cities.cityName}” title=”CityName” />     <h:outputText value=”CountryName:”/>     <h:outputText value=”#{anInstanceOfserver.Cities.countryName}” title=”CountryName” />   </h:panelGrid>  </h:form>

      It generates a 2-column table based upon fields from the entity class. We will use this form for accepting inputs by making the following changes:

      1. Remove first two “h:outputText” entries because “id” is auto generated.
      2. Change “h:outputText” that uses value expression to “h:inputText” to accept the input.
      3. Use “cities” managed bean instead of the default generated expression.
      4. Add required=”true” to inputText fields. This will ensure that the form can not be submitted if text fields are empty.
      5. Add “id” attributes to inputText fields. This will be used to display the error message if fields are empty.

      The updated code fragment (with changes highlighted in bold) looks like:

      <h2>Detail</h2>  <h:form>   <h:panelGrid columns=”2″>     <h:outputText value=”CityName:”/>     <h:inputText value=”#{cities.cityName}” title=”CityName” id=”cityName” required=”true”/>     <h:outputText value=”CountryName:”/>     <h:inputText value=”#{cities.countryName}” title=”CountryName” id=”countryName” required=”true”/>   </h:panelGrid>  </h:form>

      Issue# 144217 will ensure to pick a pre-declared managed-bean or declare a new one if it does not exist already. After issue# 144499 is fixed then “id” attributes will be generated by default.
      

   4. Add a button to submit the results:

      <h:commandButton action=”#{dbUtil.saveCity}” value=”submit”/>

      This must be added between </h:panelGrid> and </h:form> tags.

   5. Add a placeholder for displaying error messages:
      

      <br><br> <h:message for=”cityName” showSummary=”true” showDetail=”false” style=”color: red”/><br> <h:message for=”countryName” showSummary=”true” showDetail=”false” style=”color: red”/>

      right after <h:commandButton> tag. The official docs specify the default value of “false” for both “showSummary” and “showDetail” attribute. But TLD says “false” for “showSummary” and “true” for “showDetail”. Issue# 773 will fix that.

5. Add a new page that displays result of all the entries added so far
   1. Right-click on the main project, select “New”, “JSP…” and specify the name as “result”.
   2. Add the following namespace declarations at top of the page:
      

      <%@taglib prefix=”f” uri=”http://java.sun.com/jsf/core”%> <%@taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%>

      Issue #144218 will ensure these namespaces are declared by the IDE.
      

   3. Drag/Drop a “JSF Data Table” widget in the main HTML body and enter the values as shown:

      

      The generated code fragment looks like:

      <f:view> <h:form>  <h1><h:outputText value=”List”/></h1>  <h:dataTable value=”#{arrayOrCollectionOfserver.Cities}” var=”item”> <h:column>  <f:facet name=”header”>  <h:outputText value=”Id”/>  </f:facet>  <h:outputText value=” #{item.id}”/> </h:c olumn> <h:column>  <f:facet name=”header”>  <h:outputText value=”CityName”/>  </f:facet>  <h:outputText value=” #{item.cityName}”/> </h:column> <h:column>  <f:facet name=”header”>  <h:outputText value=”CountryName”/>  </f:facet>  <h:outputText value=” #{item.countryName}”/> </h:column> </h:dataTable>  </h:form> </f:view>

      Change the <h:dataTable> tag as shown below (changes highlighted in bold):

      <h:dataTable value=”#{dbUtil.allCities}” var=”item”>

   4. This page will be used to show the results after an entry is added to the database. Add a new button to go back to the entry page by adding the following fragment:
      

      <h:form>      <h:commandButton action=”back” value=”back”/> </h:form>

      between </h:form> and </f:view> tags.

6. Add the navigation rules to “faces-config.xml” as shown below:

   

   The corresponding XML fragment is:

   <navigation-rule>         <from-view-id>/welcomeJSF.jsp</from-view-id>         <navigation-case>             <from-outcome>submit</from-outcome>             <to-view-id>/result.jsp</to-view-id>         </navigation-case>     </navigation-rule>     <navigation-rule>         <from-view-id>/result.jsp</from-view-id>         <navigation-case>             <from-outcome>back</from-outcome>             <to-view-id>/welcomeJSF.jsp</to-view-id>         </navigation-case>     </navigation-rule>

Let’s run the application by right-clicking on the project and selecting “Deploy and Undeploy”. The welcome page shows up and looks like as shown below:

Clicking on “Submit” without entering any values shows the default error messages as shown below:

Enter your favorite city/country and click on “Submit” to see the result page as:

Click on “Back” and enter few more cities. The updated result page looks like:

Here are some useful pointers for you:

• JSF Tag Library & API docs
• javaserverfaces.dev.java.net – the community website
• Java EE 5 JSF Tutorial and many more on the community website right navbar.
• Java Server Faces on SDN
• GlassFish Webtier Aggregated Feed
• Feedback
• • GlassFish Webtier Forum
  • GlassFish Webtier IRC
  • JSF IRC

Subsequent entries on this trail will show how Java Server Faces Technology Extensions, Facelets, Mojarra make the application richer.

Please leave suggestions on other TOTD (Tip Of The Day) that you’d like to see. A complete archive of all tips is available here.

Technorati: totd mysql javaserverfaces netbeans glassfish