ADF Hello World Tutorial

1. Create a New Application

New > Applications > Fusion Web Application (ADF)

Application Name HelloWorld

Directory -- (Jdev install dir)/jdeveloper/(project name)

Application Package Prefix Demo.adf.helloworld

2. Create JSF page

You will see Model and ViewController in HelloWorld application. Now Click on
ViewController and choose New

Web Tier > JSF > JSF Page

File Name HelloWorld.jspx

Check Create XML Document (*.jspx)

Select Blank Page in Initial Page Layout and Content Section

Select Automatically Expose UI Components in a New Managed Bean in Page

Implementation Section
3. Drag Decorative Box from Layout option available in Component Palate
4. Drag item of type Input Text, Button on the center face of decorativeBox from
Common Components Section
5. Drag item of type Output Text on Top of decorativeBox from Common
Components Section

6. Select af:decorativeBox then go to Property Pallete and Double Click Panel

Group Layout in Layout Section
Select af:panelGroupLayout scroll and set following property

Halign -- center
7. Select top then go to Property Pallete and Double Click Panel Group Layout in
Layout Section
Select af:panelGroupLayout scroll under top and set following property

Halign center
8. Set Bind Action Property for commandButton

Double Click on commandButton that will open set Bind Action Property window as
shown below

Click Ok and then Write Following Code in cb1_action() which you have created just now
public String cb1_action()
{ RichInputText inputText = getIt1();
String name = "Hello "+(String)inputText.getValue()+ "!!";
ot1.setValue(name);
return null;
}

9. following properties for commandButton, input text and outputText

Set Following Properties for inputText item

Label Name

Id it1

Set Following Properties for commandButton item

Id Go

Action cb1_action()

Text Go

Set Following Properties for outputText item

Id ot1

Value Null (Blank)

InlineStyle -- color:Red; font-family:Georgia, 'Times New Roman', times, Serif; font-

size:xx-large;

Color Red

Font -- Georgia, 'Times New Roman', times, Serif

Size -- xx-large
10. Congratulation you have successfully finished. Test Your Work Your Hello World
Page is Ready

2. Create Simple Search form in Oracle ADF

By PRajkumar on May 23, 2012

1. Create a New Application

New > Applications > Fusion Web Application (ADF)

Application Name SearchForm

Directory -- (Jdev install dir)/jdeveloper/(project name)

Application Package Prefix Demo.adf.searchform

2. Create Test Table and insert data some data in it (For Testing Purpose)

CREATE TABLE xx_search_demo

( -- ---------------------
-- Data Columns
-- ---------------------
column1 VARCHAR2(100),
column2 VARCHAR2(100),
-- ---------------------
-- Who Columns
-- ---------------------
last_update_date DATE NOT NULL,
last_updated_by NUMBER NOT NULL,
creation_date DATE NOT NULL,
created_by NUMBER NOT NULL,
 last_update_login NUMBER
);

INSERT INTO xx_search_demo VALUES (val1, val2, SYSDATE, 0, SYSDATE, 0, 0);

INSERT INTO xx_search_demo VALUES (val1, val2, SYSDATE, 0, SYSDATE, 0, 0);
INSERT INTO xx_search_demo VALUES (val3, val4, SYSDATE, 0, SYSDATE, 0, 0);
INSERT INTO xx_search_demo VALUES (val5, val6, SYSDATE, 0, SYSDATE, 0, 0);

3. Create EO

Right Click on Model > New > ADF Business Components > Entity Object
Package -- Demo.adf.searchform.model.entities

Name SearchEO

Schema Object XX_SEARCH_DEMO

Note By default ROWID will be the primary key if we will not make any column to be
primary key in Attribute Settings Page

Check the Accessors, Create Method, and Remove Method

Check Generate Default View Object CheckBox
Package Demo.adf.searchform.model.queries
Name SearchVO

Check Application Module CheckBox

Package Demo.adf.searchform.model.services
Name SearchAM
4. Define Bind Variables
Double Click on SearchVO in Model Project go to query page
Expand the Bind variable accordion and click on Green button

Bind Variable name and type as following make sure required check box is un-checked
Name Col1
Type -- String
5. Create Named View Criteria
Double Click on SearchVO in Model Project go to query page. Expand the View Crriteria
accordion and click on Green button
View Criteria is actually conditions on VOs which you usually define declaratively
1. Expand the View Critieria Section in SearchVO page and click the Green plus sign
2. Give a proper name to your View Criteria
Criteria Name -- SearchVOCriteria
3. Click on Add Item
Click the ( ) group press Add item and select values as sown in slide make sure you have
selected the bind variable Col1
Attribute Column1
Operator Equals
Operand Bind Variable
Parameter Col1
Un-check Ignore Case and Check Ignore Null Values
6. Create Search Form
Right Click on ViewController > New > Web Tier > JSF > JSF Page
File Name Search
Initial Page Layout and Content Quick Start Layout
Click on Browse and select One Column Stretched and check Apply Theme
Expand Page Implementation and Select Automatically Expose UI Components in a New
Managed Bean
Select SearchVO and Expand the Data Control panel and Drag and drop the Named View
Critieria SearchVOCriteria to the page
Choose Query > ADF Query Panel with Table as shown in the slide
The Page would look like this --
7. Refine Layout
Change the Header from SearchEO to Search Demo. To change select panel Header and
change Text property to Simple Search Demo

