Developing Rich Web Applications With Oracle ADF

This tutorial shows you how to build a rich Web application that interacts with a database. You'll be using Oracle JDeveloper 11g Version 11.1.2 and the Oracle ADF framework to build the application, and in the process you'll work with Oracle ADF Business Components, Oracle ADF Faces Rich Client Components and Oracle ADF Task Flows.

show more or lessRead more...

The tutorial takes you through a simple scenario of building a Web application that provides a user interface to access database tables. You use Oracle JDeveloper 11g Version 11.1.2 and Oracle ADF to create a complete application including business services, user interface and page flows. The focus of the tutorial is to illustrate the visual and declarative approach that Oracle ADF provides for Java EE application development. While working through the tutorial notice how ADF saves you from writing low level code and speeds up your development process.

Before starting this tutorial you should:

  1. Have access to or have installed Oracle JDeveloper 11.1.2. You can download it from Oracle Technology Network. Install it into a directory of your choice, which, in this tutorial is referred to as JDEVELOPER_HOME.

  2. Have access to, or have installed an Oracle 11g database, including the HR schema. (Note that the schema may be locked for security purposes. If this is the case you will need to log in to sqlplus using the system user, and unlock it).

Screenshot of finished app page.
Purpose Duration Application
The application that you create displays information on departments and employees. You create several JSF pages that enable you to query and update the data in the database.
To see the complete application you will create, click the Download button to download a zip of the final application, and then unzip it in your JDeveloper mywork folder.		 2 hours Download applicationname.zip
Part 1: Creating a Fusion Web Application and Building the Business Service

When you work in JDeveloper, you organize your work in projects within an application. JDeveloper provides several template applications that you can use when creating an application and projects. The template applications are pre-configured with a basic set of technologies that are needed for developing the various types of applications, and you create your working environment by selecting the template that best fits your needs. You can then configure it to add any other technologies you plan to use.

In the first part of this tutorial you are going to create a new Fusion Web application and build reusable business components that will access the database.
You'll be using the Oracle ADF Business Components technology to map Java objects to existing tables in your database.

Step 1: Create a Fusion Web Application

  1. Start JDeveloper by selecting Start > Programs > Oracle Fusion Middleware 11.1.2.0.0 > JDeveloper Studio 11.1.2.0.0

    Start menu with JDeveloper Studio 11.1.2.0.0 selected

  2. In the Select Role dialog, choose Studio Developer and click OK.

    JDeveloper Select Role dialog.


    3. Shaping, which is based on the role of the user, allows the JDeveloper environment to tailor itself. It does this by removing unneeded items from the menus, preferences, new gallery, and even individual fields on dialogs. Show more or lessRead more...

    Shaping can even control the default values for fields on dialogs within the tool. When you first start JDeveloper, you are prompted to choose a role that describes how you are going to use JDeveloper. If you choose a role of "Java Developer" versus "Database Developer " versus "Customization Developer " you will get a totally different experience!

    If a dialog box opens asking if you would like to import preferences from a previous JDeveloper installation, click NO. Close the Tip of the Day window.

  3. Once loaded, the JDeveloper IDE appears. The very first time you open JDeveloper, the Start Page displays. You can re-invoke the Start Page later by choosing Help > Start Page.

    Notice the various options available to help you learn about JDeveloper. After exploring some of these options, close the Start Page by clicking the X on its tab (the X appears when you mouse over the tab).
    JDev Start page.

  4. Click the New Application link in the Application Navigator.

    Application Navigator with cursor on New Application.

  5. In the New Gallery, choose Fusion Web Application (ADF) and click OK.

    New gallery with Fusion Web Application selected.

  6. JDeveloper loads the required features for a Fusion Web application and the Create Fusion Web Application (ADF) wizard launches.
    In the Name your application page of the wizard, type HRSystem as the name. If required, you can change the directory path to create your files in another location.
    In the Application Package Prefix field set the value to be demo and click Next.

    Page 1 of Create Fusion Web Application wizard with HRSystem in the Name field.

  7. In the Name your project page ensure that the project name is Model (the default). Notice that ADF Business Components and Java are listed as the project features of a Fusion Web application.

    Step 2 of the wizard with Model highlighted in Name field and cursor over the Next button.

    Click Next.

  8. The Configure Java settings page allows you to define a default package, a Java source path and an output directory. Click Next to accept the default values.

    Page 3 of wizard with demo.model highlighted as the default package.

  9. In the second Name your project page, ensure that the Project Name is ViewController. Scroll through the list of project features to see the types of technologies that can be used with a Fusion Web application.

    Page 4 of wizard with ViewController highlighted as the Project Name

    Click Next.

  10. In the Configure Java settings page accept the defaults and click Finish to create your Fusion Web application and projects.

    Page 5 of the wizard showing the default path settings.

  11. The HRSystem application and the two projects are displayed in the Application Navigator on the left of the screen.

    Application Navigator showing the new application and its two projects. Also Fusion Web app checklist is also displayed to the right of the App Navigator.
    Notice too the Checklist on the right side of the screen.Show more or lessRead more...

    This checklist is displayed by default when a Fusion Web application is created. It is designed as a guide to lead you through the tasks involved in building this type of application. The next steps show you how the checklist might be used while developing an application.
