Oracle JDeveloper 11g Release 2 Tutorials - Charting With ADF Data Visualization Components

12/22/2015 Oracle JDeveloper 11g Release 2 Tutorials Charting with ADF Data Visualization Components

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_1.html 1/21

Charting with ADF Data Visualization ComponentsIn this tutorial, you use the DVT (Data Visualization Tool) components in Oracle ADF to build some graphical representationsof data, such as Bar Charts, Gauges, Gantt charts and Geographical maps. You also explore the use of a pivot table. ADFData Visualization components are a set of rich interactive ADF Faces components that provide significant graphical andtabular capabilities for analyzing data.

The application to build reflects the ModelViewController architecture. The model is provided by EJB Components, while theview and controller are provided by JavaServer Faces.You use the ADF Faces set of JSFcompatible components to build aricher web interface.

Purpose Duration Application

In this tutorial, starting from a predefined application, you use OracleJDeveloper 11g Version 11.1.2.0.0 to build a web application. For the datamodel based on the FOD database schema, you use ADF BusinessComponents. For the web client side, JavaServer Faces (JSF) is used. Youcreate a main masterdetail Order page, then, you improve the UI by addinggraphical components like bar charts, gauge, geographic map, gantt chartand pivot table. To see the completed application you will create, click the Download buttonto download a zip of the final application, and then unzip it in yourJDeveloper mywork folder.

120 minutes

Part 1: Validating the Model and Starting Building the UI

You first install the FOD schema using a dedicated application to build the database requirements for this tutorial. Then youopen a predefined application and validate the Model project that already exists. Finally you start creating a Master/Detail pageusing the ADF Business Components.

Step 1: Create and Populate the Database Schema

Before you start working on your application, you must first create the FOD database schema.

1. Download the FOD schema zip file from OTN or right click the following link and choose Save Link As... from contextto download the fod_11.zip file on a local directory of your choice.

2. Unzip the fod_11.zip file on a local directory of your choice (i.e. temp)

3. Start JDeveloper by selecting Start > All Programs > Oracle Fusion Middleware 11.1.2 > JDeveloper Studio 11.1.2

4. If prompted for a Role, choose Studio Developer (All Features) and click OK.

Building the model with EJB/JPA components. JDeveloper includes stepbystep wizards for creating EJB projects,entities, persistence units, session beans, and messagedriven beans. You can build entities from online or offlinedatabase definitions and from application server data source connections. There is also seamless integration with JPAand TopLink technology to provide a complete persistence package.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/labs/gantt_finished.zip

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/labs/fod_11.zip



5. Close the Tip of the Day window.

6. Click the Open Application link (or from the tool menu, choose File | Open).

Once loaded, the JDeveloper IDE appears. The very first time you open JDeveloper, the Start Page displays. You can reinvoke the Start Page later bychoosing Help | Start Page.

Notice the various options available to help you learn about JDeveloper. After exploring these options, click the Xon the Start Page tab to close it. (the X appears when you mouse over the tab).



7. Locate the workspace infrastructure.jws where you've unzipped the fod_11.zip file. i.e.:d:\temp\FOD_11\Infrastructure.

Click Open. If you are prompted to migrate the project, follow the steps of the migration wizard to proceed.

Migrating a project. In case you open a workspace that was saved with a previous JDeveloper release,JDeveloper needs to migrate it to the latest versions. Accept the migration for the projects by clicking Next on theMigration wizard.

Click Finish to proceed.



8. In the Application Navigator, expand the MasterBuildScript | Resources nodes and doubleclick build.properties toopen it in the editor.

9. Set the appropriate values in the build.properties file (jdeveloper.home, and all the jdbc.* and db.* settings). Therelevant settings are:

Parameter name Value

middleware.home Set the middleware.home variable to the directorywhere you installed JDeveloper i.e.C:/oracle/middleware

jdbc.urlBase Base URI for your database, i.e.,jdbc:oracle:thin:@localhost

jdbc.port Port number for your database, i.e. , 1521

jdbc.sid Database instance name, i.e. ,XE or ORCL

db.adminUser Database user with admin privileges, i.e., system.

db.demoUser Name of database user and schema to be created, i.e. ,fod

db.demoUser.password Password for database user to be created, i.e., fusion

db.demoUser.tablespace Name of the user tablespace, i.e., USERS

db.demoUser.tempTablespace Name of the temporary tablespace, i.e., TEMP

Click OK to dismiss the Migration Status information window.



10. In the MasterBuildScript project, select the build.xml file.

11. In the Structure window, rightclick the refreshSchema target and choose Run Target "refreshSchema".

12. When prompted enter the database system user password.



Click Continue.

13. Verify that the log window doesn't report any major error. It should look like this:

14. Next to the Infrastructure application name, click the down arrow and select Close Application.

Step 2: Get the Starter Application Ready

Before you create any component, you must first open the startup application. To do this, perform the following steps:

1. Download the Gantt.zip file. Right click the following link and choose Save Link As... from context to download thegantt.zip file on a local directory of your choice.

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/labs/gantt.zip



2. Unzip the Gantt.zip file on a local directory of your choice (i.e. temp)

3. From the Application Navigator, click the Open Application link.

4. Locate the workspace c:\temp\Gantt\BrowseEditApp\BrowseEditApp.jws.



Click Open. If you are prompted to migrate the project, click Yes to confirm.

5. You need to create a Database Connection to the FOD schema. To do this, perform the following steps: Right click theModel project node and select Project Properties from context.

