Getting Started with Extension UI Programming

Many WebLogic Workshop extensions you'll write will incorporate user interface components. Some advanced controls, for example, will display "insert wizard" custom dialog boxes to prompt the user for values required when creating a new JCX for the control. IDE extensions such as frame views can provide dockable user interface exposing a tool or displaying data to help increase a developer's productivity.

When building user interface for extensions, you use Java APIs specifically designed for UI. While WebLogic Workshop supports the use of both Abstract Window Toolkit (AWT) and Swing, it is recommended that you use Swing. WebLogic Workshop is itself built from Swing, and the extensibility API provides functions that are specifically designed for use with Swing components.

While a full introduction to Swing is beyond the scope of this documentation, this topic provides a few links that you might find helpful if you're new to that technology.

Swing, Briefly

First released in 1998, the Swing API is built on the Abstract Window Toolkit (AWT) API. AWT, Swing, and a few other APIs make up the Java Foundation Classes (JFC) suite of libraries. In general, Swing-based user interfaces are made up of components (such as panels, labels, and buttons) arranged together with a layout manager. A component in the UI responds to the user through actions that are connected to the component via a listener.

Here's a brief example from the tutorial in Getting Started: IDE Extension Tutorial. This example uses the default layout managers, so none is set here.

// Create a button with a label.
private javax.swing.JButton btnSayHello;
btnSayHello = new javax.swing.JButton();

btnSayHello.setText("Say Hello");

// Connect a listener that will handle button clicks.
btnSayHello.addActionListener(new java.awt.event.ActionListener()
{
    public void actionPerformed(java.awt.event.ActionEvent event)
    {
        // Use a Workshop API class to show a message dialog when the button is clicked.
        DialogUtil.showInfoDialog(null, "Hello World!");
    }
});
// Add the button to this component -- perhaps a JPanel.
add(btnSayHello);

You'll find UI examples in many of the extension samples included in the IdeDevKit sample application. For more information, see Samples That Use Swing. The Sun web site also provides general Swing tutorials here. In particular, Creating a GUI with JFC/Swing provides an introductory tutorial to Swing basics.

For a few useful Swing-related utility classes included for use with WebLogic Workshop, you might explore the com.bea.ide.util.swing package.

Components, Layout, and Events

Swing provides many components that you can draw from to build user interfaces. For an introduction to these, see this useful visual index to the Swing components. Swing also offers several ways for you to manage visual component arrangement. This visual guide to layout managers should help to get you started. (Remember, too, that if you're using a graphical design tool for building your UI, that tool will list available components and layout options.)

For an introduction to connecting event handlers, you might be interested in reading through the Writing Event Listeners portion of the Java tutorial.

Drag and Drop (DnD)

While it's not technically a part of Swing, the drag-and-drop (DnD) API is a part of the JFC, and it's often a key part of applications that have a user interface. It's certainly a key part of the WebLogic Workshop IDE. DnD support simply provides a way for a user to drag one part of the user interface to another. Dropping the dragged part prompts something to happen, such as transferring data from the drag source to the drop target. In a WebLogic Workshop web application, for example, users can drag an action from the Data Palette and drop it into Source View or Design View to add that action to the open document.

The Sun web site offers How to Use Drag and Drop and Data Transfer, a useful introduction and tutorial on DnD. Due to its number of moving parts, DnD is sometimes considered one of the more complex parts of programming user interfaces with Java. The WebLogic Workshop extensibility API provides IDE-specific wrappings for DnD functionality that make doing DnD a little easier. You'll find the DnD-related APIs in the com.bea.ide.core.datatransfer package. For information on a DnD-related sample, see DragDropSimple Sample. For an introduction to DnD in WebLogic Workshop extensions, see Adding Support for Drag and Drop.

Graphical Design for Java UI

As you've no doubt noticed, WebLogic Workshop doesn't provide much in the way of support for designing Swing user interface. To make the initial UI design process a little easier, you might try using a tool such as NetBeans. With a Swing-focused development tool, you can typically drag components onto a design area and arrange them in the way you like. As you edit the design graphically, the tool generates corresponding code behind the scenes. When you've got things looking the way you want them, simply open the generated code, copy the portion you need for UI, and paste the copied code into your class source in WebLogic Workshop.

UI Notes and Recommendations

Samples That Use Swing

All of the samples in the IdeDevKit application include some sort of user interface. But a couple of them are a bit more involved:

Related Topics

None.