JSF and SDO
Objectives
After completing this lab, you will be able to:
Create a JSF page from a template
Create a connection to a SDO data source from a JSP page
Add a JSF component control
Test the application in the Websphere Test Environment
Given
No lab artifacts are required.
Scenario
In this lab, you will implement the presentation layer of the Payroll application case study using
JSF pages. You will demonstrate J2EE automation by creating the page from an existing template
and use a wizard to incorporate a SDO data source.
Task 1: Create a JSF page from a Template
In this task, you will create a JavaServer Faces page from an existing template.
1. Open the Web Perspective
2. Open the Project Explorer and right-click the NewsAppWeb project and select New >
Web > Webpage Template
3. In the dialog, enter the following:
• File name: NewsListing
• Type: Dynamic Page Template
• Select Sample page template
• Select A_blue.htpl
• Click Finish
Task 2: Create Page Heading
In this task, you will create a page heading for the new JSF page.
1. Replace Place your page content here. with My News Listing
2. Highlight My News Listing
3. From the Properties view (below the JSF editor), select the Text tab (left side of the
view)
4. In Paragraph: select Heading 2 from the drop down menu
5. Select Center Alignment from the icons
6. Save your page (Ctrl+S)
JSF and SDO
Task 3: Connect a JSF Page to a SDO Data Source
In this task, you will connect your newly created JSF page to a SDO data source.
1. From the Palette, click Data > Relational Record List (If Data is not available, right click
in the Palette > Customize, then select Data, and uncheck Hide)
2. Click in a centered position below the My News Listing text box
3. In the dialog, enter the following:
• Name: newsBean
• Check Add data controls
• Click Next
4. In the dialog, enter the following:
• Connection name: Click New
• Select NewsData
• Click Finish
• In Table:, select APP > NewsItems
• Click Next
5. In the next dialog, check the following (first click None to remove all checks):
• SUBJECT : String
• CONTENT : String
• USERNAME : String
• DATEPOST : String
• Click Next
6. In the next dialog, change the Label of the following items:
• SUBJECT -> Subject
• CONTENT -> Content
• USERNAME -> Username
• DATEPOST -> Datepost
• Uncheck Extra
• Click Finish
© Copyright IBM Corp. 2005 3
7. Your JSF page should look like this:
JSF and SDO
Task 4: Add SDO Fetch Action to the JSF Page
In this task, you will add a SDO fetch action to a JSF page.
1. Open the Page Data view (lower left of perspective)
2. Drag and drop doNewsBeanFetchAction() from the Page Data view and drop it below
© Copyright IBM Corp. 2005 5
the record list (the submit button might not be centered…that’s OK)
3. Save your page (Ctrl+S)
Task 5: Start the Test Server
In this task, you will start the Websphere v6.1 Test Environment server.
1. Select the Servers view
2. Right-click Websphere Application Server v6.1 and click Start
3. Wait for the server to start before continuing
JSF and SDO
Task 6: Run a JSF Page
In this task, you will run the JSF created in this task.
1. In the Project Explorer view, expand Dynamic Web Projects > NewsAppWeb >
WebContent
2. Right-click NewsListing.jsp and click Run > Run on server
3. In the Server Selection dialog, click WebSphere Application Server v6.1 and click
Finish
4. Click Submit on the JSF page
5. You should now see this:
6. In the Servers view, right-click Websphere Application Server v6.1, and select Stop
© Copyright IBM Corp. 2005 7
Task 7: Close the Files
1. From the main menu, select File > Close All
2. DO NOT CLOSE ANY PROJECTS