Step 2: Build the Business Service

  1. In the CheckList Overview, click the Connect to a Database step.

    Checklist with the second task - Connect to a Database - selected.

  2. The step expands showing useful information such as prerequisites required for performing the task and detailed instructions on how to perform the task. Click the Create a Database Connection button.

    Checklist with Connect to a Database task expanded and cursor over Create a Database Connection sub-task.

  3. Specify the following properties for the new connection you are creating:

    Connection Name HRConn
    UserName hr
    Password hr

    Enter the appropriate Oracle JDBC Settings to point to the right host, port and SID for your database. Click the Test Connection button to verify that you can connect successfully.

    Create Database Connection dialog with values completed and Test Connection box showing Success!

    Click OK.

  4. Click the down arrow to shrink the Connect to a Database step.

    Checklist with cursor over arrow to shrink the expanded Database step.

  5. In the Checklist, set the status of the Connect to a Database step to Done.

    Checklist with cursor over Done in status drop down list.

  6. Click the Build Business Services step to expand it, then click the Go to Substeps button.

    Checklist with Step 3, Build Business Services step expanded, and cursor over Go to Substeps

  7. In the list of substeps, click the Create Entity Objects and Associations substep.

    As previous step but displaying list of substeps, with substep 3.1 selected.

  8. Click the Create Entity Objects and Associations button.

    Checklist with substep 3.1 expanded and cursor over Create Entity Objects and Associations button.

  9. In the Select Project for Action dialog, select the Model project and click OK.

    Select Project for Action dialog with Model in the Project field.

  10. In the Initialize Business Components Project dialog select the HRConn connection if it is not already selected. Click OK.

    Initialize Business Components Project dialog dialog with HRConn in the Connection field.

  11. The Create Business Components from Tables wizard launches. In the Entity Objects page, click the Query button to examine the data dictionary and see available tables.

    Create Business Components from Tables wizard Step 1 with cursor over Query button.

  12. Select the DEPARTMENTS and EMPLOYEES tables in the Available list, and click the right arrow to move your selections to the Selected list. This step creates updatable entity objects based on the tables selected.

    Wizard with list of available tables in left hand pane with Departments and Employees tables selected.

    Click Next to continue.

  13. In the Entity-based View Objects page of the wizard, move Departments (HR.DEPARTMENTS) and Employees (HR.EMPLOYEES) to the Selected list. This step creates matching view objects DepartmentsView and EmployeesView for performing queries on the entity objects you just created.

    Step 2 of wizard shows DepartmentsView and EmployeesView in the Selected pane.

    Click Next to continue.

  14. In the Query-based View Objects page, click the Query button and then move JOBS to the Selected list. This step creates a read-only view object that queries the Jobs table. Then click Next to continue.

    Step 3 of wizard with JOBS displayed in the Selected pane.

  15. In the Application Module page, click Finish to create the business components in the Model project.

    Step 4 of wizard with Add to Application Module check box checked.

  16. In the Checklist, set the status of the Create Entity Objects and Associations step to Done.

    Checklist showing status drop down list for Create Entity Objects and Associations subtask. The Done option in list is selected.

  17. Click the Close Step 3 button.

    Checklist with cursor over Close Step 3 button.

  18. Click the Back to Checklist link and set the status of the Build Business Services step to Done

    Checklist with status box for the Build Business Services task. The drop down list has Done option selected.

  19. In the Application Navigator right-click AppModule and select Run to invoke the application module tester. This is a small Swing-based application that allows you to test the ADF Business Components you have just created.

    App Navigator with right mouse menu for AppModule. The Run option is selected on the menu.

  20. In the Oracle Business Component Browser window, double-click the EmpDeptFkLink1 node to show the department and employees data. Navigate between the records using the Next button and notice the automatic master-detail synchronization.

    Business Components Browser with EmpDeptFkLink1 selected, showing information about a Department and list of employees belonging to it.

  21. Click the Specify View Criteria button (binocular icon)binocular icon in the master toolbar, to enter search criteria for your data. Specify 1700 in the LocationID field and click the Find button to execute the query.

    Business Component View Criteria dialog showing 1700 in LocationId field.

  22. The form now only shows departments in this location. Use the Next button to scroll through the departments at Location 1700.

    Bus Comps Browser showing details of Department 30 with LocationId of 1700.

    You need to remove the parameter value of the search criteria to access all departments again.

  23. Close the Oracle Business Component Browser window, and back in JDeveloper, click the Save All The SaveAll icon on JDev main toolbar. icon on the JDeveloper menu bar, or select File > Save All from the menu.

Previous 1 2 3 Next
Bookmark Print Expand all | Hide all
Back to top
Copyright © 2011, Oracle and/or its affiliates. All rights reserved.