Note - You can change form properties like Column names and page width as per your
requirements

8. Congratulation you have successfully finished. Test Your Work Your Simple Search Form
is Ready
3.Creating LOV tab in oracle applications:

Create Master Detail... | Main | Oracle HRMS API ...

Create LOV in ADF Application

By PRajkumar on May 24, 2012

1. Create a New Application

New > Applications > Fusion Web Application (ADF)

Application Name LovApp

Directory -- (Jdev install dir)/jdeveloper/(project name)

Application Package Prefix Demo.adf.lov

2. We need to have table from where LOV values will come. Lets Create table

CREATE TABLE lov_table_demo

( -- ---------------------
-- Data Columns
-- ---------------------
Column1 VARCHAR2(100),
Column2 VARCHAR2(100),
-- ---------------------
-- Who Columns
-- ---------------------
last_update_date DATE NOT NULL,
last_updated_by NUMBER NOT NULL,
creation_date DATE NOT NULL,
created_by NUMBER NOT NULL,
last_update_login NUMBER
);

3. Lets put some data in the tables

-- Insert Data into Master Table

INSERT INTO lov_table_demo VALUES ( 'VAL1', 'VAL2', SYSDATE, 0, SYSDATE, 0, 0);

INSERT INTO lov_table_demo VALUES ( 'VAL3', 'VAL4', SYSDATE, 0, SYSDATE, 0, 0);

4. Create EO for Our Page (Entity Object)

Note - EO is as per User Requirement, currently we are going to create EO from
above created table as demo purpose

Right Click on Model > New > ADF Business Components > Entity Object

Package -- Demo.adf.lov.model.entities

Name Column1EO

Schema Object -- LOV_TABLE_DEMO

Note By default ROWID will be the primary key if we will not make any column to be
primary key in Attribute Setting Page

Check the Accessors, Create Method, and Remove Method

Check Generate Default View Object CheckBox

Package Demo.adf.lov.model.queries

Name Column1VO

Check Application Module Checkbox

Package Demo.adf.lov.model.services

Name Column1AM
5. Create View Object for Column1 LOV (View Object)

Right Click on Model > New > ADF Business Components > View Object

Package -- Demo.adf.lov.model.queries

Name Column1LovVO

Display Name -- Column1 Lov View Object

Select Column1EO Entity and Move to selected area uncheck the option Updatable
Select Column1 attribute and move to Selected area
Click Finish

6. Create LOV

Double Click on Column1VO in Demo.adf.lov.queries section

Select Column1 attribute in attribute page and click + green button at the bottom
under List of Values Section
Click the green + button with List Data Source
Select Column1LovVO in Available object and change the Name at bottom to
Column1LOVAcessor and Press > button to Create Accessor for LOV and click OK
Choose Column1 in List Attribute Return Values will populate automatically. Your
screen should similar to this
Go to UI Hints tab Leave the list type asChoice List (There are many type of LOVs available)
Move Column1 Name from Available to Selected Area

Choose Labeled Item (First of List) at very bottom Include No Selection Item:
Click OK

7. Linking LOV to JSF Page

Create a JSF Page

Right Click on ViewController > New > Web Tier > JSF > JSF Page

File Name LovDemo.jspx

Initial Page Layout and Content select Blank Page

Expand Page Implementation and select Automatically Expose UI Components in a

New Managed Bean
Expand the DataControl > Column1VO Select Column1 attribute and Drag and Drop it
to FormLayout

Menu will appear select Single Selection > ADF One Choice List as Shown in the Slide

8. Your Final Page will look like this below slide

9. Congratulation you have successfully finished. Test Your Work Your LovDemo Page is
Ready
Conclusion

With Oracle ADF application development becoming fast and easy. See how easy is to
create LOVs in your ADF application as like in Oracle Forms

4. Create Simple Search... | Main | Create LOV in ADF...

Create Master Detail Form in Oracle ADF

By PRajkumar on May 24, 2012

1. Create a New Application

New > Applications > Fusion Web Application (ADF)

Application Name MasterDetailApp

Directory -- (Jdev install dir)/jdeveloper/(project name)

Application Package Prefix Demo.adf.masterdetail

2. We need two tables one table will be act as Master table and second table will be
act as Child or detail table. Lets Create two tables

CREATE TABLE master_table_demo

