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