Introduction

With the introduction of WebSphere® Studio Version 5.1.2, IBM® added a host of new features to the WebSphere Studio family of products that allow for the quick development of relatively complex sites. In Version 5.1.2 IBM added support for JSR-127 (Java™ Specification Request) which is now formally known as JavaServer Faces. JavaServer Faces technology simplifies building user interfaces for JavaServer applications. With JavaServer Faces, developers of various skill levels can quickly build Web applications with little knowledge of Java.

In this article I will demonstrate how a realtor’s Web site could be developed. The site is a basic catalog style Web site that allows users to browse for properties, local information, and mortgage rates.

I choose to develop this style of Web site as it is easily adaptable to apply to other industries. This article will give you the basic building blocks required to quickly develop a real world application. This article assumes that you already have WebSphere Studio Version 5.1.2 installed.

Several techniques shown in this article are applicable to multiple version of WebSphere Studio Application Developer, or Rational Application Developer as it is now known.

Back to top

Creating a Web project containing JavaServer Faces technology

Creating a Web project that contains the JavaServer Faces jars is quiet simple. Follow these steps to create the project:

1. Launch WebSphere Studio.
2. Switch to the Web perspective. You can do this either of two ways:
1. Click on the Open Perspective button on the left hand menu bar, and select Other
   
   Select Web in the Select Perspective dialog:
2. Alternatively you can go to the Window menu and select Open Perspective and then select Other. At which point you will be presented with the above Select Perspective dialog.
   
   Select Web in the Select Perspective dialog.
3. Once you are in the Web perspective, create a new Web project by selecting Dynamic Web Project from the new project drop down menu:
4. Give the project a name (I used downtownrealty). Also select Configure advanced options.
   
   
5. Click the Next button. Use the default J2EE settings and choose Next again.
6. On the Features Page window, choose to install the WDO Relational database runtime.
7. Click Finish.
8. After a few moments the wizard will prompt you to select a target server; select the default, WebSphere Application Server v5.1. Click OK, and the wizard will complete.
   You now have a Web project that is ready for development.

Back to top

Creating a JSF page, and a JSF page template

Now it is time to start considering the structure of the site and how the site will look and feel. For the purpose of this article, the site will be relatively small, containing about 12 pages. It is often desirable to apply a certain look and feel across multiple pages in a Web site. To do this we will use a component called Page Templates in WebSphere Studio. Page templates allow you to create an individual page with re-usable components and then apply that template to other pages within the site.

The following steps are needed to create a JSF page template:

1. A "JSF Page" is basically a regular JSP page with the JSF tag library declarations added to it, and the <f:view> JSF added tag to the page. Once that information is on the page it is quiet simple to start adding JSF components to the page. Creating a JSF page is simple.

2. To create a JSF page expand the downtownrealty Web project. Right mouse click on the WebContent folder and select New from the context menu. Then select Faces JSP File.

3. In the File Name field, type aboutus. This page will be an introductory page to the Web site.

Click Finish.

You have now created your first JSF page. Now that you've created a page, it is time to create a template that you can apply to all pages in the Web site to maintain a common theme. Close the page you just created.

4. Expand the Web project that you created in the previous section (downtownrealty).

5. Right click on the WebContent folder. To create a new folder, select New from the context menu, and then select Folder).

6. Name the folder templates and click OK.

7. Right click on the folder that you just created. To create a new page template file, select New from the context menu and then select Page Template File.)

8. Name the template basetemplate and choose Template containing Faces Components as the Model. Click Finish to proceed and create the template.

Click OK to the informational dialog that has popped up.

9. Delete the default text that is placed on the page, and the paragraph tag (<p></p>) that accompanies that text. Remember: you should remove the default text from all pages that are created for the exercises in this article.

10. Expand the HTML Tags drawer on the palette. Drag and drop a Table from the HTML Tags drawer and drop it on the template page that you just created. This table should have three rows and two columns. Set the Table width attribute to 100%. Set the Border to 0.

