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