You are on page 1of 103

Build a Web Application with ADF Faces and Oracle TopLink

Purpose In this tutorial, you use Oracle Application Development Framework (ADF) to build a web application that includes a master-detail page and an associated Edit page. ADF Faces is used to build the client components. Oracle TopLink provides the data model. You also incorporate an EJB session bean to provide the model's session façade.

Overview
You will create a master-detail form for viewing department information along with the employees in each department. You will then create a button that calls an Edit page, enabling you to update an employee's detail information. Finally, you will test run the application in JDeveloper's embedded server. Back to Topic List

Prerequisites
Before starting the tutorial, you should: 1. Have access to or have installed Oracle JDeveloper 10g Release 3 (10.1.3) Production. You can download it from Oracle Technology Network. 2. Have access to or have installed the Oracle Sample Schemas. Specifically, the tutorial uses the HR schema. The application's pages work with the DEPARTMENTS and EMPLOYEES tables. Instructions for installing the HR schema and creating a connection to it in JDeveloper are available online at: http://www.oracle.com/technology/obe/obe1013jdev/common/OBEConnection.htm 3. Start JDeveloper. Double-click the JDeveloper executable (jdeveloper.exe) found in the root directory where you installed it.

If the Migrate User Settings dialog box opens, click No. Close the Tip of the Day window and the Start page. Back to Topic List

Creating a Database Connection
If you haven't already created a JDBC connection to the HR schema, then perform the following steps: 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. If 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. Select Deploy password.

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 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 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 build in this tutorial. Back to Topic List Building the Data Model with TopLink The business model provides data access and validation for an application. When data is managed by the business model, the data is always validated by the model, regardless of the client implementation. This cleanly separates the validation and business rules from the user interface. To create an application in JDeveloper and create a TopLink model for the application, you will perform the following tasks: Create a New Application and Projects Create the Data Model using Oracle Toplink Create an EJB Session Bean and ADF Data Controls Back to Topic List Create a New Application and Projects In JDeveloper, you always work with projects contained in an application.

The application is the highest level in the JDeveloper control structure. It is a view of all related objects you need while working. An application keeps track of your projects while you are developing Java programs. A JDeveloper project is an organization structure used to logically group related files. You can add multiple projects to an application in order to organize, access, modify, and reuse your source code. In the Applications Navigator, projects are displayed in the second level in the hierarchy, as subnodes of the application. Before you create any application components, you must first create the application and an initial project. To do this, perform the following steps: 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 MDToplink. Notice that as you enter the application name, the directory name changes automatically. Enter oracle.datamodel as the Application Package Prefix. Select the No Template [All Technologies] value from the Application Template drop-down list. Click OK.

3. The Create Project dialog is displayed. Enter DataModel as the Project Name, and then click OK.

4. Having created a project for the data model, you now create a new project for the client (user interface). Create another project at the same level as the DataModel project. In the Applications Navigator, right-click the MDToplink node and select New Project from the context menu.

5. In the New Gallery, verify that Empty Project is selected and click OK.

6. In the Create Project dialog, enter UserInterface as the Project Name and click OK.

7. In the Applications Navigator, right-click the UserInterface project and select Project Properties from the context menu.

8. In the Project Properties window, select the Project Content node in the tree at the left. At the bottom of the Project content panel, set the Default Package to oracle.view.

9. Still in the Project Properties window, select the Technology Scope node in the tree at the left. In the Available Technologies list, select JSF and click Add Technologies list. to shuttle it to the Selected

Note: Adding JSF to the techonology scope automatically adds Java and JSP and Servlets as well. Click OK. Separating the data model and the user interface into different projects and packages enables you to better manage classes and files. Click Save All on the toolbar to save your work. Alternatively, you can select File | Save All

from the menu. The Applications Navigator should look like the image below. You are now ready to create application components for the tutorial.

Back to Topic Back to Topic List Creating the Data Model Using Oracle TopLink Oracle TopLink provides Java object-to-relational persistence, enabling you to create Java objects for accessing and persisting relational data. Oracle Application Development Framework (ADF) enables you use these TopLink objects in your user interface through ADF data controls. These data controls enable client applications to use the data without concern for the underlying technology choice (in this case, Oracle TopLink). To create the data model for your application, perform the following steps: 1. In the Applications Navigator, right-click the DataModel project and select New from the context menu.

2. In the New Gallery, expand the Business Tier node in the Categories tree and select TopLink. Select Java Objects from Tables in the Items list and click OK.

3. If the Welcome page of the Create Java Objects from Tables wizard displays, click Next. TopLink requires a TopLink map file for each project. This file contains information about how classes are mapped to database tables. Once the TopLink objects are created, you can edit this file to make changes to the default mappings. The wizard helps you to create a new map for your project. On the Select DB Connection page of the wizard, click the New button for the TopLink Map property.

4. In the Create Object-Relational Map dialog, set the TopLink Map Name to HRMap and ensure that the Connection is set to hrconn. Click OK.

5. JDeveloper displays a progress indicator as it creates the map file. When control returns to the wizard, click Next.

6. On the Select Tables page of the wizard, you select the tables that you want represented as TopLink objects. Click Query to display the available tables. In the Available list, select DEPARTMENTS and EMPLOYEES, then click Add the selected tables to the Selected list. to move

Click Next. 7. On the General Options page of the wizard, confirm that the package name is oracle.datamodel. If not, then modify it. Click Next.

8. The Specify Object Details page of the wizard enables you to edit the class name and source directory for each Java class being generated. Accept the defaults by clicking Next.

9. On the Summary page of the wizard, click Finish to create the Java objects.

10. Click Save All from the menu.

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

In the Applications Navigator, expand Application Sources and its subnodes. You can see the Java files and the TopLink map file that the wizard created for you.

You have created TopLink POJOs (Plain Old Java Objects) for the Departments and Employees tables from the HR schema. The .java files contain the code for the attribute definitions, constructors, getters and setters. Back to Topic Back to Topic List Creating an EJB Session Bean and ADF Data Controls In this section, you create an Enterprise JavaBean (EJB) session bean to serve as the basis for data controls in the application. Data controls represent the plumbing between the data model and any client components. You could create a data control based directly on the TopLink persistence objects. However, in this tutorial you use an EJB session facade to access the TopLink objects, so the EJB session bean provides the interface for this plumbing to occur. Session beans encapsulate business logic and business data while exposing the necessary interfaces. As such, the client tier can make use of the distributed services within the model without concern for its complexity. The session bean in this tutorial is made up of two files:
• •

HRPublicFacadeBean.java - contains the session code and implements the local interface HRPublicFacadeLocal.java - a local interface containing code to query and persist data

To make use of the TopLink POJOs and HRPublicFacadeBean, after creating the session bean you create a data control for the objects defined in the TopLink map (HRMap). To create a session bean named HRPublicFacade in the oracle.datamodel package, and to create a data control from that bean, perform the following steps:

1. In the Applications Navigator, right-click the DataModel 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 Session Bean and click OK.

3. If the Welcome page of the Create Session Bean wizard displays, click Next. On the EJB Name and Options page of the wizard, set the values to those shown below. Field EJB Name Session Type Transaction Type Generate Session Façade Methods Entity Implementation Value
HRPublicFacade Stateless Container Check box selected (so that methods to query and persist data are generated) TopLink POJOs option selected (because you are using TopLink POJOs as the basis of the data model)

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 would need a stateful session bean only 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.

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

5. On the Class Definitions page of the wizard, ensure that Bean Class is set to oracle.datamodel.HRPublicFacadeBean. The default directory is acceptable. Click Next.

6. On the EJB Component Interfaces page of the wizard:
• •

Deselect Implement a Remote Interface. (Remote interfaces are needed to use a command line test client, which is not required here). Ensure that Implement a Local Interface is selected. This allows the web client to run in the same Java Virtual Machine (JVM).

Click Next.

Click Finish to complete the process. 7. The new HRPublicFacadeBean class opens in the editor. In the Structure window, expand the Methods node and double-click findAllDepartments() to locate that method in the HRPublicFacadeBean.java file that is displayed in the editor window. In that method, uncomment the line beginning with results by removing the two leading forward slashes. You are uncommenting the code because the application edits the results of this method.

Note: If you cannot see the Structure window, select View | Structure from the JDeveloper menu. 8. In the Applications Navigator, expand the DataModel project, then expand Application Sources and the oracle.datamodel package. Right-click HRPublicFacadeBean.java and select Create Data Control from the context menu.

Click Save All

on the JDeveloper toolbar, or select File | Save All from the menu. Back to Topic Back to Topic List

Defining the Page Flow
When you created the application, you created it with two projects: DataModel and UserInterface. The DataModel project contains the TopLink data controls that serve as the business model for your application. The UserInterface project is for the view portion of your application, which defines the user interface components. You will now begin to define the user interface. You use JDeveloper's JSF Navigation Diagram to plan and create your application's pages and to define the navigation between them. To diagram the page flow of the application, perform the following steps: 1. In the Applications Navigator, right-click the UserInterface project and select Open JSF Navigation from the context menu.

2. 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. 3. Rename the page deptEmp 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].

4. In a similar fashion, add another JSF Page to the diagram next to the previous one. Rename the page editEmp.

5. Select JSF Navigation Case in the Component Palette. Click the source page (deptEmp), and then click the destination page (editEmp) to create a navigation case.

6. Modify the default label, 'success', by clicking it and typing edit over it. Alternatively, you can change the value of the From Outcome property in the Property Inspector to edit. When you press [Enter] or click elsewhere, the value in the diagram changes as well. JDeveloper adds the leading hyphen to the diagram automatically.

7. Click the Overview tab at the bottom of the editor. Select Navigation Rules in the list on the left side. Notice that the rule you just created in the diagram is listed in the table.

Click the Source tab. The <from-view-id> tag identifies the source page and the <to-view-id> tag identifies the destination page. The wavy lines under the page names remind you that the pages have not yet been created.

8. Switch back to the diagram view by clicking the Diagram tab. Select JSF Navigation Case in the Component Palette. Click the source page (editEmp), and then click the destination page (deptEmp) to create another navigation case.

9. Modify the default label to commit, either by typing over it or by changing the From Outcome property in the Property Inspector.

10. Click Save All

to save your work.

Your diagram should now look something like the image below.

Back to Topic List

Creating a Master-Detail JavaServer Faces (JSF) Page
In this section, you use ADF Faces components to create a master-detail JSF page that displays departments and their associated employees. Oracle ADF Faces is a rich set of user interface components based on the new JavaServer Faces JSR (JSR-127). These components are various user-interface elements with built-in functionality that can be customized and re-used in your application. Examples of such components include data tables, hierarchical tables, and color and date pickers. To create the page, perform the following steps: 1. On the JSF Navigation Diagram, double-click deptEmp.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. 2. On the Component Binding page, select the Automatically Expose UI Components in a New Managed Bean option. Leave other values as their defaults and click Next.

3. Ensure that the libraries shown below are in the Selected Libraries list. JSF Core 1.0 JSF HTML 1.0 ADF Faces Components ADF Faces HTML If they are not, 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 these libraries that you need in order to create the ADF Faces components on your page. 4. Click Next to accept the default HTML options, then click Finish to create the new JSF JSP.

