1

Oracle ADF for MS .Net

developers

Created by

Jernej Kase, Managing Director Kase Informatika Reviewed by Demetris Skourides, Regional Program Adoptions Office Manager, EE&CIS

2

Introduction

In October, Oracle released the next version of their free integrated development environment that

simplifies the development of Java-based SOA applications and user interfaces with support for the full development life cycle. It's called JDeveloper 11g.

JDeveloper along with ADF framework and BEA (now Oralce) WebLogic application server provides a development platform that speeds up and simplifies development process.

In this article, we'll compare JDeveloper/ADF to Visual Studio 2008/.Net windows forms and show the advantages of using Jdeveloper/ADF:

the same scenario in Jdeveloper/ADF requires virtually no coding

very simplified form creation

flexible, object oriented data model which provides many features not found in .Net and other platforms

automatic data validation based on model rule set

automatic search form creation

create appealing, skinnable user interface

rich data visualization capabilities

I suggest you take time and complete both example applications described. I'm sure you'll create the Jdeveloper/ADF application much faster even if that's the first time you work with JDeveloper.

Sample applications

We will create a sample business applications in two technologies:

Microsoft .Net using Visual studio 2008 on top of MS Sql server and

Oracle ADF, using Jdeveloper 11g (TP4) on top of Oracle database

Each application will be developed around the platform's sample database, but both applications will have to demonstrate common scenarios:

1. View, create, update and delete records in a master table

2. Use lookup (combo box) from a table

3. View and manage detail records

4. Query (search) records in master table

A .Net sample application

For the .Net sample application, we will use MS Sql 2005 and AdventureWorks database.

Let's start by creating a new project and solution.

3

...A.1 Data Access Layer

1.Next, we will add a Data Access Layer (DAL):

2. We remove the empty class1, which is created by default

3. And now we create the data set for our application

4

4. Next, create a database connection in server explorer

5. Now, define our dataset

1. Drag and drop Employee table from server explorer to the dataset

2. Drag and drop EmployeeAddress from server explorer to the dataset

3. Drag and drop EmployeePayHistory from server explorer to the dataset

5

...A.2 Form

1. Open HrSample windows forms application

2. Open Form1

3. Add a dataset to the form from the toolbox

1. First add reference to the HrSample.DAL project

2. Choose referenced datasets

3. Choose HrSample.DAL.DSHumanResources

4. Name it dsHumanResources

4. Add a binding source from the toolbox to the form and name it bsEmployee

1. open bsEmployee properties

2. open combo next to DataSource

1. Expand Other Data Sources

2. Expand Form1 List Instances

3. Choose dsHumanResources

3. In the bsEmployee properties, click the DataMember combo and choose Employee

6

5. Add a binding navigator to the form, name it bnEmployee, and set its DataSource property to bsEmployee

6. Add data grid view to the form

1. Choose bsEmployee as the Data Source

2. Name the grid gvEmployee

3. Set dock to top

We've created a base for our demo application. You can run it in this stage, but you will notice that the gridView is empty. This is due de fact that we are binding to a dataset, which was never populated.

7

Adding the code:

1. Populate the dataset on load

1. Implement Form1_load event handler and paste the following code:

using (DAL.DSHumanResourcesTableAdapters.EmployeeTableAdapter ta = new

HrSample.DAL.DSHumanResourcesTableAdapters.EmployeeTableAdapter())

{

ta.Fill(dsHumanResources.Employee);

}

To persist the changes we made in the dataset, we need to do the following:

1. Add a „save“ button to the navigator

1. Add a button to the navigator and name it btnSave If you feel like it, you can change the icon to something appropriate

2. Add an OnClick event handler

8

2. Implement code to save changes

gvEmployee.EndEdit();

using (DAL.DSHumanResourcesTableAdapters.EmployeeTableAdapter ta = new

HrSample.DAL.DSHumanResourcesTableAdapters.EmployeeTableAdapter())

{

ta.Update(dsHumanResources.Employee);

}

Now we are almost at the point where we can use our little application, but adding a new record is not very user friendly, as a user would have to type in a whole guid. So let's provide some row initialization:

1. In the Form1_Load handler add the following line:

dsHumanResources.Employee.TableNewRow += new

DataTableNewRowEventHandler(Employee_TableNewRow);

2. Implemenet Employee_TableNewRow handler:

void Employee_TableNewRow(object sender, DataTableNewRowEventArgs e)

{

((DAL.DSHumanResources.EmployeeRow)e.Row).rowguid = System.Guid.NewGuid();

((DAL.DSHumanResources.EmployeeRow)e.Row).ModifiedDate = System.DateTime.Now;

}

At this point, all CRUD operations on employees should work. Actually, database specific rules, implemented in triggers, prevent employee deletion, but that's not really important for our example.

...A.3 Adding lookups

In our employees example, we have two lookup candidates:

ContactID

ManagerID

ContactID

The AdwentureWorks data model has a 1-* relation between Contact and Employee. In a real world

scenario, user interface for such data model would probably be quite different, but for our demo, we will just add a lookup combo.

1. Add the contact table to DSHumanResources by drag-and-drop from the server explorer

1. as we are only interested in contactId and LastName, delete all other columns from the dataset definition

9

2. We need to populate the table when the form is loaded, so add the following code to the Form1_Load event handler:

using (DAL.DSHumanResourcesTableAdapters.ContactTableAdapter ta = new

HrSample.DAL.DSHumanResourcesTableAdapters.ContactTableAdapter())

{

ta.Fill(dsHumanResources.Contact);

}

3. Drag and drop a BindingSource to Form1

1. Name it bsContact

2. Set DataSource to dsHumanResources and DataMember to Contact

4. Click on the arrow in the tool right corner of DataGridView in Form designer

1. Click „Edit columns“

2. In the left panel, click ContactId

3. Change ColumnType property to DataGridViewComboBoxColumn

4. Set DataSource property to bsContact, DisplayMember to LastName and ValueMember to ContactID

5. Click OK

10

ManagerID

We'd also like to choose manager from the lookup combo. Look at the data model. You'll see that ManagerID references EmployeeID in Employee table. That means, we can simple reuse the already populated dataset to choose a manager. However, there's no usable candidate for DisplayMember of combo box. We'd like to display manager's last name in the lookup combo. We've got two options:

a) create another table in dataset, and populate it with join on Employee and Contact tables

b) use a DataColumn Expression to populate that value

We'll go with the option b:

1. Open DSHumanResources

2. Right-click employee table and choose Add->Column

3. Name the column LastName

4. Set the expression to „Parent(FK_Employee_Contact_ContactID).LastName“

11

Now we can simply create ManagerId lookup:

1. Drag and drop a BindingSource to Form1

1. Name it bsManager

2. Set DataSource to dsHumanResources and DataMember to Employee

2. Click on the arrow in the tool right corner of DataGridView in Form designer

1. Click „Edit columns“

2. In the left panel, click ManagerId

3. Change ColumnType property to DataGridViewComboBoxColumn

4. Set DataSource property to bsManager, DisplayMember to LastName and ValueMember to EmployeeID

5. Click OK

Now run and play with the application. Till now we have implemented just 2 requirements.

...A.4 Detail Records

Now we'll add detail records to the form. Our DAL already has them, we just need to show and

manage them.

1. Add tab control below the DataGridView and set its docking to Fill

2. Add DataGridView to tabPage 1. In the Choose Data Source dialog, expand bsEmployee and click FK_EmployeeAddress_Employee_EmployeeId relation. This will create a new binding source for us.

12

3. Dock the grid in parent container and set its name to gvEmployeeAddress

4. Add the following code to Form1_Load event handler:

using (DAL.DSHumanResourcesTableAdapters.EmployeeAddressTableAdapter ta = new

HrSample.DAL.DSHumanResourcesTableAdapters.EmployeeAddressTableAdapter())

{

ta.Fill(dsHumanResources.EmployeeAddress);

}

5. Add DataGridView to tabPage 2. In the Choose Data Source dialog, expand bsEmployee and click FK_EmployeePayHistory_Employee_EmployeeId relation. This will create a new binding source for us.

6. Dock the grid in parent container and set its name to gvEmployeePayHistory

