This lesson should take about an hour to complete.
Viewing Screenshots
Move your mouse over this icon to show
all screenshots. You can also move your mouse over each individual icon to see
only the screenshot associated with it.
Overview
This lesson teaches you how to use JDeveloper to develop
a web-based application that implements the design patterns pioneered by Sun Microsystems,
a set of best practices for developing J2EE applications. In this lesson, you'll
create the application using JavaServer Pages, Struts, and Oracle ADF Business
Components. ADF Business Components automatically implement the J2EE design patterns
and provide a more productive framework-based development environment than plain
EJBs.
Before starting to develop an application, you need to select
the technology scope for your development environment, or workspace. For this
application, you'll set your workspace to use the web application template.
The web application template implements the MVC design pattern by creating two
projects within your workspace; a project containing the view and controller,
and a project containing the model. There are two web application templates;
you will choose the default technology scope. This sets your project to use
JSP, Struts, and ADF Business Components.
The following graphic shows how your project will be
organized. Notice that the ViewController project contains the view and controller
portions of your application, while the Model project contains the business
services. You will build your application from the bottom up: that is, first
you'll create your persistent business objects (ADF entity objects), next you'll
create your data access objects (ADF view objects), and so on.
In the Application Navigator, right-click the
Applications node and click New Application Workspace...
The Create Application Workspace dialog opens.
2.
Change the Application Name to HumanResourcesApp. In the Application Templates field, choose Web Application
[Default] from the dropdown list.
There are several application templates available from the dropdown list.
Each one can be custom tailored to add (or delete) technologies of your
choice by choosing Edit Templates.
Click OK. Your new application is represented in the Application
Navigator by two new projects, Model
and ViewController.
In this step you'll create a new business components
diagram for your business tier objects. Diagrams give you a visual representation
of your business objects, helping you conceptualize and organize your application.
1.
In the Application Navigator, right-click Model and choose New.
The New Gallery opens. Notice that the New Gallery is tailored to show
only those technologies that are applicable to the Model project.
2.
In the New Gallery, under the Categories list, select Business Components,
and then in the Items list, select Business Components Diagram.
Click OK. The Create Business Components Diagram dialog opens.
3.
Change the name of the diagram to Business Components HR Diagram
and accept the default package name.
Click OK. Your new business components diagram appears as an empty
page in the IDE. Since you don't have any objects on the diagram, the
thumbnail view and Structure pane are blank.
In this technology scope, your persistent business
objects are ADF entity objects. Entity objects implement the Data Access Object
design pattern, and are responsible for persisting and caching data, and also
for validation. You can create entity objects by dragging them from a database
table and dropping them onto a business components diagram.
1.
In the Navigator, click the Connections tab.
2.
In the Connection Navigator, expand the nodes for Database and
tutorial_jdbc_connection.
If you have not established this connection to the HR schema, please
see the prerequisites section above.
3.
In the Connection Navigator, expand the nodes for HR and Tables.
Click DEPARTMENTS then drag and drop it onto the blank diagram.
The Create from Tables dialog opens.
4.
In the Create from Tables dialog, make sure that Business Components Entity
Objects is selected and click OK.
The Departments object is added to the diagram.
5.
In the Navigator, click the Applications tab to bring the Application
Navigator to the front. Notice that the Departments entity object appears
in the model package.
The entity object you created in the previous
step is used for persisting and caching data about departments, and for encapsulating
business rules. The next object you'll create is an object for gathering and
filtering data stored in your entity object. The ADF business component responsible
for this is the view object. View objects use a SQL query to form a collection
of data.
1.
On the Component Palette, select View Object, and then click on
an empty space in the business components diagram to create a new view
object.
A new view object appears on the diagram.
2.
Change the view object's name to DepartmentsView.
3.
On the diagram, click the Departments entity object and drag it
inside the border of DepartmentsView.
Your view object now contains attributes that map 1:1 to the Departments
entity object.
Creating Business Services in
an Application Module
An ADF application module is a service object
that coordinates view objects for a specific task. For example, in this application
your application module will display the department's ID number, name, location,
and manager ID. An application module is usually task-specific, containing only
the business services required for the application at hand. If you are used
to a form-based development environment, an application module usually exists
for each form. In this step you'll create an application module that contains
the view object you created on the business components diagram.
1.
1. On the Component Palette, select Application Module and click
on the diagram to create a new application module.
A new application module appears on the diagram.
2.
Change the name to DepartmentsModule.
3.
On the diagram, click the DepartmentsView view object and drag
it inside the border of DepartmentsModule.
The business services portion of your application is now complete: it
contains a persistent business object for caching data and encapsulating
business rules (an entity object), a data access object for gathering
and filtering data (a view object), and a business service object that
exposes the services of your application (application module).
In this step you'll start working on the controller
and view parts of your MVC application. The controller separates the visual
representation of web pages from their flow and actions. You will create a page
flow diagram, which visually organizes the flow and actions of your web pages,
and add a JSP for viewing Department data. Note that this lesson covers the
use of JSPs for the view component, but you could also use UIX or JClient technologies
to create the view. See the related topics section for further information on
creating UIX pages.
1.
In the Application Navigator, expand the ViewController
project, the Web Content
folder, and the WEB-INF
folder. Double-click struts-config.xml
and you'll see a blank page flow diagram.
2.
Oracle ADF provides a data action (oracle.adf.controller.struts.actions.DataAction)
to prepare the binding context for databound web pages and to execute
custom business
service methods exposed through the model. A data page is a combination
of a data action, forward, and web page. The behavior of the data action
subclass (dataForwardAction) is identical to the data action;
however, the Page Flow Modeler simplifies the combination of objects to
show a single element.
In the Component Palette, click the Data Page element and then
click on the diagram to create the data page.
A new data page appears on the diagram.
3.
Change the name to /browseDepartments.
4.
Double-click /browseDepartments to create the JSP. Accept the
default JSP name and click OK to open it in the visual JSP editor.
Optionally, add the text List of Departments to the JSP. Add a
style sheet and modify the JSP page as needed.
5.
On the Component Palette, click the Data Controls tab. On the Data Control
Palette, click DepartmentsView1. In the Drag and Drop As dropdown
list, select Read-Only Table.
6.
Drag DepartmentsView1 from the list of Business Services and drop
it onto browseDepartments.jsp
in the Editor.
A new table is created on the page. Right now, the table is functional,
but it would only show the first 10 records in the Departments table because
the default iterator size is 10.
7.
In the Data Control Palette, expand the nodes for DepartmentsView1 and
Operations, and click First.
In the Drag and Drop As dropdown list, select Button with Form.
8.
Drag and drop the operation onto browseDepartments.jsp to create
the button.
9.
In a similar manner, drop Previous, Next, and Last buttons
from the Data Control palette to browseDepartments.jsp.
Select Button from the Drag and Drop As dropdown list to create
the buttons in the same form as the First button.
Drag the buttons around if you want to arrange them differently.
10.
From the File menu, choose Save All.
11.
In the Page Flow Diagram, right-click /browseDepartments.jsp
and select Run.
Navigate through the records using the navigation
buttons.
In this step you'll create a JSP page that binds to
a business service method that inserts a new row. You will then edit the JSP
to allow the user to create new department data.
1.
Now create a page flow for inserting new department data. In the Component
Palette, click the Data Page element and then click on the diagram
to create it. Change the name to /createDepartments.
2.
Choose the Forward component in the Component Palette, click on
/browseDepartments, drag the forward component to the /createDepartments
Data Page, and click again.
3.
Click on the forward name success and in the Property Inspector,
change the name attribute to Create.
4.
Choose the Forward component in the Component Palette, click on
/createDepartments, drag the forward component to the /browseDepartments
Data Page, and click again. Rename the forward Submit.
5.
Double-click /createDepartments to create the page. Accept the
default name, and click OK to open it in the visual JSP editor.
Optionally, add the text Insert a New Department to the JSP. Add
a style sheet and modify the JSP page as needed.
6.
On the Data Control Palette, click DepartmentsView1. In the Drag
and Drop As dropdown list, select Input Form.
7.
Drag DepartmentsView1 from the Data Control Palette and drop it
onto createDepartments.jsp
in the Editor.
A new insert form is created on the page.
8.
To create and commit the inserted row, add buttons to browseDepartments.jsp.
In the Application Navigator, double-click browseDepartments.jsp
to open it in the visual editor.
In the Data Control Palette, expand the Operations node and click Commit.
9.
Drag the Commit button onto browseDepartments.jsp,
just below the navigation buttons.
10.
In the Data Control Palette, select the Rollback button and drag
it onto browseDepartments.jsp.
11.
Now create a button to invoke createDepartments.jsp
from browseDepartments.jsp.
In the Data Control Palette, select Create and in the Drag and
Drop As dropdown list, select Button with Form. Drop the operation
onto browseDepartments.jsp,
below the navigation and transaction buttons form.
12.
Click on the Create button and in the Property Inspector, change
the value attribute to Insert a New Department.
13.
From the File menu, choose Save All.
14.
In the Page Flow Diagram, right-click /browseDepartments.jsp
and select Run.
Click Insert a New Department.
You will be forwarded to the insert form.
15.
Create a new department record and click Submit.
You will be forwarded to the Browse form.
16.
Click Commit in browseDepartments.jsp
to commit the new record.
In this step you create a data action and data page
for editing department data. You will link to the edit form via the browse form.
1.
Now create a Data Page to select the current row for editing. Open the
Struts Page Flow Diagram and in the Component Palette, click Data Page.
2.
Click on the page flow diagram to create the Data Page and rename it
/editDepartments.
3.
Choose the Forward component in the Component Palette, click on
/browseDepartments, drag the forward component to the /editDepartments
Data Page, and click again.
4.
Rename the forward setCurrentRowWithKey.
5.
Choose the Forward component in the Component Palette, click on
/editDepartments, drag the forward component to the browseDepartments
Data Page, and click again. Rename the forward Submit.
6.
Double-click browseDepartments.jsp to open it in the editor.
In the Data Control Palette, select setCurrentRowWithKey(String)
from the operations node of DepartmentsView1.
In the Drag and Drop As dropdown list, select Find Row Link.
7.
Drag the Find Row Link from the Data Control Palette onto the
browseDepartments.jsp page,
just in front of the Row.DepartmentId field and change the text of the
link to Edit.
8.
In the page flow diagram, double-click /editDepartments to create
the corresponding JSP page. Accept the default name and click OK
to open it in the editor.
Optionally, add Edit Department Information to the JSP. Add a style
sheet and modify the JSP page as needed.
9.
In the Data Control Palette, select DepartmentsView1.
In the Drag and Drop As dropdown list, select Input Form.
10.
Drag the Input Form from the Data Control Palette onto the editDepartments.jsp
page.
11.
From the File menu, choose Save All.
12.
From the Page Flow Diagram, right-click
/browseDepartments and select Run. In the browser, click
on the Editt link next to any Department id.
You will be forwarded to the Edit form.
13.
Edit the Department information and click Submit.
You will be forwarded to the Browse form.
14.
Press Commit in browseDepartments.jsp
to commit the change.
The last step in developing an application is deploying
it. Follow these steps to deploy the application to Oracle Containers for J2EE
(OC4J) .
1.
Ensure your PATH environment variable includes the jdk\bin directory
within the JDeveloper root directory. Open a DOS window and navigate to
the J2EE/home directory inside the JDeveloper root directory.
2.
Issue java -jar oc4j.jar -install at the prompt. Specify welcome
as the admin password.
3.
Issue java -jar oc4j.jar to start the OC4J server.
4.
In JDeveloper, click the Connections tab
in the System Navigator.
Right-click Application Server and choose New Application Server Connection.
The Create Application Server Connection dialog opens.
Click Next.
5.
In the Create Application Server Connection dialog, name the connection
OC4J.
Choose Standalone OC4J from the Connection type dropdown list.
Click Next.
6.
Enter the username and password that you entered when you installed OC4J.
Click Next.
7.
Ensure the ORMI hostname is correct, and accept the default target web
site and location of OC4J.
Click Next.
8.
Click Test Connection. JDeveloper will attempt to connect to the
OC4J server. When the process is complete and the status is "Success!",
click Finish.
9.
In the System Navigator, click the Applications tab.
Right-click ViewController
and choose New...
The New Gallery opens.
10.
Expand the General category and choose Deployment Profiles.
Select WAR file from the items list.
Click OK.
11.
Name the Deployment Profile HRApplication and accept the default directory.
Click OK to open the WAR Deployment Profile Properties dialog.
Accept the default properties and click OK to create the deployment
profile.
12.
In the Application Navigator, right-click HRApplication.deploy.
Select Deploy To -> OC4J.
The application WAR file will be deployed to OC4J. Wait for the text
Deployment Finished in the Message log.
13.
In the Deployment messages, copy the text on the line following: Use
the following context root(s) to test your web application(s)
14.
Paste the url into a browser. Append a forward slash, and add /browseDepartments.do
to the end of the url. Press enter to run the application.
In this lesson you learned how to use JDeveloper to develop
and deploy a web-based application that implements the MVC design pattern, using
JSPs, Struts, ADF Business Components, and the data binding features of
the Oracle Application Development Framework (Oracle ADF).
Bookmark