The empty deptEmp.jspx page opens in the editor. In the next few steps, you add a data-bound ADF Faces component to the page. This component displays a department and its employees. 5. In the Component Palette, select ADF Faces Core from the dropdown list. Select the panelPage component and click the page editor.

Note: If you do not see the Component Palette displayed to the right of the editor window, select View | Component Palette from the JDeveloper menu.

6. The panelPage component is a layout for an entire page. It provides placeholders for various facets that you may want to use in your application. In this application, you need only the Title. If not defined, the other facets will not show up at run time. In the Property Inspector, change the Title value for the panelPage to Department/Employees. When you press [Enter] or click elsewhere, the title on the diagram changes.

7. Click the Data Control Palette tab (if you do not see this tab next to the Components tab, then select View | Data Control Palette from the menu). Expand the HRPublicFacadeLocal, findAllDepartments(), and Departments nodes. Select the departmentCollection node. This represents the nested collection of employees for departments. Drag and drop the departmentCollection onto the panelPage...

...and from the dynamic menu select the Create Master-Details | ADF Master Form, Detail Table.

Acknowledge the message in the Client Project Libraries Added dialog by clicking OK. 8. JDeveloper adds the ADF Master Detail component to your JSF page. The page should now look like this:

The master form has default navigation buttons and the detail table has a default Submit button. 9. Select the Submit button on the page. In the Property Inspector, change the value of the Text property to Edit. Notice that the label on the button changes when you press [Enter] or click elsewhere. From the dropdown list for the Action property, select edit. Note that this action corresponds to the name of the From Outcome in the navigation case from this page to the editEmp page that you defined earlier in the JSF Navigation Diagram. This ensures the use of that navigation case

when the user clicks the button, so that navigation from this page to the editEmp page occurs.

10. In the Structure window, expand the af:panelGroup node. Select the af:panelHeader - oracle.datamodel.Departments component ...

...and in the Property Inspector set the Text attribute to Departments. The header for that panel changes on the page.

11. In a similar fashion, set the Text property of the af:panelHeader - departmentCollection component to Employees, thus changing the header for that panel.

Click Save All to save your work. You now have a complete JSF JSP that is databound to the TopLink business services. Back to Topic List

Creating an Employee Edit JavaServer Faces Page
In this section, you use ADF Faces components to create a page where employee details can be edited. To create the page, perform the following steps: 1. Switch back to the JSF Navigation Diagram by clicking the faces-config.xml tab in the editor. If you have closed the diagram, you can reopen it by right-clicking the UserInterface project and selecting Open JSF Navigation from the context menu. Click the Diagram tab at the bottom of the editor, then double-click editEmp.jsp to begin creating the page.

2. If the Welcome page of the Create JSF JSP wizard displays, click Next. On the JSP File page of the wizard, for Type select the JSP Document option. Then click Next to continue.

3. On the Component Binding page, select the Automatically Expose UI Components in a New Managed Bean option. Default the other values and click Next.

4. Ensure that the libraries shown below are in the Selected Libraries list. JSF Core 1.0 JSF HTML 1.0 ADF Faces Components ADF Faces HTML If they are not, 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 differ from those shown. Click Next to accept these libraries.

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

The empty editEmp.jspx page opens in the editor. 6. Click the Components (or Component Palette) tab. In the Component Palette, ensure that ADF Faces Core is selected in the dropdown list. Select the panelPage component and click the page editor.

7. In the Property Inspector, change the Title value for the panelPage to Employee Details.

8. Click the Data Controls tab. Select the departmentCollection node under findallDepartments | Departments and drag it to the Panel Page...

... and from the dynamic menu select Create Forms | ADF Form.

9. In the Edit Form Fields dialog, select the Include Submit Button option and click OK.

The edit table is now populated with default values and a Submit button.

10. Now you add a method to enable users to commit changes. TopLink implements a commit in the mergeEntity() method. Drag the mergeEntity(Object) method from the Data Control Palette to the Submit button in the editor...

... and from the dynamic menu, select Bind Existing CommandButton.

11. In the Action Binding Editor dialog, double-click the Parameters: Value field, then click Edit next to the Parameter Value. In the Variables dialog, expand ADF Bindings, bindings, departmentCollectionIterator, and

currentRow. Select dataProvider and click the right arrow OK. to shuttle it to the Expression field. Then click

Click OK to dismiss the Action Binding Editor dialog. 12. Select the mergeEntity button in the editor. In the Property Inspector, set the Text property to Save Changes and select commit from the Action dropdown list. Note that this action corresponds to the name of the From Outcome in the navigation case from this page to the deptEmp page that you defined earlier in the JSF Navigation diagram. This ensures the use of that navigation case when the user clicks the button, so that navigation from this page to the deptEmp page occurs.

Click Save All

to save your work. Back to Topic List

Running the Application
Now that you have built your new ADF Faces application, you need to test it. JDeveloper makes it easy to test JSF applications through a built-in J2EE server. This OC4J server is automatically launched when you test a page from within JDeveloper. To complete the testing process, perform the following steps. 1. Right-click deptEmp.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. Test the navigation buttons at the master form level and navigate to a department with more than one employee.

3. In the Employee table, select one of the employees and click Edit.

4. As specified by the navigation case that you defined in the JSF Navigation Diagram, the editEmp.jspx page that is labeled Employee Details is now displayed. Modify the email address for the employee (for example, change from PFAY to PATFAY) and click Save Changes .

5. As specified by the navigation case that you defined in the JSF Navigation Diagram, the deptEmp.jspx page that is labeled Department/Employees is now displayed.

Note that the new value for the employee is now reflected in the detail table. 6. Now check that the update was performed against the database. In JDeveloper, click the Connections tab. Expand the Database, hrconn, HR, and Tables nodes. Double-click the EMPLOYEES table to open it in the editor. Click the Data tab and locate the record of the employee whose data you updated, to confirm that the update was committed to the database.

Back to Topic List Summary

In this tutorial, you created a simple end-to-end application by using JDeveloper, Oracle TopLink, and ADF Faces. You learned how to: Use TopLink and EJB to create the business model and session facade Create a JSF Navigation Diagram to specify pages and navigation Create a master-detail page that uses ADF Faces components to show departments and related employees Create a related page to edit employee details and commit changes Test the application

Build a Web Application with ADF Business Components and JavaServer Faces
Purpose In this tutorial, you use Oracle JDeveloper 10g and ADF Business Components to build a web application. ADF Business Components is used to build the data model, and JavaServer Faces is used for the web client, which will include a master-detail page, a search page and an edit page.

Overview
The application reflects the Model-View-Controller architecture. The model is provided by ADF Business Components, while the view and controller are provided by JavaServer Faces. You will be using the JSF-standard ADF Faces component library to build a nicelooking web user interface. ADF Faces is a set of JSF components that provide simple to complex data-aware controls. You will first build the data model portion of the application. This is where you place middle-tier business logic and validation rules. The ADF Model layer provides the declarative data binding between the three layers (model-view-controller). You will then create a master-detail form for viewing customer information along with the orders they have placed. Following this basic master-detail page creation, you will create more complex pages including features such as a Search and Edit function. While developing and testing the application, you will use the convenient, embedded J2EE application server that Oracle JDeveloper 10g provides. When the application is complete, it can be deployed to Oracle Application Server 10g or another J2EE application server.

Back to Topic List

