Create Presentation Services Using JSP pages, Struts and ADF Databinding
Create Presentation Services Using JSP pages, Struts
and ADF Databinding
Purpose
In this tutorial you create a presentation layer on top of
business services and persistence services. Oracle ADF provides a Model layer
implementation that can be used to access any type of Business Service. A data
control abstracts the implementation of a business service, allowing the binding
layer to access the data from all services in a consistent way. Using the Page
Flow diagram you create JSP pages to display racing data.
Time to complete
This tutorial takes approximately half an hour to complete.
Place
the cursor over this icon to load and view all the screenshots for this tutorial.
(Caution: Because this action loads all screenshots simultaneously, response
time may be slow depending on your Internet connection.)
Note: Alternatively, you can place
the cursor over each individual icon in the following steps to load and view
only the screenshot associated with that step.
Overview
You use Model-View-Controller (MVC) design pattern to create
presentation services in this tutorial. Struts and ADF Databinding technologies
will be used for this tutorial.
Based on the racing schema foundation,
in this tutorial, you create a Presentation layer on top of business services.You
use Model-View-Controller (MVC) design pattern to create presentation services.
Struts and ADF Databinding technologies is used
on top of Toplink persistence layer.
Unzip the downloaded PresentationServices_Support.zip file into
the <JDEV_HOME>\mywork\ directory.
3.
Using a DBA account, use Oracle Enterprise
Manager, which is part of Oracle 10g or Oracle9i, to
create the racing user, alternatively uou can use SQL*Plus
to issue the following statements:
CREATE USER racing
IDENTIFIED BY racing; GRANT CONNECT, RESOURCE TO racing;
4.
Connect to SQL*Plus using
racing as
both the username and password.
5.
Run the <JDEV_HOME>\mywork\PresentationServices_support\schema\racing\Schema.sql
script in the SQL*Plus window to create racing objects and populate tables.
This topic describes how to create a JDBC connection to the
database schema that you use for this exercise. You need to create a connection
with the following details:
Connection
Name:
racing_conn
Username:
racing
Password:
racing
Deploy Password:
checked
Driver:
thin
Host Name:
localhost
JDBC Port:
1521
SID:
ORCL
To define a connection in JDeveloper, perform the following
steps:
1.
Choose View | Connection
Navigator.
2.
Right-click the Database node and choose
New Database Connection from the context menu.
3.
In the Create Database Connection wizard,
review the information on the Welcome page and click Next.
4.
In the Connection Name field
type the name for the connection as shown above. Click Next.
5.
On the Authentication page:
In the Username and Password fields, type
racing as shown above.
Select Deploy password.
Click Next.
6.
On the Connection page:
In the Host name, JDBC Port, and SID
fields, type the entries shown above. Click Next.
7.
Click Test Connection.
If the database is available and the connection details are correct,
you see Success! in the
Status window.
If an error occurs, verify the settings, click Back to
make any changes necessary, and then retest the connection. If you still
cannot connect, there may be a problem with the database, or it may not
be running.
8.
Click Finish. The connection
now appears below the Database connection node in the Connection Navigator.
If desired, you can expand the connection and its nodes to look at the
database objects in the schema.
This tutorial assumes that you have a working persistence
services and a business services projects, if you have not created one, you
can build on top of a pre-created worksapce with the required projects . To
use the pre-created workspace, perform the following steps.
Install the Pre-Created
workspace with Persistence and Business Services Lab
To install the pre-created persistence and business
services projects, perform the following steps:
1.
In the JDeveloper menu, select File
| Open. Navigate to the directory <JDEV_HOME>\mywork\PresentationServices\TopLinkObjects and select TopLinkObjects.jws.
Click Open.
To create a new project and configure it to develop the presentation layer, perform the following steps:
1.
Right-click the TopLinkObjects
workspace in the Applications Navigator and choose New Project
from the context menu.
2.
In the Items list of the New
Gallery, select Empty Project and click OK.
In the Create Project dialog, rename the project as PresentationServices
and click OK.
3.
Set Project properties using the Tools | Project Properties menu. In the Project Properties dialog, set the following:
Common > Input Paths > Default Package
racing.view
Common > Dependencies
SelectPersistenceServices.jpr and
BusinessServices.jpr
Common > Technology Scope
Select Struts and JSPandServlets in the Available Technologies and click the shuttle button to move to Selected Technologies
Libraries
Select TopLink and J2EE in the Available Libraries and click the shuttle button to move to Selected Libraries
Oracle ADF provides a Model layer implementation that sits on top of Business Services, providing a single interface that can be used to access any type of Business Service. Developers get the same development experience
when binding any type of Business Service layer implementation to the View and Controller layers. The Model layer in Oracle ADF served as the basis for JSR-227 “A Standard Data Binding & Data Access Facility for J2EE”.
The Model layer’s unique implementation in Oracle ADF brings the power of Service Oriented Architecture (SOA) to your application. The Model layer makes it easy to develop the application as a set of services that can be used and reused in different applications. The abstraction provided by the Model layer enables developers to choose their preferred method of implementing these services.
A data control abstracts the implementation of a business
service, allowing the binding layer to access the data from all services in
a consistent way. To create a Data Control for racingFacade in the BusinessServices
project, perform the following steps:
1.
Right-click the racingFacade
EJB in the BusinessServices project and choose Create Data
Control from the context menu.
2.
Business methods in racingFacade return generic collections. You need more meta-data to view the contents of the collections. You now use the Property Inspector to set the bean class for each collection.
Select racingFacadeDataControl.xml in the Applications
Navigator, and in the Structure Pane select teamOrders.
3.
Open the Property Inspector using the View | Property Inspector menu option. In the Property Inspector, click against the Bean Class property.
4.
Click on the Browse button in
Bean Class dialog. In the Class browser select racing.objectmodel.TeamOrder.
Click OK, and then click OK in the
bean class dialog. You can see that a new set of XML files which contain
meta-data has been generated into the BusinessServices project.
5.
Open the Data Control Palette using the View |
DataControl menu option. In the Data Control Palette you can
find the contents of teamOrders Collection, but the driversList collection
is empty. You need to set the the bean class for driversList.
6.
Select racingFacadeDataControl.xml in
the Applications Navigator and select driversList in
the Structure Pane. Open the Property Inspector using the View
| Property Inspector menu option.
In the Property Inspector, click
against the Bean Class property.
7.
Click the Browse button in the Bean Class
dialog, and in the Class browser select racing.objectmodel.Drivers.
8.
Select racingFacadeDataControl.xml in
the Applications Navigator and select grandPrixResultsService
in the Structure Pane. Open the Property Inspector using the View
| Property Inspector menu option. In the Property Inspector,
click
against the Bean Class property.
9.
Click the Browse button in the Bean Class
dialog, and in the Class browser select racing.objectmodel.Results.
You have generated a DataControl for racingFacade and necessary metadata. You can now start working on the Page Flow diagram. In this tutorial you build the following page flows, which all use the index JSP page as a start point:
Open the PresentationServices project and double click
struts-config.xml. This action opens a Struts page flow
diagram.
Open the component palette if it not already done (View | Component Palette), and select Page in the Component Palette
2.
Click the Struts page flow diagram and rename
the JSP page as /index.jsp.
Double click /index.jsp to view the JSP page in the
Visual JSP editor. Switch back to the Struts page flow diagram and select
DataPage in the Component Palette.
3.
Click the Struts page flow diagram and rename
the datapage as /teamorders.
Double-click the /teamorders datapage to create the
/teamorders.jsp page (choose the default
name and click OK in the Create JSP Page dialog).
Make sure the DataControl Palette is open. Select the teamOrders
collection, then select Read-Only Form in the Drag and
Drop As list.
4.
Drag teamOrders into the teamOrders JSP page.
5.
Select the teamOrders collection, then select Navigation Buttons in the Drag and Drop As list.
6.
Drag teamOrders into the HTML form displaying
teamorders.
7.
Now you can show the driver details for each team. Select driver1 in the teamOrders collection, then select Read-Only table in the Drag and Drop As list.
8.
Drag driver1 to teamorders
JSP page and drop it below the master collection.
9.
Open the Struts page flow diagram and select Page Link in the component palette. Draw a link between /index.jsp and /teamorders.
10.
Double-click ApplicationResources.properties
in the Applications Navigator.
Change the following: link.teamorders=link to /teamorders.do
to link.teamorders=View Team Orders
Click the Save All button to save your work.
11.
Now you can run and test the page flow. Switch back to
the Struts page flow diagram. Right-click /index.jsp
and choose Run from the context menu.
This launches the Embedded OC4J Server and runs the JSP page to display the output in the default browser configured on your machine.
Click the View Team Orders link in the browser. You
can see the master-detail (Team and Driver), and you can scroll through
the data (provided the database has more than one record).
Switch back to the Struts page flow diagram
and select DataPage in the Component Palette.
2.
Click the Struts page flow diagram and rename
the datapage as /teamname.
Double-click the /teamname datapage to create /teamname.jsp
page (choose the default name and click OK in create
JSP page dialog).
Select teamName in the Data Control Palette and choose
Input Field from the Drag and Drop As list.
3.
Drag teamName to the teamname
JSP page and click Yes in the Add Form Element Confirmation.
4.
From the menu, choose View | Component Palette.
Select Struts Html from the drop down list.
5.
Place the cursor in the HTML form and click on submit
to create a submit button.
6.
Set the Struts action for the HTML form in the teamname
JSP page. Place the cursor in the HTML form. In the Property Inspector
select teamname.do from the drop down list against the
action property.
7.
Open the Struts page flow diagram and select Page Link in the Component Palette. Draw a link between /index.jsp and /teamname.
8.
Double-click ApplicationResources.properties
in the Applications Navigator.
Change the following: link.teamname=link to /teamname.do
to link.teamname=Create New Team
Click the Save All button to save your work.
9.
You have created a JSP page that displays the default value of the teamName attribute in racingFacade. Changing the value and clicking Submit stores the new transient value that you use to create a new team in later steps.
Now you need to pick one of the drivers from the existing set.
Switch back to the Struts page flow diagram and select DataPage in the Component Palette.
10.
Click the Struts page flow diagram and rename the datapage
as /drivers.
Double-click the /drivers datapage to create
/drivers.jsp page (choose the default name and click OK
in create JSP page dialog).
In the Data Control Palette, select driversList collection
and choose Read-Only Table from the Drag and Drop As
list.
11.
Drag driversList to the drivers JSP page.
12.
In the Data Control Palette, select teamName and from the Drag and Drop As list choose Value.
13.
Drag teamName to the drivers
JSP page and drop it between the errors tag and the read-only table. Enter
the label Team Name before
the value.
14.
Open the Struts page flow diagram and select Page Link in the Component Palette. Draw a link between /teamname.jsp and the /drivers datapage.
15.
Double-click ApplicationResources.properties in the Applications Navigator. Change the following: link.drivers=link to /drivers.do
to link.drivers=Select Driver
Click the Save All button to save your work.
16.
Now you can test the page flow. Switch back to the Struts page flow diagram. Right-click /index.jsp and choose Run from the context menu.
Click the Create New Team link in index jsp
page. Enter TestTeam999 in the text box and click Submit.
Click the Select Driver link; the next page displays
the Team name and the list of available drivers.
17.
Your next step is to select a driver from the list of drivers and create a new team with the team name and driver selected. Once the new team has been created, you should go back directly to view teams page and see the newly created team.
Switch back to the Struts page flow diagram and select Data Page in the Component Palette.
18.
Click the Struts page flow diagram and rename the datapage
as /driverDetails.
Double-click the /driverDetails datapage to create /driverDetails.jsp
page (choose the default name and click OK in create
JSP page dialog).
In the Data Control Palette, select driversList collection
and choose Read-Only Form from the Drag and Drop As list.
19.
Drag driversList to the driverDetails JSP page.
20.
In the Data Control Palette, select teamName, then choose Value from the Drag and Drop As list.
21.
Drag teamName to the driverDetails
JSP page and drop it between the errors tag and the read-only table. Enter
the label Team Name before the value.
22.
Open the drivers JSP page in the Visual JSP page editor. You need to add an extra column to enable you to select a driver. Place the cursor in the empty column, right-click, and choose Table > Insert Column from the context menu.
23.
Now you can perform the operation to help identify the user-selected driver in the table. Select the setCurrentRowWithKey(String) operation under driversList and choose Find Row Link from the Drag and Drop As list.
24.
Drag the setCurrentRowWithKey operation to the drivers JSP page into the newly created column.
25.
Dropping the setCurrentRowWithKey operation created an
event called setCurrentRowWithKey. You can use this as a Struts forward
name between the drivers JSP page and the driverDetails JSP page. When
the user selects a particular driver by clicking on the link, it will
navigate to the driverdetails JSP page that displays the details of the
selected driver.
Switch back to Struts page flow diagram. In the Component Palette select
Forward. Draw a forward between the drivers
datapage and the driverDetails datapage. Rename the forward
from success to setCurrentRowWithKey.
26.
In the Struts page flow diagram, right-click /index.jsp
and choose Run from the context menu.
Click the Create New Team link in the index jsp page.
Enter TestTeam999 in the
text box and click Submit.
Click the Select Driver link. The next page displays
the Team name and the list of available drivers.
Click Select against one of the drivers to display the
details of selected driver.
27.
Now you have all the information (Team Name, driver) to create a new team. You can use the constructTeam() business method in racingFacade to create a new team and pass the currently selected driver to that method.
Open the driverDetails JSP page in the Visual JSP editor.
Select the constructTeam operation in the Data Control
Palette and choose Button in the Drag and Drop As list.
28.
Drag the constructTeam operation to the
driverDetails JSP page inside the HTML form.
29.
Select the driverDetailsUIModel.xml file in the Applications Navigator (under the racing.view package).
In the Structure Pane select param under the constructTeam operation.
30.
Open the Property Inspector by choosing View |
Property Inspector from the menu. Set the value as data.driverDetailsUIModel.driversListIterator.currentRow.dataProvider.
Click the Save All button to save your work.
31.
You have created a new team and now should be able to see the new team in the View Team (master-detail) page. Before forwarding to view team you must refresh the TeamOrder collection so that it shows the newly created team.
Switch back to the Struts page flow diagram and select Data Action in the Component Palette.
32.
Click the Struts page flow diagram and rename the Data Action
to /refresh. Select the Execute
operation for the teamOrders collection and choose Method
in the Drag and Drop As list.
33.
Drag Execute to the /refresh
Data action in the Struts Page flow diagram.
In the Component Palette select Forward. Draw a forward between the driverDetails Data page and the refresh Data Action. Rename the forward from success to constructTeam.
In the component palette select Forward. Draw a forward
between the refresh Data Action and the teamorders
data page.
Select Page Link in the Component Palette. Draw a link
between the /teamorders data page and /index.jsp.
34.
Double-click ApplicationResources.properties in the Applications Navigator. Change the following: link.index=link to /index.jsp
to link.index=Index page
Click the Save All button to save your work.
35.
Switch back to the Struts page flow diagram. Right-click /index.jsp and choose Run from the context menu.
Click the Create New Team link in the index jsp page. Enter TestTeam999 in the text box and click Submit.
Click the Select Driver link. The next page displays
the Team name and the list of available drivers. Click the Select
against one of the drivers to display the details of the selected driver.
Click constructTeam.
In the master-detail page click Next to navigate and
see if the newly created team exists.
Click the Index page link to go back to the index page.
View the Results of
a Particular Grand Prix Season
1.
Open the Struts page flow diagram and select Page
in the Component Palette.
2.
Click the Struts page flow diagram and rename
the JSP page as /resultsQuery.jsp.
Double-click /resultsQuery.jsp to open the JSP page
in the visual editor.
Switch back to the Struts page flow diagram and select Data Action
in the Component Palette.
3.
Click the Struts page flow diagram and rename the Data
Action to /resultsService.
4.
Open the resultsQuery JSP page in visual editor. Open the
Component Palette by choosing View | Component Palette
from the menu. Select Struts Html from the drop down
list and click form.
5.
In the JavaServer Page Tag Editor dialog, select resultsService.do
as the action value and click OK.
Bookmark
to move to 
to save your work. 
against the Bean Class property.