The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

Creating JSF submission forms

Roland Barcia (barcia@us.ibm.com), Certified IT Specialist, IBM

Roland Barcia is a Consulting IT Specialist for IBM Software Services for WebSphere. He is a co-author of IBM WebSphere: Deployment and Advanced Configuration. For more information about Roland, see his blog.

Summary: Part 2 of this 5-part series on Java Server Faces builds upon Part 1, continuing with the creation of JSF submission forms, and showing some of the dynamic controls that can be used for visually developing J2EE Web applications.

Date: 18 Feb 2004
Level: Intermediate

Activity: 7095 views
Comments:

Introduction

This is part of 2 of a 5 part article series illustrating the features of the Java™ Server Faces (JSF) technology preview available in WebSphere® Studio V5.1.1. The articles that make up this series include:

Part 1: Creating a JSF Web project and page template
Part 2: Creating JSF submission forms
Part 3: Creating JSF applications that access data using Web Data Objects (WDO -- soon to be SDO: Service Data Objects)
Part 4: Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components
Part 5: Creating a JSF Web service client using the Web service proxy component.

These exercises will expose the Rapid Application Development (RAD) nature of JSF. In Part 1, we created a JSF-enabled Web project and a JSF page template. Page templates help us deal with the static portions of our Web sites, although J2EE applications servers are designed for running dynamic Web pages. In Part 2, we will create two JSF submission forms and show some of the dynamic controls on the visual palette, continuing where we left off in Part 1.

You can download the solution to Part 1 from the Download section of this article. If you extract the zip file to your C: drive, you can import the StockSystemEAR file from C:\JSFArticleSeries\Part2\SolutionPt1 into a clean workspace, then select File => Import, then EAR file from the Import wizard (Figure 1).

Figure 1. Import EAR

Create accessStock JSF form

To create our first JSF form, your workspace should first be open from the last exercise from Part 1.

Create a new JSF page within our Web project:
1. If you are not in the Web perspective, go there now. Expand the PersonalTradeJSF Web project and right-click the WebContent folder and select New => Faces JSP File (Figure 2).
  Figure 2. Create new JSP file
2. Enter accessStock.jsp for the File Name and check Create from page template (Figure 3). Press Next.
  Figure 3. New Faces JSP File
3. Select User-Defined Page Template and StockPageTemplate.jtpl. If the template is not listed, select Browse => Current Project next Location (Figure 4). Select Finish.
  Figure 4. Page Template File Selection
4. The Faces JSP page should match the template we built previously (Figure 5). You will notice "Default content of bodyarea". This is the only place on the page into which we can drag components. Any changes to the template need to be made to the template file; only the content area is dynamic.
  Figure 5. Faces JSP Page
We will now drag JSF components into the content area:
1. Delete the "Default content of body area" text and create some spaces in between the start and end pencil icons. From the Faces Components section of the palette (Figure 6), drag the Output component onto the content area.
  Figure 6. Faces Components palette
2. After dragging the component into the content area (Figure 7), the Select Type dialog appears asking you to identify the type of component (Figure 8). Select Text and OK.
  Figure 7. Drag component into content area
  
  Figure 8. Select Type
3. Select the component. For Value, enter Access Stock, then select the Properties tab (Figure 9).
  Figure 9. Attributes
4. Change the font size of the text to 18 points, then OK (Figure 10).
  Figure 10. Add Style
  
  Figure 11. Properties
5. Next, add a space under the label on the JSP page. From the palette (Figure 12), select the Input component and drag it next to the Access Stock output component.
  Figure 12. Faces Components palette
6. Again, select Text from Select Type dialog (Figure 13).
  Figure 13. Select Type
7. The JSP page should now look similar to Figure 14. Enter a few new lines after the input box.
  Figure 14. New JSP page content area
8. Select Command - Button from the palette (Figure 15) and drag it onto the JSP page (Figure 16).
  Figure 15. Select Command - Button
  
  Figure 16. New JSP page
9. Select the new button and then go to the Attributes view. Select the Format tab and enter Submit Stock Request for the Label. The button on the JSP should reflect this new label.
  Figure 17. Define Label
10. Save the JSP page.
Now that we have created our first JSF form, we need to bind the controls to page data. The Page Data view allows the Web developer to create scripting variables for any of the allowable JSP scope levels.
1. With accessStock.jsp still open, go to the Page Data view on the middle left side of the workbench. Select JSP scripting, right-click on requestScope, then select Add Request Scope Variable (Figure 18).
  Figure 18. JSP scripting menu
2. In the Add Request Scope Variable dialog that displays, enter the following values:
  - Variable name: symbol
  - Type: java.lang.String
  then select OK.