7. Add the following code to Form1_Load event handler:

using (DAL.DSHumanResourcesTableAdapters.EmployeePayHistoryTableAdapter ta = new

HrSample.DAL.DSHumanResourcesTableAdapters.EmployeePayHistoryTableAdapter())

{

ta.Fill(dsHumanResources.EmployeePayHistory);

}

Saving changes for detail records

As the data model behind EmployeeAddress is rather complex, we will demonstrate persisting changes only for EmployeePayHistory.

Because DataSet changes the temporary (negative) ID of master record with the one created by the database in the time of insertion, we have to update detail records after the master record has been updated.

We do this by appending the following code to the btnSave_Click eventHandler:

using (DAL.DSHumanResourcesTableAdapters.EmployeePayHistoryTableAdapter ta = new

HrSample.DAL.DSHumanResourcesTableAdapters.EmployeePayHistoryTableAdapter())

{

ta.Update(dsHumanResources.EmployeePayHistory);

}

For this to work on newly created master records, you have to do the following changes to the DSHumanResources:

13

1. Double click FK_EmployeePayHistory_Employee_EmployeeID

2. Change „Choose what to create“ to „Both Relation and Foreign Key Constraint“

3. Choose „Cascade“ for Update and Delete rules but not for Accept/Reject rule

B ASP.Net example

To compare apples to apples, here's the same example in Asp.net

...B.1 Reusing existing DAL

Asp.net is not very good at using typed DataSets as DAL, which is unfortunate, while DataSets are quite good in-memory (snaphots of) databases.

The only feasible option to use DataSet is by using its table adapters with ObjectDataSource. But in this scenario we have (at least) the following problems:

object data source handles one table at the time, not dataset as a whole

relations (master- detail) which work good with windows forms are not automated

object data source doesn't pass all parameters table adapter expects

All this problems can be worked around by coding, but writing that code is out of scope of this

example. Therefore, the example will use SqlDataAdapters and DAL won't be reused.

...B.2 Step 1: display and edit employees

1. Drag and drop SqlDataSource to the form

1. Configure it to use the same connection as our DAL from previous example

2. Specify columns from Employee table

3. Choose *

4. Click advanced, choose “Generate create, update, delete statements”

5. Switch to source view and change all occurrences of [Employee] to HumanResources.Employee (without []). Note: this is an example of Microsoft technology

14

not working together. Sql server 2005 support schemas, whereas SqlDataAdapted does not.

6. Drag and drop GridView to the page and bind it to sql data source

7. Choose “Enable editing” and “enable sorting”

At this point you can display, edit and delete employee records.

Adding new rows

Note that gridview does not support adding new rows!

The functionality can be implemented by hand, but is out of scope of this comparison. You can find an example implementation at http://geekswithblogs.net/casualjim/articles/51360.aspx

...B.3 Step 2: Adding combo boxes

We'd like ManagerId to be displayed as combo box. Here's how we do it:

1. On the GridView, click “Edit columns”

2. In the “selected fields” list choose “ManagerID”

3. Click “Convert this field into a template”

4. Go to the SourceView

5. Replace EditItemTemplate for managerId with:

<asp:SqlDataSource ID="SqlDataSource2" runat="server"

ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"

SelectCommand="select EmployeeID, LastName+' '+FirstName from

HumanResources.Employee e

inner join Person.Contact c on e.ContactID=c.ContactID

order by LastName+' '+FirstName"></asp:SqlDataSource>

<asp:DropDownList ID="DropDownList1" runat="server"

SelectedValue='<%# Bind("ManagerID") %>' DataSourceID="SqlDataSource2"

DataTextField="Column1" DataValueField="EmployeeID" >

</asp:DropDownList>

You might want to add the same block to the ItemTemplate to show combo box in read only mode as

15

well. Note: I had to add list item with empty value in my example, or I'd get integrity error: <ItemTemplate>

<asp:SqlDataSource ID="SqlDataSource2" runat="server"

ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"

SelectCommand="select EmployeeID, LastName+' '+FirstName

from HumanResources.Employee e

inner join Person.Contact c on e.ContactID=c.ContactID

