Move
your mouse over this icon to show all screenshots. You can also move your mouse
over each individual icon to see only the screenshot associated with it.
Overview
In this tutorial you build an application using ADF
UIX technologies. The visual editor tools are 100% synchronized with the code
for the UIX XML page. You see how the visual editor, the code editor, and pageflow
editor remain synchronized with each other regardless of which tool you choose
to work with. You first need to create a business layer, but the focus of this
tutorial is on building the View part of your application. Here ADF Business
Components are used for the business layer. For more details about working with
business services, refer to the JDeveloper tutorial documents on Oracle Technology
Network (OTN).
You are a developer building UIX pages for a simple
HR application. The application is to contain three UIX XML pages - browseDeptEmp.uix,
browsAllEmp.uix, formEmp.uix - and five Struts actions that will be used to
manage navigation and creating and committing data. The three pages are based
on the Employees and Departments tables found in the
ADF UIX pages can be used with any business service
such as ADF Business Components, TopLink, Enterprise Java Beans, Web services
and Java Beans. ADF Business Components is used in this topic as an example.
After finishing this exercise you may want to practice what you've learned
by using one of the other business services.
In this topic you create a new application workspace
and then create an ADF Business Components model that is based on the Departments
and Employees database tables in the HR schema. To create a business service
with ADF business components, perform the following steps:
In the Application Navigator, right mouse click on the
Applications node. Select New Application Workspace
from the context menu.
2.
Enter an Application Name of
HRApplication. As an Application Template select
Web Application [Default].
Click OK.. This creates an application workspace with two empty
projects, ViewController and Model.
3.
You now create the Business Component model
in the Model project. Right-click the Model project in the Application
Navigator, then select New from the context menu.
4.
The technologies shown in the New Gallery
are determined by the application template that you chose when you created
the workspace.
Expand the Business Tier node. Select Business Components in the
Categories list and Business Components from Tables
in the Items list.
Click OK.
5.
In the connection dialog select the HR connection
and click OK. In this example, the connection is named hr_conn,
but you can use any database connection to the HR or HR8 schema. For information
on how to set up this connection, see Prerequisites.
6.
If the Welcome page of the Create Business
Components wizard is displayed, click Next.
In the Create Business Components wizard, you can create updateable or
read-only view objects. For this project, you create updateable view objects
that are based on entity objects.
In the Entity Objects page of the wizard select (Control-click) the
Departments and Employees tables in the Available
list. Click the Copy button
to move the selected tables to the Selected list on the
right.
Click Next.
7.
In the Updateable View Objects from Entity
Objects page, click the Add All button
to move both entries to the Selected list on the right.
This defines both selected Entity Objects as the source of the updateable
View Objects.
Click Next.
8.
In the Read-Only VIew Objects from Tables
page, because you are not creating read-only View Objects, do not select
any tables; just click Next to accept all default settings.
9.
In the Application Module page click Next
to accept all default settings.
In the Finish page, click Finish to create the Business
Component model. You can see the model displayed in the Applications Navigator.
10.
With the Model project selected in the Application
Navigator, click the Save button
and then Make
in the JDeveloper toolbar to save and compile your project.
11 .
Download the images.zip
file (found here) and extract it
to the <jdeveloper>jdev\mywork\HRApplication\ViewController\public_html
directory
You have now created a default model based on two
tables in the database. In order for this tutorial to work you need to
modify one of the generated view objects.
Double click on the EmployeesView node.
2.
In the ViewObject Editor dialog select Attributes and expand the Attribute
node Change the Display Hint property to Hide for the following
attributes: - CommissionPct
- PhoneNumber -
ManagerId - DepartmentId
Once these properties are modified, Click OK. The model project
has now been modified.
There are two ways to create a UIX XML page. The first uses a wizard, the
second builds the page manually. In this tutorial you build the pages using
the wizard then connect them to the Struts controller.
Right-click on the ViewController project and
select New. This launches the New Gallery dialog.
In the New Gallery dialog select the ADF UIX node and select the UIX
XML Page with Header, Footer and Navigation item. Click OK.
2.
The UIX XML Page wizard is invoked. In Step 1, name the page
browseDeptEmp.uix and click
Next.
3 .
In Step 2 specify the Title to be Human
Resources and click Next.
4 .
In Step 3 press the Select Image button, navigate to
the /images/ directory and
select the exlibris.gif file
and click Next.
5 .
In Step 4 press the Select Image button, navigate to
the /images/ directory and
select the product.gif file
and click Next.
6 .
In Step 5 click on the Add Tab button, and specify three tabs
according to the specification below. Set the Please specify the selected
tab index property to 0.
Click Next.
Tab Text
Tab Destination
Browse Depts Emps
#
Modify Employees
#
Search Employees
#
7 .
In Step 6 set the Page Header to Browse
Employees by Department and click Next.
8 .
In Step 7 add three Global Buttons according to the specification
in the table below. Click Next.
Text
Destination URL
Image Location
Cart
#
images/cart.gif
Help
#
images/help.gif
Login
#
images/login.gif
9 .
In Step 8, you may leave the properties at their defaults,
or change them to anything you'd like. Click Next.
10 .
In the final step, click Finish and your page will
be displayed in the Visual Editor. Save your work.
11 .
In a Windows Explorer window navigate to the <jdev_home>\jdev\mywork\HRApplication\ViewController\public_html.
Make two copies of the browseDeptEmp.uix
page. Name one formEmp.uix
and the other searchEmp.uix. You
are going to modify these pages in a later section.
In the ViewController project, expand the Web Content node, then the
WEB-INF node. Double click on the struts-config.xml file. This
will open an empty Struts pageflow diagram.
On the right hand side of the IDE, there should the Component Palette
available. If it is not visible, go to the View menu and select Component
Palette.
2.
Click on the Data Page node and then on the empty Struts
page flow. Rename the node to /browseDeptEmp.
Your diagram should look like this:
3 .
Double click on the Data Page node - /browseDeptEmp
- and you will be able to associate your data page with a specific page.
Use Browse to find the browseDeptEmp.uix
file you created earlier, select it and press OPEN. Ensure
that Edit this page now is checked, then press OK. The /browseDeptEmp
Data Page icon becomes enabled.
In the DataControl Palette you should see a list of
all available data controls in your Application Workspace. In this case
you should see two data controls mapping to the View Objects (VO) - Employees
& Departments - in the Model project.
Note: If the Data Control Palette is not visible you can open the palette
from the JDeveloper View menu.
Expand the DepartmentView1 node and you will see all attributes
available on this View Object (VO), the View Link, plus a set of operations
that are available for this VO.
2.
Select the EmployeesView3 node under DepartmentsView1
and look at the different options available in the dropdown list "Drop As:"
Select the component type: Master Detail (Many to Many). Drag and
drop the EmployeesView3 node into the center of your page. Your page
should now contain two read only tables:
3 .
Modify the data component prompts. Click on the title of your master
table - Master. You should now see a dotted border around your
table and in the Structure Window (in the lower left corner of the IDE)
you should see that the Header - Master component is selected, and you
should also see the properties available for this component in the Property
Inspector.
In the Property Inspector change the Text property to Departments
Repeat the above steps for the Details table and set the Text
property to - Employees
Make sure you save your project.
4 .
To run an application, open your Struts pageflow diagram and
right-click on the data page you want to run - browseDeptEmp
and select Run.
5 .
Test the application by selecting a department and observing
the employee list change.
Create an Update Page
In this topic you create an Update page and link it to the browseDeptEmp.uix
page using the Struts page flow diagram.
At this point you have a page containing two read-only tables showing all
departments and employees for each department. The next step is to modify
one of the pages you created earlier to allow you to update employee information.
The page will be used to modify an employee based on the selection in the
browseDeptEmp page. To achieve this you use the same employees view instance
as in the browseDeptEmp page - EmployeesView3.
In the Navigator, select the ViewController node and choose the File|Open
menu option. Navigate to the ViewController\public_html
directory, select the formEmp.uix
file and press OK. The page is displayed in the Visual Editor.
2.
Modify the page as follows: Double click on the prompts to
invoke the Property Palette and modify the following properties:
Change the pageHeader object text property to Create
and Modify Employees. Modify the tabBar object and change
the selectedIndex to 1.
Save your changes.
3 .
Open your Struts pageflow diagram. Drag and drop a new Data
Page onto the diagram and rename to - /formEmp.
4 .
Double click on the
/formEmp node in order to create your UIX XML page. Using the Browse
button, navigate to the \public_html\
directory and select the formEmp.uix
you created earlier. Then click OK.
5 .
In the Select or Create window ensure the Edit this page
now checkbox is selected and press OK.
6 .
In the Data Control Palette select the EmployeesView3
located under the DepartmentsView1 node. Change the "Drag and
Drop As:" type to - Input
Form
7 .
Drag and drop the EmployeesView3
node onto the center of the page. Save your work. Your page should look
like this:
Include Navigation
Between two Pages
This topic focuses on associating two pages, so that the end user can navigate
from the Master Detail page - browseDeptEmp.uix - to the Input Form page -
formEmp.uix. We do not cover navigation from the Input Form to the Master
Detail page in this topic.
Open your Struts pageflow diagram. Drag a Forward from the /browseDeptEmp
Data Page to the
/formEmp Data Page. Rename
the link to - formEmpLink
2.
Add a button to navigate. Double click on the
/browseDeptEmp node in order to open the browseDeptEmp.uix
page. In the Component Palette select the palette page containing UIX Forms
components - Form Components.
3 .
Drag and drop a submitButton from the list of Form
components onto the Select column in the Employees table. The button appears
just above the table over the Select column. You can drag and drop the button
anywhere on the page, but this makes it clear that you are editing the Employees
table. Double click the button, and change the text for the button to Edit.
4 .
Specify an event. In order for the application to know where to go when
the Edit button is clicked
you need to raise an event, catch the event and specify where to go when
the event occurs.
Select the Edit button.
In the Property Inspector specify an event by entering a value for the
event property - goEdit
5 .
Create an event handler. Now you need to create an event handler and
this is done from the Structure window. At the bottom of the tree in the
Structure Window there is node called Handlers. Under this node you will
find all event handlers used by this page.
Right click on the handlers node in the Structure Window. Select Insert
inside handlers. Select event Give the event the same name
as the event property for the Edit button -
goEdit. Click OK to close the dialog
6 .
In the Structure Window, right click on the new event and
select Insert inside event. Select UIX Controller and in the
list of available behaviors select go.
7 .
In the Create <go> dialog that appears set the
name property of the "go" behavior to the same name as the link created
in the Struts pageflow to navigate from the Master Detail page to the Input
Form page - formEmpLink.
8 .
Save your work and run your application by running
the /browseDeptEmp on your
pageflow.
9 .
In the Employees detail of the browseDeptEmp.uix
form, select an employee and press the Edit button. The fromEmp.uix
page should be invoked, displaying the employee record you selected for
editing.
Add
Data Control Operations to a Page
Adding a data control operation such as Delete or Create to your page can
be really easy or very complex, depending on what you want to achieve with
your application.
For this application you are going to add a delete button to remove
employees from a department. This is an easy approach to add an operation
to your page.
Open the browseDeptEmp.uix
page. Expand the DepartmentsView1 node in the Data Control Palette
till you see the EmployeesView3 node with all its attributes,
and the Operations node.
2.
Expand the EmployeesView3 Operations node. Drag and drop the Delete
operation onto the Select column in the Employees table.
Your form should look like this:
3 .
Save your work and run your /browseEmpDept
to test that it works.
4 .
Create a record. For your application you need to add a Create button
to be able to add employees to a department. You could still use the
same approach as the Delete button, but the read-only table does not
allow you to add records so you need to navigate to the page formEmp.uix
AND create a new record at the same time.
Open the Struts pageflow diagram. In the diagram add a new Data Action
and rename to - /createEmpAction
Note: This action will be called whenever the user wants to create a
new record in the Employee table.
Drag a Forward from the /createEmpAction
Data Action to the /formEmp Data
Page Drag another Forward from the /browseEmpDept
Data Page to the /createEmpAction
Data Action and rename the link to - createEmpLink
Your diagram should look like this:
5 .
Still in the Struts pageflow diagram, open the Data Control
Palette. Expand the DepartmentsView1 node in the Data Control
Palette till you see the EmployeesView3 node and all its attributes
and the Operations node. Expand the EmployeesView3 Operations
node. Drag and drop the Create
operation onto the /createEmpAction
Data Action in the Struts pageflow diagram. Save your work.
6 .
Now you need to add the button that executes the Create operation
Open the browseDeptEmp.uix
page. Drag and drop a submitButton
from the Component palette onto the page placing the button to the right
of the Edit button in the Employees table. Set the text on the
button to - New and the
event property on the button to - goCreate.
7 .
Create a new event handler in the Structure Window
and set the name to - goCreate
8 .
In the new event handler add the "go" behavior from the UIX
Controller submenu. Set the name of the go behavior to - createEmpLink
9 .
Save your work and run the /browseEmpDept
from the Struts pageflow diagram. Test your application.
Manage Database Transactions
This topic focuses on how to manage interactions with the database by adding
Commit and Rollback buttons to the page.
Now that you have a form to browse Departments and their Employees, and one
to update and create employees, you need another one to search for a specific
employee. In this topic you create a form to search and display employees
that match a specific criterion.
Modify the existing Struts pageflow diagram. Open the Struts pageflow
diagram. From the Component Palette drag and drop a Data Page onto
the Struts diagram. Rename the node to /searchEmp.
Drag another Forward / Link from browseEmpDept
to searchEmpAction and rename
the link to - searchEmpLink.
2.
Modify the /searchEmp.uix
page as follows: Double click on the Page Forward node -
/searchEmp Click the Browse button, navigate and select the
\public_html\searchEmp.uix
file. Press OK.
3 .
Modify the page as follows: Double click on the prompts to
invoke the Property Palette. Change the pageHeader object
text property to Search for
Employees. Modify the tabBar object and change the selectedIndex
to 2. Save your changes
4 .
In the data Control Palette select the EmployeesView1
node. In the dropdown list "Drop As:" select the component type: Search
Form. Drag and drop the EmployeesView1
node onto the page. Your page should now look like this:
5 .
Save your work and in the page flow diagram, run the /searchEmpAction
to test.
Link the Search Page
into the Application
You need to add the button that navigates from the Master Detail page to
the Search Form.
Open the browseDeptEmp.uix
page. Drag and drop a submitButton from the Component Palette
onto the page, placing the button to the right of the Edit
button in the Employees table.
2 .
Using the Property Pallette - Set the text on
the button to - Search -
Set the event property on the button to - goSearch
3 .
Create a new event handler in the Structure
Window and set the name to - goSearch
4 .
In the new event handler create a UIX Controller behavior
- go Set the name of the
go behavior to - searchEmpLink
5 .
Save your work and run the /browseEmpDept
from the Struts pageflow diagram. Test your application.
In this topic, you switch between multiple looks and feels for your ADF UIX
application. Up to now, you have been working in the Browser Look and Feel
( BLAF). Now, you switch the interface to display another, lighter, look and
feel meant for end user customization. This look and feel is known as the
Minimal Look and Feel (MLAF). Further customizations to the MLAF can be accomplished
with CSS technology.
1.
Change the look and feel of your pages. Edit the uix-config.xml
by double-clicking it in the Application navigator under "Web Content" ->
"WEB-INF". Change the value of the <look-and-feel> element from blaf
to minimal. Save the uix-config.xml
file.
2.
Open the browseDeptEmp.uix
file. You should see the same page rendered in the minimal look and feel.
Editing operations still work.
Bookmark
to move the selected tables to the Selected list on the
right. 
to move both entries to the Selected list on the right.
This defines both selected Entity Objects as the source of the updateable
View Objects. 
and then Make 
in the JDeveloper toolbar to save and compile your project.