• While buttons, lists, and other controls are the most obvious parts of a GUI, they alone do not make that GUI effective. A poor arrangement of buttons, or a random collection of text entry fields, can make an application as difficult to use as one that uses a command-line interface.

• To help you define the layout of your application, the JDK provides a set of layout managers. These objects are responsible for positioning and sizing components within a container, regardless of the platform or the screen size.

• Most layout managers ask each component in the container how much space it requires and arranges the components on the screen as best it can, based on the components' sizes and on the space available.

• Thus, if you put three Button objects in a container such as a Panel, the layout manager of the Panel will determine where the three buttons will be placed and how large they should be.

• If the user resizes the panel, the layout manager will again be responsible for organizing the layout of the interface given the new space requirements.

• This is a crucial task because to calculate the sizing and placement of components on every platform and for every screen size would be a programming task of Herculean proportions. The beauty of layout managers is that once you define the overall logic of the interface layout (which type of layout manager you will use), the layout manager does all the grunt work for you.

• However, since layout managers arrange the components in a container by themselves, they may also override any attempt you make to set the size or placement of a component in a container. This happens more often than not. If you use a BorderLayout for instance, and you place a component in the center and try to set its size, your request to set the size of the component in the center will be ignored. The layout manager will place it at whatever size it determines the component should be. Thus, to some degree, what is gained in convenience with layout managers is lost in control. Nevertheless, in the hands of a nimble programmer layout managers can be powerful and essential tools.

• In addition to handling the layout of components in a container, layout managers also manage keyboard navigation. Keyboard navigation is the mechanism hat allows a user to move through the components in a user interface using only the keyboard. Keyboard navigation is an important part of your interface because not every display allows mouse input. In addition, in some applications like data entry, using keyboard navigation is far more convenient than using a mouse.

• The theory of keyboard navigation is this: At any point in time, only one interface component can "listen" to the keyboard for keyboard events (the user hitting a key for example). The component that is listening to the keyboard is said to have "keyboard focus", or just "focus". Typically, the component that has focus identifies itself by displaying a location cursor that is oftentimes a highlighted border that surrounds the component. Whichever component has focus is the component that is acted upon by the user. Thus, if a text field has focus and the user types in some text, the text will be sent to that text field component for display and/or processing.

• When a user "moves focus" from one component to another with the keyboard (such as by hitting the arrow, tab, or HOME/END keys), the layout manager is involved to decide which component to move to.

JDK Layout Managers

• The JDK provides support for several layouts including the FlowLayout, GridLayout, BorderLayout, and GridBagLayout.

Flow Layout

• The Flow layout organizes its components in horizontal rows from left to right and from top to bottom according to the available space. Each row is centered by default but you can easily set the alignment

• As in most layout managers, components are sized to their preferred size unless there is insufficient space, in which case, the components are clipped.

  import java.awt.*;
  
  public class FlowLayoutExample
    {
    public static void main(String[] args)
      {
      Frame baseFrame = new Frame();
      FlowLayout layout = new FlowLayout();
      baseFrame.setLayout(layout);
      baseFrame.reshape(10,10,200,200);
      baseFrame.setTitle("Flow Layout Example");
  
      Button one = new Button("one");
      Button two = new Button("two");
      Button three = new Button("three");
      Button four = new Button("four");
      Button five = new Button("five");
  
      baseFrame.add(one);
      baseFrame.add(two);
      baseFrame.add(three);
      baseFrame.add(four);
      baseFrame.add(five);
  
      baseFrame.show();
      }
    }
  

Grid Layout

• GridLayout places components in a two-dimensional grid in which every component is placed at the same size. Thus, it is ideal for laying out objects in rows and columns, where each cell in the layout has the same size such as a calculator keypad or a calendar. Components are added to the layout from left to right and from top to bottom.

  import java.awt.*;
  
  public class GridLayoutExample
    {
    public static void main(String[] args)
      {
      Frame baseFrame = new Frame();
      GridLayout layout = new GridLayout(2,2);
      baseFrame.setLayout(layout);
      baseFrame.reshape(10,10,200,200);
      baseFrame.setTitle("Grid Layout Example");
  
      Button one = new Button("one");
      Button two = new Button("two");
      Button three = new Button("three");
      Button four = new Button("four");
  
      baseFrame.add(one);
      baseFrame.add(two);
      baseFrame.add(three);
      baseFrame.add(four);
  
      baseFrame.show();
      }
    }
  
  

Border Layout

• BorderLayout provides a flexible way of positioning components along the edges of a window. Specifically, it defines five areas, "NORTH", "SOUTH", "EAST", "WEST" that specify the edges of the window and "CENTER" for the remaining interior space. A component may be placed in one of the locations by giving the area as the constraint when the component is added to the layout manager. It is useful to know that not all the regions need to be filled. If an area is not used, it relinquishes its space to the regions around it.

