Building a Simple JSF and TopLink App in JDeveloper
10.1.3 Preview
Written by Chris Schalk, Oracle Corporation
January 2005
Introduction
JDeveloper 10.1.3 Preview not only comes with extensive
visual JavaServer Faces development support but it also offers a comprehensive
TopLink development support which makes it very easy to create databound JSF
applications which use TopLink as its Model.
The following How To details how to build a simple JSF/TopLink application
which displays a grid of data from a TopLink persisted middle-tier.
Getting Started
To get started, first make sure to download JDeveloper
10.1.3 Preview from OTN and install it on your machine. You'll also
want to set up a database connection. (This HowTo uses a connection to the HR
common schema, but any schema will suffice.)
- To start building our app, we'll use the Application Workspace wizard which
will generate both a Model project for our middle-tier persistence code as
well as a ViewController project for our View (and Controller) components
of our application. File->New->General->Application.
For the Application Package Prefix we'll use "jsftoplink"
and for the Application Template we'll use the "Web Application
[JSF, JSP, EJB]". (We won't actually use EJBs though for this example.)
- Click OK to generate the Workspace.
- After generating our Model and ViewController project we'll need to establish
a dependency from the View.. project to the Model project. Double-click the
ViewController project, click on "Dependencies" in the left tree
and then check the box next to the Model project on the right.
Click OK to continue....
- Now we can build out Model code using TopLink. Let's invoke the TopLink
from wizard. Use File->New->Business Tier-> Java Objects From Tables.
- Once the wizard is invoked, click next to proceed to the database connection
selection panel. Choose your HR (or preferred) connection.
- In step 2 (of 3) select the Employees table.
- Click Next and Finish to generate your TopLink Java class for the Employees
table.
- Now that you've generated your TopLink Class and initial mappings, you'll
want to generate the TopLink Deployment Descriptor. Locate the TopLink
Mapping node and right click "Generate toplink-deployment-descriptor.xml".
- Now that we have a TopLink based persistence we can generate a sample java
client to both test our TopLink persistence as well as use later as a managed
bean for our JSF JSP app. This is done by selecting the Employees.java class
and right-clicking "New Sample Java Client".
- Optional: At this point feel free to run the new sample client to make sure
that your TopLink persistence code works.
- Now we will create a new method "getEmployees" in our client class.
This is done by:
- copying the generated "main" method to a new method named
"getEmployees()" and changing it's return type to Vector. (This
is the method that our JSF client will use later when we create the View.)
- At the end of the method simply return the Vector "objects"
instead of printing out each record.
Here's an example of the code for your new getEmployees method: (note:
you should not copy and paste this code as you will need your own path
to your toplink deployment descriptor.)
import java.util.Vector;
.
.
public Vector getEmployees()
{
EmployeesClient employeesClient = new EmployeesClient();
// To use sessions.xml uncomment the following three lines of code, fill
in the appropriate resource locations and add sessions.xml to the classpath.
// oracle.toplink.tools.sessionconfiguration.XMLLoader xmlLoader = new
oracle.toplink.tools.sessionconfiguration.XMLLoader("META-INF/sessions.xml");
// oracle.toplink.tools.sessionmanagement.SessionManager sessionManager
= oracle.toplink.tools.sessionmanagement.SessionManager.getManager();
// DatabaseSession session = (DatabaseSession)sessionManager.getSession(xmlLoader,
"MySessionName", employeesClient.getClass().getClassLoader());
// To use sessions.xml as defined above, comment out the following three
lines of code.
oracle.toplink.sessions.Project project = XMLProjectReader.read("path-to-your-toplink-deployment-descriptor.xml");
DatabaseSession session = project.createDatabaseSession();
session.login();
Vector objects = session.readAllObjects(jsftoplink.model.Employees.class);
return objects;
}
- We can now build the View of our application which will consist of a single
JSF JSP page which uses the JSF DataTable UI Component to show the Employee
data.
Building the View
- In the ViewController project we'll build a JSF enabled JSP page by selecting
File->New->Web-Tier->JSF->JSF JSP.
- As you invoke the JSF JSP Wizard you can name the page "emps.jsp".
You can also leave the type and error page settings as default and click "Finish"
to generate your page. (For further customizations of the page, click "Next"
in the JSP wizard.)
- Once the page is generate feel free to add a <h2> banner such as below.
You can also drag and drop a Cascading Style Sheet (such as jdeveloper) from
the CSS palette page.
- Before continuing we'll need to add our TopLink client class that we created
in the Model project as a managed bean in the Faces-Config.xml file. To do
this locate the faces-config.xml file in the navigator (Web Content->WEB-INF->faces-config.xml)
and double-click it to edit its contents.
- The default editor for the faces-config.xml file is the Page Flow modeler,
but for this simple application we will not introduce any navigation rules
so click on the "Overview" tab at the bottom of the page to invoke
the faces-config editing console.
- Add a new Managed Bean by first clicking on the Managed Beans node on the
left in the console and clicking "New".
Specify the following and click OK:
- Name: EmpsBean
- Class: jsftoplink.model.EmployeesClient (browse to your toplink Employee
client.)
- Scope: Request
- We're almost there! Now all we have to do is drag and drop the Datatable
UI Component onto the emps JSP page and databind it. Fortunately JDeveloper
has a simple wizard for both databinding and customizing the DataTable.
- Locate the JSF HTML Component "Data Table" on the JSF HTML page
of the Component Palette and drag and drop it onto the JSP page. This will
invoke the Data Table Wizard.
- As the wizard is invoked click next to proceed to the first page. Leave
the radiobutton in the default position the "Bind the Data Table Now"
and click Next.
- Bind with the following values:
- Value: #{EmpsBean.employees}
- Class: jsftoplink.model.Employees
- Var: emps
Note: for the Value binding you'll use the EL Binder dialog to visually
generate the appropriate Expression Language (EL) reference to the managed
bean method.
- As you click Next you will see the column configuration page of the Datatable
Wizard. Use this page to move the firstName and lastName columns to the top.
You can also change the Component for the "email" column to an Output
Link instead of Output Text.
Also, feel free to Remove the employeesCollection column as it will not render
data in this example.
- Click Finish to generate the DataTable code in your JSP page. You will see
an empty DataTable with your columns displayed.
Note: This will render better in the production version of 10.1.3 where it
will show a single row indicating the datatypes.
- Now let's run the page. Right click the emps.jsp page and select Run. As
the page renders in your browser you should see the contents of the Employees
table!
Summary
This example task serves primarily as a starting point by which you can begin
to experiment with building JSF applications which use data persisted in the
middle-tier. This example uses TopLink but any other middle-tier technology
could be used instead. As you can also see building this simple example was
actually quite easy using JDeveloper 10.1.3's new visual development features
including the new JSF "OverView" faces-config editor, the JSF EL Binder
dialog as well as the Data Table wizard. As work continues on the production
features of JDeveloper 10.1.3 we will be working to enhance features which aid
in building composite UI Components such as the DataTable wizard. Feel free
to let us know what you think of this approach in the forums!
|
Bookmark
