Wednesday, 3 April 2013

How to create a page in ADF



I must say this will be the most simplest blog I am planning to write today. No doubts many of you are definitely aware of how to create a jspx page in ADF. But I am writing this blog for those people who are very new to ADF or its there first day and they Google to find out that how they start with creating a simple page in ADF.
The idea of writing this blog came into my mind, when I found freshers in my project struggling creating a simple page in ADF.

Lets start with our work. First I would like to explain the design which I am going to follow to create an ADF page because there are many ways we can design a page. But I am going to explain the only way, which I have used in our project. I am using JDeveloper version 11.1.1.6.0

In this example I am going to create a sample Login page.

3 things will be mandatory in creating page -

a) Jsff (fragment) - It will contain the UI components such as text box, button, layout etc.
b) Taskflow - It will contain the jsff as a default activity.
c) Jspx - This page will contain taskflow as a region and it will be the final page.

Steps to create sample login application :

1. Select Fusion Web Application (ADF) :

 

Click next (until it get disabled) and finally click finish.

Below project structure will get created - 

2. Right click on View Controller project and select New .

A new Gallery window will open


3. Select JSF page Fragment and click OK


4. Repeat Step 2 - Select ADF task flow and click OK


5. Repeat Step 2 - select JSF page and click OK


6. Below structure will be created in ViewController –


7. Drag and drop the required components from component palette in your jsff page :


Sample code below :

<af:panelGroupLayout id="pgl1" layout="vertical">
      <af:inputText label="Email" id="it1" value="#{pageFlowScope.emailId}"
                    autoSubmit="true"/>
    <af:inputText label="Password" id="it2" value="#{pageFlowScope.password}"
                  autoSubmit="true" secret="true"/>
    <af:goButton text="Login" id="gb1"/>
  </af:panelGroupLayout>

Blue color - It states that these values or attributes are manually added using property Inspector.

8. Drag and drop your login.jsff page on your loginTF.xml task flow as show below.


Make sure to set it as a default activity.

9. Drag and drop your loginTF in your Login.jspx page as region.


10. Right click your Login.jspx page and select Run


Your first ADF page view will be displayed like below :