order by LastName+' '+FirstName"></asp:SqlDataSource>

<asp:DropDownList ID="DropDownList1" runat="server"

SelectedValue='<%# Bind("ManagerID") %>' DataSourceID="SqlDataSource2"

DataTextField="Column1" DataValueField="EmployeeID" AppendDataBoundItems="true"

>

<asp:ListItem Value="">Please Select</asp:ListItem>

</asp:DropDownList>

</ItemTemplate>

...B.4 St

ep 3: implementig master

detail

1. Add another Sql DataSource at the

end of the page

2. Configure it:

1. Chose * from EmployeePayHistory table

2. Click WHERE

3. Select EmployeeID column, equals to (=), Control

4. ControlId: choose id of the master grid

5. Click Add and then OK

6. Finish

7. Go to the source view

8. Change [EmployeePayHistory] to HumanResources.EmployeePayHistory

3. Add GridView at the bottom of the page

1. Bind it to SqlDataSource

4. On the master GridView, enable selection

After performing this steps, you will get a functional master-detail web page.

16

What's left to do

You can complete the example by implementing all CRUD operations and lookups on detail gridView. While you do this, the rest of us will have implemented the whole example in ADF.

...B.5 Comments to the example

This example seems quite simpler than the Windows Forms one, but don't forget:

1. We used quick and dirty data access methods that I wouldn't recommend for any real-life project. We could write a DAL wrapper around the DataSet from the previous example and if we started from scratch, we'd need approximately the same time to implement the whole thing.

2. The example is far from complete. At least record adding has to be implemented, but it's not provided automatically by the platform.

3. In my opinion, there's a lot of work to be done before the application is brought to the same usability level than windows form.

I'm not saying Asp.Net is bad. In the last few years I've been working on many different projects implemented on Asp.Net, from large banking applications, document systems to small utility projects. We always delivered. But sometimes there was a lot of work where you least expected it.

C ADF example

First you'll need:

Jdeveloper 11g, available at http://www.oracle.com/technology/products/jdev/index.html

Oracle Database with Oracle HR schema. You can download Oracle 10g express at http://www.oracle.com/technology/products/database/xe/index.html

After you install both products, start Jdeveloper for the fist time. You'll be asked which role you want Jdeveloper to support. Choose „Default role“ and continue.

17

Welcome to Jdeveloper!

Now let's get down to business. We'll create a sample application using Oracle's HR schema, but the principle will be the same as the .net application we created before.

Let's start by creating an „Application“. Application in Jdeveloper is the same as solution in Visual Studio.

1. Click „New Application“.

2. Write „HrSample“ in application name

18

3. Choose directory of your choice

4. Application package prefix is the same as namespace in c#. By convention, java packages use lower case letters and company name. I'll name mine „net.kinvent.hrsample“

5. Choose Fusion Web Application (ADF) from application template menu

6. Click Finish

Jdeveloper created two projects for us:

1. Model This is the Data Access Layer we'll be using. As java / ADF use MVC technology, it's called „model“.

2. ViewController Is a web application or presentation layer.

...A.1 Model

Next, we'll continue by creating an ADF model using ADF business components.

1. Right click Model project

19

2. Choose new

3. In the categories tree, choose „ADF Business Components“ under „Business Tier“

4. Choose „Business Components from Tables“

5. On the next screen, click the green plus next to connection drop down

6. Here you'll need to specify the connection to your Oracle Database

The screen shot shows Create connection dialog. Please not that you need to input settings right for your environment.

7. After you close the create connection dialog,you should have the connection in the connection combo. Sql flavor and type map should be set to Oracle.

20

Note that business components can also be created using other SQL flavors, including MS SQL

Server and SQL92, so you're not limited to Oracle DB.

8. In the „Create Business Components from Tables“ wizard, click „Query“, and then move all tables to Selected.

9. In the second step, again choose all Entities (Tables)

10. Click Finish

Now let's examine what Jdeveloper just created:

21

Our model is populated with entities, views, and relations (associations and links) among them. You can think of your Model as a DataSet.

There's also an AppModule, which is the entry point or interface from ViewControler to underlying data.

