Integrating Ajax and EJB 3.0/JPA - Building a Web application using ICEFaces, JPA and Oracle JDeveloper

Overview

Prerequisites

Installing ICEFaces on JDeveloper

Creating a Database Connection

Building the Data Model with JPA

Creating a Backing Bean for the UI

Creating a JSF Page to display an ICEFaces Datatable

Running the Application

Adding Table Pagination

Summary

1.

Have access to or have installed Oracle JDeveloper 10g Release 3 (10.1.3.2) Production. Oracle JDeveloper is a free Java IDE with exceptional support for building enterprise Java applications. You can download it from the Oracle Technology Network.

2.

Have access to or have installed the Oracle HR Sample Schemas.
This schema comes built in with default installations of both the Oracle database and the free Oracle XE databases - make sure the HR user in the database is unlocked. Instructions for installing the HR schema and creating a connection to it in JDeveloper are available here.

3.

Start JDeveloper. Double-click the JDeveloper executable (jdeveloper.exe) found in the root directory where you unzipped it.

If the Migrate User Settings dialog box opens, click No.

1.

Download ICEfaces-v1.5.3-JDeveloper.zip from here

2.

In JDeveloper, go to Help | Check for Updates from JDeveloper main menu, choose Install from Local file and browse for the ICEfaces-v.1.5.3-jDeveloper.zip

Click Next to continue

3.

JDeveloper needs to restart. After this is done, verfify that the ICEFaces libraries were installed by going to Tools | Manage Libraries



In the same place also verify that the JSP Tag Libraries were installed

1.

Click the Connections tab. If the Connections tab is not showing, choose View | Connection Navigator from the JDeveloper main menu.

2.

Right-click the Database node and choose New Database Connection from the context menu.

3.

When the Welcome page of the Create Database Connection wizard opens, click Next.

On the Type page of the wizard, enter hrconn as the Connection Name. Click Next to continue.

4.

On the Authentication page of the wizard, enter hr in the Username field and hr in the Password field. Check the Deploy password box.

Click Next to continue.

5.

On the Connection page of the wizard, the default values for the connection should be the following:

Driver: thin

Host Name: localhost

JDBC Port: 1521

SID: ORCL (For Oracle XE database the value of the SID is XE)

Leave the fields set to these default values if you have the database installed locally. If you are using a remote database, enter the appropriate values for the connection to the database. If you do not know these values, check with your database administrator.

Click Next to continue.

6.

Click Test Connection.

If the database is available and the connection details are correct, you  should see the word Success! displayed in the Status window.

If an error occurs, verify the connection settings, click Back to make any necessary changes, and then retest the connection.

If the connection is successful, click Finish to complete the connection.

You have just created a connection to the database that supplies data for the application you will build in this tutorial. Note that the database navigator allows you to browse and even edit objects in your database connection.

Create New Application and Projects

Create Business Logic using JPA and EJB

1.

Click the Applications Navigator tab to go back to the Applications Navigator.

Right-click the Applications node and select New Application from the context menu.

2.

In the Create Application dialog box, enter the Application Name iceFacesDemo. Notice that as you enter the application name, the directory name changes automatically.

Enter oracle.com as the Application Package Prefix.

Select the Web Application [JSF, EJB, Toplink] value from the Application Template drop-down list.

Click OK.

3.

Having created the Application together with the Model (JPA) and ViewController (user interface) projects. Add ICEFaces integration to the ViewController project. Right-click the ViewController node and select ICEFaces Integration

Review the actions, click YES. 

4.

After this is done check the ICEFaces libraries have been added in the Project Properties

5.

Click OK.

Click Save All on the toolbar to save your work. Alternatively, you can select File | Save All from the menu.

1.

In the Applications Navigator, right-click the Model project and from the context menu, select New.

2.

In the New Gallery, expand Business Tier in the Categories list and select the EJB node. In the Items list, select Entity From Tables (JPA/EJB3.0) and click OK.

3.

If the Welcome page of the Create Entity from Tables wizard displays, click Next.

On the Database Connection Details, choose hrconn that was created before



Click Next.

4.

On Select Tables, click on Query to bring all the tables from the database connection. Select the table Departments from the Available list of tables to Selected list.

Click Next.

5.

Choose java.util.List as the Collection Type for Relationship Fields.

Click Next.
Click Finish.

6.

Review the Departments.java bean that was created with the code that was generated

We have created a basic EJB 3.0 entity bean based on the Table. Now we are going to create a session facade bean to encapsulate business logic and expose methods and interfaces to the outside world.

7.

In the Applications Navigator, right-click the Model project and from the context menu, select New.

8.

In the New Gallery, expand Business Tier in the Categories list and select the EJB node. In the Items list, select Session Bean (EJB 1.1/2.x/3.0) and click OK.

9.