Prerequisites
Before starting the tutorial, you should: 1. Have access to or have installed Oracle JDeveloper 10g Studio Edition Release 3 (10.1.3) Production. You can download it from Oracle Technology Network. 2. Have access to or have installed Oracle Database 10g (Release 2 or Release 1). You can download it from Oracle Technology Network (http://www.oracle.com/technology/software/products/database/oracle10g/index.html). 3. Have access to or have installed the Oracle Sample Schemas. This OBE uses the OE schema included in the Sample Schemas set, as provided with Oracle Database 10g. Instructions for acquiring and installing the Sample Schemas and creating a database connection in JDeveloper are available online at: http://www.oracle.com/technology/obe/obe1013jdev/common/OBEConnection.htm 4. 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. Close the Tip of the Day window.

Back to Topic List

Creating a Database Connection
Java Database Connectivity (JDBC) is a standard application programming interface (API) that is used for connecting a Java application to relational databases. JDeveloper uses a connection navigator to maintain connection information for your application. The connection navigator makes it easy to create, manage, and test database connections.

If you haven't already established a connection to the database, then do so by performing the following steps: 1. Click the Connections tab on the Applications Navigator. 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. In the Create Database Connection Wizard, review the information on the Welcome page and then click Next.

4. In the Connection Name field, enter oeconn. Click Next to continue.

5. On the Authentication page: enter oe in the Username field and oe in the Password field. Select Deploy password. Note: It is secure to deploy the password since it gets encrypted.

Click Next to continue. 6. On the Connections page, the default values for the connection should be the following: Driver: thin Host name: localhost JDBC Port: 1521

SID: ORCL Leave the fields set to these default values.

Click Next to continue. 7. Click Test Connection. If the database is available and the connection details are correct, you 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 will supply data for the application you build in this tutorial. The next section uses this connection. Back to Topic List Building the Data Model with ADF Business Components The data model provides data access and validation for an application. The data is always validated by the model, regardless of the client implementation. This cleanly separates the validation and business rules from the user interface. In the next few steps, you create an application in JDeveloper and create a Business Components model for your application. Create a New Application and Projects Create Business Components Customize the Business Components Views Back to Topic List

Create a New Application and Projects In JDeveloper, you always work with projects contained in an application. The application is the highest point in the control structure. A JDeveloper project is an organization structure used to logically group related files You can add multiple projects to your application to easily organize, access, modify, and reuse your source code. In the Applications Navigator, projects are displayed as the second level in the hierarchy, under the application. Before you create any components, you must first create the application and a project. To do this, perform the following steps: 1. Click the Applications 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 OrderEntry. Notice that as you enter the application name, the directory name changes automatically. Enter orderentry as the Application Package Prefix. For the Application Template, select the Web Application[JSF, ADF BC] value from the Application Template drop-down list.

Click OK. 3. The Application should contain two projects: Model and ViewController

You now have an application and projects to contain and manage your application. In the next few steps, you define the model for your application.

Back to Topic Creating Business Components from Tables

In this section, you create ADF Business Components based on tables in the database. You use the oeconn database connection, which you created earlier. You create these objects in the Model project. 1. In the Applications Navigator, right-click the Model project and select New from the context menu.

2. In the New Gallery, expand Business Tier and select Business Components in the Categories list. Select Business Components from Tables in the Items list.

Click OK. 3. In the Business Components Project Initialization window, select the oeconn connection from the Connection list, and then click OK.

4. If the Welcome page of the Create Business Components wizard appears, click Next. If no package name is specified when creating the application, by default it takes the project name which is model. Note: An ADF Entity Object is a Java component that represents a row in an underlying database table as a domain business object in your J2EE application. It encapsulates the business rules for that domain object and automatically handles saving any change made by the user back to the database. If you are familiar with Oracle Forms, the entity object provides functionality similar to the Oracle Forms record manager, but with the ability to associate encapsulated business rules with each type of 'business record' structure. Select OE from the Schema drop down list. Click Query to populate the list of available tables. Control-click to select both CUSTOMERS and ORDERS in the Available list.

Click the Add button

to shuttle both tables to the Selected list.

Click Next to continue. 5. On the "Updatable View Objects" page of the Create Business Components Wizard, select both Entity objects and click the Add button to shuttle both tables to the Selected list.

Note: An ADF View Object is a Java component that represents a SQL query against one or more underlying tables. It allows you to project, join, filter, and sort business information in exactly the way the end-user needs to see it for the user interface you need to provide to your end users. When related to underlying ADF Entity Objects, the view object allows users to create, update, and remove rows with automatic enforcement of business rules. If you are familiar with Oracle Forms, the view object provides functionality similar to the Oracle Forms Data Block, but adds the flexibility to finely tune the SQL query and to automatically leverage centralized business rules encapsulated by the entity object.

Click Next. 6. Skip the "Read-only View Objects" page of the wizard by clicking Next. You will only be using view objects that can be updated.

7. On the Application Module page of the wizard, name the application module OrderEntryAM. Note: An ADF Application Module is a Java component that represents a transactional data model of master/detail-related view object queries. It allows client interface technologies of any kind in a service-oriented architecture to easily manipulate the business information exposed by the view object instances contained in its data model. If you are familiar with Oracle Forms, the application module provides the functionality of a transactional data container similar to the Oracle Forms Form object, but is designed to allow any kind of user interface to work with the data in its view object 'data blocks'.

Click Next. 8. JDeveloper provides several different techniques for managing components. One is to use a diagram of the components and their relationships. In this step, JDeveloper provides such a diagram option. For this tutorial, you will not use this option. Click Next to continue.

9. The final page of the Business Components Wizard shows the objects and relationships that will be created. Click Finish to complete the wizard actions.

10. The Applications Navigator should now look like this:

Using the far right button of the toolbar in the navigator pane, sorts elements by type.

Back to Topic Customizing the Business Components Views In the previous sections, you created some default Business Components from two tables (Customers and Orders). The default view objects expose all of the columns from those tables. For your application, you want to expose only a few of those columns. ADF BC allows you to easily customize those objects to fit your specific application needs. In the following steps, you remove some of the exposed attributes from the CustomersView view object. 1. In the Applications Navigator, right-click the CustomersView node and select Edit

CustomersView from the context menu.

2. Select the Attributes node to show all the attributes in the view object.

3. In the Selected pane of the View Object Editor, control-click all of the attributes except: CustomerId CustFirstName CustLastName CustEmail

4. Use the Remove button

to shuttle the selected attributes from the Selected list.

5. Next, you will add an Order By clause to the CustomersView to make sure the returned data is sorted by customer ID. Select the SQL Statement node.

6. Enter Customers.CUSTOMER_ID in the Order By field near the bottom of the SQL Statement pane.

Click OK to apply the changes and exit the View Object Editor.

7. Click the Save All menu.

icon on the JDeveloper menu bar, or select File > Save All from the

You have now customized the Customers view to meet the specific needs of your application. The next step is to create a web client that uses the OrderEntry model. Back to Topic Back to Topic List

Creating a Master-Detail JavaServer Faces Page
Conforming to the JSF standards, ADF Faces lets you concentrate on the application and layout rather than markup language and tags. Due to the integration of ADF Faces and ADF Business Components, you can easily change the default field labels for the user interface from within ADF Business Components. In the next few steps, you create an ADF Faces application based on the ADF BC model that you just built. You also modify some of the ADF BC default settings to help enhance the default UI. 1. When you created the application, two projects were defined: Model and ViewController. The Model project contains the business components that serve as the data model for your application. The ViewController project will include the View portion of your application, which defines the user interface. Collapse the Model node so that the Applications Navigator appear as follows:

2. Create a new JSF by right-clicking ViewController in the Applications Navigator and selecting New from the context menu.

3. Select JSF JSP from the JSF Category.

4. Selecting a new JSF opens the Create JSF JSP Wizard. Click Next to skip the Welcome page of the JSF JSP Wizard (if it appears).

5. Name the new JSP CustomerOrders.jsp. Accept the other defaults and click Next to continue.

6. On the next page, Component Binding, select the Do Not Automatically Expose UI Components option. Leave other default values and click Next.

7. Select libraries in the Available Libraries window, and use the Add button to shuttle them into the Selected Libraries section, as needed. Make sure the following libraries appear in Selected Libraries: JSF Core 1.0 JSF HTML 1.0 ADF Faces Components ADF Faces HTML

Click Next to accept these libraries. 8. Click Finish to accept the default HTML options and create the new JSP.

You now have an empty CustomerOrders.jsp page. In the next few steps, you add a data-bound ADF Faces component to the page. This component displays a customer along with the orders that the customer has placed. 9. When you created the CustomerOrders.jsp page, JDeveloper opened it in a visual editor in the center of the JDeveloper IDE. You add the ADF Faces components by dragging them from either the Component Palette or the Data Control Palette to the visual editor. Here you will drop some databound components based on the view objects you created earlier using the Data

Control Palette. First, expand OrderEntryDataAMControl in the Data Control palette.

10. Expand CustomersView1.

Note: By default, the Business Components from Tables wizard noticed the foreign key relationships between the ORDERS and CUSTOMER tables and created a default data model in the OrderEntryDataAM's data model that features both an OrdersView1, allowing us to see all orders, as well as an OrdersView2 which is linked with the OrdersView1 showing all of the customers. In this scenario, we'll use the CustomersView1 and the OrdersView2 which will display customers and each customer's set of orders. 11. Drag OrdersView2 to the visual editor. JDeveloper opens a context menu with the available options for that data control.

12. Place your cursor over the Master-Details option, and then select ADF Master Form, Detail Table.

13. JDeveloper adds the ADF Master Detail component to your JSF page.

You now have a complete JSF that is databound to your ADF BC business services. In the next section, you will test your new application.

Back to Topic List

Running the JSF Page

Now that you have built your new ADF Faces application, you need to test it. JDeveloper makes it easy to test JSF through a built-in OC4J server. The server is automatically launched when you test a page from within JDeveloper. The next few steps take you through the testing process. 1. To test the page, right-click CustomerOrders.jsp in the Applications Navigator and select Run from the context menu. (You can also right-click inside the visual editor and select Run from that context menu.)

2. Your page should look like the following:

Note: JDeveloper will open your default web browser and display the page. If this doesn't happen, visit the Tools > Preferences and select the Web Browser and Proxy category. Here you can enter the command line to your preferred browser. Then, try running the page again after setting this preference. 3. Navigate through the customer rows to see the differences in the orders that each customer has placed. Note that the first few customers in the list have multiple orders. When you are finished, close the browser.

Back to Topic List

Using Business Components Control Hints
Now that you have a working version of a JSF application, let's spend a moment to customize some of the labels on the page. You created the page using default values for all of the layout components. This is a good way to start, but you will probably want to have more control over the complete page. The field labels on your page are not hard-coded, but rather are derived at runtime. The values for those fields are retrieved from ADF Business Components definitions at runtime. ADF BC provides a way to customize those runtime properties. One of the properties you can modify is called Control Hints. These Control Hints allow you to

create display properties such as label, field size, and format mask that will be rendered at runtime by ADF Faces. In the next few steps, you will modify the Control Hints for the CustomersView object and retest your application to see those changes applied. 1. The changes you are about to make are in the Model project. Select the CustomersView in the Applications Navigator (Model > Application Sources > orderentry.model).

2. Right-click CustomersView and select Edit CustomersView from the context menu.

3. Select and expand the Attributes node.

4. Select CustomerId in the Attributes list.

5. Click the Control Hints tab.

6. Enter a value such as Customer ID: in the Label Text field. This now becomes the field label for the CustomerID field.

7. Click the following fields and add the text to the Label Text field (just as you did for CustomerId). CustFirstName CustLastName CustEmail First Name: Last Name: Email:

Click OK to accept and apply your changes. Note: the supplied control hints can be translated into other locales and then ADF runtime will use the labels appropriate to the current user based on their browser's language settings. 8. Right-click CustomerOrders.jsp in the View project and select Run from the context menu.

9. Notice that your page uses the field labels you just added to the CustomersView object. Because of the integration of the ADF components, you didn't need to change anything in the view.

Back to Topic List

Adding ADF Business Components to the Data Model In this part of the tutorial, you add business components to the existing data model to add view objects to the application module's data model to support a Search page and a related Edit page. The Search page is based on a join of information between Customers and Orders. In the next few steps, you add business components in the data model. Create a View Object based on a SQL Statement (I) Create a View Object based on a SQL Statement (II) Create a New View object for the Search page Refine the View Objects and Update the Application Module Back to Topic List

Creating a View Object Based on a SQL Statement (I) In this section, you create a read-only View Component, based on a SQL statement, that queries the Promotions table. The view object provides the available values stored in the Promotions table. These values will be used as a Drop Down list in the Edit page. 1. In the Applications Navigator, right-click the Model project and select New from the context menu.

2. In the New Gallery, expand Business Tier and select ADF Business Components in the Categories list. Select View Object in the Item pane.

Click OK. 3. Click Next to skip the Welcome page of the Create View Object wizard. In Step 1 name the view PromotionsLOV. Check the Rows Populated by a SQL Query option and choose ReadOnly Access.

Click Next to continue. 4. In Step 2 enter the following Query Statement: SELECT Promotions.PROMO_ID, Promotions.PROMO_NAME FROM PROMOTIONS Promotions ORDER BY Promotions.PROMO_NAME Click the Test button to validate the SQL statement. Then Next and Finish.

5. The Applications Navigator should now look like this:

Back to Topic Back to Topic List

Creating a View Object based on a SQL statement (II) In this section, you create a read-only View Component based on a SQL statement that makes up the authorized values for the Mode column of the Orders table. These values will be used as a Drop Down list in an Edit page. 1. In the Applications Navigator, right-click the Model project and select New from the context menu.

2. In the New Gallery, expand Business Tier and select Business Components in the Categories list. Select View Object in the Item pane.

Click OK. 3. Click Next to skip the Welcome page of the Create View Object wizard. In Step 1 name the view ModelLOV, check the Rows Populated by a SQL query option and choose Read-Only Access.

Click Next to continue. 4. In Step 2 enter the following Query Statement: select 'direct' as modevalue from dual union all select 'online' from dual

order by 1 Click the Test button to validate the SQL statement. Then click Next twice and Finish.

5. The Applications Navigator should now look like this:

Back to Topic Back to Topic List

Creating a New View Object for the SearchOrders Page In the following steps, you create a view object to present data from both the Customer and Orders entity objects. The wizard will automatically create the appropriate join query between their underlying database tables. 1. In the Applications Navigator, right-click the Model node and select New from the context Menu.

2. In the New Gallery, expand Business Tier and select Business Components in the Categories list. Select View Object in the Item pane.

Then OK. 3. Click Next to skip the Welcome page of the Create View Object wizard. In Step 1 name the view SearchOrders Check the Rows Populated by a SQL Query option, and choose Updatable Access through Entity Objects access.

Click Next 4. In Step 2 Select the Orders Entity object and click the Add button to shuttle the selection, then select Customers and click the Add button to shuttle the selection. Note: it is important to follow the above order for shuttling the selected entities.

Click Next 5. In Step 3, click the Attributes node and select the following attributes: Orders.OrderId Orders.OrderTotal Customers.CustomerId Customers.CustFirstName Customers.CustLastName

Click the Add button

to shuttle the selection.

then Next 6. In Step 4, select the OrderId attribute, note that it is automatically marked as a Key Attribute because it is the key attribute of the underlying Orders entity object. Since each row of this query is uniquely identified by this OrderId you can remove the optional key attributes that are contributed by the underlying Customers entity object. Select the CustomerId attribute from the dropdown list and uncheck the Key Attribute check box.

Click Next 7. Now we want to provide a search page that allows the end user to search on a customer's first name or last name in a case-insensitive way, as well as search for orders whose order total falls in a given range. In this step, you will add a custom WHERE clause to the view object that references named bind variables for the parameters we'd like the user to be able to supply at runtime. You will reference the bind variables here, and then formally define the bind variables names, data types, and default values, in the next step of the wizard. In Step 5 click the ExpertMode check Box and in the query statement dialog, add the following code at the end of the statement: AND ORDER_TOTAL BETWEEN :TotalLow AND :TotalHigh AND (UPPER(CUST_FIRST_NAME) LIKE UPPER(:CustName) ||'%' OR UPPER(CUST_LAST_NAME) LIKE UPPER(:CustName)||'%') Click the Test button to make sure the SQL statement is valid. Click Next twice.

8. In Step 7 use the new button to create create three named bind variables with the following properties:
Name CustName TotalLow TotalHigh Type String Number Number Default 0 50000

9. You can define control hints for the named bind variables as you did earlier for view object attributes. Select the CustName variable and click the Control Hints tab. Type Customer Name in the label text field

10. For TotalLow type Order Total Greater Than in the label text field

11. For TotalHigh type Order Total Lower Than in the label text field

Click Finish 12. The Applications Navigator now looks like this:

Back to Topic Back to Topic List Refining the View Objects and Updating the Application Module 1. Right click the SearchOrders node in the Applications Navigator and select the Edit option from the context menu.

2. Next, you add a format mask so that the OrderTotal displays as a currency value. Expand the Attributes node, select OrderTotal and In the Control Hints tab set the Format Type to Currency.

Click OK Note: Since the format is specified at the view object level, only components using this specific view definition will inherit this Format definition. 3. Right click the Orders Entity Object node in the Applications Navigator, and select the Edit option from the context menu.

4. Expand the Attributes node, select OrderDate and in the Control Hints tab set the Format Type to Simple Date and specify the following format: dd-MMM-yyyy

Click OK Note: Since the format is specified at the entity object level, all views based on this entity definition will inherit this Format definition. 5. In the Applications Navigator, right click the OrderEntryAM and select Edit from the context menu.

6. You need to include instances of the new view object components in the application module's data model. In the Application Module Editor, select the Data Model node and in the list of available objects, select ModelLOV. Click the Add button to shuttle the selection in the Data Model pane. Repeat the shuttle operation for SearchOrders, and PromotionsLOV.

Then click OK. Note: the Instance Name field can be used to change the name of the selected view object instance in the data model. 7. Click the Save All menu.

icon on the JDeveloper menu bar, or select File > Save All from the

8. You have now customized the SearchOrders view to meet the specific needs of your application. The next step is to create JSF pages that use this data model.

Back to Topic

Back to Topic List Creating the Search Page In the next few steps, you create an ADF Faces page based on the ADF BC model using the SearchOrders view that you just defined. 1. In the Applications Navigator, collapse the Model project and expand the View one. Double click the faces-config.xml node to open a diagram.

Note: Alternatively, you can right click the ViewController node and select the Open JSF Navigation option from the context menu. 2. From the component palette,drag and drop a JSF page icon onto the diagram.

3. Rename the page Search.

Double click the JSF page icon to launch the page creation wizard. 4. Selecting a new JSF opens the Create JSF JSP Wizard. Click Next to skip the Welcome page (if it appears) of the JSF JSP Wizard. 5. Select JSP Page (*.JSP) as the type for the Search.jsp. Accept the other defaults.

Click Next to continue. 6. On the new page, Component Binding, select the Do Not Automatically Expose UI Components option. Leave other values to their defaults.

Click Next. 7. Select libraries in the Available Libraries window and use the Add button to shuttle them into the Selected Libraries section. Make sure the following libraries are selected: JSF Core 1.0 JSF HTML 1.0 ADF Faces Components ADF Faces HTML

Click Next to accept these libraries. 8. Click Finish to accept the default HTML options and create the new JSP. You now have an empty Search.jsp page.

In the next few steps, you add data-bound ADF Faces components to the page. These components display search criteria for retrieving the rows that match the selection criteria. 9. In the Data Control palette, expand the following nodes OrderEntryAMDataControl > SearchOrders1 > Operations and select the ExecuteWithParams action.

10. Drag and Drop the ExecuteWithParams onto the page and in the context menu, select Create > Parameters > ADF Parameter Forms...

The Edit Form Fields dialog opens.

Click OK.

The page displays in the editor.

11. In the Data Control palette, select SearchOrders1 and Drag and Drop it below the parameters form.

12. In the new dialog, select Create > Tables > ADF Read Only Table

13. In the Edit Table Columns dialog, click the Enable Selection and Enable Sorting boxes

then click OK.

You now have a complete JSF Page that is databound to your ADF BC business services. 14. Click the Green Arrow

in the toolbar to run the Search page.

15. Experiment with the Search page, specifying values for Customer Name, Total Low and Total High fields, then click the ExecuteWithParams button.

Note: the search on the customer name is case-insensitive and matches either in the first name or the last name, based on how we specified our WHERE clause in the underlying view object. In a real application you could easily rename the ExecuteWithParams button to "Find" or "Search" using the property inspector.

16. Try various Search combinations. Test the sorting facility by clicking in the header of any column. A second click in the header switches the order from ascending to descending and vice versa. Close the browser window when finished. Back to Topic List

Creating an Edit Page
In the next few steps, you create an ADF Faces page based on the ADF BC model using the Orders , PromotionsLOV and ModelLOV views that you just built. 1. In the Applications Navigator, double click the faces-config.xmlnode to open a diagram.

2. From the component palette, drag and drop a JSF page icon on the diagram.

3. Rename the page EditOrder.

Double click the EditOrder JSF page icon to launch the wizard. 4. Selecting a new JSF opens the Create JSF JSP Wizard. Click Next to skip the Welcome page of the JSF JSP Wizard. 5. The JSP standard supports creating pages that are well-formed XML documents. These can be especially handy because they allow the page's source to be easily parsed using XML tools, and they encourage the best practice of not mixing code into your page. JDeveloper supports working with either *.jsp pages or these XML-based *.jspx pages. In this step, you will build the edit page using a so-called JSP Document, the XML-based style of a JSP page. Select JSP Document (*.JSPX) as the type for the EditOrder.jspx. Accept other defaults

click Next to continue.

6. On the next page, Component Binding, select the Do Not Automatically Expose UI Components option. Leave other values to default.

click Next. 7. Select libraries in the Available Libraries window and use the Add button to shuttle them into the Selected Libraries section, to ensure that the following libraries are included: JSF Core 1.0 JSF HTML 1.0 ADF Faces Components ADF Faces HTML

Click Next to accept these libraries. Click Finish to accept the default HTML options and create the new JSPX. 8. You now have an empty EditOrder.jspx page. In the next few steps, you add data-bound ADF Faces components to the page. These components display Orders information using various UI representation. 9. In the Data Control palette, expand the OrderEntryAMDataControl node and Drag and Drop the OrdersView1 on the empty page.

10. in the new dialog, select Create > Forms > ADF Form...

11. In the Edit Form Fields, delete the OrderMode and PromotionId attributes, and check the Include Submit Button.

Click OK. 12. From the Data Controls palette, expand the OrdersView1 and drag and drop the OrderMode attribute on the page after the Order Total.label field.

In the context menu, select Create > Single Selections > ADF Select One Choice...

13. In the List Binding Editor, select the Dynamic List option. Notice that in this specific case, because the number of values is small, you could also use the Fixed List option and then specify the list of allowed values.

In the List Data Source, click the Add button and in the Add Data Source Editor select the ModelLOV1 data control, then click OK.

Set the Base Data Source to OrderMode and List DataSource Attribute to Modevalue. In the List Items, set the display attribute to Modevalue and in the No Selection Item choose Include Blank Item.

Then click OK. 14. From the Data Controls palette, select the PromotionId column and drag and drop the PromotionId attribute on the page after the OrderMode.label field.

From the context menu, select Create > Single Selections > ADF Select One Choice...

15. In the List Binding Editor, select the Dynamic List option.

In the List Data Source, click the Add button and in the Add Data Source Editor, select the PromotionsLOV1 data control, and click OK.

Set the List DataSource Attribute to PromoId. In the List Items section, set the display attribute to PromoName and set the No Selection Item to Include Blank Item.

Click OK. 16. Reopen the faces-config diagram, and in the component palette select the JSF Navigation Case. Click the Search page and draw a line to the EditOrder page.

17. In the Property pane, set the From Outcome to edit to rename the navigation.

18. In the component palette select the JSF Navigation Case. Click the EditOrder page and draw a line to the Search page.

19. On the diagram, select the success label for the outcome and change its value to search, to rename the outcome navigation.

20. Reopen the EditOrder page and in the Data Control palette, scroll down to the bottom, open the Operations node and drag and drop the Commit action on the existing Submit button.

In the context menu, choose the Bind Existing CommandButton option.

In the property pane, for the Commit button, set the action value to search from the drop down list. Then select the Disabled property and click the Reset to Default false value. This makes the commit button always selectable. icon to populate the

21. In the Data Controls palette in the Operations node, drag and drop the Rollback action next to the Commit button.

In the context menu, choose the ADF Command Button option

In the property pane, for the Rollback button, set the action value to search from the drop down list. Then select the Disabled property and click the Reset to Default false value. This makes the rollback button always selectable. icon to populate the

22. Double click the Search icon on the diagram to open the Search page, then select the Submit button.

23. In the property pane, type Edit as the Text value and for the Action select edit from the drop down list.

24. Reopen the faces-config, then select and run the Search page.

25. In the Search Page, select one of the rows, then click the Edit button

26. Notice that the Edit page is called, but is not displaying the selected row from the search page. Had the Search page and the Edit page both been based on the same view object, the selected row in the Search page would also be the current row in the Edit page. However, since the Search page and the Edit page are based on different view objects, the current row in one is independent of the current row in the other. In the next section you will configure the declarative steps to synchronize the current, selected row in the Search page with the current row to edit in the Edit page. Test the drop down lists on the OrderMode and PromotionId attributes

Note that the Orderdate is displayed according to the format you specified earlier at the Entity object level, but OrderTotal does not display the currency format as in the Search page because the format was defined on the SearchOrders view and not on the OrdersV1 view. 27. Close the browser to return to JDeveloper.

Back to Topic List

Synchronizing the Pages
Now you have to synchronize the information selected in the Search page with that displayed in the Edit page.

You accomplish the synchronization by having the Edit button, in the search page, assign the key of the currently selected row to a variable that the edit page will then consult to set it's current row before displaying the page. The next few steps take you through this process. 1. Open the Search page in the Design editor and select the Edit button.

2. ADF Faces makes it simple and declarative to have the clicking of a link or a button automatically set the value of some application variable. In this step, we'll add a SetActionListener component to the Edit button in the search page to set a variable to the value of the currently selected row's key which uniquely identifies the row. In the Structure pane, right click the edit commandButton and from the context menu select Insert Inside > ADF Faces Core > SetActionListener

3. In the Insert SetActionListener dialog, enter the following values:
From To #{row.rowKeyStr} #{processScope.orderKey}

Click OK Note: We use the standard JSF expression language (EL) syntax to specify that From and the To properties of the SetActionListener. At runtime, the From expression is evaluated, and then that value is used to set the property or attribute identified by the To expression. The #{row.rowKeyStr} expression refers to the property named rowKeyStr on the current row of the table. Its value will be a unique key representing that row. The #{processScope.orderKey} expression refers to an attribute named 'orderKey' in the ADF Faces process scope. The process scope holds attributes whose values need to last longer than a single request -- as might be the case when one page navigates to another using a redirect instead of a forward -- and whose values should be confined to a given set of related web pages. The name 'orderKey' is a name that we've invented ourselves, to make it clear that this attribute is holding the key to the currently selected

order. 4. In the following steps, you will configure the Edit page to declaratively set the current row to edit when the page is first displayed by using the built-in setCurrentRowWithKey action provided for any by the ADF Model layer. This is configured in the page's data binding metadata that is stored in the ADF page definition for each page. In the Applications Navigator, right click the EditOrder page node. From the context menu, select Go to Page Definition option

5. Next, you add a setCurrentRowWithKey action binding for the OrdersView1Iterator. This iterator was created automatically in the page definition when we initially dropped the ADF Form from the Data Control palette. The iterator keeps track of the current row in the underlying datasource, and provides numerous built-in operations that are useful while building user interfaces like Next, Previous, setCurrentRowWithKey, and others. Right click the bindings node. From the context menu, choose Insert Inside bindings > action

6. In the Action Binding Editor, in the Select an Iterator field, select the OrdersView1Iterator from the drop down list at the bottom of the dialog.

7. In the Select an Action, choose setCurrentRowWithKey from the drop down list and double click within the Value field. Then enter the following value: #{processScope.orderKey}

Then click OK Note: The built-in setCurrentRowWithKey action takes one parameter named 'rowKey that represents the key of the row you want to make current. Recall in a previous step, we configured the Search page's (Edit) button to store the current row's key in an attribute named 'orderKey' in the ADF Faces process scope. So here, we need to pass that row key value as the parameter to the setCurrentRowWithKey action. To do this, we simply use the same EL

expression as the value of the parameter: #{processScope.orderKey}. 8. Click the Save All menu.

icon on the JDeveloper menu bar, or select File > Save All from the

9. In the Structure pane, right click the executables node and select Insert inside executables > invokeAction option from the context menu

10. On it's own, an action binding in the page definition will not perform its action until it's instructed to. The action binding can be invoked in one of three ways: 1. It can be invoked programmatically by code you would write, 2. It can be invoked declaratively when the user clicks a button or a link in a page, 3. It can be invoked declaratively when the page is rendered, without requiring the user to click on anything In this case, we want the setCurrentRowWithKey action to occur automatically when the page is loaded, so we will configure an invokeAction instruction in the "executables" section of the page definition to accomplish this in a declarative way. In the Insert InvokeAction dialog, enter the following values:
Id Binds setCurrentRowFromOrderId setCurrentRowWithKey (from the drop down list)

Note: Id name can be any meaningful name the developer wants. Click the Advanced Properties tab. Note: By default, the "invokeAction" will execute each time the page is rendered. This includes both when the page is initially rendered, as well as when it is rendered after handling subsequent "postback" events, such as when the user interacts with buttons or links on the page. We can declaratively configure when the invokeAction should "fire" by specifying an optional RefreshCondition using a boolean-valued EL expression. When the expression evaluates to true, the invokeAction will invoke its related action binding. When the expression evaluates to false, the invokeAction is skipped and the related action binding is not invoked.

Since we want the setCurrentRowWithKey action binding to trigger only when the page is initially rendered, but not when it handles postback events later, we can use the EL expression #{adfFacesContext.postback == false} to accomplish the job. When the page is initially rendered, this postback property will be false. Enter the following values:
Refresh Refresh Condition ifNeeded ${adfFacesContext.postback==false}

Click OK 11. Select the Search page and Run it

12. Specify search parameters in the Search page and execute the query, clicking the ExecuteWithParams button. In the detail list, select a row and click the Edit button to call the EditOrder page.

13. In the EditOrder page, change the OrderTotal value and commit your changes.

14. The Search page now redisplays the rows of your original search request. The update previously made is also reflected in the page.

Well done! You've successfully completed this OBE.

Back to Topic List

Summary In this tutorial, you created an end-to-end application by using Oracle JDeveloper, ADF Business Components, and ADF Faces. You learned how to: Create an ADF Business Components model Create a JavaServer Faces page with ADF Faces components Use ADF Business Components to customize elements of the UI Run and test the ADF Faces application Use Business Components Control Hints to customize your application Create new Business Components for LOVs and Validation control Create a Search page base on a join operation Create an Edit page Synchronize the Edit page with the Search Page when they are based on different view objects

Build Rich Client Forms in JDeveloper using ADF Swing and ADF Business Components
Purpose In this tutorial, you use JDeveloper 10g Release 3 to quickly build ADF Swing forms. ADF Business Components is used to build the data model. You can use ADF Swing to build rich client applications if your application requires immediate response to user input or for events that change the user display. This is also true for complex user interfaces that have multiple master-detail dependencies displayed on one screen. Applications that need to perform immediate item validation, which could be based on complex logic, also find better support in Swing than on the web. Another reason for using Swing clients is when, for business reasons, applications require to work offline, disconnected from the network.

Overview
In this tutorial, you are going to build a Swing application with ADF Swing that leverages ADF Business Components as a business service. Though not in the focus of this exercise, ADF Swing applications can also be built on top of business services like EJB, Web Services, TopLink, POJOs etc. The steps to develop an application with ADF Swing are similar. First in this OBE, you create an ADF Business Component model as a persistence layer that contains the business logic and the validation rules. Using ADF Swing, you build a master-detail Swing application that displays customer information along with their placed orders. ADF Swing applications that use ADF Business Components can be deployed in a 2-tier and 3-tier architecture. For this tutorial, you will run and test the application locally using the JDeveloper embedded Java Runtime Enviroment (JRE). ADF Swing is a binding layer that connects standard Swing components to the Oracle Application Development Framework (ADF) binding layer. Through ADF, applications use a consistent client API to access the various business services mentioned above. ADF Swing provides a productivity advantage to all application developers that need to build scalable client-server applications for their enterprises. Back to Topic List

Prerequisites
Before starting the tutorial, you should: 1. Have access to or have installed Oracle JDeveloper 10g Studio Edition Release 3 (10.1.3) Production. You can download it from Oracle Technology Network. 2. Have access to or have installed Oracle Database 10g (Release 2 or Release 1). You can download it from Oracle Technology Network (http://www.oracle.com/technology/software/products/database/oracle10g/index.html). 3. Have access to or have installed the sample schemas. This OBE uses the HR schema included with Oracle Database 10g . Instructions for installing the HR schema and creating a connection to it in JDeveloper are available online at: http://www.oracle.com/technology/obe/obe1013jdev/common/OBEConnection.htm

4. 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. Close the Tip of the Day window.

Back to Topic List

Creating a Database Connection
Java Database Connectivity (JDBC) is a standard application programming interface (API) that is used for connecting a Java application to relational databases. JDeveloper uses a connection navigator to maintain connection information for your application. The connection navigator makes it easy to create, manage, and test database connections. If you haven't already created a JDBC connection to the HR schema, then perform the following steps: 1. Click the Connections tab on the Applications Navigator. 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. In the Create Database Connection Wizard, review the information on the Welcome page and then click Next.

4. In the Connection Name field, enter hrconn.

Click Next to continue. 5. On the Authentication page: enter hr in the Username field and hr in the Password field. Select Deploy password.

Click Next to continue. 6. On the Connections page, the default values for the connection should be the following: Driver: thin Host name: localhost JDBC Port: 1521 SID: ORCL Leave the fields set to these default values.

Click Next to continue. 7. Click Test Connection. If the database is available and the connection details are correct, you 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.

8. You have just created a connection to the database that will supply data for the application you build in this tutorial. The next steps use this connection to manage the details of connecting to the database so that you can concentrate on business logic instead of JDBC calls.

Back to Topic List Building the Business Model with ADF Business Components The business model provides data access and validation for an application. When the data is managed by the business model, the data is always validated by the model, regardless of the client implementation. This cleanly separates the validation and business rules from the user interface. The ADF Business Components model provides data access, validation services, and business logic. Storing business logic in the model layer enables you to reuse the same logic with different application client. As a recommended practice, business logic should be kept separate from the display logic, which you would implement in the ADF Swing client. In the next few steps, you create an ADF Business Components model for the application. Create a New Application and Projects Create Business Components Back to Topic List Create a New Application and Projects In JDeveloper, you always work with projects contained in an application. The application is the highest level in the control structure. It is a view of all the objects you need while you are working. An application keeps track of your projects while you are developing your Java programs. A JDeveloper project is an organization structure used to logically group related files. You can add multiple projects to your application to easily organize, access, modify, and reuse your source code. In the Applications Navigator, projects are displayed as the second level in the hierarchy under the application.

Note that it is considered best practices to use projects to separate the model code from the code written for the view. In this hands-on we will create one project for the ADF Business Components model, and a second one later for the ADF Swing client. Before you create any application components, you must first create the application and project. To do this, perform the following steps: 1. Click the Applications 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 ADFSwing. Notice that as you enter the application name, the directory name changes automatically. Enter swing.sample as the Application Package Prefix. For the Application Template, select the Java Application[Swing, ADF BC] value from the Application Template drop-down list.

Click OK. 3. The Application has now two projects: Model and View.

4. You now have an application and projects to contain and help manage your application. In the next few steps, you create a model for your application.

Back to Topic Creating Business Components from Tables In this section, you create ADF Business Components based on tables in the database. You use the hrconn database connection, which you created earlier. You create these objects in the Model project. 1. In the Applications Navigator, right-click the Model project and select New from the context

menu.

2. In the New Gallery, expand Business Tier and select ADF Business Components in the Categories list. Select Business Components from Tables in the Items list.

Click OK. 3. In the Business Components Project Initialization window, select the hrconn connection from the Connection list, and then click OK.

4. If the Welcome page of the Create Business Components wizard appears, click Next. In step 1 of the of the Create Business Components Wizard, verify that the package name is set to swing.sample.model. Select HR from the Schema drop-down list and select the Tables option as the Object Type. Click Query to populate the list of available tables. Control-click to select both DEPARTMENTS and EMPLOYEES in the Available list. Click the Add button to shuttle both tables to the Selected list.

Click Next to continue. 5. On step 2 of the Create Business Components Wizard, select both Entity objects and click the Add button to shuttle both tables to the Selected list.

Select each Updatable View Object in the Selected pane and change the Object Name to DepartmentsVO and EmployeesVO.

Click Next. 6. In step 3 of the wizard, click the Query button. Select the DEPARTMENTS table and click the Add button to shuttle the selection in the Selected list.

Change the View Name field to DepartmentsLOV. Then Next.

7. In step 4 of the wizard, name the application module HRAppModule.

Click Next. 8. JDeveloper provides several different techniques for managing components. One is to use a diagram of the components and their relationships. In this step, you can choose to have JDeveloper create a diagram of the components that you are creating. For our example, we skip this step. Click Next to continue.

9. The final page of the Business Components Wizard shows the objects and relationships that are created when you click Finish. Click Finish to complete the wizard.

10. The Applications Navigator should now look like this:

Back to Topic Back to Topic List

Creating a Master-Detail ADF Swing Form
In the next few steps, you create a Master-Detail ADF Swing Form: Creating the Master Part Creating the Detail Part Adding a Combo box to a Detail attribute Back to Topic List Creating the Master Part 1. When you created the application for this tutorial, you created it with two projects: Model and View. The Model project contains the ADF Business Components that serve as the business model for your application. The View project will include the View portion of your application, which defines the User Interface components. The Applications Navigator should appear as follows:

2. Create a new ADF Swing form by right-clicking View in the Applications Navigator and selecting New from the context menu.

3. Expand the Client Tier node and select Empty Form from the ADF Swing Category.

Click OK. Note: Empty Form is used to create an empty Java client frame. The frame that the wizard generates will contain ADF Swing-specific application bootstrapping code. This code initializes the ADF Swing application and binds it to the ADF binding layer that accesses the ADF Business Components. As a Swing developer, you don't need to change this code. 4. Selecting a new Empty Form opens the Create ADF Swing Empty Form Wizard. Click Next to skip the Welcome page of the Wizard (if it appears).

5. Name the new form MDForm. Accept the other defaults and click Next to continue.

Click Finish. 6. The Empty Form opens in the Design editor.

7. Select the default navigation bar and delete it. Note: The default navigation bar is generic and operates on any table or form that is added to a Java panel. For this application, you create two navigation bars that are specifically created for distinct datacontrols on the panel.

8. Select the Swing frame and open the Property Inspector to set Title of frame to Swing Demo.

9. Click in the middle of the frame to select the DataPanel. Set the layout property in the Property pane to FormLayout. Note: FormLayout places components in a grid of columns and rows, allowing specified components to span multiple columns or rows.

In the new dialog set the following properties - Number of rows 8 - Number of columns 3 - Click OK.

The new form should look like this:

10. Open the Data Controls palette, and drag and drop the DepartmentsVO1 in the top left cell.

From the context menu select the Add Child > Navigation Bar option

Select the Scrollbar and drag the right most blue marker to size the scrollbar to span columns 1 to 3.

11. In the Data Controls Palette, expand the DepartmentsVO1 node, select DepartmentId and drag and drop it in the cell on the second column first row (below the Scrollbar).

In the context menu select Add Child > Text Field

Note: You can set an ADF attribute binding on basic UI components that you insert from the Data Control Palette. Use a TextField to display plain text in a single line. 12. Repeat the previous step for DepartmentName and LocationId. Your form should look like this:

13. Open the Component Palette in JDeveloper (Ctrl+Shift+P) and select the ADF Swing Controls library. Drag and drop a JULabel component in the first column in front of the DepartmentId text field.

14. Repeat the previous step to add a JULabel in front of the two other text fields.

15. Right click the top left JULabel and select the Create Binding > Label For option from the context menu.

Note: The JULabel control can be bound to the metadata defined either on the Business Component Entity Object or View Object (display attribute) or the ADF metadata (used with EJB, POJO or Web Services controls to define display attributes). 16. In the Attribute Binding Editor, expand the HRAppModuleDataControl node, select the DepartmentsVO1 and select the DepartmentId attribute.

Click OK.

17. Repeat steps 15 and 16 (Create Binding > Label For) to map JULabel2 to DepartmentName and JULabel3 to LocationId.

18 From the Data Controls palette, drop DepartmentsVO1 to column 3, row 1. From the context . menu, select Add Child > Scrollbar.

19 Drag on the blue marker to size the scrollbar to span rows 1-3 .

20 Right click the scroll bar component and select Column Properties from the context menu. .

Set the size to Constant Size with a value of 12 dialog unit.

Click OK 21 Right click one of the labels (first column) and select Column Properties from the context . menu. Set the Resize behavior to None.

Click the Save All

icon on the JDeveloper menu bar, or select File > Save All from the menu.

Back to Topic Back to Topic List

Creating the Detail Part Now that you have built the Master part of the form, you add the Detail part. The next few steps take you through the testing process. 1. From the Swing Containers library in the Component Palette, add a JScrollPane to column 1 row 5.

Use the blue markers to span it across rows 6-7 and columns 1-3.

Note: A JScrollPane provides a scrollable view of a component. When screen real estate is limited, use a scroll pane to display a component that is large or one whose size can change dynamically. 2. With the JscrollPane selected, press the toolbar icon for Grow Row

3. From the DataControls Palette, drag and drop EmployeesVO3 onto the JScrollPane. In the context menu, select Add Child > Table

The MDForm should now look like this:

4. In the Applications Navigator, select the MDFormPageDef.xml node and open the Structure pane.

5. Expand the table binding node and double click the DepartmentsVO1EmployeesVO3 to open the binding editor.

In the Display Attributes pane, select all columns except EmployeeId- FirstName- LastNameEmail- DepartmentId and click the Remove Attributes pane. button to shuttle the selection in the Available

Click OK. 6. Close and save the MDForm.java then re-open MDForm.java to see the changes in the visual editor. Your MDForm should now look like this:

7. From the Data Control Pane, Drag and Drop EmployeesVO3 to row 4 in the panel. From the context menu, select the Add Child > NavigationBar option.

Use the blue marker to span it across all 3 columns.

8. Right-click a component from the second column of the FormLayout and choose Column Properties from the context menu.

In the Column Properties dialog, set the Grow property of the Resize section to 1

9. Right-click the MDForm.java node in the Applications Navigator and Run it.

10. Test the Navigation Bar, and the Scroll bar of the Master block. Test the Navigation bar of the detail block.

11. When you are done, close the Panel. Click the Save All menu. icon on the JDeveloper menu bar, or select File > Save All from the

Back to Topic Back to Topic List

Adding a Combo Box to a Detail attribute
Now that you have built the Master-Detail Swing form, you create a listbox for the DepartmentId of the detail form so that Department Name is now displayed in place of the DepartmentId. The listbox lets the user choose one of several choices. To create a list for the DepartmentId, perform the following steps: 1. In the Applications Navigator select the MDFormPaneDef.xml node and in the Structure pane, double click the DepartmentsVo1EmployeesVO3 to open the binding editor.

2. Select the Attributes Properties tab and set the editor property for the DepartmentId to Combo Box. Then press the [...] Edit button to create the binding for the Combo Box.

Click the Create button in the Editor Properties window

3. In the List Binding Editor dialog, Select HRAppModuleDataControl.EmployeesVO3 as the Base Data Source. Press the Add button for the List Data Source and expand the HRAppModuleDataControl node to select DepartmentsLOV1

Map the Base Data Source Attribute DepartmentId to the List Data Source Attribute DepartmentId in the attribute mapping.

Set the DepartmentName as the display attribute. Set the No Selection Item field to Selection Required

Close all editors by pressing OK. 4. Rerun the application and experiment with the combo box.

5. Click the DepartmentId column on one of the details to pop up the Department list of values.

Back to Topic Back to Topic List

Creating an Edit Form
Now that you have built your new Master Detail Swing form, you're going to create an Edit form to display additional information related to the selected Detail record. The next few steps take you through the testing process. 1. In the Applications Navigator, right-click the View node and select the New option from the

context menu.

2. In the New Gallery in the ADF Swing category, select the Empty Panel item.

Click OK. 3. Click Next to skip the Welcome page of the Create ADF Swing dialog, and in Step 1 enter EmployeeEdit as the panel name.

Click Next then Finish 4. The EmployeeEdit panel opens in the Design editor.

5. From the DataControls Palette, drag the EmployeesVO3 to the new panel and choose Add Edit Form option from the context menu.

6. In the opened dialog, set the CommissionPct attribute to be rendered as a Combo Box.

Click OK. 7. Close the EmployeeEdit Design view and reopen it to see the changes.

8. Resize the EmployeesEdit form so that all attributes from the edit form are visible.

9. Double-click the PanelEmployeesVO3Helper.java node in the Applications Navigator to open it in the design editor

10. Select the panel and set the layout property to Vertical Flow Layout

11. Select any edit form label column and right click to select the Column Properties option.

In the Column Properties dialog, set the Resize property to none.

12. Select the combo box component for the CommissionPct and choose Edit ADFm Binding Properties from the context menu.

13. In the List Binding Editor, create a Fixed List, set the Base Data Source attribute to CommissionPct and add the following list of values: .10 .15 .20 .25 .30 .35 .40 .45 .50 .55 .60 .65 .70 .75 Set the No Selection Item to Include Blank Item

Click OK to close the dialog.

14. Select the navigation bar in the panel and open the Property Inspector. Set the following properties:
hasFindButton hasInsertButton hasNavigationButton False False False

15. Open the MDForm panel in the design editor, and drag the EmployeesEdit panel from the Applications Navigator into the last row, first column of the MDForm Panel

16. In the new dialog, choose Display Panel in JDialog and select the option Invoke JDialog from Button

In the Select Option select Display Panel in JDialog > Invoke JDialog From Button. Click OK. 17. Enlarge the button to set to the column width. In the Inspector pane, change the button text property to Edit

18. Double-click the button to navigate to the jButton1_actionPerformed method and change the call to dialog.setSize() to the dialog.setSize(400,500);

19. Run the MDForm, navigate from the master to a detail with many records.

Press the Edit button on one of the detail row to display the EmployeeEdit form for the selected record.

20. Test the Combo Box for CommissionPct.

When you are done, close the Application window. You've successfully completed the ADF Swing tutorial.

Back to Topic List Summary In this tutorial, you created a simple application by using Oracle JDeveloper, ADF Business Components, and ADF Swing. You learned how to: Build the Business Model using ADF Business Components Create a Master-Detail ADF Swing form Create an Edit ADF Swing form

Building a Mobile Browser Application for PDAs with ADF Faces and JDeveloper
Purpose In this tutorial, developers will use JDeveloper 10g Release 3 to design, build, deploy and test an ADF Faces application on a Palm emulator.

Overview
In this tutorial, you learn how to use the mobile features in JDeveloper. You develop a JSF (JavaServer Faces) page within an existing JSF/JSP/EJB 3.0 application, add components to the page, and create a table that binds to an EJB 3.0 Data Control. Also, you run the application in a Web browser using the embedded OC4J server. Then using

the OC4J server, you run the application in a Palm Simulator. The application can then be used through a Palm device. Back to Topic List Back to Topic List

Prerequisites
You will need access to an Oracle 10g RDBMS that contains the sample inventory data. Also, you will need JDeveloper 10.1.3 Studio Edition and the JDeveloper project used in this tutorial. Before you begin the tutorial, perform the following steps if needed: Check software requirements and start JDeveloper Install the Database Parts schema Create a database connection Back to Topic List To check software requirements, perform the following steps: 1. Have access to or have installed Oracle Database 10g (Release 2 or Release 1). You can download it from Oracle Technology Network (http://www.oracle.com/technology/software/products/database/oracle10g/index.html). 2. Have access to or have installed Oracle JDeveloper 10.1.3 Studio Edition. You can download it from Oracle Technology Network (http://www.oracle.com/technology/products/jdev/index.html). 3. Click the following link to access the site where you can download the Palm simulator software. Register to login and download the Palm Simulator on your local disk. Once downloaded, unzip it on your local disk. For those of you using Microsoft® eMbedded Visual C++, Microsoft® eMbedded Visual Basic, or Microsoft® Visual Studio 2005, you can also use the included device simulator for PocketPC devices. 4. Click the following link to access the site where you can download the Web Browser software. Follow the instructions in the documentation on how to install the Web Browser 3.0 in the Palmsimulator.

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

If the Migrate User Settings dialog box opens, click NO. Close the Tip of the Day window. 6. The JDeveloper IDE should now be displayed.

Back to Topic Back to Topic List To create the database schema please perform the following steps: 1. Download sql.zip file and unzip it on your local drive (for example: in C:\OBE_for_Mobile). It will create a new subdirectory sql. 2. Open a Command Prompt window in the newly created sql directory (in our example that will be C:\OBE_for_Mobile\sql\ directory).

3. Connect to the Oracle database using Oracle SQL*Plus as system by typing sqlplus system[@dbname] (for example sqlplus system) 4. Run create_user.sql SQL script and pass two parameters to it: username and password (for example: sql>@@create_user.sql parts welcome

5. Connect to the database as the newly created user.

connect parts/welcome

6. Run create_all.sql SQL script (sql>@@create_all.sql)

Close the command window. Back to Topic Back to Topic List To create a new Database Connection in JDeveloper 1. Click the Connections Navigator tab.

2. Right-click the Database node and select New Database Connection ...

3. The Create Database Connection wizard comes up

Click Next to skip the Welcome page. 4. Change the connection name to partsDB, leave the default value for the Connection Type: Oracle (JDBC), and click Next. Note: The pre-created project uses the partsDB connection name. Hence, you must use that name.

5. Enter the username and password (parts/welcome) for the database user that you created earlier

and click Next.

6. Specify the connection details and click Next.

7. Test the connection by pressing the Test Connection button. If the test does not succeed then go back and fix any problems.

Press Finish to create the connection and close the wizard.

Back to Topic Back to Topic List Opening a Prebuilt Application To upload a prebuilt application with an existing project, perform the following steps: 1. Right click the following link to download the starter application EIM_PDA.zip file on your local disk. Once downloaded, create a directory <JDEV_HOME>\jdev\mywork and unzip EIM_PDA.zip into it. 2. In JDeveloper, select File > Open to load the prebuilt workspace.

In the Open dialog box, select the EIM_PDA.jws file located in the <JDEV_HOME>\jdev\mywork\EIM_Telnet directory. Then click Open.

3. In the Applications Navigator, expand the nodes EIM_PDA > ViewController > Web Content

> WEB-INF and double-click the faces-config.xml file.

4. The editor window displays the flow diagram of the application.

5. The project already includes several pages. The indexPDA.jspx page is the entry point of the application from which the viewInventoryPDA.jspx and reservePartsPDA.jspx pages are callable. In the following section, you will add a new JSF page that displays the part list.

Back to Topic List Create a Basic JSF Page To create a new JSF JSP page, perform the following steps: 1. In the Component Palette, select the JSF Page icon the reservePartsPDA.jspx icon. and click in the diagram below

2. Double-click the new page on the diagram to open the Create JSF JSP Wizard.

Click Next on the Welcome page. 3. In step 1 of the Create JSF JSP Wizard enter listPartsPDA.jspx as the file name (the extension is provided depending on the JSP type you select). Select the JSP Document as the type, and select the Add Mobile Support check box . Leave the default Device category to PDA. Note: In addition to building applications for PDAs, you can use JDeveloper and ADF Faces to

build applications for industrial telnet devices.

Click Next. 4. In Step 2, make sure the Do Not Automatically Expose UI Components in a Managed Bean option is selected.

Click Next, and then in Step 3 click Next again . 5. In step 4, make sure the selected libraries include ADF Faces HTML and ADF Faces Components.

Click Finish. 6. The new JSF page listPartsPDA opens in the editor.

7. You can set the display view for the JSF to a specific mobile type. Expand the drop-down list next to the Palm icon on the editor window and choose Dell-Axim as the type.

The JSF page display should look like this:

Back to Topic List

Adding Components to the JSF Page To add components and databinding elements, perform the following steps: 1. Open the Structure window View > Structure for listPartsPDA.jspx and expand the f:view node.

2. For your purposes, you do not need the html node and its child nodes. Select the html node and press the [Delete] key. You can also right click the html node and select the Delete option from the context menu to complete this step.

After you delete these nodes, the page in the Visual Editor looks a bit different.

3. With the ListPartsPDA.jspx node selected in the Applications Navigator, right click the f:view node in the Structure pane and from the context menus, select Insert inside > ADF Faces HTML > Html.

Note: The components listed/available in these menus are only components supported on PDAs. All components not supported on PDAs are filtered out. 4. Right-click the afh:html node in the Structure pane and from the context menus, select Insert inside > Head.

In the Property palette change the Title attribute from Title 1 to Enterprise Inventory Manager.

5. Right-click the afh:html node in the Structure pane and from the context menus, select Insert inside > Body.

6. Right-click the afh:body node in the Structure pane and from the context menus, select Insert inside > Form.

7. Right-click the af:form node in the Structure window and from the context menus, select Insert inside > PanelPage.

Notice the change in the Design view. The page is displayed using the appropriate design-time renderers.

In the Property palette change the Title attribute of the PanelPage from Title 1 to Enterprise Inventory Manager.

8. Right-click the af:panelPage node in the Structure window and from the context menus, select Insert inside > ADF Faces Core ...

In the Insert ADF Faces Core Item dialog box, select the PanelHeader option, then click OK.

In the Property palette change the Text attribute of the PanelHeader from panelHeader 1 to Parts List.

9. Right-click the af:panelPage node in the Structure window and from the context menus, select

Insert inside > ADF Faces Core...

In the Insert ADF Faces Core Item dialog box, select the OutputFormatted option, and then click OK.

Double-click the OutputFormatted tag in the structure pane and enter <b>The following is the list of available parts</b>.

10. In the structure pane, expand the PanelPage facets node, right-click the menuGlobal entry and from the context menus, select Insert inside > MenuButtons

11. Right-click the af:menuButton tag and from the context menus select Insert inside > CommandMenuItem.

In the Property Inspector set the Text value to Main Menu and the Action value to index.

12. Repeat the previous step to create three additional menuButtons with the following values:
Text List Parts Locate/Reserve Parts Parts Inventory Action list locate inventory

The Structure pane should now look like this:

13. The JSF page display should look like this:

Back to Topic List Adding EJB 3.0 data-bound table using data controls To create a parts list table with all available parts from an EJB 3.0 Session bean follow the steps below: 1. In JDeveloper, go to View > Application Navigator. Expand EIM_PDA > Model > Application Sources > oracle.wireless > demo > part > model. You will see several EJB 3.0 Entity beans and one EJB 3.0 Session bean, InventoryManagerBean.java.

2. Right click the InventoryManagerBean node and select the last item Create Data Control

3. In the EJB Interface Chooser dialog select Local and click OK. This will make several data controls related files.

4. Collapse the model node in the Applications Navigator, and double click the listPartsPDA.jspx under ViewController > Web Content

5. In the Data Controls pane in the top right hand corner, expand InventoryManagerLocal, then expand findAllPart.

6. When you drag the Part object from the Data Controls pane to the panel page in the Structure pane, the following context menu appears.

7. Choose Tables > ADF Read Only Table... option from the menus like shown below:

In the Edit Table Columns dialog, first modify the display labels to match the value bindings (ie. Id, Name, Description). Then move the description field to the bottom by highlighting It and then clicking on the bottom button. When these are complete the dialog should like this:

Now click OK, and a databound table should appear on the design pane of listPartsPDA.jspx.

8. To finish off the formatting of the table, double click the table node in the structure pane, click the Column Summary tab, and for each column change the header to match the column value. So that the headers for the columns should now be Id, Name, and Description respectively. Then go to the formatting tab, and check the Include Range Navigation box, with rows = 5. Then check the Include Table Banding box, click rows and set the banding interval to 1. The dialog will look like this:

After clicking OK, the listPartsPDA.jspx design view will look like this:

Back to Topic List

Add Navigation and Run the Application 1. In the editor window, click the faces-config.xml tab to display the diagram.

2. In the Component Palette, select the Faces Navigation Case icon from the Faces Navigation Diagram group.

3. In the Visual Editor diagram view, click the indexPDA.jspx page, then the listPartsPDA.jspx page. A navigation link is added to the diagram, with a default outcome of success.

Double-click the link and change the from-outcome property to list.

4. In the Applications Navigator, select the indexPDA.jspx page and expand the nodes in the Structure pane.

5. Right-click the af:panelGroup and from the context menus select Insert inside > ADF Faces Core.

6. In the Insert ADF Faces Core Item dialog box, select CommandLink and then click OK.

7. In the Property Inspector, set the Text value to List Parts and the Action value to list.

8. The Structure pane should now look like this:

9. In the Navigator window, click the faces-config.xml tab. Click the Source tab at the bottom of the diagram to display the XML code. Copy the navigation rule cases about the ListParts page and paste it in the navigation rule elements for listPartsPDA from-id. <navigation-rule> <from-view-id>/indexPDA.jspx</from-view-id> <navigation-case> <from-outcome>locate</from-outcome> <to-view-id>/reservePartsPDA.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>inventory</from-outcome> <to-view-id>/viewInventoryPDA.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>list</from-outcome> <to-view-id>/listPartsPDA.jspx</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/reservePartsPDA.jspx</from-view-id> <navigation-case> <from-outcome>index</from-outcome> <to-view-id>/indexPDA.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>list</from-outcome> <to-view-id>/listPartsPDA.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>dialog:listMatching</from-outcome> ...

</navigation-rule>

10. In the editor window, click the Diagram tab to display the diagram. Right-click the indexPDA.jspx icon and select the Run option.

11. The Index page opens in your default browser. Click the List Parts link to open the page you just created.

12. The Parts List page is displayed in your browser.

Don't close the browser window. Back to Topic List Running the Application Using the Palm Simulator 1. Using Windows explorer. Open the following nodes: <palmsimulator_home>\ palsim2 and double-click the PalmSim.exe file to execute the program.

In the Open ROM File dialog, select the Simulator_Full_EFIGS_Release.rom file, then Open.

2. The Palm Simulator starts loading.

Wait until you are prompted to pick a language. Select a language option, and then click OK.

3. After the Applications are loaded, select the Web icon in the Simulator.

4. In the File Types dialog box, all the file types should be selected as the default. Click OK.

5. On the Web Browser screen, click Connect to establish the connection with the running OC4J server.

Wait until you receive a network error message, then click OK.

6. Click in the Web Browser field to display the Open URL screen.

Enter the URL that was displayed in your browser when you ran the application. If you've closed your browser, you can retrieve the URL in the Embedded OC4J server log window in JDev. Note: You must type in the URL; copy and paste doesn't work. Then click OK

7. The Index page should display in the Palm Simulator.

8. Click the List Parts link to open the JSF page you created.

9. You can now work with the application in the Palm Simulator.

Back to Topic List Summary In this tutorial, you created a JSF JSP page, bound data to a table component, and ran the application using the OC4J server in a Web browser and in a Palm Simulator that emulates a mobile environment.

Building a Mobile Application for Telnet Clients with ADF Faces and JDeveloper
Purpose In this tutorial, you use Oracle JDeveloper 10g Release 3 to design, build, test and deploy an ADF Faces application on a Telnet emulator.

Overview
In the tutorial, you learn how to use the mobile features in JDeveloper. You develop a JSF (JavaServer Faces) page within an existing JSF/EJB 3.0 application, add components to the page, and create a table that binds to an EJB 3.0 Data Control. Also, you run the application on a Telnet client using the embedded OC4J server and ITS. The application can then be used on a Telnet device. Back to Topic List

Back to Topic List

Prerequisites
You will need access to Oracle Database 10g, containing the sample inventory data. Also, you will need JDeveloper Release 3 (10.1.3) Studio Edition and the JDeveloper project provided with this tutorial. Before you begin the tutorial, perform the following steps, as needed: Check software requirements and start JDeveloper Install the Database Parts schema Create a database connection Back to Topic List To Check software requirements, perform the following steps: 1. Have access to or have installed Oracle Database 10g (Release 2 or Release 1). You can download it from Oracle Technology Network (http://www.oracle.com/technology/software/products/database/oracle10g/index.html). 2. Have access to or have installed Oracle JDeveloper 10.1.3 Studio Edition. You can download it from Oracle Technology Network (http://www.oracle.com/technology/products/jdev/index.html). 3. Start JDeveloper. Double-click the JDeveloper executable (<JDEV_HOME>\jdeveloper.exe) found in the root directory where you unzipped it.

If the Migrate User Settings dialog box opens, click NO. Close the Tip of the Day window. 4. The JDeveloper IDE should now be displayed.

Back to Topic Back to Topic List

To create the database schema, please perform the following steps: 1. Download the sql.zip file and unzip it on your local drive (for example: in C:\OBE_for_Mobile). It will create a new subdirectory called sql. 2. Open a Command Prompt window in the newly created sql directory (in our example, that will be C:\OBE_for_Mobile\sql\ directory).

3. Connect to the Oracle database using Oracle SQL*Plus as system using sqlplus system[@dbname] (for example: sqlplus system) 4. Run create_user.sql SQL script and pass two parameters to it: username and password (for example: sql>@@create_user.sql parts welcome)

5. Connect to the database as the newly created user. connect parts/welcome

6. Run create_all.sql SQL script (sql>@@create_all.sql)

Close the command window. Back to Topic Back to Topic List To create a new Database Connection in JDeveloper 1. Click the Connections Navigator tab.

2. Right-click the Database node and select New Database Connection ...

3. The Create Database Connection wizard comes up.

Click Next on the Welcome page. 4. Change the connection name to partsDB, leaving the default value for the Connection Type: Oracle (JDBC). Click Next. Note: The precreated project uses the partsDB connection name. Hence, you must use that name.

5. Enter the username and password (parts/welcome) for the database user that you created earlier, and click Next.

6. Specify the connection details and click Next.

7. Test the connection by pressing the Test Connection button. If the test does not succeed then go back and fix any problems.

Press Finish to create the connection and close the wizard.

Back to Topic Back to Topic List

Opening a Prebuilt Application To upload a prebuilt application with an existing project, perform the following steps: 1. Right click the following link to download the starter application EIM_Telnet.zip file on your local disk. Once downloaded, unzip it into the <JDEV_HOME>\dev\mywork directory. 2. In JDeveloper, select File > Open to load the prebuilt workspace.

In the Open dialog box, select the EIM_PDA.jws file located in the <JDEV_HOME>\jdev\mywork\EIM_Telnet directory. Then click Open.

3. In the Navigator, expand the nodes EIM_PDA > ViewController > Web Content > WEB-INF and double-click the faces-config.xml file.

4. The editor window displays the page flow diagram of the application.

5. The project already includes several pages. The indexTelnet.jspx page is the entry point of the application from which the viewInventoryTelnet.jspx and reservePartsTelnet.jspx pages are callable. In the following section, you will add a new JSF page that displays the part list.

Back to Topic List Create a Basic JSF Page To create a new JSF JSP page, perform the following steps: 1. In the Component Palette, select the JSF Page icon and click on the diagram below

the reservePartsTelnet.jspx icon.

2. Double-click the new page on the diagram to open the Create JSF JSP Wizard.

Click Next on the Welcome page. 3. In step 1 of the Create JSF JSP Wizard, enter listPartsTelnet.jspx as the file name (the extension is provided depending on the JSP type you select). Select the JSP Document as the type, and select the Add Mobile Support check box . Change the default Device category to Telnet.

Click Next. 4. In Step 2, make sure the Do Not Automatically Expose UI Components in a Managed Bean option is selected.

Click Next. 5. In step 3, make sure the selected libraries include ADF Faces Components

6. In step 4, set the title of the page to be Enterprise Inventory Manager.

Click Finish. 7. The new JSF page listPartsTelnet opens in the editor.

8. You can set the display view for the JSF to a specific mobile type. Expand the drop-down list next to the Command prompt icon on the editor window and choose Symbol-Pdt6846 as the type.

The JSF page display should look like this:

Back to Topic List

Adding Components to the JSF Page To add components and databinding elements, perform the following steps: 1. Open the Structure window View > Structure for listPartsTelnet.jspx and expand the f:view node.

2. Right-click the af:form node in the Structure window and from the context menus, select Insert inside > PanelPage.

Notice the change in the Design view. The page is displayed using the appropriate design-time renderers.

In the Property palette, change the Title attribute of the panel Page from Title 1 to Enterprise Inventory Manager.

3. Right-click the af:panelPage node in the Structure window and from the context menus, select Insert inside > ADF Faces Core ...

In the Insert ADF Faces Core Item dialog box, select the PanelHeader option, then click OK.

In the Property palette, change the Text attribute of the PanelHeader from panelHeader 1 to Parts List.

4. Right-click the af:panelPage node in the Structure window and from the context menus, select Insert inside > ADF Faces Core...

In the Insert ADF Faces Core Item dialog box, select the OutputText option, and then click OK.

Double-click the OutputText tag in the Structure pane and enter: The following is the list of available parts.

5. The JSF page display should look like this:

Back to Topic List

Adding an EJB 3.0 data-bound table using data controls To create a parts list table with all available parts from an EJB 3.0 Session bean, follow the steps below: 1. In JDeveloper, go to View > Application Navigator. Expand EIM_PDA > Model > Application Sources > oracle.wireless > demo > part > model. You will see several EJB 3.0 Entity beans and one EJB 3.0 Session bean, InventoryManagerBean.java.

2. Right-click the session bean InventoryManagerBean.java and select the Create Data Control option from the context menu

3. In the EJB Interface Chooser dialog, select Local and click OK. This will make several data controls related files.

4. Collapse the Model node in the Applications Navigator, and double click the listPartsTelnet.jspx under ViewController > Web Content

5. In the Data Controls pane in the top right hand corner, expand InventoryManagerLocal, then expand findAllPart and select the Part data control component.

6. Drag the Part object from the Data Controls pane to the panel page in the Structure pane. Then the following context menu appears:

7. Choose Tables > ADF Read-Only Table... option from the menus.

In the Edit Table Columns dialog, first modify the display labels to match the value bindings (ie. Id, name, description). Now move the description field to the bottom by highlighting it and then clicking the bottom button. Finally, change all of the Component to use fields to ADF Output Text. When these are complete, the dialog should look like this:

Now click OK, and a databound table should appear on the design pane of listPartsTelnet.jspx.

8. Fix the table headers by double-clicking the table in the Structure pane, clicking the Column Summary tab, and changing the headers to Id, Name, and Description respectively.

9. After deleting the selection facet, the listPartsTelnet.jspx design view will look like this:

Back to Topic List Adding Navigation and Running the Application 1. In the editor window, click the faces-config.xml tab to display the diagram.

2. In the Component Palette, select the JSF Navigation Case icon from the JSF Navigation Diagram group.

3. In the Visual Editor diagram view, click the indexTelnet.jspx page, then the listPartsTelnet.jspx page. A navigation link is added to the diagram, with a default outcome of success.

Double-click the link and change the from-outcome property to list.

4. In the Applications Navigator, select the indexTelnet.jspx page and expand the nodes in the Structure pane.

5. Right-click the af:panelGroup and from the context menus select Insert inside > ADF Faces Core...

6. In the Insert ADF Faces Core Item dialog box, select CommandLink and then click OK.

7. In the Property Inspector, set the Text value to List Parts and the Action value to list.

8. The Structure pane should now look like this:

9. In the Navigator window under ViewController > Web Content > WEB-INF, double-click the web.xml file. Locate the javax.faces.STATE_SAVING_METHOD parameter and change its value from client to server as shown below.

10. In the editor window, click the Diagram tab to display the diagram. Right-click the indexTelnet.jspx icon and select the Run option.

11. A telnet client should be spawned and the telnet device screen should be shown. In telnet, this is the only way for the server to know what agent is connecting to the application. Simply select the first device Symbol PDT 1 by pressing enter.

12. The Index page is displayed on the telnet client. Press the down arrow to navigate to the List Parts commandLink, and press enter to select it. This opens the List Parts page you just created.

13. The Parts List page is displayed on your telnet client.

Back to Topic List Summary In this tutorial, you created a JSF JSP page, bound data to a table component, and ran the application using a Telnet emulator.