GridBag Layout

This scenario will test out the features and behavior of the GridBagLayout manager.

Setup: Import gridbaglayout_example.zip into a Java project.

Basic Canvas Manipulation
Open GridBagLayoutExample.java with the Visual Editor.
Verify the example displays properly on the canvas:

Select the content pane (a JPanel) and Verify the grid shows correctly:


Unselect the pane and the grid should be hidden.

Select a JButton from the palette and attempt to drop it onto the GridBag. Do not drop it yet... just drag it over the GridBag to observe the different types of feedback.
Verify the not cursor is active when you drag it over an occupied cell such as the Italic checkbox.
Verify the cursor shows the gridx, gridy position based on what cell you are dragging over. Note the color of the cursor numbers should be cyan. For example:


Verify the cell where pointer is dragging over is highlighted in a dark gray to indicate the cell boundaries and location.

Drop the JButton into one of the empty cells and Verify the grid resizes correctly.
Delete the JButton and Verify the grid resizes correctly.

Select one of the components on the grid (e.g. the Bold checkbox) and attempt to drag it to another cell.
Verify the same feedback as before (i.e. same as dropping a new component from the palette).

Select the JFrame and move it on the free form.
Verify the grid is displayed in the new location properly.
Resize the JFrame.
Verify the grid is resized and displayed properly.

Insert Components into new Rows and Columns
Select a JButton from the palette and drag the pointer over the GridBag.
Verify that as you move the pointer in between a cell row and/or cell column, a long narrow yellow horizontal and/or vertical row/column is displayed to indicate the JButton will be inserted into a new row and/or column. For example:


Indicates the JButton will be dropped into the cell at gridx=2 and gridy=1. This also shows the components in remaining column 2 will now be changed to column 3 which is a gridx value of 3.
Verify the column header changes color and value when dragging between rows and columns.
Drop the JButton into the cell location 2,1 and Verify the JButton is dropped into the correct cell and the other components are moved accordingly.
Try a few variations of this.


Alignment Window
Select one of the components in the content pane and select the Alignment Window action on the toolbar

to bring up the alignment window. Select the GridBag page. Verify it looks like this (although the values may be different depending what component you selected. Actions should all be active when a component is selected, and all should be not active if none is selected:


Select the Anchor actions on the compass and Fill arrows Verify the changes are applied in the graph viewer and the property sheet viewer.
Change the Insets by either typing in a number, selecting the up/down buttons, or selecting into the field and using the up or down arrows on your keyboard to change the values.
Verify changes take place as soon as the value changes in the specific position field (i.e. Top, Left, Bottom, or Right).


Spanning Columns and Rows
Select JTextField at the bottom of the content pane (the one that says "The quick brown fox". It should look like this:


Verify there is a small green rectangle to the east and south of the JTextField.
These are handles for spanning horizontally or vertically which when dragged to another column or row will change the gridwidth or gridheight values of the constraint. Move your mouse over each green rectangle...

Verify the east handle changes to a horizontal cursor

…and the south handle changes to a vertical cursor.

In the property sheet, the grid width for this component is 3. Drag the east handle to the left until it crosses column number 1 and release the mouse.
Verify the value changes in the property sheet to 2 and the graph viewer also changes to something like this:

Try a few more iterations of this with other components and Verify the graph viewer, property sheet, and source code are updated to reflect the changes.

Conversions to GridBagLayout

For each layout other than GridBagLayout

• Change the layout of the JPanel to the testing layout
• Change the layout of the JPanel back to GridBagLayout

Verify that the position of the components is relatively the same as what it came from.
Note: Keep in mind that switching to BorderLayout will keep only 5 components in the content pane and the rest we will put on the canvas... so switching back will only keep the 5 components. Also switching to a CardLayout will show only one component on a page so switching back will only show the one component.