If the Welcome page of the Create Session wizard displays, click Next.

On the EJB Name and Options page of the wizard, set the values to those shown below.

Stateless session beans do not have an internal state. They do not keep track of the information that is passed from one method call to another. Each invocation of a stateless business method is independent of its previous invocation. You only need a stateful session bean for applications such as online shopping carts that need to maintain a conversational state across method invocations.

By specifying a Transaction Type of Container, you are enabling the container to manage transactions so that you do not have to code transaction mechanisms. You would change this only if you wanted to write your own transaction mechanisms.

Click Next.

10.

On the Session Façade page of the wizard, ensure that all the check boxes are selected, because you want to have the session facade incorporate all the methods and named queries. Click Next.

11.

On the Class Definitions page of the wizard, ensure that Bean Class is set to oracle.com.model.DepPublicFacadeBean. The default directory is acceptable. Click Next.

12.

On the EJB Component Interfaces page of the wizard:

Click Next.

Click Finish to complete the process.

13.

Review the code that was generated

Click Save All on the JDeveloper toolbar, or select File | Save All from the menu.

1.

Right-click on the ViewController project and select Project Properties

Go to Dependencies  and check Model.jpr to ensure we can call methods from the Model in the views.

In the J2EE Application change the application name and the context root for iceFacesDemo

Click Save All to save your work.

2.

In the Applications Navigator, right-click the ViewController project and select Open JSF Navigation from the context menu.

3.

JDeveloper provide us with three ways of  editing the faces-config.xml configuration file, which is the core of the JSF controller layer. In the design editing mode - you can visually design page flows for your application. The source tab at the bottom will allow you to directly edit the XML code. We are going to use the overview tab for declarative editing of the file.

Select Overview tab from the  lower left side

 

Select Managed Beans from the left area, then on the right select New

4.

Assign the values

Click OK

Click Save All on the JDeveloper toolbar, or select File | Save All from the menu.

5.

Open the DepartmentsBean.java, on the ViewController project and expand Application Sources->oracle.com.view double-click on DepartmentsBean.java

6.

Replace the code of the class with the following code that creates a method that returns a list of departments from your entity bean.
Note - the code to access the EJB is similar to the code you can generate by right clicking the session facade and creating a "sample EJB client" in JDeveloper.

package oracle.com.view;

import java.util.List;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import oracle.com.model.DepPublicFacade;

public class DepartmentsBean {

    private DepPublicFacade model;

