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 Common Schema of the Oracle
database.
Before starting to create your views and business services (model) you need
somewhere to store your work in progress. Once you have created the Application
Workspace, you can start to build the business components.
Create a new Application workspace to hold the Model and ViewController
components. Choose File | New. Select the Application workspace node.
Click OK. This launches a dialog which allows you to define location, templates,
and an application package prefix.
2.
Change the name of the Application workspace to - HRApplication. Ensure
the Template property is set to Web Application [Default].
Keep the rest of the defaults and click OK.
3 .
On completion you should have an application named HRApplication and two
projects named Model and ViewController.
4 .
Download the images.zip
file (found here)
and extract it to the <jdeveloper>jdev\mywork\HRApplication\ViewController\public_html
directory
To build the business components for this tutorial,
complete the dialog in the wizard
Right-click the Model project and select New. This launches the
New Gallery dialog In the New Gallery dialog, select Business Components
category and then the Business Components from Tables menu item and click
OK.
For more details about building business services please refer to theCreating
a Business Model using ADF Business Components tutorial.
This section simply covers how to generate a business service and make
some small changes to the model, as required by this tutorial.
2.
In the Business Components Project Initialization dialog, select your
HR database connection. If you do not have one, you need to create a new
connection pointing to the HR schema. Install the sample schema and create
a connection to the HR or HR8 schema to use in this lesson. See Installing
the Sample Schemas and Establishing a Database Connection
tutorial.
Click OK. This launches the Create Business Components from Tables wizard.
3 .
The Business Components wizard In Step 1 of the Wizard, select
the Employees and Departments tables to create entity objects from them.
Click Next.
4 .
In Step 2 select all tables for the view object and click
Next.
5 .
In Step 3 of the wizard, change the name of the
application module to HRService. Click Finish.
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.
Step 3- 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.
3 .
Run the /browseEmpDept
from the Struts pageflow diagram. The application still works in the minimal
look and feel without any changes to the user interface code.
Summary
This tutorial demonstrates how to build view components using
ADF UIX technologies. The UIX XML pages can be integrated into an application
using the Struts Controller, and interact with a database using data components
built with ADF Business Component technologies.
Bookmark
