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 makes this easy by providing a layout called XYLayout which leaves the components where you place them and the size you create them.

Use XYLayout for prototyping

To make this approach simpler, Borland provides a BevelPanel that defaults to XYLayout. Also, the Application Wizard, which is the best way to start a new UI project, generates a UI container class that extends DecoratedFrame and uses BorderLayout. Then it fills the frame with a BevelPanel that is XYLayout. This panel is where you'll do your UI design.

If you use an AWT Panel in your design, it uses FlowLayout by default, so you may want to switch it to XYLayout during 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.

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 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, if you need to, you can draw a new container around existing components. However, 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 besides XYLayout. Be sure to save your file before experimenting with a layout change so if it doesn't work, you can go back.

Even when you plan your UI first, you may discover three quarters of the way through that a particular layout you planned to use just doesn't work like you expected. This might mean backing up quite a ways in the design and using a different configuration of containers and components and layouts. For this reason, you might want to copy the container file (for example Frame1.java) to a different name and safe location at critical places along the way so if you do have to go back, you won't have to start completely over.

One thing that will really 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 no (or only minor) modifications.