    public DepartmentsBean() {
        try {
            final Context context = getInitialContext();
            model = (DepPublicFacade)context.lookup("DepPublicFacade");
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
    public List getDepartments() {
        return model.queryDepartmentsFindAll();
    }
    private static Context getInitialContext() throws NamingException {
        // Get InitialContext for Embedded OC4J
        // The embedded server must be running for lookups to succeed.
        return new InitialContext();
    }
}

Import the necessary packages clicking CTRL+ENT  on the different objects you are using.

After you have no warnings of errors. Click Save All to save your work.

1.

Switch to the faces-congig.xml file and to diagram view of the file. Ensure that JSF Navigation Diagram is selected from the dropdown list of the Component Palette

Select JSF Page and click on the diagram in the position where you want the page to appear.

Note that the page appears with a yellow warning symbol. This is because you have depicted a page on the diagram that does not yet exist. The yellow warning disappears later when you create the page.

2.

Rename the page departments by typing over the name.

You need only to type the name; JDeveloper automatically adds the leading forward slash and the .jsp extension when you press [Enter]

Click Save All to save your work.

3.

On the JSF Navigation Diagram, double-click departments.jsp to launch the Create JSF JSP wizard.

If the Welcome page of the wizard displays, click Next.

On the JSP File page of the wizard, for Type, select the JSP Document option. This creates an XML representation of a JSP page, ensuring that the page uses well-formed XML syntax.

Click Next to continue.

4.

On the Component Binding page, select the Do Not Automatically Expose UI Components in a Managed Bean option. Leave other values as their defaults and click Next.

5.

Ensure that the libraries shown below are in the Selected Libraries list.

        JSF Core 1.0
        JSF HTML 1.0
        ICEFaces Component Suite 1.5.3

If they are not selected, select them in the Available Libraries list and click Add to shuttle them to the Selected Libraries list. Note that the library version numbers may be different from those shown.

Click Next to accept the libraries that you need in order to create the ICEFaces components on your page.

6.

Click Next to accept the default HTML options, then click Finish to create the new JSF JSP.

The empty departments.jspx page opens in the editor. In the next few steps, you add a data-bound ICEFaces dataTable component to the page. This component displays the departments.

7.

Click Save All to save your work.

8.

Go back to Design view. Click in the blank screen.

Write as a Heading List of Departments Using JPA and ICEFaces

 Now write some additional text

Switch to the source view of your page to see the JSF source for the page you just modified visually.

9.

ICEFaces components use the ice:form component to encapsulate other components. We'll convert the h:form component to the right one.
From the structure pane, right click on the h:form component and choose Convert

Now select ICE Faces Components Suite from the drop down list of copmponents libraries, and choose Form as the component to convert to.

Click Save All to save your work.

10.

Next, we'll use the component palette to add a data table to our page. In the component palette window (use ctrl+shift+p to bring it up) make sure you are watching the ICEFaces Components Suite set of component, and locate the datatable component.

Drag it from the component palette onto the ice:forms node in the structure pane window.

Next, click the datatable node in the structure window and use the property inspector window to set the following properties for the datatable component.

• Border: 1
• Id: depTable
• Var: dep

position the cursor in the value property and click the bind to data button.

This will pop up the expression builder dialog. In the variables window, navigate to JSF Managed Beans - DepartmentBean - departments and shuttle it to the right, then click ok. This binds the table to the departments List that is returned from the managed bean we created before.


Next we'll add the columns to the datatable, while you can do it through the same drag and drop process, you might find it faster to just copy paste the following code. Remove the closing "/" from the the <ice:dataTable/> tag, go to the next line and type </ - this will cause JDeveloper to automatically complete the correct closing tag.
in between  <ice:dataTable></ice:dataTable> add the following code:

            <ice:column>
                <f:facet name="header">
                    <ice:outputLabel value="Department ID"/>
                </f:facet>
                <ice:outputText value="#{dep.departmentId}"/>   
            </ice:column>
            <ice:column>
                <f:facet name="header">
                    <ice:outputLabel value="Department Name"/>
                </f:facet>
                <ice:outputText value="#{dep.departmentName}"/>
            </ice:column>
            <ice:column>
                <f:facet name="header">
                    <ice:outputLabel value="Department Location"/>
                </f:facet>
                <ice:outputText value="#{dep.locationId}"/>
            </ice:column>

You should have something like this

Click Save All to save your work

1.

Right-click departments.jspx either in the Applications Navigator, the editor for that page, or the JSF Navigation Diagram, and select Run from the context menu.

The embedded OC4J server starts and is initialized, and the page displays in a browser.

2.

See the result

Tip - If you get an error stating javax.faces.FacesException: Failed to execute JSP lifecycle. Navigate to Web Content - WEB-INF and open the web.xml file. Locate the following entry in the file:

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>

Replace the entry with the following:

    <servlet-mapping>
        <servlet-name>Persistent Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>

Try running the page again now.

1.

Go to departments.jspx design editor. In the structure pane expand the body structure and select ice:dataTable. Go to the inspector Pane and assign 5 to the Rows value.

Click Save All to save your work

2.

Go the departments.jspx source code and add the following code after </ice:dataTable>

<ice:dataPaginator id="dataScroll_1" for="depTable"
                                   paginator="true" paginatorMaxPages="5">
                    <f:facet name="first">
                        <ice:outputLabel value="First"/>
                    </f:facet>
                    <f:facet name="next">
                        <ice:outputLabel value="Next"/>
                    </f:facet>
                    <f:facet name="previous">
                        <ice:outputLabel value="Prev"/>
                    </f:facet>
                    <f:facet name="last">
                        <ice:outputLabel value="Last"/>
                    </f:facet>
</ice:dataPaginator>

It should look like this

Click Save All to save your work

3.

Right-click departments.jspx either in the Applications Navigator, the editor for that page, or the JSF Navigation Diagram, and select Run from the context menu.

See the Result

4.

Finally add a navigation Range pagination in the footer of the table. Go to departments.jspx source editor and  after the last </ice:column> before </ice:dataTable> add a footer facet with the following code:

<f:facet name="footer">
                        <ice:dataPaginator id="dataScroll_2" for="depTable"
                                           rowsCountVar="rowsCount"
                                           displayedRowsCountVar="displayedRowsCount"
                                           firstRowIndexVar="firstRowIndex"
                                           lastRowIndexVar="lastRowIndex"
                                           pageCountVar="pageCount"
                                           pageIndexVar="pageIndex">
                            <ice:outputFormat value="{2} to {3} of {0} departments found"
                                              styleClass="standard">
                                <f:param value="#{rowsCount}"/>
                                <f:param value="#{displayedRowsCount}"/>
                                <f:param value="#{firstRowIndex}"/>
                                <f:param value="#{lastRowIndex}"/>
                                <f:param value="#{pageIndex}"/>
                                <f:param value="#{pageCount}"/>
                            </ice:outputFormat>
                        </ice:dataPaginator>
</f:facet>

Now your page should look like this:

Click Save All to save your work

5.

Right-click departments.jspx either in the Applications Navigator, the editor for that page, or the JSF Navigation Diagram, and select Run from the context menu.

See the Result