Laying Out Your User Interface

This section explains the fundamental tasks you perform as you work with components and JDeveloper's UI design tools to create a user interface. If you're comfortable using controls in a graphical user interface environment, much of the material discussed here, such as selecting, sizing, and deleting components might be familiar to you.

Before you begin actually creating your UI, you may want to Prototype your UI.

Basic Design Tasks

Designing a user interface in JDeveloper requires these tasks:

Creating containers such as frames, panels, or dialogs. These containers hold specific types of components.
Adding and arranging components in the containers. You can add components to a container and then arrange them using layout managers.
Setting component properties. You can set properties for each component using the Property Inspector.
Attaching event-handling code to a component event. Events are the actions a component takes when they are triggered by a user or another component.
Setting container layouts and component constraints. A layout constraint tells the layout manager how to size and position a component.

Starting Your UI Project

These instructions assume that you have already created a project that includes a designable container class. If not, you will need to:

Create or open a JDeveloper Project.
Create an applet or an application.

Opening the Java Visual Editor

Right-click the Java file in the Navigator that you want to modify and choose Open, the click the Design tab.

The source code is accessible in the Code Editor (right-click the file in the Navigator and choose Open to view the source code) so you can view and edit your source code in parallel with designing your UI. Any changes made in the Java Visual Editor or Property Inspector are immediately reflected in the source code, and vice-versa.

The Java Visual Editor toolbar lets you easily work with components and duplicates commands that you can choose from the context sensitive menu displayed on a selected component. Among the component operations included are:

Contraints options to specify component weight, fill, anchor position, padding, and inset
Alignment to quickly position components relative to one another
Z-Order to change the sequence of stacked components