As Published In
Oracle Magazine
March/April 2007

DEVELOPER: Frameworks


Breaking Out of the Browser

By Steve Muench Oracle ACE

Simplify your Java desktop applications by using Oracle ADF Swing.

In previous columns, I have focused on the basics of creating Web applications by using Oracle Application Development Framework (Oracle ADF). However, the Oracle JDeveloper environment is also great for creating applications that have a polished desktop look and feel. These desktop applications have interfaces that look less like that of Amazon.com and more like that of Excel, Quicken, Thunderbird, or iTunes. In this column, I take a brief look at the Java desktop UI toolkit, called Swing, and show you how to use Oracle ADF to quickly build data-bound desktop user interfaces.

A Bit About Swing

Long before 2004, when JavaServer Faces (JSF) emerged as a standard for visual Web components, the Java platform supplied a built-in framework for creating desktop UIs. This set of UI components—which includes windows, panels, tabs, text fields, drop-down lists, tables, and many other controls—is collectively known as the Java Foundation Classes (JFC). However, most developers refer to the set by its more common name: the Swing framework. To get a sense of how powerful Swing really is, consider the Oracle JDeveloper 10.1.3 development environment. It is a full desktop application built entirely with Swing components and facilities. Although your business applications may not require the visual sophistication of Oracle JDeveloper's UML diagrammer or the detailed functionality of its Java Code Editor, it's nice to know that Swing is designed to handle any future requirements of your applications.

If you've developed data entry screens with Oracle Forms, creating a desktop UI with Swing will feel very familiar. Using Swing, you create windows containing one or more visual panels that, in turn, contain UI controls or other nested panels. Oracle JDeveloper provides a visual screen designer, and Oracle ADF binds the business data from the view objects in your application module to your UI controls. As you'll see in the following example, Oracle JDeveloper offers the same kind of drag-and-drop support for binding data within Swing-based applications that I've used in previous columns to create Web applications. The combination of Swing-based design features and the runtime features of the Oracle ADF framework is known as ADF Swing.

Creating an Empty Form

For the example in this column, make sure you're using the latest Oracle JDeveloper release, 10.1.3.1, which is available at oracle.com/technetwork/jdev. As in past columns, start in Oracle JDeveloper by opening the Connection Navigator and creating a database connection named scott that maps to the familiar SCOTT schema in the Oracle starter database. Then go to the Application Navigator and create a new application. In the Create Application dialog box that appears, set Application Package Prefix to oramag and choose the application template named Java Application [Swing, ADF BC] . Then click OK . Note that Oracle JDeveloper creates a Model project for your data components and a View project to contain your UI forms.

Next, bring up the New Gallery window, by right-clicking your Model project and selecting New . Select the ADF Business Components category, and then select the Business Components from Tables item to launch the corresponding wizard. As you've done with previous columns, step through this wizard to create default entity objects, updatable view objects, and an application module named HRModule in the oramag.model package based on the familiar EMP and DEPT tables in the SCOTT account. Next, edit the HRModule component to give more-meaningful names to the default view object instances in the data model. Use the Data Model panel of the Application Module Editor to rename the DeptView1, EmpView2, and EmpView1 view instances Departments , DepartmentStaff , and Employees , respectively. With these preliminary steps out of the way, you now have a basic application module in place to which you can add Swing-based forms that interact with the data model.

To create an empty form, right-click the View project in the Application Navigator and select New . In the New Gallery window that appears, choose Empty Form in the ADF Swing category. In the Step 1 of 1: Form Name window, leave the default oramag.view package name and name the form EmployeeForm . After clicking Next and then Finish , you'll see the empty form in the visual editor.

To assign a title to the new form, click the window title bar in the visual editor and use the Property Inspector to set the title property to Employee Maintenance . Next, look at the Design tab in the Structure window and note that the hierarchical structure of the current window appears in the tree under a node named this . Expand the node to reveal its child nodes, and note that the window contains a panel named topPanel , which, in turn, contains a navBar navigation bar component, a central dataPanel containing the main contents of the window, and a statusBar component. Note also that the topPanel has the term BorderLayout listed in parentheses next to it. This label indicates the layout style that will be used to position the child components within that panel. BorderLayout is a built-in Java style that simplifies the positioning of components in the top, bottom, left, and right borders around a central content area.