Migrating a project. In case you open a workspace that was saved with a previous JDeveloper release,JDeveloper needs to migrate it to the latest versions. Accept the migration for the projects by clicking Next on theMigration wizard.

Click Finish to proceed.

Click OK to dismiss the Migration Status information window.



6. In the Project Properties dialog, select the ADF Business Components node and in the Connection field, click the

Create icon to create a new database connection.

7. Enter a name for the connection, select the connection type, and enter the username and password. To follow alongwith this example, use FOD for the connection name, fod for the username and fusion for the password. Note that thevalues provided here as example may need to be modified to work with your environment.

Property Value

Connection Name FOD

Username/Password fod /fusion

Save Password Checkbox checked

Driver Thin

Host Name The machine where the schema is installed (e.g. localhost)

SIDThe database where the FOD schema is installed (XE, orcl...)



8. Click Test Connection to confirm that you can connect.

Click OK if the connection was successful. Then OK again to dismiss the Project Properties dialog.

9. In the Application Navigator, click the Application Resources accordion to open it.

10. In the Application Resources, expand the Connections and Database nodes to see the FOD connection you justcreated. You can expand the FOD node to view the database objects.

If the connection fails, check that the parameters entered are correct and that the Oracle database and listener services are running.The connection should also appear in the Initialize Business Components Project page.



Step 3: Explore the Starter Application

The starter application uses Orders, OrderItems and ProductsBase entity objects and their corresponding view objects. It alsouses additional view objects that you discover when required to use them. To explore and validate the data model, perform thefollowing steps:

1. Open the Application Navigator and expand the Model project nodes. Notice the existing Entities, Views, Links objectsand the FODModule.

The model project contains all the necessary components needed for the application.

2. To run the module in the tester, in the Application Navigator, rightclick FODModule and choose Run.

Running the FODModule

Wait for the Browser window to open.

3. In the Oracle ADF Model Tester, doubleclick OrdersItemsOrdersFkLink1.

Testing the model.

Oracle JDeveloper provides an easy way to test your business components defined in an application module. Youcan launch the tester by clicking the Run option in the Application Module and the ADF Model Tester opens up.Then select the view component in the hierarchy tree to visualize date retrieved by your entity objects.



4. Use the navigation buttons to browse through the Orders

5. Navigate back and forth to explore data.

The BC Browser.

Notice that you can Insert Update Delete data through the provided default interface and test the validation rulesfor your business components.

You can also Commit or Rollback your changes.



6. Close the Business Component Browser window.

7. Collapse the Model project. Expand the ViewController project nodes. Notice the existing components that arecreated by default when creating a Fusion Web Application.

Step 4: Create the Master Detail Order Page

The ViewController project uses Orders, OrderItems and ProductsBase entity objects and their corresponding view objects. Italso uses additional view objects that you discover when required to use them. To create the Master/Detail page that will beused as a foundation of your UI project, perform the following steps:



1. In the Application Navigator right click the ViewController node and select New from context.

2. In the New Gallery, click the Current Project Features tab, then select the Web Tier | JSF/Facelets category andselect the Page item.

Click OK.

3. Set the File Name field to OrdersAndStocks.



Click OK.

4. The new page opens up in the Design editor. Make sure it's selected.

5. From the Component Palette, using the ADF Faces | Layout library, drag and drop a Panel Tabbed component ontothe page.Use the search box above the component list to find specific components.

6. Select the showDetailItem and in the Property Inspector using the Common node, type MDOrders in the text field.



7. In the Application Navigator, open the Data Controls accordion and expand the FODModuleDataControl node.

8. Drag the OrdersView1 node onto the visual editor, and drop it onto the Page. From the Create context menu, selectForms > ADF Readonly Form.

9. In the Edit Form Fields dialog, check the Include Navigation Controls check box., multi select all the fields, and thenunselect the following ones: OrderId, OrderDate, OrderStatusCode, OrderTotal, and CustomerId. Then click Delete

.



Click OK.

10. In the Data Controls panel, expand the OrdersView1 node. Drag the OrderItemsView2 node onto the lower part of theform.

11. From the Create context menu, select Table > ADF Readonly Table.

More on how to delete fields.

When the list of fields to delete is greater than the list of fields to keep, it's more convenient to multi select all thefields first and then unselect the ones to keep, before clicking the Delete button.



12. In the Edit Table Columns dialog, select both Single Row and Enable Sorting. Multi select all the columns anddeselect the following ones: LineItemId, Quantity, UnitPrice, and ProductName. Then click Delete .

Click OK.

13. With the new table selected, in the Property Inspector, using the Layout tab in the Style node, set the StyleClassproperty to AFStretchWidth.

14. Select the Common tab and type OrdItem as the Id.

Overwriting the default Id



15. The page should look like this:

16. Click Save All icon on the JDeveloper menu bar, (or select File | Save All).

17. Rightclick within the page and select Run from context, or click the Run button to run the page.

18. The page loads up in your browser.

Changing the Id for a more meaningful one will make it easier later on to identify the component you want to relateto.



19. Experiment the Navigation buttons.

20. Try the sorting facility on any of the detail columns.

21. Close the browser window.

At this point you have a working page, you are now going to add graphical components such as bart chart, gauge, ganttchart, geographic info and create a Pivot Table.

Previous 1 2 3 4 Next

http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_58/jdtut_11r2_58_2.html






Copyright © 2011, Oracle and/or its affiliates. All rights reserved.

Documents

Oracle JDeveloper 11g Release 2 Tutorials - Charting With ADF Data Visualization Components