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 steps you through the development of a Human
Resources application using Toplink, Struts, and JSPs.
You have been given the task of creating a Human Resources
application that can be deployed to multiple platforms, and can use any type
of client. To accomplish this task you'll create an application using the Model-View-Controller
(MVC) architecture. You will create the model using Toplink to generate classes
from database tables. You'll use the struts controller and will implement the
view using JSP pages.
In this step you'll create a new application workspace to
organize your application. You'll also create a new EJB
diagram for your business tier objects. A diagram gives you a visual representation
of your business objects, helping you to conceptualize the application. Once
the EJB Diagram is created, you'll start building persistent business objects
as entity beans.
In the Application Navigator, right-click the Applications node and choose
New Application Workspace. The Create Application Workspace dialog
opens.
Change the Application Name to TopLinkHRApplication
In the Application Package Prefix field, type hr.
In the Application Templates field, choose No Template[All Technologies]
from the dropdown list.
Click OK.
A new project called Project1 is created.
2.
From the File menu, select Rename and name this project TopLinkModel.
Click Save.
3.
The next step is to notify the IDE that TopLink is one of the technologies
used by this project. This enables the IDE to provide smart choices as
you develop your application.
Double-click on TopLinkModel in the navigator to access the Project
Properties dialog.
Select the Technology Scopes node in the Project Properties dialog.
Select TopLink in Available Technologies and move it to Selected
Technologies.
Select Java in Available Technologies and move it to Selected Technologies.
4.
Modify the Default Package (under Common -> Input paths) to
hr.model
In the Application Navigator, right-click TopLinkModel (under
the TopLinkHRApplication node) and select New...
The New Gallery opens.
In the New Gallery, under the Categories list, expand General, and select
Diagrams. In the Items list, select Java Class Diagram.
Click OK. The Create Java Class Diagram dialog opens.
2.
Accept the default package name, but change the name of the diagram to
TopLink HR Diagram.
Click OK.
3.
From the File menu, choose Save All.
4.
Note: If you have not established a connection to the HR schema, please
see the prerequisites section.
In the Navigator, click the Connections tab. This will bring the
Connection Navigator to the front.
In the Connection Navigator, expand the nodes for Database, jdbc_tutorial_connection,
hr, and Tables. Click on DEPARTMENTS and then Ctrl-click
EMPLOYEES. Drag and drop both onto the blank Java Class diagram.
The Create from Tables dialog opens.
5.
In the Create from Tables dialog, select Java Classes and
click OK.
The new Java class beans appear on the diagram.
Optionally, arrange the objects in the diagram by clicking and dragging
the diagram elements so that they are easier to see. You can straighten
the relationship lines by right-clicking a line and choosing Straighten
Lines.
6.
In the Navigator, click on the Applications tab and you'll notice
that two new nodes, Departments.java,
and Employees.java, appear
in the Application Navigator underneath the hr.model
package.
A new package HR is created which contains offline database tables.
The data control layer exposes the business services
to clients. The data control is technology specific, so there are different
data controls for TopLink, EJBs, JavaBeans, ADF business components, etc. Additionally,
the data bindings are client agnostic. This means that no matter what kind of
technology the business services were developed with, a client can interact
with any of them seamlessly.
The ADF framework creates the data bindings for you, so the
only thing you need to do is create the data control.
1.
Open the Data Control Palette by selecting View ->
Data Control Palette.
2.
Drag Departments.java from the Application Navigator and drop
it onto the Data Control Palette.
3.
From the File menu, choose Save All.
4.
Take a look at the Application Navigator and you'll notice a few new
files. Departments.xml
and Employees.xml (under
the hr.model package) contain the metadata for the methods and
accessors.
In this step you'll create the view and controller part of
this HR application. The controller separates the visual representation of web
pages from their flow and actions. From the home page of this application, the
user will be able to navigate to a JSP page which will show a list of all Departments.
Selecting one of the departments will forward the user to a JSP containing a
form for editing Department data. Finally, you'll create a JSP which displays
a list of employees by department. This demonstrates master-detail navigation
in a data-bound Struts JSP application.
Select the TopLinkHRApplication node, right-click and choose New
Project.
In the New Gallery, under the Categories list, expand General, and select
Projects. In the Items list, select Empty Project.
Click OK.
2.
Name this project ViewController and click OK to create
the project.
3.
Now notify the IDE that Struts and JSP are the technologies used by this
project.
Double-click on ViewController in the navigator to access the
Project Properties dialog.
Select the Technology Scope node.
Select Struts in Available Technologies and move it to Selected
Technologies.
Select JavaServer Pages (JSP) and Servlets in Available Technologies
and move it to Selected Technologies.
Select Hyper Text Markup Language (HTML) in Available Technologies
and move it to Selected Technologies.
4.
Modify the Default Package (under Common -> Input paths) to view
Click OK. This will setup your project for Struts development.
5.
In the Application Navigator, expand the ViewController project.
Expand Web Content and WEB-INF.
Double-click on struts-config.xml. A blank Page Flow Diagram opens.
In the Component Palette select the Page component and add it
to the Page Flow Diagram by clicking in the diagram. This creates a JSP
page called /untitled1. Click within the name to change it to /home.jsp
6.
In the Component Palette select the Data Page component and click
on the diagram. Name this new Page /browseDept.
7.
Double-click on /home.jsp to create the JSP page and open it in
the visual JSP editor.
Optionally, add the text Home Page of My HR Application to the
JSP. Add a style sheet and modify the JSP page as needed.
8.
Open the Page Flow Diagram to draw the page flow between the shapes.
Choose the Page Link component on the Component Palette, and click
on the /home.jsp action. Drag the link to the /browseDept
Data Page and click again. (This will create a link in the home page which
will invoke the /browseDept Data Page)
9.
Double-click on /browseDept to create the JSP page. Accept the
default 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.
10.
In the Data Control Palette, select return from the readAllDepartments()node.
In the Drag and Drop As dropdown list, select Read-Only Table.
11.
Drag and drop DepartmentsCollection | return from the Data Control
Palette onto the browseDept page.
12.
The ApplicationResources.properties file contains messages that we will
be using in the application. Change the properties file to have a user
friendly link in the home.jsp JSP page.
Double-click ApplicationResources.properties under the view
package in the Application Navigator.
13.
Change the value of link.browseDept to Click here to browse
Departments.
14.
In the Page Flow Diagram, select the /home.jsp icon. Right-click
and select Run.
In order to update the department we need to keep track of the current
row of the department selected by the user in the browseDept.jsp
page. We will update the browseDept.jsp so that a link is added to select
the department.
In the Page Flow Diagram, double-click on /browseDept to
open it. Select the Source tab to view the code.
Place the cursor in front of <c:out value="${Row.departmentId}"></c:out>
2.
In the Data Control Palette, select return in the readAllDepartments()
node.
In the Drag and Drop As dropdown list, select Select Row Link.
3.
Drag the return node from the Data Control Palette onto the browseDept.jsp
page, just before the cursor, and change the href to point to setCurrentDept.do
Note: We will create setCurrentDept Data Page in the next step.
4.
Open the Page Flow Diagram.
In the Component Palette select the Data Action component and click
on the diagram. Name this new Data Action /setCurrentDept.
5.
Choose the Link component in the Component Palette, click on the
/browseDept.jsp page, drag the link to the /setCurrentDept
Data Action, and click again.
6.
In the Data Control Palette, expand the Operations node in DepartmentsCollection
and select setCurrentRowWithKey(String).
7.
Drag setCurrentRowWithKey(String) from the Data Control Palette
to /setCurrentDept in the Page Flow Diagram.
8.
Next create a JSP to display an input form to edit the department information.
Select the DataPage component from the component palette and add
it to the Page Flow Diagram. Change the name to /editDept.
9.
Select the Forward component on the Component Palette and click
the /setCurrentDept data action. Drag the link to the /editDept
and click again.
10.
Double-click /editDept and click OK to to create the corresponding
JSP page and open it in the visual editor.
Optionally, add Edit Department Information to the JSP. Add a style
sheet and modify the JSP page as needed.
11.
In the Data Control Palette, select the return node from readAllDepartments().
In the Drag and Drop As dropdown list, select Input Form.
12.
Drag return from the Data Control Palette onto the editDept.jsp
page.
13.
In the Page Flow Diagram, right-click /home.jsp
and select Run.
Click on the link Click Here to Browse Departments in the home page.
You will see the list of departments. Notice the * next to the department
number. This identifies the current row.
14.
Click on the Select for a department number.
You will see the edit page which has the information related to department
number you have selected.
Note: Don't update the data yet, we will add the update functionality
in the next step.
15.
Open editDept.jsp in the visual editor.
In the Data Control Palette, select Commit from the Operations
node.
In the Drag and Drop As dropdown list, select Button.
16.
Drag Commit from the Data Control Palette onto the editDept.jsp
page.
17.
In the Data Control Palette, select Rollback from the Operations
node.
In the Drag and Drop As dropdown list, select Button.
18.
Drag Rollback from the Data Control Palette onto the editDept.jsp
page.
19.
Now add a link to the browse page from the edit page. Open the Page Flow
Diagram. Choose the Page Link component from the Component Palette,
and drag it from /editDept to /browseDept.
20.
From the File menu, choose Save All.
21.
In the Page Flow Diagram, right-click /home.jsp and select Run.
Click Click Here to Browse Departments in the home page.
You will see the list of departments.
22.
Click on Select for a department number.
You will see the edit page which has the information related to the department
you have selected.
23.
Update department information and click Submit.
This enables the Commit and Rollback buttons. Click Commit.
Click on the link Click Here to Browse Departments, which will
display the updated department information.
Open the Page Flow Diagram.
In the Component Palette, select the Data Page component and click
on the diagram. Name this new Data Page /browseEmp.
2.
Choose the Page Link component in the Component Palette, click
on the /home.jsp action, drag the link to /browseEmp and
click again. (This will create a link in the home page which will invoke
/browseEmp Data Action).
3.
Double-click on /browseEmp to create the
JSP page.
Optionally, add the text List of Employees by Department to the JSP.
Add a style sheet and modify the JSP page as needed.
4.
In the Data Control Palette, select the return node of DepartmentsCollection.
In the Drag and Drop As dropdown list, select Read-Only Form.
5.
Drag and drop DepartmentsCollection from
the Data Control Palette onto the browseEmp JSP page.
6.
In the Data Control Palette, select the return node within DepartmentsCollection.
In the Drag and Drop As dropdown list, select Navigation Buttons.
7.
Drag return to the browseEmp JSP page.
(Make sure that the buttons are dropped within the boundaries of the Form).
8.
In the Data Control Palette, select the employeesCollection node.
In the Drag and Drop As dropdown list, select Table.
9.
Drag employeesCollection onto the browseEmp JSP page, beneath
the Departments form.
10.
Change the Struts ApplicationResource.properties
file to have a user-friendly link in the home.jsp page.
Select ApplicationResources.properties under the view
package in the Application Navigator.
Change the value of link.browseEmp to Click Here to See the List of Employees by Department.
11.
In the Page Flow Diagram, right-click /home.jsp and select Run.
Click on the link you just created.
In the employees list page, click on the navigation buttons to see the
employees in different departments.
In this lesson, you learned how to generate Java classes
from database tables using Toplink, create a Page Flow using the Struts Controller,
and how to create JSP pages which are bound to data using ADF databinding.
Bookmark