11. Next go to the template page and click on the left column of the table. Go to the attributes view (located in the bottom left hand corner of the application) and select the Cell tab. Set the Width attribute for the cell to 30%. Leave the defaults in place for all other attributes.

12. Select the top left hand cell of the table (left most column, top most row), and go to the Table menu and select to join the cell with the cell to its right (menu item)Table => Join Cell => With Cell on Right.

13. Repeat the process in step 10 for the left most column in the second row from the top.

14. Click in the top row and go to the Insert menu and select to insert Paragraph => Heading 1. From the attributes views choose to center align the paragraph. Type Down Town Realty in the row.

15. Expand the Page Template drawer on the palette. Drag and drop a Content Area component from that drawer and drop it in the right hand column of the table. This content area is the area of the template that will be editable when the template is applied to the Web page. All other parts of the template (except for content areas) will be read-only when applied to a Web page. Select the default Content area name.

16. Select the second row of the table. Insert an H4 tag into that row by clicking in the second row, going to the Insert menu and selecting to insert Paragraph => Heading 4. From the attributes views choose to center align the paragraph. Drag and drop a Content Area component onto the template and drop it on the second row of the table. Choose the default text.

Save the template. The basic parts of the page template are now complete.

17. Now would be a good time to create some new JSF pages and apply the page template to those pages.

18. You can either apply a page template to an existing page, or to a new JSF page while the page is being created.

19. To apply a page template to an existing page, right click on the page in question (in this case aboutus.jsp), and select Page Template => Apply Template.

20. When the Apply Page Template dialog gets launched, select User-Defined Page Template as the Page Template Type.

Select basetemplate.jtpl in the Thumbnail view.

21. Click Next. In the Page template content areas table of the wizard dialog, select the first bodyarea content area. There should be warning icon to the left of it:

Once the content area is selected, click the Unmap button.

22. Expand the f:view page element until you get to the P tag as illustrated below. Select the P element and also select the first bodyarea content area. Click the Map button, this will ensure that the first content area of the template gets mapped to the first paragraph tag of the page to which it is being applied.

Again select the P element and this time select the second bodyarea content area, click the Map button. The wizard should now look like:

Click Finish.

The template has now been applied to the aboutus.jsp JSF Page.

23. The approach outlined in steps 19 through 22 deal with applying a template to existing JSF pages. I will now outline how to apply a template to a new JSF page, while it is being created. The first step is the same as creating any JSF page. Right click on the WebContent folder, and select New => Faces JSP File. In the File Name field, type forsale. Select the Create from page template checkbox:

Click Next.

Select User-Definer Page Template as the Page Template Type.

24. Select basetemplate.jtpl as the User Defined Page Template. Click Finish.

25. Repeat steps 23 and 24 for the following file names:

• openhouses
• soldlistings
• forrent
• staff
• history
• mortgagerates
• loancalculator
• news
• addhouse
• updatehouse
• addnews
• updatenews

26. Close all of the pages and open the template once more. We are now in a position to finish building the template. Drag and drop a Panel – Menu Bar from the Faces Components drawer of the palette, drop it on the left hand cell of the third row of the table that was created in step 7 above.

Go to the attributes view for the cell in which the Panel – Action Bar was placed. Change the attributes so the cell is vertically aligned to the top, and so the cell’s width is 8%:

27. Go to the Attributes view for the Panel – Menu Bar and go to the Items tab. Click on the Sub-Panel button three times to add three Panel – Menu Bar children. Change the label of the first Panel – Menu Bar to Sales. (Tip: you can do this directly in the Items tab of the parent Panel – Menu Bar’s Attributes view.)

Change the label of the second Panel – Menu Bar to be About Us, and the third one to be Buyers and Sellers. Add a Separator component and finally a Hyperlink component. Label the hyperlink component as Home; it will serve as a link to the home page. The Items tab should now look like:

The Panel – Menu Bar with sub panels will act like an expandable menu.

