< Intro to Java Web App | Java & Friends | Visual Web JSP & JSF Application 2 >


 

 

Getting Started with Visual Web JSF Application Development Part 1

 

 

Contents:

  1. Machine specification used in this task

  2. Pre requirement:

  3. Starting a Project

  4. Visual Web JSF Application project: Try It

  5. For More Information

  6. Creating Web Pages

  7. JavaServer Pages (JSP) technology and page beans: Try It

  8. For More Information

  9. Adding Components to a Web Page

  10. Adding Components: Try It

  11. For More Information

  12. Getting Help

  13. Getting Help in NetBeans IDE: Try It

  14. Building and Testing a Web Application

  15. Building and Testing a Web Application: Try It

  16. For More Information

  17. Connecting Web Pages and Handling User Actions

  18. Connecting Web Pages and Handling User Actions: Try It

  19. For More Information

  20. Editing Java Code

  21. Editing Java Code: Try It

  22. For More Information

  23. Handling User Input

  24. Handling User Input: Try It

  25. For More Information

  26. Storing and Passing Data

  27. Storing and Passing Data: Try It

  28. For More Information

  29. Connecting to Databases

  30. Connecting to Databases: Try It

  31. For More Information

  32. Debugging a Web Application

  33. Debugging a Web Application: Try It

  34. For More Information

  35. Summary

 

 

The original tutorial can be found at netbeans.org. All credits must go to the original authors. In this tutorial we try to refine all the steps to more details using screen shots.

 

Machine specification used in this task are:

  • Intel Pentium Core 2 Duo, 2.2 GHz,

  • Windows XP Pro SP2 + periodical patches + periodical updates.

  • 2 GB DDR2 RAM

  • 160 GB SATA HDD

  • 17” SyncMaster 713N monitor.

 

Pre requirement:

 

In order to take advantage of NetBeans IDE 6.0's Java EE 5 capabilities, use an application server that is fully compliant with the Java EE 5 specification such as the Sun Java Application Server 9/GlassFish.

This tutorial has been tailored for use with the GlassFish v2 Application Server. If you are using a different server, consult the Release Notes and FAQs for known problems and workarounds. For detailed information about the supported servers and Java EE platform, see the Release Notes.

 

Starting a Project

 

A project is the equivalent of your working environment for a web application. When you create a Visual Web JSF Application project and you have specified GlassFish V2 or later as an application server in the NetBeans IDE, the IDE can create a web application based on Java EE 5 that uses JavaServer Faces 1.2 components. By default, the web application is created in a directory structure that conforms to the Java BluePrints project conventions for web applications.

 

Visual Web JSF Application project: Try It

 

1.      Start the IDE by using the appropriate step from the following list:

 

  • Windows, Solaris and Linux. Double-click the NetBeans desktop icon.

  • Mac. On MacOS, the 6.0 executable is installed into the /Applications/NetBeans/ directory. Double-click the NetBeans icon in this folder.

 

2.      Create a Visual Web JSF Application project:

 

a.      Choose File > New Project from the main menu.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

b.      In the New Project wizard, select the Web category and the Web Application project type, and click Next.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

c.      Name the project GettingStarted. Note the default project location. Browse and select a different location if you like.

d.      Choose a server and Java EE version.

e.      For example, the default server is GlassFish V2, and Java EE 5 is the default Java EE Version.

f.        Click Next.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

g.      Select the Visual Web JavaServer Faces framework and click Finish to create the new project in the default location or the location chosen in step c.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

3.      The IDE creates the project directory in the selected (or default) project folder and gives it the same name as your project.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

4.      Explore the Projects window. As shown in the following figure, the Projects window groups items by category. Expand each of the nodes to see what type goes in each category.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

5.      Under the Web Pages node is the Page1.jsp node. The IDE creates this page by default and makes it the start page. The arrow badge, start page badge next to the node identifies the page as the start page. If you want to use a different page for the start page, right-click that page's node and choose Set as Start Page from the pop-up menu.

6.      Click the Files tab, or choose Window > Files from the main menu, to bring the Files window to the front. This window organizes the items by their physical storage. Expand the nodes to see the structure. Notice the badge, Not compiled badge that appears next to the ApplicationBean1.java node and several other nodes below it, such as Page1.java. This badge indicates that the file needs to be compiled. The IDE compiles the files automatically when you build the project.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

7.      In Figure, notice the GettingStarted > src > java > gettingstarted > Page1.java node. This Java class is the backing bean for the Page1.jsp file. Whenever you add a page to the project, the IDE creates both a .jsp file and a .java file for the page. You learn more about .jsp and .java files in the next section.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

For More Information

 

 

Creating Web Pages

 

