Developing Master-details RIA Web-Application with Oracle ADF

1.	In the Applications Navigator, click New Application. Another option is to use the File->New... menu option to create a new application.

2.

In the Create Application dialog box, specify the Application Name to be BidCarrierSystem. Notice that the directory changes to match the new name.You can change the C:\JDeveloper\mywork part of the path to create your files in  another location.In the Application Package Prefix field set the value to be demo.  In the Application Templates choose the Fusion Web Application (ADF) and  click Finish.

The Overview pane displays a Checklist you can refer to as a guide for developing a Fusion Web Application.

The Checklist is displayed by default when a Fusion Web application is created.

3. In the Application Navigator you'll see two new projects now, one called Model and the other called ViewController.

4.	In the Checklist Overview, click the Connect to a Database step.

5.	The step expands showing useful information such as prerequisites required for performing this task. Click the Create a Database Connection button.

6.

Specify the following properties for the new connection you are creating: Connection Name BidConn Username <database schema username> Password <database schema password> Enter the Oracle JDBC Settings properly to point to the right host, port and SID for your database. Click the Test Connection button and verify that you got success.

Once done click the OK button.

7.	Click the down arrow to collapse the Connect to a Database step. In the Checklist pane, set the status of the Connect to a Database step to Done.
8.	Click the Build Business Services step to expand it, then click the Go to Substeps button.
9.	In the subtask list, click the Create Entity Objects and Associations subtask. Then click the Create Entity Objects and Associations button.
10.	In the Select Project for Action dialog, select the Model project.
11.	In the Initialize Business Components Project dialog the connection should be selected. Click OK.

12.	In the Entity Objects page, click the Query button to examine the data dictionary and see   available tables.
13.	Select the BID and BIDCARRIERS tables in the Available list, and click the right arrow to move your selections to the Selected list. This step creates updateable Entity Objects based on the tables you chose. Click Next to continue.
14.	In the Updateable View Objects dialog, move Departments (HR.DEPARTMENTS) and Employees (HR.EMPLOYEES) to the Selected list. This step creates matching view objects DepartmentsView and EmployeesView to perform queries on the entity object you created before.
15.	Click Next to continue.
16.	In the Application Module dialog, click Finish to create the business components in the Model project.
17.	In the Checklist, set the status of the Create Entity Objects and Associations step to Done. Then click the Close Step 3 button. Note: Since steps 3.2, 3.3 and 3.4 have also been completed, we could as well set their status to done, but we'll do it at a higher level.
18.	Set the status of the Build Business Services step to Done.
19.	In the Application Navigator Right-click AppModel 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. 20. In the Oracle Business Component Browser window, double click the BidCarrirsFkLink1 node to show the department and employees details. Navigate between the records using the Next button and watch the automatic master details synchronization.

Creating JSF Web pages

JavaServer Faces or JSF for short is a standard Java EE technology that simplifies Web development.
In this section you create a JSF page to access the business components that you created in the previous section. You learn how to create a form that can be used to displays and modify data. You'll also use a master-detail relationship to display the information about employees in each department. To build the page you'll be using the Oracle ADF Faces Rich Client Components - these components allow you to build Ajax-based rich Web UI without writing low level HTML and Javascript code.
The Web part of the application is developed in a separate project called the viewcontroller project. This separation between the Model layer and the user interface makes the business services more reusable.

1.	We'll start by creating a new Web page. Right-click the ViewController project node in the Application Navigator, and select New....
2.	In the New Gallery window, navigate to the Web Tier and JSF node, and choose the JSF Page option. Click OK.
3.	In the Create JSF Page dialog box, rename the page to DeptEmpPage.jspx, in the Page Template drop down box select Oracle Three Column Layout, and make sure the Create as XML Document is checked. Click OK.
4.	Your page will be opened in the visual design view. The template has three columns in it, since we only need one in our page, we'll delete the first and third one. Place your cursor in the right-most section called end and right click to choose Delete. 5. With the af:pageTemplate selected in the Structure pane, in the Property inspector set the startColumnSize value to 350 to enlarge it.