Next, use either the visual editor or the Structure window to select the child navBar component. With this component selected, click the Constraints window (or select View ->Constraints to make it visible). This window enables you to see and change the way a component is positioned relative to the layout style of its containing parent. Select each of the components within the topPanel in sequence. Note that the navBar displays at the top of the container, the dataPanel in the center of the window, and the statusBar at the bottom. At runtime, when the end user resizes the window, Swing automatically enforces the layout style so the tool bar stays at the top of the window and the status bar at the bottom.

Because you'll be dropping a new edit form onto the dataPanel in the next section, first change the dataPanel 's layout style so that the edit form will occupy the entire area of the panel. In the visual editor, click the center of the form (where the grid dots appear). Use the Property Inspector to set the dataPanel's layout property to BorderLayout . After you do so, the first component you drop onto the dataPanel will automatically occupy the center part of the window and expand to fill the entire space as the user resizes the window at runtime.

Adding an Edit Form

The next step is to create an edit form for the Employees view object instance in the HRModule . To do so, find the corresponding Employees data collection in the Data Control palette and drop it onto the dataPanel in the center of the form. When the menu appears, choose Add Edit Form . In the Select Controls dialog box, accept the default settings to include a text field for each attribute. Set the File Name field to EmployeesPanel , and because the window already contains a navigation bar, uncheck the Create Navigation Bar check box. Finally, click OK to create the new edit form.

Oracle JDeveloper creates a panel named EmployeesPanel and adds it to the current form's dataPanel as a child component. The visual editor updates to show this new edit form, which you can immediately run by right-clicking anywhere inside the visual editor and choosing Run . When the form appears, the first thing you'll notice is that the application queries the EMP table automatically and displays query results within the form. You can use either the navigation bar icons or the default menu options to scroll through the data, to perform query by example, and to insert and delete rows. As you've come to expect with Oracle ADF, all of this functionality comes automatically, with no code needed to query data or display it in the UI controls. Any changes you make by adding, modifying, or removing rows are saved to the database when you click Commit . To exit the running Employees form, click the window close icon or select File->Exit from the menu.

Now go back to the visual editor. Try to select one of the individual employee fields on the edit form. Note that you cannot select any. These fields belong to the separate EmployeesPanel you created when you dragged the Employees data collection onto the form from the Data Control palette. To select or change these fields, you'll need to edit that panel separately. You can quickly drill down to edit the contents of the EmployeesPanel by right-clicking the panel in the visual editor for EmployeeForm and choosing Display EmployeesPanel.java . When you do this, a new EmployeesPanel.java visual editor tab appears. In that editor tab, you can select the individual labels and text fields in both the visual editor and the Structure window. Note that whether you use the visual design surface or the Structure window to select a component, both editors stay in sync, and that in either case, the Property Inspector shows you the properties of the selected component. As a simple experiment, select the Empno text field and use the Property Inspector to change its background property to yellow .

By default, Oracle JDeveloper configures this panel to use a layout style called FormLayout, which allows you to arrange your UI controls in a grid of rows and columns. In general, by using a combination of the BorderLayout and FormLayout styles, you can build most of the common kinds of data entry forms you'll need with minimum effort.

You'll be happy to discover that the same data binding concepts and design-time techniques you learned when working with JSF pages also apply to building Swing-based desktop applications. Both approaches use the same Oracle ADF Model data binding layer to bind data to UI components. In fact, each panel or window that displays data from a view object in an application module has a companion Oracle ADF Model page definition XML file that contains the definitions of the bindings that connect the UI controls to the collections of rows in the data collections of a data control. To quickly navigate to the page definition file for any panel, right-click the panel and select Go To Page Definition . Alternatively, you can right-click on an individual control within a panel and select Edit ADFm Binding Properties to inspect or configure a specific binding. For example, if you inspect the binding for the Empno text field in the EmployeesPanel, a Text Binding Editor window will appear, showing that this UI control is bound to the Empno attribute of an EmployeesIterator iterator binding for the Employees data collection of the data control named HRModuleDataControl. If a UI control is not yet bound to data, a Create Binding menu option will appear instead, allowing you to bind the control to an appropriate datasource.

