Thursday, March 13, 2008

ADF : Hello World Page

Hi guys,
I am back for the much discussed topic on our OAF forum regarding ADF page creation and deployment .Without wasting much time lets see how to create a very basic Hello world page and in the next article i will discuss how to deploy it.

Step 1 : I hope you have downloaded Jdev, from the link I have mentioned in my last article.

Step 2: Setup Of Jdeveloper.
a)Unzip jdevstudio10133.zip
b)Click jdeveloper.exe inside the unzopped folder to start Jdev.
c)Create a DB connection with R12 instance.(Although not required since this is a hello world page) You don't need a dbc file for ADF project. You just need to have db credentials to create DB connection.


Step 3: Create a Application, see screenshots




Enter project name and location where you wanna make this project. We will use jdev directory to hold our projects, this is not mandatory, you can have any directory for the same.Enter following details:
Application Name: Mukul_ADF_SAMPLE
Directory name : (Jdev install dir)/jdev/(project name)
See screenshot below:



Step 3: Create projects for the Application created.
When you create an application it prompts for creating a project.We are creating a project with name "Model" in the application we created.




Now since , every application can be divided into MVC-- Model, View and Controller, we will make 2 projects.One project for Model(name--"Model") and one project for View and Controller(name--"ViewController").Here are the steps for creating ViewController project in the same application:







Basically our model project will contain all objects for the model layer, i.e BC4J layer, EO, VO, VL etc.Our viewController project will contain all web realted stuff and backing beans. The role of backing beans in ADF is somewhat similar to controller in OA Framework.
In this present example we need at all create the model project,because this is just a hello world page( we are not creating any BC4J object like EO,VO etc). I have created this just give a idea how do we work on a standard project, where there would be some Model layer objects.



STEP 4:Marking projects as dependent.
Now... as I explained that one project contains all model related stuff(Model) and one project for view and controller(ViewController),so, basically we need to tell application that our view and Controller project is depedent on Model project for all data bindings. This can be done declaratively through Jdeveloper.
Right click on ViewController project and click on "project properties":



Select "Dependencies" node and click tick on "Model.jpr", as shown in screenshot below:

This will in turn update web.xml and tell project the ViewController project components are based on Model project.

STEP 5:Creating faces-config.xml
I guess the step heading sounds quite difficult.... :), like we need to write a faces-config.xml. I hope you must thank to Jdev where most of your xml code is generated through wizards.Ok, so basically this xml file holds the flow diagram of the application.Entirely different from OA Framework, ADF provides a very lucid and effective flow mechanism.Lets see how?
Right click on your ViewController project and select new... and follow as shown in screenshots to create faces-config.xml file.









STEP 6:Defining Pages and flow.
In the component pallete for faces-config.xml you can see items like jsf page, note etc, jsf navigation case etc. They signify exactly what there name signifies. We will do the follwoing:
1)Drag Note from pallete to our diagram. The purpose of note, is to make a heading or notes in the diagram.Click in the note after u have dragged it in diagram and type"Flow diagram of project".



2)Drag a JSF page into the diagram. You would be "a yellow exclamation mark on page diagram", this basically signifies that this project is still not created,so, that user should remember the which pages in the flow diagram are not created yet.



Click untitled.jspx and edit it as /apps/HelloWorldPG.jspx.



Since, in my example I am just showing one page with hello world we don't need more pages. Still, to give you a idea, we will create one more page to show how we make navigation.Hence darg one more jsf page and edit its name as shown in screenshot.



3)Now to make navigation case from helloworld page to search page, click jsf navigation in component pallette, now click on helloworld page and extending the line click on search page.You would see following screenshot:



This diagram basically tells that any action/ost event occured on helloworld page with action name "success", will forward the flow to search page. We will change name of action from "success" to"search", this is just for appropriate name puprose, you can keep any action name like xyz.



4) Now in this step we will actually create the page.Double click hello world page in the faces-config.xml diagram, you would see following screenshot:



Make sure that select jspx document and click next...



Select "Automatically Expose UI Component in new Managed Bean", this is like your controller, you want to create or not. Although we won't need this in our hello world page, but just creating this to give you an idea what this file contains. By selecting this option in wizard, any UI bean attached to page, its getters/setters are automatically exposed in your backing bean class. Edit the backing bean name as shown:



In the next screen select following libraries:
1)ADF Faces Components
2)ADF Faces HTML
3)JSF Core
4)JSF HTML

Press finish.You would see following screenshot on finishing this in Application Navigator:



You can click pkg viewcontroller.backing.apps and see the backing bean class.It will contain getters/setters for all the beans in the page.Also, every new bean you add to page, is automatically added in this class. This class will contain all controller logic and will be used to invoke any method in AM. But method here to access AM is a little different than from AM, due to fundamental differences in techstack.
Also like the methods process request and process form request, we can customise lifecycle of a JSF page, but, here its all a bit different. All these facts can be fould in ADF developer guide, I am not explaining each and every fact here, to make this article short and crisp.Main purpose of this article is to give you start with ADF, rest depends on individual effort.

