JDeveloper 12c

Tuesday, 6th 2016

Learning ADF Basics

Introduction to ADF:
In this brief lesson, we will learn how to make simple ADF pages and also,
create a basic control flow between our created pages:

Start a new Application:

After opening your JDeveloper 12c, go to:
File New New Application
As the picture below illustrates:

After selecting application, you will be prompted to choose from a gallery, choose ADF
Fusion Web Application:

|Page1
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

After choosing ADF Fusion Web Application; you will have to choose your application
name, in this scenario, we will make it Training:

|Page2
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

Then we choose default building tools as it appears in the next picture:

After choosing " Use Jdeveloper's default build tools"; you will be prompted to type
your project name; By default it is "Model". You can change it to whatever you want,
but Model is the recommended word because if you change the word, you will need to
manually change the project name inside your application. So we will keep it as Model
and click next:

|Page3
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

Note:
As you notes, Java and XML in the screen shot above, both of them combined
form what is known as AJAX.
After finishing writing your project name "Model" and click next, you will be prompted
to specify Java Settings:
Default Package
Java Source Path
Output Directory
But we will also keep everything as default like the following diagram:

|Page4
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

Then you will be prompted to specify the second part of your project, which is known
as the view controller. Usually, the default name is "ViewController". We will also keep
the defaults as they are:

|Page5
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

After finishing the ViewController, we will be prompted to specify the package name
for it and in this case, we will keep the default name, which is view:

|Page6
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

After clicking Finish, we will get the following Screen:

To the upper left, we will see our created Model along with the viewcontroller.

Let's create a simple page:

|Page7
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

To create a simple Page, we go to:

File New Gallery Web Tier JSF/Facelets Page
The diagrams below show you how:
File_New_Gallery:

Web Tier JSP/Facelets Page

|Page8
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

After clicking okay; you will see a page under the title Create JSF Page; it contains the
following:
File name We chose HelloWorld
Directory Keep it as default
Document Type we chose JSP XML
Page layout We will choose blank page
Please check the diagram below:

|Page9
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

After clicking ok, we will get an empty page and also, we can find our HelloWorld.jspx
under:
ViewController Web Content Page Flows HelloWord.jspx

| P a g e 11
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

Lets simply write Hello World and then run to see how it will look in the web browser:

| P a g e 11
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

Let's now run and see how it will appear in the browser (FireFox):

This is how it will look:

Let's now create another page and call it welcome:

Same Steps as we did with HelloWord.jspx:
File New Gallery Web Tier JSP/Facelets Page

| P a g e 12
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

In this page, we will be using components:

Control Panel
Input texts
Button
Showing Components:
If your components don't appear to your upper right corner, you can always click
window in the main menu and choose components and any other feature that don't
appear such as properties or structure; The picture below explains how:

| P a g e 13
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

So after clicking on components, we will get all the components:

The Components are:

Under the layout, we will choose Panel Control Layout:

| P a g e 14
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

Then drag it to our Welcome Page:

Now, under Text and Selection in the Components, we will chose input text:

Then Drag two input texts inside the panel form layout we previously inserted:

Rename The input text labels:

| P a g e 15
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

To rename the input text labels, you need to go to each one's property and change its
label to what you want. If property doesn't appear, you can always call it from windows
option on the main menu:

You choose the input text and then call its property:

Adding a button:
To add a button, we must go to Components, under General Controls and choose button
as it appears in the image below:

| P a g e 16
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

When choosing the property of a button, you will be getting something like this:

Making a simple ADF Task Flow:

In this portion, we will be exposed to how to manage the flow between the two pages we
just created and that is by:
Opening adfc-config.xml page which is:
ViewController Web Content WEB-INF adfc-config.xml
As the diagram below shows:

| P a g e 17
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

After opening the page, you will get something like this:

Select both Pages and drag and then, drop on the adfc-config.xml page:

| P a g e 18
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

After that, go to components and under ADF Task Flow, choose Control Flow
case as it appears below:

After choosing, we connect Welcome page with HelloWorld page with an arrow
and name it "GoHello" as it appears below:

| P a g e 19
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

After we are done, we go back to Welcome page and open the property of the
button we created earlier:

IN the action listener, we drop down the menu and choose GoHello, because
that is the name of the relationship we set in the control flow.
Let's run the page now and see what happens:

| P a g e 21
JDeveloper 12c
Tuesday, 6th 2016
Learning ADF Basics

When we click on the button " Go to page HelloWord"; it takes us to

HelloWorld.jspx page.

| P a g e 21