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 1

Creating a JSF Web project and page template

Roland Barcia, 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.

Summary: Part 1 of this 5-part series begins a series of hands-on exercises with Java Server Faces (JSF), an exciting new feature for visually developing J2EE Web applications.

Date: 19 Jan 2004
Level: Intermediate

Activity: 16695 views
Comments:

Introduction

For a year now, Java Server Faces has been one of the most anticipated technologies in J2EE Web development. With the release of WebSphere Studio V5.1.1, Java Server Faces has arrived. Java Server Faces (JSF) provides exciting new development opportunities in visually developing J2EE Web applications. Without JSF, the developer has to write code to handle almost all user interactions with the application. Non-JSF Web applications use HTML controls for user input, but since HTML controls do not have any "smarts" of their own, the developer must write code to handle all errors, input validations, string conversions and formatting, page flows, etc. JSF is a UI framework that provides these user interactions for the developer, which greatly simplifies developing interactive Web applications. JSF provides a UI framework that consists of UI components and a run time that renders these components to the client and manages the page lifecycle (errors, validators, navigation, etc.).

This article is Part 1 of a 5-part series intended to give the reader hands-on experience using this new exciting feature. This series will cover:

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. Using the WebSphere Studio Web perspective, developers can simply drag Faces Components onto JSF Pages. The richness of these controls lets Web developers build JSF applications without needing to know Java.

In this article, we will create a JSF Web project and design a page template out of Faces components. Page templates provide an easy way of applying a consistent feel across multiple Web pages. All five parts of this article series build upon each other. Readers should be familiar with WebSphere Studio and with developing JSP applications. The material for this tutorial can be downloaded below.

The JSF tools in WebSphere Studio V5.1.1 are provided as a technical preview only, since the JSF specification is not yet final. Development of production applications should be performed only when the JSF specification has been finalized and a version of WebSphere Studio supporting this specification has been released by IBM.

Create a JSF Web project

In this section, we will create a Web project and enable it for JSF support, which will add all the necessary libraries to our Web project.

Open WebSphere Studio.
1. Start WebSphere Studio Application Developer Version 5.1.1. If you have disabled the text box feature, enable it by setting -setworkspace parameter on the command line.
2. Set the directory to C:\JSFLab\workspace. Go to the J2EE perspective.
We will now create a Web application. In the creation process, we will enable the application for JSF development support.
1. Go to the J2EE Hierarchy View. Right click Web Modules and select New => Dynamic Web Project. (Figure 1)
  Figure 1. Create Web project
2. This will open the Dynamic Web Project wizard. For the Project Name, enter PersonalTradeJSF. Click configure advanced options and select Next. (Figure 2)
  Figure 2. Configure advanced options
3. On the next page, set the name of the EAR Project to StockSystemEAR. (An EAR file will be generated if you do not specify one.) For the Context root, enter pts. Ensure that J2EE level is 1.3. Select Next. (Figure 3)
  Figure 3. EAR file and context root
4. The "Features Page" dialog lists the features that can be added to Web applications. Select the following: (Faces Support is added automatically when using the Faces Tools.) (Figure 4)
  - Add Faces Base Components
  - Default style sheet (CSS file)
  - WDO Relational database runtime
  - JSP Tag Libraries
  Press Finish.
  Figure 4. Web features
Import some images needed by our application.
1. Switch to the Project Navigator view. Expand PersonalTradeJSF, right-click on the WebContent folder and select Import from the Context Menu. (Figure 5)
  Figure 5. Import Menu
2. Select File System, then Next.
3. Browse to C:\JSFArticleSeries\Part1\WebContent, expand WebContent and select the theme check box. Be sure that PersonalTradeJSF\WebContent is specified as the Into folder and that Create selected folders only is selected. Select Finish. (Figure 6)
  Figure 6. Import Web Content
4. There should now be some gif files in the theme folder, as illustrated in Figure 7.
  Figure 7. Imported Web Content

Create a page template out of Faces components

Maintaining a common look-and-feel across Web pages is a common and desirable practice. WebSphere Studio uses the concept of page templates to accomplish this. The JSF tools can be used to build a common page template, which we will do in the following steps:

First, we need to create a page template file to use for the rest of our JSF pages.
1. If you are not in the Web perspective, go to it now. In the Project Navigator, expand the PersonalTradeJSF project. Right-click the WebContent Folder. Select New => Page Template File, as shown in Figure 8.
  Figure 8. Create Page Template file
2. Enter or select the following values in the "New Page Template" dialog (Figure 9):
  - Folder: /PersonalTraseJSF/WebContent
  - File Name: StockPageTemplate
  - Model: Template Containing Faces Component
  Select Finish.
  Figure 9. Page Template wizard
3. The page template should open in the editor window. Select OK on the pop-up dialog asking for at least one Content Area (Figure 10), since one will be added shortly.
  
  If the page template does not open, you can find it under the WebContent folder, as shown in Figure 11.
  Figure 10. Content Area warning
  
  Figure 11. Newly created Page Template
