ADF Faces Hello World!

Note: This post was written using Oracle JDeveloper 11.1.1.3, running in 64-bit mode on 64-bit Ubuntu 10.04 LTS, but will work with JDeveloper 11.x on any platform.

This is the first in a series of posts on Oracle Application Development Framework (ADF).  This post assumes that you have got Oracle JDeveloper installed, and presents a very simple “Hello World!” application, that shows us the most basic creation and deployment of an ADF application.  Subsequent posts will build on this post with increasing, additional functionality.

Watch this post on YouTube!

First, we need to create a new application to hold our work.  With JDeveloper open, select New from the File menu.  The New Gallery will open.  Select Applications under General on the left hand side, and Fusion Web Application (ADF) on the right.  Then click on OK.

The Create Fusion Web Application (ADF) wizard will open.  You need to give your application a name.  I called mine RedStack.  Normally you could just click on Finish now, but as this is our first time, let’s click on Next instead and get a bit of background as to what this wizard is doing for us.

You will notice from the left hand side, that this wizard is creating and “Application” that contains two “Projects.”  The first project is called Model, as you can see below.  You can also see in the Selected Project Technologies area (bottom right) that this project is automatically configured to support Java and ADF Business Components.  We wont be using these until a later post.  It is worth knowing that we can add extra technologies now, or later.  Adding a technology is going to make the necessary libraries available to build and deploy artefacts built using that technology.  For example, if we knew that we wanted to call a web service, we might want to add the web services technology, which would add libraries like web services client proxies, XML libraries, JAXB, etc.  For now, just click on Next twice to continue to the second project.

Here we see the second project is called ViewController.  This is where we will be spending most of our time for the next several posts.  This project will end up being a Java EE web application, in a web archive (WAR) deployment unit.  You can see it is preconfigured with various web technologies, Java and XML.  Click on Finish.

After a few moments, our application will be created.  You can see the two projects in the Application Navigator shown on the left.  In the main (centre) pane, there is a project overview which will guide us through various steps to get our application working.  For now, we are going to close that and ignore it!  If you move your mouse to the RedStack Overview tab, a close icon will appear at the right hand end of the tab.  Click on that to close the tab.

If we use the + icons to expand out our ViewController project, you can see what artefacts are created by default.  You will notice there is a Web Content folder, where we will keep all of our pages, templates, images, etc.  Later on (in a later post), when we create Java classes, an Application Sources folder will appear as well.

Let’s start by taking a look at the adfc-config file, located in the Page Flows folder under Web Content.  Double click on it to open it in the main pane.

You will see an empty diagram, as shown below.  This diagram is used to create the pages, “Views,” in our application, and to set the rules about navigation between the pages.  We will see how to use this a lot more in later posts.

For now, we are going to drag a View from the Component Palette on the right hand side, and drop it on the diagram, as indicated by the red arrow in the diagram below.  When you drop it, the name will be highlighted, and you can type in a name for the page.  I called mine home.

If you accidentally hit enter too soon, you can double click on the name to edit it.

If you don’t see the Component Palette, you can open it using the View menu in JDeveloper.

Hint: It is a good habit to hit Save All in the File menu after each action.  In this simple example, it does not really matter, but as move on to more complex examples, it is good to make sure all of your changes are saved before you move on.  Sometimes actions that you take may update several files, not just the one you are working on.  I like to Save All after every action I take.  Once you make it a habit, you will do it without thinking about it, probably much more often than you need to, but it will save you pain later on!  It also creates more save points in the revision history that you can revert to if you do something wrong.  Try to get into the habit, I am pretty sure you will ba happy you did.

Now, double click on the home View that you just added to the diagram.  This will open the Create JSF Page dialog, as shown below.

Specify a file name for your page.  I like to make it the same as the name of the view.  You want to use jspx, not jsp, so that you can take advantage of the additional validators that are available for jspx.  Again, this will save you time later on.

Also, select a Page Template from the pulldown list.  Later we will create our own templates, but for now, select Oracle Three Column Layout.  Page templates are useful for ensuring consistency across all of our pages.  They are a good place to put things like branding, navigation, shared logic, copyright notices, menus, etc.  We will see them in later posts.  For now, just click on OK.

After a couple of moment, our new empty page will open.  You will notice that it has a logo, three columns and spaces for headers, copyright notices, etc.  You should also notice that your Component Palette (on the right) will change to show different components now.  The components that appear now are the ADF Faces components and layouts.  You may notice there is a pulldown box at the top of the component palette which lets you select different groups of components.

For now, we are going to get started with one of the simplest components, the Output Text component.  Scroll down in the Common Components section of the Component Palette and drag one across to your page.  Drop it in the centre section of the page, as indicated by the red arrow in the diagram below.

In the bottom right of your screen, you should see the Property Inspector.  If it is not there, you can open it using the View menu in JDeveloper.  It should show properties for the Output Text component that you just added.  If not, just click on the component in the centre pane to select it, and the properties for that component will be displayed.

We are going to change the Value property, as shown in the diagram below.  Let’s change it to that old favourite, Hello World! as shown.  Make sure you press Enter when you have finished typing in the new value.  Then hit Save All!

You may notice that some properties have a little green dot beside them.  This indicates that they are not set to their default value.  This is a visual clue to let you know which properties you have edited.

Now we are ready to run our humble application.  Right click on the page in the centre pane, and select Run from the popup context menu.

The first time you do this it will take up to a couple of minutes (depending on the speed of your machine) to create a WebLogic Server instance, start it up and build and deploy our application.  Once the server is running, we leave it running as we make iterative changes to our application and retest them.  So in general, you will only start the server once per development session.

Once the server is started and the application is deployed (you can watch the progress in the Log window at the bottom of the JDeveloper screen) JDeveloper will open up your application in the default browser.

You can see from the diagram below what your application should look like.  Notice the Hello World! message.

So that completes our very first, very simple ADF application.  We saw how to create an application, add pages to the application, use a page template, add components to pages, and build, deploy and run our application!  It might not have seemed like much, but it is some of the basics that we will use over and over again in subsequent posts as we build on this application to add much more functionality as we explore ADF!

See you next time.

This entry was posted in Uncategorized and tagged . Bookmark the permalink.

7 Responses to ADF Faces Hello World!

  1. chrisgilbert99 says:

    Thanks for starting easy! Can I just ask that, as you get more complex, that you describe the thinking behind why you select some options as opposed to others. In other words, not just describe which buttons to press or mouse clicks to make but why.

    • markxnelson says:

      Thanks Chris, we will try to explain as clearly as we can. Not that we are world experts, but we have trodden that path and learned some things on the way.

  2. Pingback: Simple Navigation « RedStack

  3. mnewman2312 says:

    Thank you for taking it easy on us for the first few steps.

  4. Thanks for making it easy for us ADF beginners… Thanks once more

  5. Very nice post. Thank you

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s