Miles to go …

August 20, 2008

TOTD #42: Hello JavaServer Faces World with NetBeans and GlassFish

Filed under: web2.0 — arungupta @ 5:00 am

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:

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

            private EntityManager entityManager;
            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++) {
                return allCities;

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

        public String saveCity() throws NotSupportedException, SystemException, RollbackException, HeuristicMixedException, HeuristicRollbackException {
                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:
        <h:panelGrid columns=”2″>
          <h:outputText value=”Id:”/>
          <h:outputText value=”#{}” 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” />

      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:

        <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”/>

      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:
      <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=””%>
      <%@taglib prefix=”h” uri=””%>

      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:

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

      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:commandButton action=”back” value=”back”/>

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

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

    The corresponding XML fragment is:


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
  • – 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

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

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • Facebook
  • Google Bookmarks
  • DZone
  • StumbleUpon
  • Technorati
  • Twitter
  • Slashdot
Related posts:
  1. TOTD #94: A simple Java Server Faces 2.0 + JPA 2.0 application – Getting Started with Java EE 6 using NetBeans 6.8 M1 & GlassFish v3
  2. TOTD #147: Java Server Faces 2.0 Composite Components using NetBeans – DRY your code
  3. TOTD #46: Facelets with Java Server Faces 1.2
  4. TOTD #51: Embedding Google Maps in Java Server Faces using GMaps4JSF
  5. TOTD #45: Ajaxifying Java Server Faces using JSF Extensions


  1. Great job Arun! I’m so glad you are helping to do these kinds of things for JSF now.

    Comment by Roger Kitain — August 20, 2008 @ 6:25 am

  2. Thanks for TOTD. I got a problem when i tried this with JavaDB. Below is the stacktrace from GlassFish log

    Local Exception Stack:
    Exception [TOPLINK-4002] (Oracle TopLink Essentials – 2.0.1 (Build b04-fcs (04/11/2008))): oracle.toplink.essentials.exceptions.DatabaseException
    Internal Exception: java.sql.SQLSyntaxErrorException: Attempt to modify an identity column ‘ID’.
    Error Code: -1
    bind => [null, Hyderabad, India]
    Query: InsertObjectQuery(server.Cities[id=null])
    at oracle.toplink.essentials.exceptions.DatabaseException.sqlException(
    at oracle.toplink.essentials.internal.databaseaccess.DatabaseAccessor.basicExecuteCall(
    at oracle.toplink.essentials.internal.databaseaccess.DatabaseAccessor.executeCall(
    at oracle.toplink.essentials.internal.sessions.AbstractSession.executeCall(

    Comment by Madhu — August 20, 2008 @ 9:35 pm

  3. Madhu,

    There might be more than one change required for running it with JavaDB. For example the table definition need to look like:

    create table cities(id integer NOT NULL GENERATED ALWAYS AS IDENTITY (START WITH 1, INCREMENT BY 1),
    city_name varchar(20),
    country_name varchar(20),
    PRIMARY KEY(id));

    I got an error by executing the DDL given in the blog. Can you try with the table above ?

    Comment by Arun Gupta — August 21, 2008 @ 3:16 pm

  4. Hi, I am using postgresql database and for sample work you need put :
    at Cities entity.

    another point is that result.jsp file the correct me seen:

    <h:dataTable value="#{dbUtil.allCities}" var="item"> instead <h:dataTable value="#{cities.allCities}" var="item">.


    Comment by Alex — August 26, 2008 @ 12:58 pm

  5. Superb demonstration thanks.

    Comment by lava kafle — August 26, 2008 @ 6:50 pm

  6. Thanks a lot Arun.

    So, now I can able to code in JSF.

    Comment by Kumar Gaurav — August 27, 2008 @ 1:23 am

  7. I tried it is easy to able the code

    Comment by msn adresleri — September 3, 2008 @ 2:57 pm

  8. Great work. Readers might want to check out the new enterprise tech tip for composite components in JSF 2.0


    Comment by Ed Burns — September 9, 2008 @ 9:50 am

  9. [Trackback] 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…

    Comment by Arun Gupta's Blog — September 17, 2008 @ 5:47 am

  10. i like to know how i can insert a String array
    into a data table .

    On select a drop down in a table a new row should be created with that particular field filled with array values.

    Comment by jaysonkn — October 13, 2008 @ 11:29 pm

  11. [Trackback] Java Server Faces 2.0 specification (JSR 314, EDR2) and implementation (soon to be EDR2) are brewing. This blog shows how to get started with Mojarra – Sun’s implementation of JSF. GlassFish v2 comes bundled with Mojarra 1.2_04 which allows…

    Comment by Arun Gupta's Blog — October 14, 2008 @ 5:55 am

  12. Çok güzel bir yazı. Genel kültürün gelişmesi açısından çok değerli bilgiler içeriyor. Dil konusuna gelince; artık bilim dilinin İngilizce olduğunu kabullenmek lazım. Bilim değil de aslında teknoloji dili demeliyiz. Çağın gerisinde kalmamak için İngilizce’ye savaş açmak yerine onunla barışık yaşamalıyız. Dünyada en çok kullanılan dil (konuşma dili) Çincedir. Bunun sebebi de malum nüfus farkı. ikinci dil İspanyolca ve evet 3.dil Türkçedir

    Comment by devbahis — October 26, 2008 @ 3:31 pm

  13. Java Server Faces 2.0 specification (JSR 314, EDR2) and implementation (soon to be EDR2) are brewing. This blog shows how to get started with Mojarra – Sun’s implementation of JSF. GlassFish v2 comes bundled with Mojarra 1.2_04 which allows…

    Comment by siyaset — October 26, 2008 @ 3:32 pm

  14. thanks

    Comment by iibf — October 26, 2008 @ 3:33 pm

  15. very nice works

    Comment by malatya — October 26, 2008 @ 3:35 pm

  16. Sometimes, we live java application problems when we try to add them to our web sites. Some browsers can not read them correctly. w3 site’s validator also says same errors.

    If you make a new lesson about integration java scripts to web pages, i will be so happy. (classes e.g.)

    Thanks for your lesson again.

    Comment by sunucu — January 28, 2009 @ 1:00 am

  17. thanks for this kind of infos

    Comment by kolbastı — February 4, 2009 @ 9:53 am

  18. thanks

    Comment by Tabela — February 23, 2009 @ 4:54 am

  19. Java Programming… I love you!

    Comment by Web Hosting — May 6, 2009 @ 7:28 pm

  20. thank you bro!…

    Comment by beylikdüzü halı yıkama — July 3, 2009 @ 6:20 am

  21. hello.. thank you for this article.

    Comment by porno — July 14, 2009 @ 10:25 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

The views expressed on this blog are my own and do not necessarily reflect the views of Oracle.
Powered by WordPress