As the in-depth Model description is out of scope of this document, we'll skip that part. You can find documentation and samples on Jdeveloper web page.

Next, expand the „Data controls“ palette:

22

You see here are all views defined and exposed in our Model. But there are also view relations, which we'll see is very useful.

...A.2 Form

1. In the ViewController project, click on faces-config.xml and then drag and drop JSF page from the JSF Diagram objects on the right. Name it employees.jspx.

2. Double click eymployees.jspx. A Create JSF page dialog opens

Choose settings as you see in the screenshot below:

23

3. Now we'll first put a few layout components on our page: - drag and drop „Panel stretch layout“ to the page - drag and drop „Panel Splitter“ to the central facet

- in the „Structure“ navigator select af:panel splitter - in the property inspector change orientation to vertical

- drag and drop „Panel Tabbed“ into second facet

Our goal is to have master records – which are going to be employees - in the top panel splitter panel. Employees should have two combo boxes: manager and department.

Before we continue and build our page, let's return to the Model. Navigate to and open EmployeesView and then chose attributes tab. We'll tell the model that we want to use combo boxes for ManagerId and DepartmentId attributes:

1. Click on ManagerId attribute

2. Click on green plus next to „List of Values: ManagerId“

3. Click on green plus next to „List Data Source“

4. Choose employees view and click right arrow, then click Ok

24

5. in the „List Attribute“ combo, choose EmployeeId

6. Go to UI hints tab

7. Choose Combo box as DefaultList type and move Firstname and Lastname attributes to

selection list, then click OK

8. Then repeat the steps for DepartmentId attribute - click plus next to „List of Values“ - click plus next to „List Data Source“, choose DepartmentsView - select DepartmentId as list attribute - in the UI hints choose combo box and select DepartmentName, click OK

One last thing. Open the Employees entity, go to attributes and double click EmployeeId attribute. Change the type from Number to DBSequence. This assures temporary in-memory numbering.

25

Now our Model is fully prepared for the first form. Before we continue, we can easily test the model. Just right-click on AppModule and choose run. Choose EmployeesView1. You'll see that combo boxes for manager and Department are auto created

Now we can create the form.

1. Open employees.jspx in ViewController

2. Expand Data Controls navigator

3. Drag and drop EmployeesView1 to the upper facet

4. A dialog opens.Choose Forms->Adf Form

5. In the Edit Form Fields select „Include navigation Controls“ and „Include Submit button“

26

6. Click OK. Employee master form is created

Let's try it! Right click employees.jspx in the application navigation and choose

run.

As you can see, the following is created: - form for viewing,navigating and

27

editing employees - lookup combo boxes - calendar

- data validators

All with just a single drag and drop on the page!

What's still missing is creating new records. Let's implement this now:

1. On the Data Controls navigator expand EmployeesView1

2. Expand Operations

3. Drag and drop CreateInsert next to Submit on the form

4. Choose Operations->Adf button

Now run employees.jspx again. We have a fully functional employees form.

...A.3 Detail records

Let's show some employee detail records, for example, employee job history.

1. In Data Control navigator, expand EmployeeView1

2. Drag and drop JobHistoryView3 to the show detail item 1

3. Choose table->ADF table

4. Enable row sorting and filtering (optionally)

5. Click ok

6. Select the table in Structure navigator

28

7. In the property inspector, expand Style, go to Box tab and enter 100% in width box.

Again, run employees.jspx.

...A.4 And now for something completely different

Up to this point the platforms are quite similar. ADF has a great advantage because there's no need for any coding to achieve the same results, and an experienced ADF developer can write the same application faster than an experienced .Net developer.

Now, let's take ADF to the next level.

Look and feel

Currently, our form isn't very nice. Let's change that.

1. In the Structure navigator, select af:document

2. In the property inspector, Style and Theme section, enter “dark” in theme box.

3. Then, select af:panelFormLayout in the splitter's first facet

29

4. Drag and drop “Decorative box” from Component palette into structure, right above af:panelFormLayout

5. Drag and drop af:panelFormLayout into Decorative box's center facet

6. Select decorative box

