Prototyping Your UI with Layout Properties

Before you start creating your UI, it is useful to sketch your UI design on paper to get an idea of the general strategy you'll use for placing various panels and components, and for assigning layouts. You can also prototype your UI directly in the Java Visual Editor. JDeveloper makes this easy by providing a layout called null which leaves the components where you place them at the size you create them.

Use null Layout for Prototyping

To make this approach simpler, JDeveloper provides the null layout. When you start a project using the New Application dialog, JDeveloper generates a UI container class (usually one that extends Frame or JFrame) that uses null. You can open the frame in the Java Visual Editor and do your design work directly on the frame.

When you initially add a new panel of any type to the Java Visual Editor, you'll notice that the layout property in the Inspector says <default layout>, which means that the Java Visual Editor will automatically use the default layout for that container. However, you may want to change the layout property to the layout manager you want to use so it is visible in the Structure window and that component constraints can be modified in the Property Inspector. You cannot edit layout properties for <default layout>.

Design the Big Regions First

Design the big regions of your UI first, then, using null, work down into finer details within those regions. Once the design is right, work systematically from the inner regions outward, converting the panels to more portable layouts such as FlowLayout, BorderLayout, or GridLayout, making minor adjustments if necessary.

In most cases, you will place a container in your design first, then add components to it. You can also draw a new container around existing components. However, these components will not automatically nest into the new panel. After drawing the container, you must move each component in the container. You may even need to move a component out of the container, then back in. Check the Structure window to make sure each component nests properly. Each component inside a container should be indented in the Tree under its container.

Save Before Experimenting

When designing in JDeveloper, expect to work by trial and error, especially when changing the layouts. Be sure to save your work before experimenting with a layout change.

You may discover that a particular layout you planned to use doesn't work as you expected. You may need to reexamine your design process and use a different configuration of containers, components, and layouts. For this reason, you may want to copy the container file (for example Frame1.java) to a different name and safe location at critical points so that, when you need to back up in your work, you don't need to start over completely.

Use JavaBeans

In order to speed up your UI design work in the future, create JavaBean components such as toolbars, status bars, checkbox groups, or dialog boxes that you can add to the Component Palette and reuse with no (or only minor) modifications.