3. The variable is now defined. Any tag that supports JSTL expression language can now access the symbol variable using ${requestScope.symbol}. JSF tags support the JSTL expression language; JSP 2.0 will fully support the JSTL expression language as well. An expression language is much easier for a Web developer to use than JSP expressions in Java.
  Figure 19. Accessing the symbol variable
We can now use the Attribute view of certain components to bind the page data we have defined to a control. Here, we will bind the input control to the symbol variable defined in the requestScope:
1. Highlight the input control on accessStock.jsp (Figure 20).
  Figure 20. accessStock.jsp
2. From the Attribute view, select the button beside the Bind to text box (Figure 21).
  Figure 21. Attributes view
3. Select the symbol variable under requestScope and press OK (Figure 22).
  Figure 22. Select Page Data Object
4. The JSP should display the {symbol} variable in the input box (Figure 23).
  Figure 23. JSP with symbol variable
5. Save the JSP.
6. On the JSP page, select the Preview tab to view the result.
  Figure 24. JSP preview

Test the JSF form in the WebSphere Application Server V5.1 test environment

We will now use the WebSphere Application Server V5.1 Unit Test Environment (UTE), included with WebSphere Studio, to test the page.

From the Project Navigator view, right-click on accessStock.jsp, and select Run on Server (Figure 25).
Figure 25. Test JSP
The Server Configuration wizard will display. The Test Environment option should be selected under WebSphere version 5.1. Select the Set server as project default option, then Finish (Figure 26).
Figure 26. Server selection
Once the server completely starts, the browser should also start. Notice that the URL goes through the Faces servlet. Without going through the Faces servlet, the Faces context will not be setup and the JSP render would fail. WebSphere Studio automatically knows to access the JSP through the Faces servlet because we added Faces support when creating the Web project.
Figure 27. Universal Test Client startup

Figure 28. Testing the JSP
In the JSP, enter a value of IBM , then Submit Stock Request (Figure 29). Notice that the page re-renders while the Text box still populates. The control is bound to the request variable for input and output. Also, the default navigation of JSF is to re-render the same page if no navigation is set or no navigation result is found. For pages wanting to use both input and output controls on the same page, it is quite easy to develop a JSF page with no navigation.
Figure 29. Testing the JSP

Create and test accessStockHistory.jsp

In the previous section, we walked through the creation of a JSF form. We will now create a second JSF form to access stock history, although we will only step through the creation process at a high level. This new page will be used in Part 3 of this article series.

Create another form using Faces components that will return a list of stock history. Follow the detailed steps above to create the form, to be named "Access Stock History":

The new form should look like the page in Figure 30, below.
Figure 30. New JSF form
Be sure to create the symbol variable and to bound the input box to the symbol variable.
Figure 31. Create symbol variable

Figure 32. Bound input box to symbol variable
Preview and test the page when the form is compete. You will need to restart the application server.
Figure 33. Restart application server
Aside from the title, the new page should look similar to the one previously created.
Figure 34. New application page
Save and close the file.
Go to the Project Navigator view and expand the Java Resources folder. Under the codebehind package, you will see the generated java code that corresponds to the JSP pages.
Figure 35. Codebehind package

Additionally, each generated Java class is added as a JSF managed bean. Open the faces-config.xml file under the WEB-INF directory to examine the file, the contents of which is shown in Listing 1.
Figure 36. Locating the faces-config.xml file

Figure 36. Locating the faces-config.xml file

Listing 1. faces-config.xml

<managed-bean>
	<managed-bean-name>cb_StockPageTemplate</managed-bean-name>
	<managed-bean-class>codebehind.StockPageTemplate</managed-bean-class>
	<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<managed-bean>
	<managed-bean-name>cb_accessStock</managed-bean-name>
	<managed-bean-class>codebehind.accessStock</managed-bean-class>
	<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<managed-bean>
	<managed-bean-name>cb_accessStockHistory</managed-bean-name>
	<managed-bean-class>codebehind.accessStockHistory</managed-bean-class>
	<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

Stop the server when finished.
Figure 37. Stop the server

Conclusion

In Part 2 of this article series, we have successfully built two JSF forms. In so doing, we also saw how the JSF visual palette conveniently provides JSF components for building open and powerful Web sites. Part 3 will continue with building the result of the Stock History page using Web Data Object (WDO) Technology, which is another preview technology in WebSphere Studio V5.1.1.

Download

Name	Size	Download method
JSFArticleSeriesP2.zip	2.4 MB	FTP\|HTTP

Information about download methods

Resources

About the author

Close [x]

Report abuse help

Report abuse

Thank you. This entry has been flagged for moderator attention.

Close [x]

Report abuse help

Report abuse

Report abuse submission failed. Please try again later.

Close [x]

developerWorks: Sign in

All information submitted is secure.

Close [x]

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.