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

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.

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

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

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.

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

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

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

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

10

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.

11

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:
12

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

13

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
14

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>

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.

...B.4 St ep 3: implemen tig master detail 1. A dd another Sql DataSourc e at the

15

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.

16

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
17

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

18

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.

19

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:

20

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:

21

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:

22

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

23

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.

24

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

25

6. Click OK. Employee master form is created

Let's try it! Right click employees.j spx in the application navigation and choose run. As you can see, the following is created: - form for viewing,nav igating and
26

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

27

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

28

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

29

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

30

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.

31

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

32

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

33

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

34

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

35

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

36

Well 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

37

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
38

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

39

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 Lets first create a read only view object to fetch data wed 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

40

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, well 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

41

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.

42

10. Map point theme dialog opens

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

43

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

44

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

45

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

46

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

47

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

48

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)

49

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
50

- 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:

51