Flashcards Part 2: Java Layouts

Written By: James Williams

- 22 May 2006 -
















Description: This tutorial only has scant flavorings of JDOM. The main focus will be the use of more complex window layouts, more components, and the pros and cons of various window layouts.

  1. Flashcards Part 2: Java Layouts

FlowLayout

For any JFrame, the default window layout for any component is FlowLayout. It simply puts the components next to each other, wrapping to each successive line if the need arises. FlowLayout is good for an quick hack to get something up and running but usually isn't a good choice for a final layout because the component locations aren't set and will change if the window size gets too small. Sure, you could prevent the user from changing the window size(setResizable), but I wouldn't do that. Users don't usually like being strong-armed and some won't realize it is disabled and try in vain over and over again. You will get support calls for this, so don't do it unless for a really, really, ber important reason. I don't know, maybe threats of ripping the time space continuum or using dialup to download a 50MB file might be some. Maybe not.

Of the layouts we have available in Java, besides FlowLayout, I've found Box, GridBag, Grid, Spring, and to a lesser extent the Border layout to be the most useful.

BoxLayout

BoxLayout is great for making a toolbox, it adds components to the end of the line either vertically or horizontally, never wrapping the output to the next line. It allows for a little control in component placement. Struts define the number of pixels between components.

Creating a document is fairly straightforward. We just instantiate the Document class

Box toolbox = Box.createHorizontalBox();
toolbox.add(btnOpen);
toolbox.add(Box.createHorizontalStrut(10));
toolbox.add(btnSave);
...

The toolbox container can now be as a component even in a JFrame with another layout.

GridLayout

GridLayout, as its' namesake, positions components in homogenized grid format. The major drawback of this layout is just that, all cells are given the same height and width. It can make most forms look very amateurish. The original layout was planned to be GridLayout but based on the resulting output, that idea was quickly scraped.

Click Here To View GridLayout

In this section of code, we define a 4 by 2 grid (H x W). The components automatically wrap between lines and place themselves in the proper cells.

 // Grid Layout 
        setLayout(new GridLayout(4,2));
        add(new JLabel("Word:"));
        add(txtWord);
        add(new JLabel("Native definition: "));
        add(native_def);
        add(new JLabel("Definition"));
        add(def);
        add(btnAdd);
        add(btnDelete);

GridBag is the more evolved form of GridLayout. Some might say it's GridLayout on steriods. That's a characterization I can't exactly disagree with. It allows you to set components to span columns, adjust individual alignment, and set insets and external spacing on a component-by-component basis. And what's the cost? An insane amount of code that is so unmaintainable outside a GUI designer that trying to do so by hand is the equivalent of running head first into a brick wall...Over and over and over again. Seriously, learn it so you can tweak the generated code but don't try to code it by hand.

SpringLayout

For the main form of the Flash Card Maker program, I chose SpringLayout. Spring Layout has a bit of the power of GridBag but without the steep learning curve. In Spring Layout, components are positioned in reference to other components or the edges of the contentPane [viewable area of the JFrame/JPanel]. The components are added to the frame as normal and the constraints for each component are adjusted as needed.

layout.putConstraint(SpringLayout.NORTH, txtWord, 5, SpringLayout.NORTH, getContentPane());
layout.putConstraint(SpringLayout.WEST, txtWord, 5, SpringLayout.EAST, lblWord);

Given the code above, where layout is a SpringLayout object, we see that the north edge of the txtWord text field will be positioned 5 pixels from the north edge of the content pane and it's west[left] edge will be placed 5 pixels from the east edge of the lblWord label.SpringLayout defaults to the minimum size so text components that are declared without an column width will start with a column width of zero and only expand when you type in them.

BorderLayout

BorderLayout allows one to place a component at each of the four cardinal directions and the center of the JFrame or JPanel. For a simple layout with limited components, it allows some added control without much overhead.

add(new JLabel("Words: "), BorderLayout.NORTH);

To remove words, I went with a separate form using a scrollable JList to illustrate another layout. To accomodate the delete and close buttons, they are loaded into a JPanel with the default FlowLayout. Locked at their relative positions, the form looks great at almost any size.

Click Here To View Sceenshot

Conclusion

Click Here To View Sceenshot

Though GridBagLayout is the most powerful and expressive layout, it is not always the best choice. Always consider the function of your form when chosing the proper layout.