How to Design Simple Find Master - Detail Page in ADF Jdev10g

In the blog I will explain how to design simple Find –Query page in ADF 10g.Key focus here is how to design the page, so I will not discuss about how to design EO/VO and AM.

Step #1

Create

1. EO
2. VO
3. AM  (Application Module).

Step #2

Select the View controller Project and drop JSF page on faces-config.xml (Diagram Tab). In My example I need only 1 page (Order Info), so I am not drawing any navigation between pages.

 

Step #3

Once you drop the JSF page, double click the page and then it prompt you for the name ad well as the format in which you want to save the page

Jsp  or jspx.

In my case I save page as OrderInfo.jspx.

Step #4

On Double Click, after you put the page name, system will open a blank page. As shown below.

Step #5

From the ADF Faces Core, on the left hand side, drag and drop the “Panel Page” control on the Page. Oracle has provide various pages layout in Jdev, but I like  “Panel Page”. This page has al most all the controls that one needs to develop the page, like

Logo

Menu

Global menu

Copy right

About page etc.  as shown below.

Step #6

Select the “Object Image “ and drop it over the “branding”, system will prompt you to select the image /logo that you want to place on your page as shown below.

Step #7

Select the “Menu Button” from the “ADF faces Core” and the drop it over the global menu.

Select the “Command Menu Item” and drop it over the Menu Button and in the Property box rename it to “Logout”.

Select the “Command Menu Item” and drop it over the Menu Button and in the Property box rename it to “Help”.

From the property window of “Logout”, select the icon property and select the icon for logout and similarly select the icon for the Help, as shown below.

Step #8

Now the cosmetic changes are over, expand the data Control tab.

My EO and VO are based on

Order Headers

Order Lines

And AM is based on these 2 as well as the view link between these 2, my data control should reflect Order Headers as well as Order Lines.

Select the Order Header Data control and Drop it over the page and from the Pop-Up menu select Form > ADF Search Form

Step #9

My EO and VO are based on the Sales Order Header and Sales Order lines. For my demo, I have selected all the columns of OE_ORDER_HEADERS_ALL for Order Header EO and all columns of OE_ORDER_LINES_ALL for Order Lines EO.

But in my VO, I don’t need all the columns for my demo, so I have restricted my VO with only few columns as shown below VO for OE_ORDER_HEADERS_ALL

To Customized the VO definitions, you need to select the check box (Expert Mode).

Similarly I have restricted my VO for OE_ORDER_LINES_ALL.

Step #10

Once you drop the data control on the page, system will automatically BINDS all the column in the control with PAGE. By default in the layout of type FORM, system will draw 1 column.

In my case change it to max column = 2 and rows = 5.

Step #11

Now Place ADF object “object spacer “ on page and name it “order lines details” as shown below, also drop “Panel Header” control on the page, just below the “Object Spacer” as shown below.

Step #12

Select the OE Order lines data control and drop it on “Panel header” and from Pop-Up menu select Create > Table > Read Only

In property window of table select width = 100%

And out page is ready

Step #13

One of the steps that I miss here is, before you start designing the page, it is good practice to test the AM.

As shown below. Select the AM and right click. From Pop-Up menu select Test.

After establishing the connection with database, Jdev will prompt you with “Oracle Business Component Browser”.

You can test all of your components here.

I am adding the screen print for View link between Order Header and lines ONLY.

Step #14

Once our Page is ready and AM is tested (should be tested before we design page). We can Run out Page from J Dev. As shown below.