Sample: LayoutManagers

Objectives

This sample illustrates how to build an application using visual composition.

Description

The LayoutManagers sample illustrates using features of visual composition for the following tasks:

Running the LayoutManagers Sample

This sample contains beans that demonstrate the Java AWT layout managers.

Each bean that has a name that ends with "Page" is an extension of java.awt.Panel that contains components arranged using the various java layout managers.  The LayoutManagers bean is an applet that shows all of the pages in a java.awt.CardLayout.  A panel of Labels along the top of the applet and a set of Buttons along the bottom enable you to navigate through the pages giving the appearance of a notebook.

java.awt.GridBagLayout is the most complex layout manager to use, a button on the GridBagLayoutPage brings up a dialog that enables you to experiment with the GridBagConstraints of the GridBagLayout panel.  The dialog is a java.awt.Frame bean called LiveGridBagConstraints.  It uses another bean, GridBagBean, that provides a bean interface to the java.awt.GridBagConstraints class.

The java.awt.GridBagLayout is the most powerful and most complex of the AWT layout managers.  The key to understanding this layout manager is to understand the java.awt.GridBagConstraints class which contains each component's layout settings.  There are 14 interdependent settings with an infinite number of combinations for every component in your GridBagLayout panel.

The com.ibm.ivj.examples.vc.utilitybeans.GridBagBean class wrappers the java.awt.GridBagConstraints class and makes it a bean.   The java.awt.GridBagConstraints class is used to store layout settings for  components contained in GridBagLayout panels.  A class used for visual composition should have bean features such as get and set methods for properties, and the sending of propertyChange events when properties change.  Because GridBagConstraints does not provide these features, GridBagBean wrappers GridBagConstraints so that it is usable in visual composition.  To use GridBagBean, drop an instance of it on the free-form surface, set the GridBagConstraints property with a java.awt.GridBagConstraints object and then access its data members using the get and set methods.

To run this sample:

  1. Select the LayoutManagers class from the Projects page.
  2. Select the Run button on the tool bar.

To build the LayoutManagers sample:

The classes that are part of the LayoutManagers sample should be built in the following order:
  1. BorderLayoutPage
  2. CardLayoutPage
  3. FlowLayoutPage
  4. GridLayoutPage
  5. NullLayoutPage
  6. GridBagLayoutPage
  7. LayoutManagers

Building the BorderLayoutPage class

  1. Create the BorderLayoutPage class as follows:
  2. The Visual Composition page of the class browser will be displayed, where you can build the user interface as follows:
  3. Make connections to set properties and invoke methods as follows (see Connection Syntax ):
  4. Save the bean and exit:
    1. Select Bean from the menu bar
    2. Select Save Bean
    3. Close the Visual Composition Editor

Building the CardLayoutPage class

  1. Create the CardLayoutPage class as follows:
  2. The Visual Composition page of the class browser will be displayed, where you can build the user interface as follows:
  3. Save the bean and exit:

Building the FlowLayoutPage class

  1. Create the FlowLayoutPage class as follows:
  2. The Visual Composition page of the class browser will be displayed, where you can build the user interface as follows:
  3. Save the bean and exit:

Building the GridLayoutPage class

  1. Create the GridLayoutPage class as follows:
  2. The Visual Composition page of the class browser will be displayed, where you can build the user interface as follows:
  3. Make connections to set properties and invoke methods as follows (see Connection Syntax ):
  4. Save the bean and exit:

Building the NullLayoutPage class

  1. Create the NullLayoutPage class as follows:
  2. The Visual Composition page of the class browser will be displayed, where you can build the user interface as follows:
  3. Save the bean and exit:

Building the GridBagLayoutPage class

  1. Create the GridBagLayoutPage class as follows:
  2. The Visual Composition page of the class browser will be displayed, where you can build the user interface as follows:
  3. Add non visual beans as follows:
  4. Make connections to set properties and invoke methods as follows (see Connection Syntax ):
  5. Save the bean and exit:

Building the LayoutManagers class

This class demonstrates each of the Java AWT LayoutManagers by displaying sample panels in a notebook style.  By clicking on the tabs at the top of the notebook or clicking a navigation button at the bottom, you can select a panel with a different type of layout.  You can interact with the layouts by resizing the applet; for the more complex GridBagLayout, you can use a special Frame that allows you to tinker with the GridBagConstraints while your application is running.

This bean is composed of three panels:

     
  1. Create the LayoutManagers class as follows:
  2. The Visual Composition page of the class browser will be displayed, where you can build the user interface as follows:
  3. Add non visual beans as follows:
  4. Make connections to set properties and invoke methods as follows (see Connection Syntax ):
  5. Save the bean:
You're done building this sample, so now you can try running it!  To do this, click the Run button on the tool bar.