28. Now go to the JSP page and click on the Panel – Menu Bar labeled Sales, it is located below the label Sales.

Go to the Items tab in the Attributes view and add four Hyperlink components, and a Separator component. Move the bottom-most hyperlink down so it is positioned below the separator.

Label the hyperlinks so they correspond to the labels above.

Go to the Format tab in the Attributes view and choose Initially show the panel expanded.

29. Go to the About Us Panel - Menu Bar by selecting it in the JSP. Go to the Items tab in the Attributes view for the component. Add two hyperlinks, label them Staff and History.

30. Go to the Buyers And Sellers Panel – Menu Bar again by selecting it in the JSP. Go to the Items tab in the Attributes view and add three hyperlinks. Label them Mortgage Rates, Mortgage Calculator, and News and Info.

31. Click on each of the Command Hyperlinks and go to the Quick Edit View for each link. Right mouse click in the Quick Edit View (before the return"" statement) and select Insert Snippet => Go to page. Select the page that corresponds to the link that you are currently on. The table below will help you identify which page you should select:

32. Save the template. The finished template should now look like:

Back to top

Updating style sheets in WebSphere Studio

All Faces JSP pages created in WebSphere Studio use two common Cascading Style Sheets (CSS). One style sheet (Master.css) is located in Theme folder, which is a subfolder of WebContent. Locate and open this file.

It will open in the CSS Editor by default.

Change the BODY style so that the background color is now #e8e8f8. Change all the H tags so they use the Tahoma font. Everything else is OK, so you can just save and close the file. The BODY and H styles should look like:

BODY
{
   BACKGROUND-COLOR : #e8e8f8
   COLOR : #333366
   FONT-FAMILY : ‘Times New Roman’
}
H1
{
   COLOR : #6666CC
   FONT-FAMILY : 'Tahoma'
   TEXT-TRANSFORM : capitalize
}

This style will apply to all JSP files created in the project, unless the link to master.css is removed or replaced in those files. Open the other style sheet that is in the Theme folder stylesheet.css. Change the .message and .messages classes so the text color will be red:

.message  {
   COLOR : red
}
.messages {
   COLOR : red
}

This change ensures that all error messages will have red text.

Back to top

Creating a Cloudscape data store

Creating a Cloudscape database using WebSphere Studio is relatively straightforward. For the purpose of this article we will need two databases. One will contain a list of properties on the market, and sold properties. The second database will be a repository for news items relating to the real estate industry.

The following are the steps for creating an empty Cloudscape database:

1. Download the following zip file: SQL.zip, save the file to an easy to remember location like C:\Temp.

2. In your Web project, select the WebContent folder, right click on the folder and choose Import.

3. Select to import a zip file from the list of available types. Click Next.

4. Browse to where you downloaded SQL.zip to (in my case C:\temp).

Select the root checkbox so all child folders and files are selected. Click Finish to import the files.

5. Importing the SQL files will cause a new directory to be created as a subdirectory of WebContent. Your project will now look as follows in the Project Navigator view:

6. Right click on Houses.sql. Select to Run on Database Server:

7. Choose Next in the Run Script dialog that appears. Choose to commit changes only upon success and click Next.

8. In the resulting dialog, choose the location where you wish to create the cloudscape database. To create the database add the keywords ;create=true to the end of the location attribute value:

Click Finish to create the database in the given location.

Back to top

Adding data to a backend database using WDO

Now that we have created our backend database, it is time to create Web pages that can access the data within that database. The first page we will work on is addhouse.jsp. The purpose of this page is so the realtor can add a new house to the backend database. This page is easy to create.

1. Open addhouse.jsp.

2. Delete the text that reads Default content of bodyarea.

3. Drag and drop a Relational Data Record from the Data drawer of the palette and drop it on the area where you just deleted the text (in step 2 above).

4. Choose to Add input/output controls to display the record on the Web page. Also select to Create controls for: Creating a new record radio button.

Click Next.

