Building a Simple JSF and TopLink App in JDeveloper 10.1.3 Preview

Written by Chris Schalk, Oracle Corporation
January 2005


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.)

  1. 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.)

  2. Click OK to generate the Workspace.

  3. 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....

  4. 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.

  5. Once the wizard is invoked, click next to proceed to the database connection selection panel. Choose your HR (or preferred) connection.

  6. In step 2 (of 3) select the Employees table.

  7. Click Next and Finish to generate your TopLink Java class for the Employees table.

  8. 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".

  9. 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 class and right-clicking "New Sample Java Client".

  10. Optional: At this point feel free to run the new sample client to make sure that your TopLink persistence code works.

  11. 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.
      // xmlLoader = new"META-INF/sessions.xml");
      // sessionManager =;
      // 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 =" path-to-your-toplink-deployment-descriptor.xml");
      DatabaseSession session = project.createDatabaseSession();
      Vector objects = session.readAllObjects(jsftoplink.model.Employees.class);
      return objects;


  12. 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

  1. In the ViewController project we'll build a JSF enabled JSP page by selecting File->New->Web-Tier->JSF->JSF JSP.

  2. 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.)

  3. 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.

  4. 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.

  5. 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.

  6. 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

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  11. 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.

  12. 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.

  13. 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!


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!


false ,,,,,,,,,,,,,,,