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