( -- --------------------
-- Data Columns
-- --------------------
Column1 VARCHAR2(100),
Column2 VARCHAR2(100),
-- --------------------
-- Who Columns
-- --------------------
last_update_date DATE NOT NULL,
last_updated_by NUMBER NOT NULL,
creation_date DATE NOT NULL,
created_by NUMBER NOT NULL,
 last_update_login NUMBER
);

CREATE TABLE detail_table_demo

( -- --------------------
-- Data Columns
-- --------------------
Column1 VARCHAR2(100),
Column2 VARCHAR2(100),
-- --------------------
-- Who Columns
-- --------------------
last_update_date DATE NOT NULL,
last_updated_by NUMBER NOT NULL,
creation_date DATE NOT NULL,
created_by NUMBER NOT NULL,
last_update_login NUMBER
);

Note Consider Master Table is Linked to Detail Table with Column1

3. Lets put some data in the tables

-- Insert Data into Master Table

INSERT INTO master_table_demo VALUES ( 'VAL1', 'VAL2', SYSDATE, 0, SYSDATE, 0, 0);

INSERT INTO master_table_demo VALUES ( 'VAL3', 'VAL4', SYSDATE, 0, SYSDATE, 0, 0);

-- Insert Data into Detail Table

INSERT INTO detail_table_demo VALUES ( 'VAL1', 'VAL6', SYSDATE, 0, SYSDATE, 0, 0);

INSERT INTO detail_table_demo VALUES ( 'VAL3', 'VAL8', SYSDATE, 0, SYSDATE, 0, 0);

4. Create Master EO and VO (Entity Object and View Object)

Right Click on Model > New > ADF Business Components > Entity Object

Package -- Demo.adf.masterdetail.model.entities

Name MasterEO

Schema Object -- MASTER_TABLE_DEMO

Note By default ROWID will be the primary key if we will not make any column to be
primary key in Attribute Setting Page

Check the Accessors, Create Method, and Remove Method

Check Generate Default View Object CheckBox

Package Demo.adf.masterdetail.model.queries

Name MasterVO

5. Create Detail EO and VO (Entity Object and View Object)

Right Click on Model > New > ADF Business Components > Entity Object

Package -- Demo.adf.masterdetail.model.entities

Name DetailEO

Schema Object -- DETAIL_TABLE_DEMO

Note By default ROWID will be the primary key if we will not make any column to be
primary key in Attribute Setting Page

Check the Accessors, Create Method, and Remove Method

Check Generate Default View Object CheckBox

Package Demo.adf.masterdetail.model.queries

Name DetailVO

6. Create ViewLink between MasterVO and DetailVO

Right Click on Model > New > ADF Business Components > View Link

Package -- Demo.adf.masterdetail.model.queries

Name MasterDetailVL

Display Name Master Detail View Link

Extends Null (Blank)

Expand MasterVO in the Source Section and select Column1 do the same for DetailVO
in the destination and press Add button then NEXT

(Because Column1 is common column between both the tables as per our assumption to
create view link)
Leave the default Accessors Names as shown in slide and press Finish
7. Create AM (Application Module)

Right Click on Model > New > ADF Business Components > Application Module

Package -- Demo.adf.masterdetail.model.services

Name MasterDetailAM

Display Name -- Master Detail Application Module

Select MasterVO and DetailVO via MasterDetailVL and shuffle to right in Data Model
Check Generate Application Module Class: MasterDetailAMImpl
8. Create JSF Page

Right Click on ViewController > New > Web Tier > JSF > JSF Page

File Name MasterDetail.jspx

Initial Page Layout and Content select Blank Page

Expand Page Implementation and select Automatically Expose UI Components in a

New Managed Bean

Refine Page Layout As below --

1. Drop PanelSplitter from the Components Palette

2. Drop PanelBox then drop Panel Accordion in the First facet of the Panel-splitter and
set

Text Master

3. Drop another Panel-splitter in second facet and set the Orientation property to
Vertical from Property Inspector

4. Drop Panel Accordion in the first facets of the Last panel splitter set

Text Detail

5. Drop Panel Accordion in the Second facet of the last panel-splitter set

Text Edit Detail

Page and structure will look like as below slide

9. Create Data-bound Components in Page

Expand the Data Controls Drag MasterVO1 to Detail Panelbox and choose Form > ADF
Read-only Form. Choose the fields as shown in the slide
Note Select Checkbox Include Navigation Controls

Expand the Data Controls Drag DetailVO1 to Detail Panelbox and choose Table > ADF
Read-only Table
Note -- Select CheckBox Enable Sorting and Enable Filtering and Under Row
Selection select Multiple Rows
Expand the same DetailVO1 node from data control and drag to Edit Detail section and
choose Form > ADF Form. Choose the fields as shown in the slide
Note Select CheckBox Include Submit Button
Final page will look like this following slide
Set Style Class Property to AFStrechWidth for af:panelAccordion pa2 Panel as shown
in slide. For Accordion to stretch the table at Runtime
10. Congratulation you have successfully finished. Test Your Work Your Master Detail
Page is Ready