STEP 7:Page UI creation.
Extend all nodes in structure window of HelloWorldPG and click h:form. In the Component pallete select "ADF Faces Core".



Drag the scrollbar down in component pallete and select PanelPage and drag and drop this mouse to h:form, here are the screenshots, how it will look like:



"PanelPage" can be considered as pagelayout region in OAF, basic page layout with header and footer. Typically every page would have this, and all regions and otems will be child of this.One feature of Jdev is that as soon as you drag and drop any item from component pallete to structure of page, you can immediately see its look and feel on the page. This nis very essential from the point of development, as you would not everytime run the page and see that what your UI look like.

Now we can edit the title of page to Hello world from property inspector as shown in figure



STEP 7:Run The page.
We are done with our hello world page. You can right click the HelloWorldPage.jspx file and click run, a new browser window will open and your page will something like:



This finishes creation of Hello world page in ADF.... and I hope this article will give u an idea of ADF to self start it. In the next article will discuss how to deploy it.You can go through ADF developers' guide and learn fundamentals.

14 comments:

Vikram Kohli said...

thanks Mukul for sharing it.

~Vikram
http://kohlivikram.blogspot.com/

SAMEER SRIVASTAVA said...
This comment has been removed by the author.
SAMEER SRIVASTAVA said...

hi Mukul,
thanks for the tutorial ... but ur i am facing some problem while following ur tutorial in the latest version of jdeveloper "jdevstudio1111" that i have downloaded from "http://www.oracle.com/technology/software/products/jdev/htdocs/soft11tp.html"... . Particularly i am unable to follow ur tutorial from the STEP 6 .. point no. 4... on clicking on the HelloworldPG in the flow diagram ... the wizard that u have shown is not appearing . infact the jdeveloper 11g.. is taking me to the HelloWorldPG itself ... and not opening the wizard .... any suggestions ????

Sameer Srivastava

Mukul Gupta said...

thanks Vikram!

Mukul Gupta said...

Sameer, this article is regarding ADF page creatyion in Jdeveloper 10g and not 11g. With 11g Oracle has come up entirely new UI items of JSF with AJAX approach. Jdev 11g is still not released by Oracle, its has only released its technical preview, which ur using... it will still take some time for 11g to rock j2ee market.
In the article prior to this I have given the exact version to download to create ADF page.
--Mukul

SAMEER SRIVASTAVA said...

hey thanks Mukul ... i mistakenly overlooked the version .... but u know what ... now i am able to do the same task that u have described in Step 6 .. point 4 ... the difference in 11g is that .. there is as such no wizard but a single dialog ,....where we need to select the options .. that are described in different dialogs of the wizard in 10g ... now the BIGGER challenge that i am currently facing is .. there nothing like " ADF Faces Core " in the faces pallet of jdeveloper 11g... still strugling for the workaround :(

nyways thanks for the tutorial ... a helpful initiative .. keep it up dude :)

Sameer

Mukul Gupta said...

Sameer,
there is no ADF faces core component palette in Jdev 11g, as coponents are purely JSF components with AJax, These are entirely new components and need to be used as per the tutorials given By Oracle. I will advice to download Oracle's sample for 11g preview 3, it would give u a better idea.
--Mukul

Mahadev said...

Prasanna,

Many thanks for the brilliant articles.

I 've downloaded the new version of Jdeveloper 10g for R12.0.0 but it doesn't contain the dbc file.

Can you please post a sample file and then I can make the necessary changes.

Regards
Mahadev

Mahadev said...

Mukul,

Many thanks for the brilliant articles.

I 've downloaded the new version of Jdeveloper 10g for R12.0.0 but it doesn't contain the dbc file.

Can you please post a sample file and then I can make the necessary changes.

Regards
Mahadev

Unknown said...

Mukul,

Many Thanks for the tutorial.

Have you had a chance to write an article on deploying ADF pages in
R12. Can you please point me to that.

Thanks,
Vanitha

Unknown said...

Hi Mukul,

Many Thanks for the tutorial. It is very helpful.

Have you had a chance to write an article on deploying ADF pages in
R12. Can you please point me to that.

Thanks,
Guru

Santhosh kumar said...

Hi
Mukul,

It is very useful...to me. but if you have any ppts and video presentations on ADF, can you plz share to santhosh.kumar49@gmail.com...

Regards
Santhosh kumar.k

sann said...

Hi Mukul,

Very well explained article for begginers.

Thanks Mukul
Sandhya

Raja said...

hi mukul,

First of all Very Much Thanks for the great articles.
These articls are very much useful for many developers.

mukul, i have JDEV 10g and jdevstudio is not installed in my system. Can i create ADF page which u have provided above?
or else i need to install any other software for creation of ADF pages?
Please help.

Thanks,
Raja.