Build Rich Client Master-Detail and Edit Forms with JDeveloper using ADF Swing and ADF Business Components
Build Rich Client Forms in JDeveloper using ADF Swing
and ADF Business Components
Purpose
In this tutorial, you use JDeveloper 10g Release 3 to quickly
build ADF Swing forms. ADF Business Components is used to build the data model.
You can use ADF Swing to build rich client applications if
your application requires immediate response to user input or for events that
change the user display. This is also true for complex user interfaces that
have multiple master-detail dependencies displayed on one screen. Applications
that need to perform immediate item validation, which could be based on complex
logic, also find better support in Swing than on the web. Another reason for
using Swing clients is when, for business reasons, applications require to work
offline, disconnected from the network.
Place
the cursor over this icon to load and view all
the screenshots for this tutorial. (Caution: This action loads all screenshots
simultaneously, so response time may be slow depending on your Internet connection.)
Note: Alternatively, you can place the cursor over
an individual icon in the following steps to load and view only the screenshot
associated with that step. You can hide an individual screenshot by clicking
it.
Overview
In this tutorial, you are going to build a Swing application
with ADF Swing that leverages ADF Business Components as a business service.
Though not in the focus of this exercise, ADF Swing applications can also be
built on top of business services like EJB, Web Services, TopLink, POJOs etc.
The steps to develop an application with ADF Swing are similar.
First in this OBE, you create an ADF Business Component model
as a persistence layer that contains the business logic and the validation rules.
Using ADF Swing, you build a master-detail Swing application that displays customer
information along with their placed orders. ADF Swing applications that use
ADF Business Components can be deployed in a 2-tier and 3-tier architecture.
For this tutorial, you will run and test the application locally using the JDeveloper
embedded Java Runtime Enviroment (JRE).
ADF Swing is a binding layer that connects standard Swing
components to the Oracle Application Development Framework (ADF) binding layer.
Through ADF, applications use a consistent client API to access the various
business services mentioned above. ADF Swing provides a productivity advantage
to all application developers that need to build scalable client-server applications
for their enterprises.
Have access to or have installed Oracle JDeveloper
10g Studio Edition Release 3 (10.1.3) Production. You can
download it from Oracle
Technology Network.
Java Database Connectivity (JDBC) is a standard application
programming interface (API) that is used for connecting a Java application to
relational databases. JDeveloper uses a connection navigator to maintain connection
information for your application. The connection navigator makes it easy to
create, manage, and test database connections.
If you haven't already created a JDBC connection to the HR
schema, then perform the following steps:
1.
Click the Connections tab on the Applications
Navigator. If the Connections tab is not showing, choose View > Connection
Navigator
from the JDeveloper main menu.
2.
Right-click the Database node and choose New Database Connection
from the context menu.
3.
In the Create Database Connection Wizard, review the information on the
Welcome page and then click Next.
4.
In the Connection Name field, enter hrconn.
Click Next to continue.
5.
On the Authentication page: enter hr
in the Username field and hr
in the Password field. Select Deploy password.
Click Next to continue.
6.
On the Connections page, the default values for the connection should be the following:
Driver: thin
Host name: localhost
JDBC Port: 1521
SID: ORCL
Leave the fields set to these default values.
Click Next to continue.
7.
Click Test Connection.
If the database is available and the connection details are correct,
you see the word Success! displayed in the
Status window.
If an error occurs, verify the connection settings, click Back to
make any necessary changes, and then retest the connection.
If the connection is successful, click Finish to complete the
connection.
8.
You have just created a connection to the database that will supply data for the application you build in this tutorial.
The next steps use this connection to manage the details of connecting
to the database so that you can concentrate on business logic instead of JDBC
calls.
Building the Business Model with
ADF Business Components
The business model provides data access and validation for
an application. When the data is managed by the business model, the data is
always validated by the model, regardless of the client implementation. This
cleanly separates the validation and business rules from the user interface.
The ADF Business Components model provides data access,
validation services, and business
logic. Storing business logic in the model layer enables you to reuse the same
logic
with different application client. As a recommended practice, business logic
should be kept separate from the display logic, which you would implement in
the ADF Swing client.
In the next few steps, you create an ADF Business Components
model for the application.
In JDeveloper, you always work with
projects contained in an application.
The application is the highest level in the control structure.
It is a view of all the objects you need while you are working. An application
keeps track of your projects while you are developing your Java programs.
A JDeveloper project is an organization structure used to
logically group related files. You can add multiple projects to your application
to easily organize, access, modify, and reuse your source code. In the Applications
Navigator, projects are displayed as the second level in the hierarchy under
the application.
Note that it is considered best practices to use projects
to separate the model code from the code written for the view. In this hands-on
we will create one project for the ADF Business Components model, and a second
one later for the ADF Swing client.
Before you create any application components, you must first
create the application and project. To do this, perform the following steps:
1.
Click the Applications tab to go back to the Applications Navigator.
Right-click the Applications node and select New Application
from the context menu.
2.
In the Create Application dialog box, enter the Application Name
ADFSwing. Notice that as you enter the application name,
the directory name changes automatically.
Enter swing.sample
as the Application Package Prefix. For the Application Template, select
the Java Application[Swing, ADF BC] value from
the Application Template drop-down list.
Click OK.
3.
The Application has now two projects: Model and View.
4.
You now have an application and projects to contain and help manage
your application.
In the next few steps, you create a model for your application.
In this section, you create ADF Business Components based
on tables in the database. You use the hrconn database connection, which
you created earlier. You create these objects in the Model project.
1.
In the Applications Navigator, right-click the Model project
and select New from the context menu.
2.
In the New Gallery, expand Business Tier and select ADF
Business Components in the Categories list.
Select Business Components from Tables in the Items list.
Click OK.
3.
In the Business Components Project Initialization window, select
the hrconn connection from the Connection list, and then click
OK.
4.
If the Welcome page of the Create Business Components wizard appears,
click Next.
In step 1 of the of the
Create Business Components Wizard, verify that the package name
is set to swing.sample.model.
Select HR from
the Schema drop-down list and select the Tables option
as the Object Type.
Click Query to populate the list of available tables.
Control-click to select both DEPARTMENTS and EMPLOYEES
in the Available list.
Click the Add
button to shuttle both tables to the Selected list.
Click Next to continue.
5.
On step 2 of the Create Business
Components Wizard, select both Entity objects and click the Add button
to shuttle both tables to the Selected list.
Select each Updatable View Object in the Selected pane and change
the Object Name to DepartmentsVO
and EmployeesVO.
Click Next.
6.
In step 3 of the wizard,
click the Query button. Select the DEPARTMENTS
table and click the Add button
to shuttle the selection in the Selected list.
Change the View Name field to DepartmentsLOV.
Then Next.
7.
In step 4 of the wizard, name the application
module HRAppModule.
Click Next.
8.
JDeveloper provides several different techniques for managing
components. One is to use a diagram of the components and their relationships.
In this step, you can choose to have JDeveloper create a diagram of
the components that you are creating.
For our example, we skip this step. Click Next to continue.
9.
The final page of the Business Components Wizard shows the objects
and relationships that are created when you click Finish.
Click Finish to complete the wizard.
10.
The Applications Navigator should now look like this:
When you created the application for this
tutorial, you created it with two projects: Model and View.
The Model project contains the ADF Business Components that serve as
the business model for your application. The View project
will include the View portion of your application, which defines
the
User Interface components.
The Applications Navigator should appear as follows:
2.
Create a new ADF Swing form by right-clicking View in the Applications
Navigator and selecting New from the context menu.
3.
Expand the Client Tier node and select Empty Form from the
ADF Swing Category.
Click OK.
Note: Empty Form is used to create an empty Java client frame. The
frame that the wizard generates will contain ADF Swing-specific application
bootstrapping code. This code initializes the ADF Swing application
and binds it to the ADF binding layer that accesses the ADF Business
Components. As a Swing developer, you don't need to change this code.
4.
Selecting a new Empty Form opens the Create ADF Swing Empty Form
Wizard. Click Next to skip the Welcome page of the Wizard (if
it appears).
5.
Name the new form MDForm.Accept the other defaults and
click Next to continue.
Click Finish.
6.
The Empty Form opens in the Design editor.
7.
Select the default navigation bar and delete it.
Note: The default navigation bar is generic and operates on any table
or form that is added to a Java panel. For this application, you create
two navigation bars that are specifically created for distinct datacontrols
on the panel.
8.
Select the Swing frame and open the Property Inspector to set Title
of frame to Swing Demo.
9.
Click in the middle of the frame to select the DataPanel. Set the
layout property in the Property pane to FormLayout.
Note: FormLayout places components in a grid of columns and rows,
allowing specified components to span multiple columns or rows.
In the new dialog set the following properties - Number of rows 8 -
Number of columns 3 - Click OK.
The new form should look like this:
10.
Open the Data Controls palette, and drag and drop the DepartmentsVO1 in the top left cell.
From the context menu select the Add Child > Navigation Bar option
Select the Scrollbar and drag the right most blue
marker to size the
scrollbar to span columns 1 to 3.
11.
In the Data Controls Palette, expand the DepartmentsVO1 node,
select
DepartmentId and drag and drop it in the cell on
the second column first
row (below the Scrollbar).
In the context menu select Add Child > Text Field
Note: You can set an ADF attribute binding on
basic UI components that you insert from the Data Control Palette. Use
a TextField to display plain text in a single line.
12.
Repeat the previous step for DepartmentName and LocationId.
Your form should look like this:
13.
Open the Component Palette in JDeveloper (Ctrl+Shift+P) and select
the ADF Swing Controls library. Drag and drop a JULabel component
in
the first column in front of the DepartmentId text field.
14.
Repeat the previous step to add a JULabel in front
of the two other text fields.
15.
Right click the top left JULabel and select the Create
Binding >
Label For option from the context menu.
Note: The JULabel control can be bound to the metadata
defined either on the Business Component Entity Object or View Object
(display attribute) or the ADF metadata (used with EJB, POJO or Web
Services
controls to
define display attributes).
16.
In the Attribute Binding Editor, expand the HRAppModuleDataControl node,
select the DepartmentsVO1 and select the DepartmentId attribute.
Click OK.
17.
Repeat steps 15 and 16 (Create Binding > Label For)to
map JULabel2 to DepartmentName and JULabel3 to LocationId.
Note: You could easily right align the labels using
a multi label selection (CTRL + label selection) and then click on the
Right Align icon on the toolbar.
18.
From the Data Controls palette, drop DepartmentsVO1 to
column 3, row 1. From the context menu, select Add
Child > Scrollbar.
19.
Drag on the blue marker to size the scrollbar to span rows 1-3
20.
Right click the scroll bar component and select
Column Properties
from the context menu.
Set the size to Constant Size with a value of 12dialog
unit.
Click OK
21.
Right click one of the labels (first column) and select Column
Properties from the context menu. Set the Resize behavior
to None.
Click the Save All icon
on the JDeveloper menu bar, or select File > Save All from
the menu.
Now that you have built the Master part of the form, you
add the Detail part.
The next few steps take you through the testing process.
1.
From the Swing Containers library in the Component Palette, add
a JScrollPane to column 1 row 5.
Use the blue markers to span it across rows 6-7 and
columns 1-3.
Note: A JScrollPane provides a scrollable view of a component. When
screen real estate is limited, use a scroll pane to display a component
that is large or one whose size can change dynamically.
2.
With the JscrollPane selected, press the toolbar icon for Grow
Row
3.
From the DataControls Palette, drag and drop EmployeesVO3 onto
the JScrollPane. In the context menu, select Add
Child
> Table
The MDForm should now look like this:
4.
In the Applications Navigator, select the MDFormPageDef.xml node
and open the Structure pane.
5.
Expand the table binding node and double click
the DepartmentsVO1EmployeesVO3 to
open the binding editor.
In the Display Attributes pane, select all columns except EmployeeId-
FirstName- LastName- Email- DepartmentId and
click the Remove button
to shuttle the selection in the Available Attributes pane.
Click OK.
6.
Close and save the MDForm.java then re-open MDForm.java to
see the changes in the visual editor. Your MDForm should now look like
this:
7.
From the Data Control Pane, Drag and Drop EmployeesVO3 to
row 4 in the panel. From the context menu, select
the Add Child > NavigationBar option.
Use the blue marker to span it across all 3 columns.
8.
Right-click a component from the second column of
the FormLayout and choose Column Properties
from the context menu.
In the Column Properties dialog, set the Grow property
of the Resize section to 1
9.
Right-click the MDForm.java node in the Applications
Navigator and Run it.
10.
Test the Navigation Bar, and the Scroll bar of the Master block.
Test the Navigation bar of the detail block.
11.
When you are done, close the Panel.
Click the Save All icon
on the JDeveloper menu bar, or select File > Save All from
the menu.
Now that you have built the Master-Detail Swing form,
you create a listbox for the DepartmentId of the detail form so that Department
Name is now displayed in place of the DepartmentId. The listbox lets the user
choose one of several choices.
To create a list for the DepartmentId, perform the following
steps:
1.
In the Applications Navigator select the MDFormPaneDef.xml node
and in the Structure pane, double click the DepartmentsVo1EmployeesVO3 to
open the binding editor.
2.
Select the Attributes Properties tab and set the
editor property for the DepartmentId to Combo
Box. Then press the [...]Edit button
to create the binding for the Combo Box.
Click the Create button in the Editor Properties window
3.
In the List Binding Editor dialog, Select HRAppModuleDataControl.EmployeesVO3
as the Base Data Source.
Press the Add button for the List Data
Source and
expand the HRAppModuleDataControl node to select DepartmentsLOV1
Map the Base Data Source Attribute DepartmentId to
the List Data Source Attribute DepartmentId in the
attribute mapping.
Set the DepartmentName as the display attribute.
Set the No Selection Item field to Selection
Required
Close all editors by pressing OK.
4.
Rerun the application and experiment with the combo box.
5.
Click the DepartmentId column on one of the details
to pop up the Department list of values.
Now that you have built your new Master Detail Swing form,
you're going to create an Edit form to display additional information related
to the selected Detail record.
The next few steps take you through the testing process.
1.
In the Applications Navigator, right-click the View
node and select the New option from the context menu.
2.
In the New Gallery in the ADF Swing category, select the Empty
Panel item.
Click OK.
3.
Click Next to skip the Welcome page of the Create
ADF Swing dialog, and in Step 1 enter EmployeeEdit as
the panel name.
Click Next then Finish
4.
The EmployeeEdit panel opens in the Design editor.
5.
From the DataControls Palette, drag the EmployeesVO3 to
the new panel and choose Add Edit Form option from
the context menu.
6.
In the opened dialog, set the CommissionPct attribute
to be rendered as a Combo Box.
Click OK.
7.
Close the EmployeeEdit Design view and reopen it
to see the changes.
8.
Resize the EmployeesEdit form so that all attributes
from the edit form are visible.
9.
Double-click the PanelEmployeesVO3Helper.java node
in the Applications Navigator to open it in the design editor
10.
Select the panel and set the layout property to Vertical
Flow Layout
11.
Select any edit form label column and right click to select the
Column Properties option.
In the Column Properties dialog, set the Resize property to none.
12.
Select the combo box component for the CommissionPct and
choose Edit ADFm Binding Properties from the
context menu.
13.
In the List Binding Editor, create a Fixed List,
set the Base Data Source attribute to CommissionPct and
add the following list
of values:
Select the navigation bar in the panel and open
the Property Inspector. Set the following properties:
hasFindButton
False
hasInsertButton
False
hasNavigationButton
False
15.
Open the MDForm panel in the design editor, and
drag the EmployeesEdit panel from the Applications
Navigator into the last row, first column of
the MDForm Panel
16.
In the new dialog, choose Display Panel in JDialog and
select the option Invoke JDialog from Button
In the Select Option select Display Panel in JDialog > Invoke
JDialog From Button. Click OK.
17.
Enlarge the button to set to the column width. In the Inspector pane,
change the button text property to Edit
18.
Double-click the button to navigate to the jButton1_actionPerformed
method and change the call to dialog.setSize() to the
dialog.setSize(400,500);
19.
Run the MDForm, navigate from
the master to a detail with many records.
Press the Edit button on one of the detail row to
display the EmployeeEdit form for the selected record.
20.
Test the Combo Box for CommissionPct.
When you are done, close the Application window.
You've successfully completed the ADF Swing tutorial.
Place the cursor over this icon to hide all screenshots.
button to shuttle both tables to the Selected list.
icon
on the JDeveloper menu bar, or select File > Save All from
the menu.
button
to shuttle the selection in the Available Attributes pane.
