Prototyping your UI

Before you start creating your UI, you may want to sketch your UI design on paper to get an idea of the overall strategy you'll use for placing various panels and components and for assigning layouts. You can also prototype your UI directly in the UI designer. JBuilder provides a null layout and, in JBuilder Professional and Enterprise, XYLayout which make the intitial design work easier.

Use XYLayout and null layout for prototyping

When you initially add a new panel of any type to the UI designer, you'll notice that the layout property in the Inspector says <default layout>. This means the UI designer will automatically use the default layout for that container. However, you should immediately change the layout property to the layout manager you want to use so it is visible in the component tree and its constraints can be modified in the Inspector. You cannot edit layout properties for <default layout>. For more information on layout constraints, see "Layouts provided by JBuilder" in Building Applications with JBuilder.

To control the layout of your components during prototyping, switch each container to XYLayout or null layout as soon as you drop it into your design. These layouts use pixel coordinates to position the components. This means the components you add to an container will stay at the location you drop them and at the size you specify with the mouse.

Design the big regions first

We recommend that you start designing the big regions of your UI first, then work down into finer details within those regions as you go, using XYLayout or null layout exclusively. 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.

Usually, you place a container in your design first, then add components to it. However, you can also draw a new container around existing components, although these components won't automatically nest into the new panel. After drawing the container, you must explicitly move each component in the container. You may even need to move it out of the container, then back in. Watch the component tree to see when it nests properly. Each component inside a container is indented in the component tree under its container. If the component is at the same level of indentation with a panel, it is not inside it yet.

Save before experimenting

You should expect that when you start designing in JBuilder, you will inevitably do things by trial and error, especially once you start changing the layouts to something other than XYLayout or null layout. Be sure to save your file before experimenting with a layout change. Then if it doesn't work, you can go back.

Even when you plan your UI first, you may discover that a particular layout you planned to use just doesn't work as you expected. This might mean reworking the design and using a different configuration of containers, components, and layouts. For this reason, you might want to copy the container file (for example Frame1.java) to a different name and location at critical times during the design process, so you won't have to start over.

One thing that will speed up your UI design work in the future is to create separate JavaBean components, such as toolbars, status bars, check box groups, or dialogs, that you can add to the component palette and reuse with little or no modifications.