5. In the Record Properties dialog, select to create a new connection by pressing the New button. In the resulting dialog select the defaults:

Click Next. Use the database that you created in step 8 of section 5 above.

Click Finish.

6. At this point you will be returned to the Add Relational Record dialog. Choose the REALTY.PROPERTIES table.

Click Finish.

7. Click Finish to the dialog that pops up.

8. This is how your addHouse.jsp page should look after the data is dropped on it:

9. Select and delete the text that reads Add_Info. In its place type Additional Information. Delete the {ADD_INFO} text field. Drag and drop an Input - Text area component onto the cell where you just deleted the text field. In the Attributes view, choose to make the field 50 characters wide and 6 lines high. Click the bind to button and select to bind the field to the ADD_INFO property.

10. Delete the ADDRESS input text field. Drag and drop an input text area in its place, bind the text area to addHouse.ADDRESS, set the width attribute to 30 characters and the height to 4 characters.

11. Delete the Heat input text field and drag and drop a Combo Box on the cell where the input text field was located. Go to the Choices tab of the attributes view for the Combo Box, and update the attributes so the following holds true:

Add the above items using the Add Text Item button. On the Basics page, bind the value to #{pc_Addhouse.addHouse.HEAT}

12. Click on the Mlsid input text field. Go to the Format tab in the Attributes window. Change the Type to Mask. Change the Mask to ########. In the Helper section, click on the Display prototype mask in the field checkbox. Set the Prompt character to asterisk (*).

Go to the Validation tab in the attributes view. In the On the server (when submitted) section of the page, click on the Required checkbox to make the field required. The Mlsid is the primary key column of the database so it is required in order to create a new row in the table. Set the Minimum length to 8. Also select the Add Display Error Control to add a Display Error component to the page.

Go to the Behavior tab and click on the Auto-advance to the next control when complete checkbox. Also click on the Enable validation in the browsercheckbox.

Change the label in the left column of the table from Mlsid to MLS ID:

13. Change the SQ_FT label to Square Feet, change the Listprice label to List Price:. Change the Soldprice label to Sold Price:.

14. Delete the Type input text field and drag and drop a combo box in its place. Bind the combo box to addHouse.TYPE. Go to the Choices attributes tab and add text items so the tab looks like:

15. Delete the Default content of bodyarea_1 text from the top of the page and replace it with text that reads Add New Home Listing. Save the page.

16. Select the table that the Relational Record is in, and set the border to 1 pixel. Change the YearBlt: label to Year Built:.

17. Click on the Submit button and go to the Quick Edit View, add the following code to the view:

try {
      getAddHouseMediator().applyChanges(getAddHouse().getDataGraphAccessBean());
      return "success" ;
} catch (Throwable e){
      logException(e);
      return "failure" ;
}

Go to the Attributes view for the submit button. Go to the Navigation tab. Click on the Add button and fill in the following information:

Select forsale.jsp as the page to go to, enter success as the alias, and #{pc_Addhouse.doButton1Action} as the action.

Click OK to save the page.

18. When compete your page should look like:

19. Save and close the page.

20. Right click on the addHouse.jsp page in the Project Navigator view. Select to run on server. Select WebSphere Version 5.1 => Test Environment as the server.

Set the server as the default server for the project. Click Finish.

21. The page should successfully render when run on the server. Shut down the server.

Back to top

Displaying existing information stored in a backend database.

Now that we have set up the application to store user-entered information into the database, it is time to add the functionality that will allow it to read existing information from the backend database. You can display existing information in two ways. You can either display a single record (an object) or you can display multiple records using a record list. For now we will display multiple records.

1. Open forsale.jsp.

2. Delete the default text from the top of the page, and replace it with: Homes for sale:.

3. Delete the default text from the content area in the middle of the page.

4. Open the Data palette and drag and drop a Relational Record List onto the page:

Name the list forSale and press Next.

5. Select the REALTY.PROPERTIES table, and select Next:

