ADF Hello World Tutorial

ADF Hello World Tutorial

By PRajkumar on May 20, 2012
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

Create Master Detail Form in Oracle ADF

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

Create Simple Search form in Oracle ADF

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

Components in a New Managed Bean

Select

Automatically

Expose

UI

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

Create Data Entry Form in ADF

1. Create a New Application
File > New > Applications > Fusion Web Application (ADF)
Application Name DataEntryApplication
Directory -- (Jdev install dir)/jdeveloper/(project name)
Application Package Prefix Demo.adf.DataEntryApp

2. We need to have table where Data will be saved. Lets Create a

table
CREATE TABLE data_entry_test
(
Column1 VARCHAR2(100),
Column2 VARCHAR2(100)
);
3. Create EO for Page (Entity Object)
Right Click on Model > New > ADF Business Components > Entity Object
Package -- Demo.adf.DataEntryApp.model
Name DataEntryEO
Schema Object DATA_ENTRY_TEST

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.DataEntryApp.model.queries
Name DataEntryVO
Check Application Module Checkbox
Package Demo.adf.DataEntryApp.model.services
Name DataEntryAM

4. Create JSF Page for Data Entry Page

Create a JSF Page
Right Click on ViewController > New > Web Tier > JSF > JSF Page
File Name DataEntry.jspx
Initial Page Layout and Content Quick Start Layout
Expand Page Implementation region and select Automatically Expose UI
Components in a New Managed Bean

Select DataControls > DataEntryAMDataControl > DataEntryVO1 and drag to

jspx page and choose Form > ADF Form. Choose the fields as shown in the
slide

Remove RowID row

5. Add Commit and Create Operations in Page

Select DataControls > DataEntryAMDataControl > Operations
Drag Commit Operation in page
Similarly Select DataControls > DataEntryAMDataControl > DataEntryVO1 >
Operations
Drag Create Operation in page

Select option ADF Button

6. Select Commit button and make field Disabled in properties to be

NULL

7. Congratulation you have successfully finished Data Entry ADF Form.

Test Your Work

Click on Create Button

Enter Data and Click Commit Button

Check backend table