With Visual Web JSF applications, you use JavaServer Pages (JSP) technology and page beans (also known as backing beans) instead of HTML pages. The JSP page is a template from which the server generates the HTML response to be displayed in the browser (the client). The page bean contains the logic that the server executes both when it generates the HTML response and after a user submits the page.

When you add a web page in a Visual Web JSF application, the IDE creates both a JSP file and a Java source file for you. You mostly use the Visual Designer and the Properties window to develop the web page. The IDE modifies the JSP code and Java code to implement what you design. Most of your work can be done from the Visual Designer and the Properties window.

Note: The JSP pages that the IDE generates are JSP documents. A JSP document is an XML document and, therefore, must be well-formed. While most JSP elements comply with XML syntax, there are some elements that are not XML compliant, such as comments, declarations, directives, expressions, and scriptlets. See the JavaServer Pages Syntax Reference for JSP document syntax.

 

JavaServer Pages (JSP) technology and page beans: Try It

 

1.      In the Projects window, right-click the Web Pages node and choose New > Visual Web JSF Page, as shown in the following figure.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

2.      Accept the default name of Page2 and click Finish. The IDE opens Page2 in the Visual Designer, which is in the editing area, as shown in the following figure.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

3.      Click the Java button in the editing toolbar to see the source code for the page bean, as shown in the following figure.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

When the editing area shows the Java source, the Navigator window lists all the member fields and methods.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Notice that the page's source code has methods to access the Application Bean, Session Bean, and Request Bean. See the Storing and Passing Data section in this tutorial for an explanation of these three types of beans.

 

4.      The source also has methods that get invoked during certain lifecycle events between the time the page is requested and the time the page rendering is complete.

Tip: Double-clicking a member in the Navigator window opens the source code editor and positions the cursor at that member's declaration. You can also click in the Navigator window and start typing the first few characters of a member's name to open a Quick Search dialog box. Continue typing until the IDE highlights the desired entry in the list, as shown in the following figure. You can then press Enter to open the source code editor and position it at the matching member's declaration.

5.      Click the JSP button in the editing toolbar to see the JSP code for the page, as shown in the following figure. Notice how the JSP page uses JSP document syntax.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

 

6.      Clicking the Design button in the editing toolbar switches to the Visual Designer and displays the representation of the page in the Navigator window.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

If you open the nodes under the Page2 node, you can see the nodes shown in the following figure. Note how the tags in the JSP file are represented as nodes in the Navigator window.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

For More Information

 

Adding Components to a Web Page

 

You design a web page by dragging components from the Palette window and dropping them on the web page in the Visual Designer. The following figure shows Page2 with the Button, Text Field, Message, Drop Down List, and Radio Button Group components. All these components are available from the Basic section of the Palette. These components have been customized by changing their properties. You learn about properties later in this section.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Note: The components that are available from the Palette are JavaServer Faces (JSF) components that have been enhanced according to the Design Time API to make their properties available for the Visual Designer and the Properties window. You can use other components in the web applications that you build by using the IDE, but you will not be able to use the interactive design-time features of the IDE on these components unless they have been customized according to requirements of the Design Time API. If the Java EE version is set to Java EE 5, the Palette offers JSF 1.2 components. If, when you create the project, you set the Java EE version to 1.3 or 1.4, the Palette offers JSF 1.1 components.

Most of the components that you use are in the Basic, Layout, and Composite sections of the Palette window. The following tables show some of the most commonly used components grouped according to functionality.

 

Table 1: Input Components

 

Component

Description

Palette Section

Text Field

An input field for a single line of text.

Basic

Text Area

An input field for multiple lines of text.

Basic

Drop Down List

A drop-down menu, also referred to as a combo box.

Basic

Listbox

A list from which the user can select either one item or multiple items, depending on how the component is configured.

Basic

Checkbox

A single-character box that the user can either select (check) or clear.

Basic

Radio Button

A single radio button that the user can select (check).

Basic

Password Field

An input field that echoes the input characters with a replacement character to mask the input.

Basic

File Upload

A component with a text input field and a Browse button that displays a file chooser for specifying a file to upload. The application uploads the specified file when the user submits the page.

Basic

Add Remove

Two lists (one for available options, one for selected options) with buttons to move the options between the lists, and to order the selected options.

Composite

Calendar

An input field and calendar for choosing dates.

Basic

 

Table 2: Display Components

 

Component

Description

Palette Section

Label

Text field that can be associated with an input field and for which you can specify a weak, medium, or strong font style.

Basic

Static Text

Field for displaying text.

Basic

Image

Inline image.

Basic

Message

Text field that is linked to a specific component for displaying validation errors and other messages about that component.

Basic

Message Group

Text field for displaying runtime error messages, program generated error messages, and, optionally, validation errors and other messages about components that are on the page.

Basic

Page Alert

Similar to an Alert component (below), but intended to display the icon and information on a separate page.

Layout

Alert

