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

Create LOV in ADF Application

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