6. In the Select columns to include in your record wizard page, deselect the SOLDPRICE, LEVELS, HEAT, EXTRAS and ADD_INFO columns. Click on the Order results link to select the ordering of the records that will appear in the table:

Select to order the results by LISTPRICE.

Press Close, and then Finish. A data grid component will be created on the page.

7. Select the data grid so its attributes show in the attributes view. Go to the Columns tab of the view and rearrange the columns so they are in the following order, starting with the left most column. Rename the columns as they are within the parentheses:

• Listprice (Price)
• Title (Title)
• Type (Type)
• Photo (Photo)
• Address (Address)
• Bedrooms (Num Bedrooms)
• Bathrooms (Num Bathrooms)
• Yearblt (Year Built/SQ Feet/MLS ID)

Remove all other columns. The data grid should now look like:

Save the page.

8. Click on the YEARBLT output text component, go to the Attributes view to the Format tab, set the Number Style to Custom, and set the Custom Format to ####.

9. Drag and drop an output text component onto the Year Built column and drop it after the year built output text component. In the attributes view for the new component, set the value to "/ " ("(space)/(space)").

10. Drag and drop another output number component and drop it after the component added in step 8. Bind the new output number component to SQ_FT, using the bind button in the Attributes view for the tag:

Save the page.

11. Drag and drop another output text component and drop it after the component dropped in step 9. As in step 8 set the value to "/ " ("(space)/(space)").

12. Drag and drop another output number component and drop it after the component that was dropped in step 10. Bind that component to MLSID:

13. Click on the grahicImageEx component in the photo column. Go to the Attributes view for the graphicImageEx component, set the width to 150, and the height to 140.

14. Save the page.

15. The data grid should now look like:

16. Click on the dataTable and go to its Attributes view. Go to the all page, set the border attribute to 1. Set the cellspacing attribute to 2, and set the cellpadding attribute to 1. Save the page.

17. Run the page on the server. The page should render, displaying all of the records in the database. Shut down the server.

18. The next step is to link the data grid page to a details page, so that when a user clicks on a record in the data grid the corresponding record will be retrieved from the database and displayed in a separate page using a Relational Record.

19. Create a new JSF page called homedetails.jsp. Create it in the same way as the pages were created in step 15 above.

20. Open homedetails.jsp, delete the default text in the middle of the page, and drag and drop a Relational Data Record from the Data palette to the page:

Name the record houseDetails. Ensure to add input/output controls to display the record on the Web page. Finally select to display an existing record. Click Next.

Select the REALTY.PROPERTIES table and click Finish

21. Delete the default text that is supplied at the top of the page, and replace it with Details for:. Drag and drop an output text component after the colon that you just typed. Bind the output text component to houseDetails.TITLE. This will display the title of the house you are looking at.

22. Save and close the page.

23. Open forsale.jsp. Drag and drop a Link component onto the graphic component on the data grid. Make sure that the cursor is placed before the graphic image before dropping. Type homedetails.jsp as the target and do not set any label. Go to the Attributes view for the link and go to the Parameters tab. Add a parameter, name it MLSID and bind it to varforsale.MLSID:

The link and image should look like this:

24. Save the page and run the application on the server.

25. Run addhouse.jsp on the server. Enter all the details of a house; ensuring the MLSID attribute is unique. Submit the page. You should automatically be brought to the forsale.jsp page, where all the records entered should be displayed.

26. Click on the photo for any of the records and note that you will be brought to the details page for that particular house. Shut down the server.

Back to top

Updating or deleting an existing record.

1. Open the page called updatehouse.jsp.

2. Delete the default text from the content area in the middle of the page. Drag and drop a Relational Record from the Data drawer of the palette onto the middle editable section of the page. Name the record updateHouse. Choose to add input/output controls to display the record on the Web page. Choose to create the controls to update an existing record:

Press Next.

3. Select the REALTY.PROPERTIES table. Click Finish.