Displays an icon and informational text such as a warning, an error, or the successful completion of some event.

Composite

Hidden Field

An invisible field that can be used to hold data or pass information to the server.

Basic

Page Separator

A horizontal line that resizes to any page width selected by the user.

Layout

Form

Used to add a form.

Layout

Inline Help

Provides short help information that appears inline on your pages.

Composite

 

Table 3: Grouping Components

 

Component

Description

Palette Section

Checkbox Group

Displays two or more checkboxes in a grid layout.

Basic

Radio Button Group

Displays two or more radio buttons in a grid layout and ensures that only one button can be selected at a time.

Basic

Table, Table Row Group, and Table Column

Displays data from a composite data type such as a database table or an array.

Basic

Grid Panel

Organizes the components within a layout of rows and columns.

Layout

Group Panel

Groups a set of components in flow layout mode.

Layout

Layout Panel

Use to group a set of components in flow layout mode or grid layout mode.

Layout

Tab Set and Tab

Displays different layouts on the same page. Also can be used as a navigational tool.

Layout

Page Fragment Box

Groups components that you want to consistently display on two or more pages.

Layout

Property Sheet, Property Sheet Section, and Property

Lays out a single column of labeled components quickly, and divides the components into sections.

Layout

Breadcrumbs

Lays out a series of link components separated by right angle brackets (>).

Composite

 

Table 4: Action Components

 

Component

Description

Palette Section

Button

Button that submits the associated form.

Basic

Hyperlink

Text field that submits a URL or submits a form.

Basic

Image Hyperlink

Image that submits a URL or submits a form.

Basic

Tab

Subcomponent of a Tab Set or a Tab. A tab can optionally submit a URL or submit a form.

Layout

Common Task

A link to a Visual web JSF page where a user can perform a task.

Composite

 

You use the component's property sheet in the Properties window to change the appearance and behavior of the component, to bind the component to data, and to associate the component with event handlers. The following figure shows the properties for a Listbox component.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Adding Components: Try It

 

Open Page2 that you created by following the previous Try It suggestions in the Creating Web Pages section, or create it if necessary.

Drag various components from the Basic section and the Layout section of the Palette window and play around with their properties. For example, try the following steps:

 

  1. Drag a Button Component onto the page, type Click Me! and press Enter. In the Properties window, notice how the text property has the value Click Me!. In the Properties window, select the primary property's checkbox and notice how the button's appearance changes.

 

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Drag a Text Field component onto the page. Next, drag a Label component onto the page, type Name: and press Enter. Ctrl-Shift-Click inside the Label component and drag to the Text Field component, and then release the mouse button. Select the Label component and notice how its for property is now set to the id for the Text Field Component. Set the labelLevel to Strong (1).

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

------------------------------------------------------------------------------------------------------------------------------

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Drag a Message component to the right of the Text Field. Control-Shift-Drag from the Message Component to the Text Field component. As with the Label component, notice how the for property for the Message component is now set to the id for the Text Field Component.

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Drag a Drop Down List component onto the page and set its label property to Color. Right-click the Drop Down List component and choose Configure Default Options to open the Options Customizer.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Press Tab to enter edit mode for Item 1 in the Display column, and type Blue. Press tab twice and change Item 2 to White. Press tab twice more and change Item 3 to Green. Click OK and notice how your changes affect the component in the Visual Designer.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Use similar steps to create a Radio Button Group component with the choices Blue, White, and Red, but do not close the Options Customizer quite yet.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

In the Options Customizer, select the Select Items checkbox, and then select one of the radio buttons in the Selected column to set the default selection to that item. Click OK to apply the changes and to dismiss the Options Customizer.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

In the Properties window, set the columns property to 3 to align the radio buttons horizontally instead of vertically.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

  1. Right-click the page background, any empty spot in the page, and choose Preview in Browser to see how your browser renders the components.

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

Step-by-step on Visual web Java Server Faces (JSF) application development screenshots

 

For More Information

 

Getting Help

 

The IDE provides a Help Viewer, which contains help topics about the IDE. Also, when you press F1 on a window, dialog box, or Palette component, the Help viewer appears and displays information about that item. To access the Visual Web JSF Pack help topics, including help about the components, you can also choose Help > Help Contents from the main menu and scroll to Web Applications.

 

Getting Help in NetBeans IDE: Try It

 

1.      Click inside the Properties window for the Checkbox Group. Press F1 to view the topic about the Checkbox Group component properties.

2.      Select the node for the Text Field component in the Basic section of the Palette. Press F1 to view the help topic about the Text Field component.

 

Continue on next tutorial, Part 2.

 

 

 

 

 

 

 

 

Java Web JSP & JSF Apps: Part 1 | Part 2 | Part 3


 

< Intro to Java Web App | Java & Friends | Visual Web JSP & JSF Application 2 >