• Make sure that you do not add multiple components to any one area because only one can be displayed. If you do add multiple components, only the last one added is displayed. If you want to display multiple components within a BorderPanel area, you should add them to a separate Panel and add the panel to the area.

• This idea of relinquishing space is important when understanding how the border layout decides which components in the layout get precedent over others when those components are vying for available space. The pecking order works like this. First, the components in the NORTH and SOUTH are placed at their preferred height. Next, the components in the EAST and WEST are placed at their preferred width. Finally, the component in the CENTER is placed at its preferred width and height, "if possible". Otherwise, the CENTER component will just be placed so that it uses all remaining space. Thus, if the NORTH, SOUTH, EAST, and WEST components take up all the available space, the CENTER component won't be visible at all. Similarly, if the NORTH and SOUTH components take up the entire height of the window, the EAST, WEST, and the CENTER components will not be visible.

  import java.awt.*;
  
  public class BorderLayoutExample
    {
    public static void main(String[] args)
      {
      Frame baseFrame = new Frame();
      BorderLayout layout = new BorderLayout(2,2);
      baseFrame.setLayout(layout);
      baseFrame.reshape(10,10,200,200);
      baseFrame.setTitle("Border Layout Example");
  
      Button one = new Button("one");
      Button two = new Button("two");
      Button three = new Button("three");
      Button four = new Button("four");
      Button five = new Button("five");
      baseFrame.add(one, "Center");
      baseFrame.add(two, "North");
      baseFrame.add(three, "South");
      baseFrame.add(four, "East");
      baseFrame.add(five, "West");
  
      baseFrame.show();
      }
    }
  
  

  

Card Layout

• The Card Layout is used to create a group of tabs that you can flip through like many of the options or preferences dialogs you will see in modern applications. Of course, Java does not have anything as nice looking as the typical windows tab widget, but it does at least provide the functionality. Since it is impossible to demonstrate the functionality of a CardLayout visually (you must play with it), we won't show a picture here. If you are interested in a card layout, just check out the online documentation.

• In the meantime, here is a simple example (we will talk about the action() method later):

  import java.awt.*;
  
  public class CardLayoutExample extends Frame
    {
    public CardLayout layout;
    public Panel      cardPanel;
    public CardLayoutExample()
      {
      setTitle("Card Layout Example");
      Panel navigationPanel = new Panel();
      navigationPanel.add(new Button("<"));
      navigationPanel.add(new Button(">"));
      navigationPanel.setBackground(Color.black);
      add(navigationPanel, "North");
  
      cardPanel = new Panel();
      layout = new CardLayout();
      cardPanel.setLayout(layout);
  
      add(cardPanel, "South");
  
      Panel p1 = new Panel();
      Panel p2 = new Panel();
      Panel p3 = new Panel();
  
      Button b1 = new Button("1");
      Button b2 = new Button("2");
      Button b3 = new Button("3");
  
      p1.add(b1);
      p2.add(b2);
      p3.add(b3);
  
      cardPanel.add("first", p1);
      cardPanel.add("second", p2);
      cardPanel.add("third", p3);
      }
  
    public static void main(String[] args)
      {
      Frame f = new CardLayoutExample();
      f.reshape(10,10,200,200);
      f.show();
      }
  
    public boolean action(Event evt, Object obj)
      {
      if (obj.equals("<"))
          {
   	layout.previous(cardPanel);
          }
      else if (obj.equals(">"))
          {
   	layout.next(cardPanel);
          }
      else return super.action(evt,obj);
      return true;
      }
  
    }
  
  

Grid Bag Layout

• The GridBagLayout is a complex layout manager. Actually, complex is putting it mildly. Though some AWT programmers swear by it, they are few and far between. In fact, I rarely use it at all.

• For example, even if you understand it and design your interface using it, if another programmer comes along and needs to modify the code you have written, they need to delve into the intricacies of the complex arrangement of constraints you needed to perform in order to make everything lay out correctly. This can be a pretty heavy burden, especially if they are assigned the task of changing the layout itself.

• Furthermore, all the things you can do with GridBagLayout you can also do with a combination of other layout managers.

• So, instead of delving into the intricacies, details and nuances of the GridBagLayout, I will briefly describe it and suggest you avoid it in favor of a combination of the other layout managers. You can refer to the online documentation for full details on how it works if you are really interested in using it.

• The GridBagLayout is described by some as a grid that allows you to place components in rows and columns but also allows individual components to span over rows or columns, so that they don't necessarily exist only in a single cell. This would make it seem rather simple, however it is not. There are 11 variables that are used to place and determine the size of each component. How these variables are interpreted is determined by the constraints of other components within the grid. It's not simply a mater of creating a GridBagLayout that is 20-by-20 grid, for example and then placing components in the various cells. There is a complex interaction of weights, positions, insets, etc. for each component where its layout depends on the layouts of other components in the container.