6. From the Layout components, click and drag a Panel Collection component into the Center area of your page.

7.	In the Application Navigator expand the Data Controls accordion, and in it expand the AppModuleDataControl to expose the business services you defined in the first part of this lab.

8. Drag the BidView1 data control into the Panel Collection in your JSF page. When prompted to choose a component to Create choose Table->ADF Table.

9. In the Edit Table Columns dialog, check the three check boxes for Row Selection, Sorting, and Filtering. And you can delete the fields which are not required to show in table.

Click ok.

10. This jsf page will look like this.

11. Add one column to this table .Right-click on Last column of table and insert one column.

12. After adding this column to table, change HeadeText of column as “Action”. Click on that column and in the property inspector, type “Action” as HeaderText.

13.  Create second jsf page “BidEdit.jspx”.

Projects -> Right Click ViewController->Jsf->Jsf Page

Click Ok.

14. .Drag the BidCarriersView2 data control into BidEdit JSF page. When prompted to choose a component to Create choose Master-Detail->ADF Master Form, Detail Table.

15. Switch to “Bid.jspx” and drag “Link” from Common Components to first row of Action column.

16. Click on CommandLink 1 and Change its Text to “Edit” in property Inspector.

Click the Save All icon on the JDeveloper menu bar to save your work.

17. Drag another “Delete” from Data Controls to first row of Action column. And change its text in property inspector as “Delete”.

18. In the Application Navigator expand the Projects accordion, and in it expand the Web Content->page flows ,

And open adfc-config.xml .

19. Drag Bid.jspx and BidEdit.jspx into the adfc-config.xml file.

20. Drag “Control Flow Case” from component accordion, and draw a control flow from “Bid to BidEdit” (edit From Outcome in property inspector as “to_edit” ) and from “BidEdit to Bid” (edit From Outcome in property inspector as “to_bid” ).

Click the Save All icon on the JDeveloper menu bar to save your work.

21. Switch to Bid.jspx , click to Edit commandLink and in property Inspector, change its action as “to_edit”.

22. Switch to BidEdit.jspx, delete PanelFormLayout in the BidView1.

23. Drag the BidView1 data control BidView1 part of JSF page. When prompted to choose a component to Create choose Forms->ADF Form.

 

24. In the Edit Form fields dialog, check the Include Submit Button check box.

Click Ok.

Click the Save All icon on the JDeveloper menu bar to save your work.

25. Switch to Bid.jspx page, drag “Show Popup Behavior” from Component Palette->Operations and bind it to Link “delete”.

26. Drag PopUp from Component Palette-> Common Components, and bind it to delete link.

27.  Drag Dialog component from Common Components and drop in popup.

28. It will look like this.

29. Select Dialog property Inspector and Appearance Type as none.

30. Drag “Commit”operation from Data control to create ADF button on Dialog. And change its text as “Ok”

31. Double-click on Ok button, and create Method as “cb1_action”.

Click Ok.

32. Write the below code in that method.

33. Drag “RollBack”operation from Data control to create ADF button on Dialog.

And rename its text as “Cancel”.

34. Then copy Id of PopUp and write same id in the “PopupId” field in “Show Popup Behavior” property inspector.

Click the Save All icon on the JDeveloper menu bar to save your work.

35. Click on “Ok” and “Cancel” button, in property Inspector, change its behavior Disabled as “Reset to Default”.

Click the Save All icon on the JDeveloper menu bar to save your work.

36. Drag “CreateInsert” operation from BidView1 collection of data controls and Add button.

Rename this button text as “Add Bid”.

37. Click on “Add Bid” button and in the property Inspector, change its action as “to_edit”.

38. Switch to “BidEdit.jspx” page, and bind “Commit”operation from data controls to “Submit” button.

Click Ok.

Click the Save All icon on the JDeveloper menu bar to save your work.

39. Switch to Bid.jspx page and Right-click on page and run application.