Delete the default text from the content area in the top of the page. In its place type Update:. Drag and drop an output text component onto the page and drop it after the Update text that you just typed. Bind that output text component to #{pc_Updatehouse.updateHouse.TITLE}. Save the page.

Click on the Submit button. Go to the Quick Edit View.

At the end of the "try" part of the code, add: return "success";.

At the "catch" part of the code, add: return "failure".

Delete the default return ""; statement that is added to the code. Your code should now look like:

try {
      getAddHouseMediator().applyChanges(getAddHouse().getDataGraphAccessBean());
      return "success" ;
} catch (Throwable e){
      logException(e);
      return "failure" ;
}

Click on the Delete button. Go to the Quick Edit View.

At the end of the "try" part of the code, add: return "success";.

At the "catch" part of the code, add: return "failure";.

Delete the default return ""; statement that is added to the code. Your code should now look like:

try {
      getUpdateHouse().getDataGraphAccessBean().deleteDataObject();
      getAddHouseMediator().applyChanges(getAddHouse().getDataGraphAccessBean());
      return "success" ;
} catch (Throwable e){
      logException(e);
      return "failure" ;
}

4. Go to the Attributes view for either button and go to the Navigation tab. Press the add button. Enter forsale.jsp as the page, enter success as the alias, and do not enter an action.

Press OK. Press the add button again. Enter error.jsp as the page, enter failure as the alias and do not enter an action. Make the rule available Globally.

Press OK. Save and close the page.

5. Create a new JSF page called error.jsp (using the same process as you have before, by creating the page from a template). Delete the default text from the content area in the top of the page. In its place type, An Error Occurred!

6. Delete the default text from the content area in the middle of the page. In its place type An error occurred while either creating or updating a record in the database. Please retry the operation. Save the page. This page will be loaded if an error occurs either creating a new record, or while updating or deleting an existing one.

7. Open homedetails.jsp. Drag and drop a Link component onto the bottom of the page (after the error message component). Enter updatehouse.jsp as the target page, and Update Details as the label. Go to the Parameter tab of the Attributes view for the link. Click the add button to add a link. Name the parameter MLSID and bind it to #{pc_Homedetails.houseDetails.MLSID}.

8. Save and close all pages. Run the application on the server.

Exercise
You may add static material to the static pages:

• staff.jsp
• history.jsp

Back to top

Summary

As you can see, creating a reasonably complex Web application is quite straight forward -- and requires little Java code. In the next article in this series, I will demonstrate how to create complex data tables using different layout techniques. This article should provide novice users with the fundamental building blocks for creating advanced Web applications.

Back to top

Downloads

Name	Size	Download method
SQL.zip	1 KB	FTP|HTTP
downtownrealty.zip	2.8 MB	FTP|HTTP

Information about download methods

Resources

• IBM's JavaServer Faces Forum
  
  
• Sun's JavaServer Faces specification
  
  
• JSF Central
  
  
• To learn more about WebSphere Studio, visit the developerWorks WebSphere Studio zone. You'll find technical documentation, how-to articles, education, downloads, product information, technical support resources, and more.
  
  
• Get involved in the developerWorks community, participate in developerWorks blogs.
  
  
• Browse for books on these and other technical topics.
  
  

About the author

Rate this article

Comments

Back to top

Table of contents

• Introduction
• Creating a Web project containing JavaServer Faces technology
• Creating a JSF page, and a JSF page template
• Updating style sheets in WebSphere Studio
• Creating a Cloudscape data store
• Adding data to a backend database using WDO
• Displaying existing information stored in a backend database.
• Updating or deleting an existing record.
• Summary
• Downloads
• Resources
• About the author
• Comments

Next steps from IBM

• Try: Rational Application Developer for WebSphere Software
• Buy: Rational Application Developer for WebSphere Software

Dig deeper into WebSphere on developerWorks

IBM SmartCloud trial. No charge.

Unleash the power of hybrid cloud computing today!

---

Public and private solutions in one trial.

Special offers