Most Sample Code from "Java How to Program, Fifth Edition" from Deitel and Deitel.

Sample Solutions to Study Group 5 Exercise

• Java_Exercise.java (Kevin's Solution)
• AddressForm.java (Nova's Solution)

Different Layout Managers (descriptions from page 654 and 717 of Deitel's book)

1. FlowLayout--Default for java.awt.Applet, java.awt.Panel and javax.swing.JPanel. Places components sequentially (left to right) in the order they were added. It is also possible to specify the order of the components by using the Container method add, which takes a Component and an integer index position as arguments.
2. BorderLayout--Default for the content panes of JFrames (and other windows) and JApplets. Arranges the components into five areas: NORTH, SOUTH, EAST, WEST and CENTER.
3. GridLayout--Arranges the components in rows and columns.
4. BoxLayout--A layout manager that allows GUI components to be arrange left-to-right or top-to-bottom in a container. Class Box declares a container with BoxLayout as its default layout manager and provides static methods to create a Box with a horizontal or vertical BoxLayout
5. GridBagLayout--A layout manager similar to GridLayout. Unlike GridLayout, each components size can vary and components can be added in any order
6. CardLayout
7. SpringLayout

We will cover the first five.

The following link provides a visual guide to layout managers: http://java.sun.com/docs/books/tutorial/uiswing/layout/visual.html

FlowLayout

Code: FlowLayoutDemo.java

new stuff is "layout.setAlignment( FlowLayout.LEFT )" to align to the left.

BorderLayout

Code: BorderLayoutDemo.java

Buttons in North, South, East, West, and Center location.

Notice how in the absence of "East" or "West", the "Center" button occupies the space.

Similarly in the absence of "North" and "South", the space is filled by the other buttons.

Things to try:

• See what happens when you don't put a button in one of the five locations. ie. Comment out one of the lines such as:

       container.add( buttons[ 2 ], BorderLayout.EAST ); 

• See what happens when you try and put a button in the same location. ie. Try adding the East button to the north:

       container.add( buttons[ 2 ], BorderLayout.NORTH ); 

GridLayout

Code: GridLayoutDemo.java

Two layouts are created:

1. grid1 = new GridLayout( 2, 3, 5, 5 );

   This one has 2 rows and 3 columns. There is 5 pixels horizontal gap, and 5 pixels vertical gap between components.

2. grid2 = new GridLayout( 3, 2 );

   This one has 3 rows and 2 columns with no gaps

As a rule, each container can have only one layout manager at a time. We swap between the two above layouts when a button is clicked. The code that makes this happen is the following:

           if ( toggle )
                container.setLayout( grid2 );
           else
                container.setLayout( grid1 );

           toggle = !toggle;   // set toggle to opposite value
           container.validate();
           

The validate function recomputes the container's layout based on the current layout manager and the GUI components on it.

JPanel--A Way of Combining Layout Managers

"Panels are created with class JPanel, a subclass of JComponent. Class JComponent extends class java.awt.Container, so every JPanel is a Container. Thus JPanels may have components, including other panels, added to them."(page 663, Deitel)

Code: PanelDemo.java

A panel of buttons is created with a GridLayout. The panel is added to the JFrame "container". Relevant code for creating a panel is:

     
           buttonPanel = new JPanel();
           buttonPanel.setLayout( new GridLayout( 1, buttons.length ) );
        

Notice how the buttons are added to the panel:

           buttonPanel.add( buttons[ count ] );
        

Judging from the code, what is the default layout manager for JFrame?

JTabbedPane--Tabs with different layouts

"Any component can be placed on a tab. If the component is a container, such as a pane, it can use any layout manager to layout several components on that tab" (page 715, Deitel)

Code: JTabbedPaneDemo.java

Relevant code for making a component a tab:

           tabbedPane.addTab( "Tab One", null, panel1, "First Panel" );
        

1. arg1 is a string specifying the title of the tab
2. arg2 is a Icon reference specifying the icon to display on the tab. If this argument is null, then no image is displayed.
3. arg3 is a Component reference representing the GUI component to display when the user clicks the tab
4. arg4 is the tool tip for the tab.

Try adding the bug image from last week to the tab:

           tabbedPane.addTab("Tab One",new ImageIcon(bug1.gif), panel1, "First Panel");
        

Lead in question: what happens when there are too many tabs to fit across your container?
By default, they will wrap around. However, the next sample code shows you how to create scrolling tabs.

BoxLayout

Code: BoxLayoutDemo.java

Several tabs are added here demonstrating vertical and horizontal boxes. The relevant code for making scrolling tabs is:

           JTabbedPane tabs = new JTabbedPane(
              JTabbedPane.TOP, JTabbedPane.SCROLL_TAB_LAYOUT );
        

Notice that you are adding something new to the boxes: glue, struts, and rigid areas. These things influence how the components respond to resizing in relationship to one another.

1. "A vertical strut is an invisible GUI component that has a fixed pixel height and is used to guarantee a fixed amount of spaces between GUI components. The argument to method createVerticalStrut determines the height of the strut in pixels. When the container is resized, the distance between GUI components separated by struts does not change" (page 720, Deitel)
2. "Horizontal glue is an invisible GUI component that can be used between fixed-size GUI components to occupy additional space....Glue allows the extra space to be placed between GUI components. When the container is resized, components separated by glue components remain the same size, but the glue stretches or contracts to occupy the space between the other components." (page 720, Deitel)
3. "A rigid area is an inviible GUI component that always has a fixed pixel width and height. The argument to method CreateRigidArea is a Dimension object that specifies the width and height of the rigid area." (page 720, Deitel)

To try:

• see what happens to the glue, struts, and rigid areas when you resize the JFrame. Do they expand/contract or remain fixed?
• modify the code so that the tabs are on the bottom
• how would you modify the code so that the buttons added along with glue appear centered (as a group) in the container?

GridBagLayout

Code: GridBagDemo.java

With this layout, you can have components which cover multiple rows and columns of a grid.

The key to using this layout manager is to set the constraints for a component before adding it to the container.

The constraints identify the starting x and y location (gridx and gridy) from the upper left hand corner (0,0). Constraints also indicate the rows and columns (gridheight and gridwidth, respectively) that the component occupies. There are also constraints to identify how the component responds when the container is resized.

The following table taken from Deitel, page 721, summarizes the GridBagConstraints:

fill	Resize the component in specified direction(NONE, HORIZONTAL, VERTICAL, BOTH) when the display are is larger than the component
gridx	The column in which the component will be placed
gridy	The row in which the component will be placed
gridwidth	The number of columns the component occupies
gridheight	The number of rows the component occupies
weightx	The portion of extra space to allocate horizontally. The grid slot can become wider when extra space is available
weighty	The portion of extra space to allocate verically. The grid slot can become taller when extra space is available

Note some of the code used to set the constraints:

           constraints = new GridBagConstraints();
           ...
           constraints.fill = GridBagConstraints.BOTH;
           ...
           // set gridx and gridy
           constraints.gridx = column;
           constraints.gridy = row;

           // set gridwidth and gridheight
           constraints.gridwidth = width;
           constraints.gridheight = height;

           // set constraints and add component
           layout.setConstraints( component, constraints );
           container.add( component );
         

Exercises:

Go to the Exercises