We will now get our first exposure to the Faces components under the palette, and drag some visual components onto the StockTemplate.
1. If you are not in the Web perspective, go there now. Ensure that the StockTemplate.jtpl is open. On the right side of the workbench, you should see the Palette. The Faces Components section contains standard JSF components along with some IBM extended components. Expand the Faces Components section, and select the Panel-Group Box component. (Figure 12)
  Figure 12. Visual palette
2. Drag the Panel-Group Box component onto the blank StockTemplate.jtpl, as shown in Figure 13. If there is any text, remove it from the JTPL before dragging the component. A dialog box should display asking you to select the type of component. Select List, as shown in Figure 14.
  Figure 13. Drag component on to design View
  
  Figure 14. List panel
3. The panel list allows Web developers to layout out components side by side. Therefore, we will drag two images onto the panel. Select the Image component from the Faces panel (Figure 15) and drag it into the panel list.
  Figure 15. Image component
4. Repeat the previous step to get two images side-by-side, as shown in Figure 16.
  Figure 16. Images components within Panel components
5. Components can be customized by adding attributes. Select the first image and go to the bottom left corner. The Attribute view should be active and should contain the attributes for the selected item on the Web page, in this case the image. Select the Browse button, next to the File text box, as shown in Figure 17.
  Figure 17. Select image
6. Expand the Web application down to the theme directory and select tradebanner1.gif. (Figure 18)
  Figure 18. Select image
7. The page should display as shown in Figure 19. Next, on the JTPL page, select the section image component.
  Figure 19. tradebanner1 image
8. For the purposes of this exercise, go to the Attribute view and remove the /pts/ from the file name, as shown in Figure 20, so that the resulting relative path appears as it does in Figure 21. (Making this change avoids a known bug in the beta version of the tool involving absolute path names and page templates; otherwise, the tradebanner1.gif will not properly resolve.)
  Figure 20. Use relative paths for this exercise
  
  Figure 21. Relative path result
9. Return to the attribute page and browse to the tradebanner2.gif (Figure 22), remembering to change to relative paths.
  Figure 22. Repeat for second image
10. There should be an unwanted space between the two images. Resolve this by editing the properties of the panel box. Back in the attribute box, we need to expose the attributes of the panel. Because the image is in the panel, we can use the drop arrow, as shown in Figure 23, to select the panel and edit the properties. Select HX:PANEL_BOX, as shown below.
  Figure 23. Panel attributes
11. Select the All tab (Figure 24). Enter a value of 0 for border, cellpadding, and cellspacing.
  Figure 24. Panel attributes for border
12. Return to the Web template, put the cursor under the panel, and press Enter to add a line. In the Palette window, expand the HTML Tags section, and select Horizontal Rule (Figure 25).
  Figure 25. Select HR from HTML tags palette
13. Drag the Horizontal Rule attribute under the images, as shown in Figure 26.
  Figure 26. Web features
14. Next, expand the Page Template section of the palette and select Content Area (Figure 27). When creating a JSP, content areas are the editable sections of the JSP. Every template needs at least one content area. Any changes to the template will affect every JSP that uses the template. Drag the content area under the horizontal bar.
  Figure 27. Content area
15. A pop-up box will appear, as shown in Figure 28. Leave the default name and press OK.
  Figure 28. Content area
16. Enter another space in the template, drag another horizontal bar from the HTML Tags palette, then add additional space (Figure 29).
  Figure 29. Add another HR
17. q) Back in the Palette window, select Faces Component => Panel - Group Box, as shown in Figure 30.
  Figure 30. Panel - Group Box
  
  Drag Panel - Group Box to the bottom of the page. This time, select Grid, as shown in Figure 31. Grid groups components one on top of the other.
  Figure 31. Select Grid
18. From the palette, select the Image component under Faces Components (Figure 32), and drag it to the bottom of the page.
  Figure 32. Image component
  
  Figure 33. Image within a panel
19. Highlight the image box, then go to the Attribute view (Figure 34). Like before, select Browse next to the File text box.
  Figure 34. Browse for image
20. Select WEBSPHERE_22P.GIF, as shown as Figure 35. (Remember to change the file name to use relative paths.)
  Figure 35. Select WEBSPHERE_22P.GIF
21. The template should look like Figure 36.
  Figure 36. Template page with all components
22. Finally, we need to update one last attribute. All the components on a page are embedded within a Body tag. Go to the Attribute view and select Body from the drop down (Figure 37).
  Figure 37. Select BODY from Attribute view
23. Click the drop-down box next to the Image field and select Browse (Figure 38).
  Figure 38. Browse for image
24. Select grid.gif in the theme folder (Figure 39).
  Figure 39. Select grid.gif
25. The resulting page should look like Figure 40.
  Figure 40. Resulting page
26. Select the Preview tab to view the final result, as shown in Figure 41.
  Figure 41. Preview tab

Save and close the template file.

Conclusion

In this article, we introduced the new Java Server Faces tools available within WebSphere Studio Version 5.1.1, built a Web project, and created a page template using Faces components. In the next part of this series, we will create JSF submission forms and test them using the WebSphere Universal Test Environment.

Acknowledgement

The author wishes to thank Beverly DeWitt for her contributions to this article.

Download

Name	Size	Download method
JSFArticleSeriesP1.zip	50 KB	FTP\|HTTP

Information about download methods

Resources

About the author

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.

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.