7. Enter theme: light, width and height: 100 percent If decorative box is inside af:panelGroupLayout, remove it in source view.

Now, run the application again. As you'll see it looks much nicer!

Searching

Searching for specific records is more or less a required feature for all business entities. So let's search for employees.

1. Insert Panel stretch layout inside decorative box, set top height to auto, move panelFormLaoyut into central panel

2. Expand EmployeesView1 in Data Controls

3. Expand “Named Criteria”

4. Drag and drop “All queriable attributes” above af:panelFormLayout

30

5. Choose Query->ADF Query Panel

Run the application. As you can see, we have a collapsible search box above our employee form. We

can, for example, simply find all users who work in marketing department.

Data visualization

Another strong point of ADF is data visualization. To simplify our demonstration, we'll just add a graph to our form (if you want to, you can create a new jspx page).

1. Add a new tab to the Panel tabbed Find panel tabbed in the structure, right click it and choose “Insert inside af:panelTabbed” ->Show detail item

2. Drag and drop JobsView1 from Data controls to the new tab and choose Graphs

31

3. Choose Bar graph and click OK

4. Drag and drop MaxSalary and MinSalary to the Bars area

5. Drag and drop Job title to X Axis

6. Click OK.

32

Run the application. In the show detail item2 you'll find a graph.

B More ADF data visualizations

Note: for this part you'll need Jdeveloper 11.1.1.0.1, as some minor bugs were fixed in visualization components.

To better understand ADF data visualization components we'll use Oracle Fusion Order Demo schema available at http://www.oracle.com/technology/products/jdev/samples/fod/index.html

Download the files and follow the documentation on installing sample schema. Once installed, we'll create a new sample application for data visualizations demo.

...B.1 Creating the sample application

1. Once again, create a new application and choose Fusion Web Application, name it DVdemo

2. You can skip the settings and just press the Finish button

3. Right-click on the model->new->ADF business components->Application module

33

4. Create new connection

connection name: fod user: FOD pwd: fusion other settings depend on your installation

5. Package: dvdemo.model Name: AppModule

Click Next

Then just click Finish

34

Creating custom read-only view object

1. Expand Model and right-click dvdemo.model package, choose New ViewObject

2. Name it OrdersReportView

3. Choose “Read only access through sql query”

4. On the next page, paste the following SQL:

select

prs.first_name||' '||prs.last_name customer,

sum(o.order_total) orders_total

from orders o

inner join persons prs on prs.person_id=o.customer_id

group by prs.first_name||' '||prs.last_name

5. Then just keep clicking Next until the wizard finishes

6. Next, double clik on the application module In the right panel, expand dvdemo.model package Select OrdersReportView and click right arrow

35

Creating sample form

1. In the application navigator, expand ViewController

2. Open faces-config file

3. Drag and drop a new jsf page and name it visualizations.jpsx

4. Doubleclick the icon and click OK to create the page

5. In the Create JSF dialog, select “Quick start layout”

6. Choose “One column (Streched)” layout

7. Click ok to select, then OK to create the page

Adding a pie chart

1. Drag a Panel box into panel dashboard, set Text property to “Customer orders”

2. Drag and drop productSalesView1 into it

3. Choose Graphs->Pie

36

4. Choose OrdersTotal for Pie and Customer for slice

5. In the property inspector expand Behaviour and set Dynamic resize to DYNAMIC_SIZE

Adding a graph

Fist we'll create another read only view object:

1. Expand model, right click package and choose new View Object

2. Name it ProductSalesView and choose it to be read-only view object

3. Paste the following SQL:

select

p.product_name,

sum(oi.quantity) as quantity,

sum(oi.quantity * oi.unit_price) as value

from orders o

inner join order_items oi on oi.order_id=o.order_id

inner join products_base p on p.product_id= oi.product_id

group by

p.product_name

order by sum(oi.quantity * oi.unit_price) desc

4. Doubleclick application module and make sure you are on the DataModel panel. Now expose

ProductSalesView by selecting it and clicking the right arrow

37

We’ll add an panel dashboard to the page:

1. Open visualizations.jspx

2. Drag and drop “Panel dashboard” to the central pane

