Introduction to JSF — 10 points

This lab exercise will introduce you to JavaServer Faces through the integrated development environment (IDE) NetBeans. If you've recently taken CS 2511, Software Analysis and Design, you are familiar with NetBeans for creating client side or desktop applications using the Java Standard Edition (Java SE).

In this course we will use the Java Enterprise Edition (Java EE) with Netbeans to create web applications that do processing (including dynamic page creation) on the server side. The web applications will run on an application server called GlassFish.

After setting up NetBeans and GlassFish, you will run the login web application from the text. Then you will make a minor modification to the application and submit your work.

An application server is a software system that delivers applications (not just web pages) to clients primarily through the Internet using HyperText Transfer Protocol (HTTP). NetBeans is bundled with an application server called GlassFish, along with a JSF reference implementation.

The latest version of NetBeans is 8.1, which you should install on your own machine.

Earlier versions of NetBeans are installed on the workstations in Heller Hall 314 and other ITSS student labs.

Note: If you installed Netbeans previously for CS 2511, you may not have Glassfish.

You will need the JSFAPP example code. This code is slightly modified JavaEE versions of code from corejsf.com. Download it and unzip it.

You should see subfolders for each of the 13 chapters. This exercise uses the login folder in the folder for Chapter 1.

To create a NetBeans project for one of the examples you need to select New Project... from the NetBeans File menu. This will start up a wizard with 4 steps.

  1. Choose Project
  2. Name and Location
  3. Server and Settings
  4. Existing Sources

After working through the wizard you can check the contents of the development folders.

In the Choose Project dialog you choose the type of project that you are creating.

Choose Project Dialog

In the Name and Location dialog you specify the location of the source code for the project.

Name and Location Dialog

The Server and Settings dialog sets up the GlassFish server for the application. You should not have to change anything from the default settings.

Server and Settings Dialog

The Existing Sources and Libraries dialog specifies the locations of JSF pages and configuration files. You should not change the defaults filled in by NetBeans.

Existing Sources and Libraries

At this point, the creation of the new project should be complete. You should check to ensure everything is set up correctly.

If you do not have a Projects pane on the right side of the NetBeans window you can open one by selecting Projects from the Window menu. After expanding the WEB-INF and Source Packages folders you should see the following.

Projects Pane

At this point, the creation of the new project should have been complete. However, the current version of NetBeans is missing the library file cdi-api.jar. There is no way you can repair NetBean to cure this problem. Instead you will have to add the library manually to every JSF project. To simplify trying out the JSFApp examples, the cdi-api.jar library is included in the top level JSFApp folder.

If the login project was set as the main NetBeans project then you can run the login application by selecting Run Main Project in the NetBeans Run menu. Otherwise, click on the login project in the Projects pane, then select Run Project (login) in the NetBeans Run menu.

It may take a while for anything to happen if NetBeans needs to start the GlassFish server. When GlassFish is running NetBeans will open your default browser to the starting page of the login application (index.xhtml). You can enter a name and a password into the two text fields (anything will do). The browser should then display something like the following.

index screen

After you click on the Login button you will see something like the following (welcome.xhtml). The name should be the same as the one entered in the previous screen.

welcome screen

Use Netbeans to modify the webapp slightly. In the Projects window under the login node open the Web Pages node and then open the index.xhtml page for editing. Just above the <h:form> tag in index.xhtml, insert a heading line that identifies you. If your name is Gary, for example, insert:

<h1>Welcome to Gary's Domain</h1>

Then run the project again. The initial page should look like:

modified index screen

The application should accept input and return a welcome page the same as before.

Your TA will provide instructions for submitting your work.