Adding a Data-Driven Combo Box

Next Steps



READ more about
Oracle JDeveloper 10g

Oracle Application Development Framework
oracle.com/technetwork/products/adf
oracle.com/technetwork/products/jdev/tips/muench/designpatterns
oracle.com/technetwork/products/jdev/collateral/4gl/formsdesignerj2ee.html
download.oracle.com/docs/html/B25947_01/toc.htm
radio.weblogs.com/0118231

 LEARN more about Oracle Application Development Framework

 DOWNLOAD Oracle JDeveloper 10g

 DISCUSS Oracle JDeveloper 10g

In the application, the value of the Deptno field should ideally correspond to a valid department name in the SCOTT schema. You can implement this functionality by changing the Deptno text field to act as a combo box instead. By making this change, the user can choose a department without having to know the exact department code stored in the database.

First, select the Deptno text field and press the Del key to delete it from the panel. Next, expand the Employees data collection in the Data Control palette and drop the Deptno attribute into the grid cell where the previous text field resided. When the menu appears, choose Add Child->ComboBox . You will see a Control Binding dialog box that reminds you to define the list of values to appear in the new combo box before running the application. Click OK to acknowledge this reminder.

To define a dynamic list of choices, right-click the combo box in the visual editor and choose Edit ADFm Binding Properties . In the List Binding Editor that appears, select Dynamic List if it's not already selected. To add a new datasource that will supply the list of valid choices for the Deptno combo box, click the Add button to the right of the List Data Source control. In the Add Data Source dialog box, select the Departments data collection and click OK . In the List Items section of List Binding Editor, set Display Attribute to be Dname and leave the default No Selection Item option, which allows a blank value in the list to represent a null value when an employee does not belong to a department. Finally, click OK to close the dialog box and choose File->Save All to save your changes.

Now click the previous visual editor tab that contains EmployeeForm.java . Note that the visual editor does not yet reflect the changes you made to the separate EmployeesPanel. To make these changes appear, right-click the panel and choose Rebuild Dependencies . This menu option causes Oracle JDeveloper to compile the changes to EmployeesPanel and update the display to reflect all the latest changes. Your form should now look similar to that in Figure 1. If you run the EmployeeForm at this point, you should see your yellow Empno field and the Deptno combo box in action at runtime. 

Exploring Additional Resources

 

figure 1
Figure 1: Employee Maintenance form in the visual editor


Hopefully, this quick example will spark your interest in experimenting further with building Swing-based desktop applications with Oracle JDeveloper and Oracle ADF. In this column, I described only a simple edit form, but you can try more-complex examples by using the Form wizard in the
ADF Swing category in the New Gallery dialog box. For example, you could create a master/detail form by using the Departments and DepartmentStaff view objects in your HRModule .

If you develop your Oracle JDeveloper applications by using ADF Business Components according to documented best practices, you can easily redeploy your applications with different deployment configurations without having to change any code. You can decide to install an application on users' desktops, or you can have users launch the latest version from a Web page. You can also choose between a simple client/server approach and a three-tier architecture when developing your application.

Finally, one of the best aspects of Swing is the abundance of third-party Swing component libraries you can incorporate into your Swing applications. If you perform a Web search for "Java Swing components," you'll see lots of end-to-end Swing frameworks, from companies such as JIDE Software, which can further simplify the task of creating sophisticated desktop applications that match the look and feel of many of the most advanced applications you use today. Any of these third-party resources can be used in combination with Oracle JDeveloper and Oracle ADF as part of your overall desktop application solution. 


Steve Muench has worked for Oracle since 1990. He is a consulting product manager for Oracle JDeveloper and an Oracle ACE, and in his years at Oracle, he has developed and supported Oracle tools and XML technologies and continues to evangelize them. Muench coauthored Oracle ADF Developer's Guide for Forms/4GL Developers (Oracle, 2006) and wrote Building Oracle XML Applications (O'Reilly Media, 2000). He shares tips and tricks on OTN and in his Dive into BC4J and ADF Weblog.


Send us your comments