3. Set property columns to 2, and height to 300px

Then we'll add a graph to our page:

4. Drag and drop Panel Box into Panel dashboard

5. Set text property to “Product sales”

6. Drag and dop ProductSalesView1 from DataControls to the panel box

38

7. Choose Graphs and then Bar graph

8. Drag and drop Quantity and Value fields to the Bars area and Product name to the X axis

9. Click OK

10. In the property inspector expand Behaviour and set Dynamic resize to DYNAMIC_SIZE

Adding a gauge

First we'll create another view object:

1. Expand model, right click package and choose new View Object

2. Name it TotalSalesView and choose it to be read-only view object

39

3. Paste the following SQL:

select

sum(oi.quantity * oi.unit_price) as value

from order_items oi

Doubleclick application module and expose TotalSalesView by selecting it and clicking the right arrow

Next, we'll add a gauge:

1. Add another Panel Box to the dashboard, set its text to “Total sales”

2. Drag and drop productSalesView1 into the new panel (use structure window)

3. Choose Gauges->Dial with thresholds

4. Choose Value for Metric field

5. Enter 300000 into Maximum field

6. Enter 50000 into threshold1 Threshold

7. Enter 100000 into threshold2 Threshold

40

8. In the properies window, expand Appearance and enter 400 for image width and height

9. In the main editor, choose source view. Find the gauge and delete inlineStyle from dvt:gauge definition

Run the application. As you can see, we were quickly able to create a graphical dashboard with powerful data visualization!

Adding a Geographic Chart

Let’s first create a read only view object to fetch data we’d like to show:

1. In the Model project, right-click model package and select New View Object

2. Set its name to WhQuantityiew

3. Choose “Read only access through SQL query” and click Next

41

4. Paste fhe following code into the query statement:

select

warehouse_name,

addr.address1,

addr.address2,

addr.postal_code,

addr.city,

addr.state_province,

addr.country_id country,

(select sum(quantity_on_hand) q from warehouse_stock_levels where

warehouse_stock_levels.warehouse_id=wh.warehouse_id) quantity

from

warehouses wh

inner join addresses addr on addr.address_id=wh.address_id

5. Click Next, Next and then Finish

6. Open the AppModule and under Data Model, add WhQuantityiew

Next, we’ll create a form showing warehouses on a geographic map:

1. In the ViewController project, click on faces-config.xml and then drag and drop JSF page from the JSF Diagram objects on the right. Name it whMap.jspx.

2. Double click depMap.jspx. A Create JSF page dialog opens. Leave the defaults and click OK

3. Drag and drop DepEmpCountView1 from Data Controls to the page

4. Choose Geographics Map -> Map and point theme

42

5. Click the green plus next to the Map Configuration

6. Click green plus next to MapViewerURL Enter the following URL information: Name: MapViewer URL: http://elocation.oracle.com/mapviewer Click OK

7. Click green plus next to Geocoder URL Name: Geocoder

URL: http://elocation.oracle.com/geocoder/gcserver Clicl OK

8. Click OK to accept map configuration

9. The map should load now. Click OK.

43

10. Map point theme dialog opens

Map data columns as you see on the picture above Click OK

44

11. Enjoy using geographic map!

C Serving JavaFx applters within ADF application

For this part, we need Netbeans v 6.9 or later, wih JavaFx http://netbeans.org/downloads/

...C.1 Preparing JavaFx applets

1. Open Netbeans

45

2. Go to File->New project, expand Samples, choose JavaFx and select »Interesting Photos« applet

3. Right click the project and run it

...C.2 Configuring JavaFx applet for the web

1. In windows file explorer, navigate to »My Documents\NetBeansProjects\Interesting Photos\dist«. This is where the project distribution files are put by default.

2. Copy InterestingPhotos.jar and InterestingPhotos_browser.jnlp into »\DvDemo\ViewController\public_html« folder

3. Open visualizations.jspx file in Jdeveloper

4. Add another panel box onto the dashboard and set its text to »JavaFx«

46

5. In the structure window, right click af:document node and select »Meta container«

6. In the source view, findf meta container (bottom of the file) and implement it like this: <f:facet name="metaContainer">

