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

Creating a JSF Web project and page template

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.



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:

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.

  1. 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.
  2. 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
      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
      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
      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
      Web features
  3. 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
      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
      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
      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:

  1. 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
      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
      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
      Content Area warning
      Figure 11. Newly created Page Template
      Newly created Page Template
  2. 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
      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
      Drag component on to design View
      Figure 14. List panel
      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
      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
      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
      Select image
    6. Expand the Web application down to the theme directory and select tradebanner1.gif. (Figure 18)
      Figure 18. Select image
      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
      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
      Use relative paths for this exercise
      Figure 21. Relative path result
      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
      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
      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
      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
      Select HR from HTML tags palette
    13. Drag the Horizontal Rule attribute under the images, as shown in Figure 26.
      Figure 26. Web features
      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
      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
      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
      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
      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
      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
      Image component
      Figure 33. Image within a panel
      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
      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
      Select WEBSPHERE_22P.GIF
    21. The template should look like Figure 36.
      Figure 36. Template page with all components
      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
      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
      Browse for image
    24. Select grid.gif in the theme folder (Figure 39).
      Figure 39. Select grid.gif
      Select grid.gif
    25. The resulting page should look like Figure 40.
      Figure 40. Resulting page
      Resulting page
    26. Select the Preview tab to view the final result, as shown in Figure 41.
      Figure 41. Preview tab
      Preview tab

Save and close the template file.


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.


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


Code  ( HTTP | FTP )50 KB



developerWorks: Sign in

Required fields are indicated with an asterisk (*).

Need an IBM ID?
Forgot your IBM ID?

Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.


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

All information submitted is secure.

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.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.


All information submitted is secure.

Dig deeper into WebSphere on developerWorks

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