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 :


Note : The above blog will demonstrate the use of view controller project only. I have used bounded taskflow for the implementation and the application will currently not interacting with any BC component or managed bean.

*Comments and feedback are most welcomed, Thanks.

4 comments:

  1. Helpful article, thanks

    ReplyDelete
  2. How can we figure out whether to use bounded task flow or unbounded?

    ReplyDelete
    Replies
    1. Bounded task flow - If you want to develop regions / section of a page instead of complete page and you also want to reuse that designed.
      In bounded taskflow you can specify which method, fragment or query etc you want to execute before your page loads (Setting default activity).

      Unbounded taskflow you can use if you want multiple entries in your application and there will not be any fixed entry point

      Delete