<f:verbatim>

<script src="http://dl.javafx.com/1.3/dtfx.js"></script>

</f:verbatim>

</f:facet>

7. Find JavaFx panel box in source view and implement it like this:

<af:panelBox text="JavaFx" id="pb4">

<f:facet name="toolbar"/>

<f:verbatim>

<script>

javafx(

{

archive: "InterestingPhotos.jar",

width:"100%",

height:300

}

);

</script>

</f:verbatim>

</af:panelBox>

8. Run the page

D Task flows

Creating a bounded task flow

1. Right-click on the viewController project and select New

2. From the Categories, choose Web tier, JSF and then ADF Task Flow, Click OK

3. Enter emp-create as Task flow ID

4. Check »Create Train«

47

5. Uncheck »Create with Page Fragments«

6. Click OK

7. Open the Overview tab and choose new-transaction in transaction options.

8. In the the Data Controls, expand EmployeesView1->Operations

48

9. Drag and Drop »CreateInsert« into emp-create.xml Diagram

10. From the component Palette, drag and drop View into the diagram and name it »EmpCreateGeneral«. Set its Train Stop Display name to »General employee information«

11. From the component Palette, drag and drop View into the diagram and name it »EmpCreateJob«. Set its Train Stop Display name to »Job information«

12. From the component Palette, drag and drop View into the diagram and name it »EmpCreateDep«. Set its Train Stop Display name to »Department information«

13. From the component Palette, drag and drop Task Flow Return into the diagram and name it »taskFlowCommit«; set its outcome to »return«

14. In the Component palette, click on the »Control Flow Case«, then click on the »CreateInsert« in the diagram and connect it to the »EmpCreateGeneral«

15. In the Component palette, click on the »Control Flow Case«, then click on the »EmpCreateDep« in the diagram and connect it to the »taskFlowCommit«; set property

49

»From Outcome« to »commit«

16. Deoubleclik on the EmpCreateGeneral view, Create JSF page dialog opens In the »Initial page layout and content«, choose »Quick start layout« and then choose »One column Header (Stretched)

50

Click OK

17. Repeat for EmpCreateJob and EmpCreateDep views

18. Open EmpCreateGeneral.jspx - From the Component Palette, drag and drop Tran component to the top section of the page

- From the Data Controls, drag and drop EmployeesView1 to the center section of the page, choose ADF form - Only select FirstName, LastName, Email and PhoneNumber attributes - Do not select »Include navigation Controls« and »Include Submit Button« - Click OK - Click on the »Train Button Bar« in the component palete. Click Ok to confirm the binding.

19. Open EmpCreateJob.jspx - From the Component Palette, drag and drop Tran component to the top section of the

page - From the Data Controls, drag and drop EmployeesView1 to the center section of the page, choose ADF form - Only select JobId, HireDate, Salary and CommissionPct attributes - Do not select »Include navigation Controls« and »Include Submit Button« - Click OK - Click on the »Train Button Bar« in the component palete. Click Ok to confirm the binding.

20. Open EmpCreateDep.jspx - From the Component Palette, drag and drop Tran component to the top section of the page

51

- From the Data Controls, drag and drop EmployeesView1 to the center section of the page, choose ADF form - Only select ManagerId and DepartmentId attributes

- Do not select »Include navigation Controls« and »Include Submit Button« - Click OK - Click on the »Train Button Bar« in the component palete. Click Ok to confirm the binding. - Drag and drop a button on the form, Set its text to »Commit« and action to commit

21. Open page definition files (EmpCreategeneralPageDef and EmpCreateJobPageDef) and add »SkipValidation="true"« attribute to the pageDefinition element

22. Open adfc-config.xml diagram

23. Drag and drop employees.jspx to the diagram

24. Drag and drop emp-create to the diagram

25. Create control flow case from employees to emp-crate and set »From Outcome« to »create«

26. Create control flow case from emp-create to employees and set »From Outcome« to »return«

27. Open employees form - drag and drop a button on the uppoer panel of the form, set its text to Create and action to »create«

Run employees.jspx and click on Create button. A train for creating new employee is displayed: