University of Limerick1 Software Architecture Java Layout Managers

University of Limerick2 Lecture Objectives u Understanding the difference between Containers and Components u Understand what a Layout Managers is

Frames and components menus labelswindows (frames) checkboxes radio buttons borders buttons

Containers and Components u Most of the GUI classes we deal with can be classified as either –Containers : Objects capable of containing other graphical objects –Components : Stand alone graphical widgets with no containment ability u These classes inherit from (J)Component or Container respectively

Containers u Containers are Swing components that hold other components u Containers can be nested (containers in containers) u Containers use a LayoutManager to determine how to arrange the components u A Swing frame hold a container in it’s content pane

University of Limerick6 Example Containers u JPanel –Panel is the simplest container class. A panel provides space in which an application can attach any other component. The default layout manager for a Panel is FlowLayout. u Window –A Window object is a top-level window with no borders and no menubar. u JFrame –A Frame is a top-level window with title and border; default layout is BorderLayout. u JDialog –A window that takes input from the user.

Swing: frame structure JFrame title bar content pane

More on Containers (1) u Swing provides four useful top-level container classes: JFrame, JApplet, JDialog & JWindow. u JPanel’s are intermediate containers. They are used to store other GUI objects, such as buttons, labels, textfields, etc. u Note there are other intermediate containers, such as TabbedPane, Toolbar, etc.

Components and Containers u GUI Objects such as labels, buttons, textfields, radiobuttons are consider atomic components…they DO NOT store other GUI objects within themselves. u Every top-level container contains an intermediate container, known as a content pane.

University of Limerick10 Components u Standard GUI controls like buttons, menus, scrollbars, text fields and lists are typical components u Swing also supplies some complex controls like Color, File and Font choosers, spreadsheet-like tables and Windows Explorer-like hierarchical trees

More on Components u So whenever you add an atomic component or intermediate container to a top-level container (e.g. JFrame), add it to the content pane. u E.g. Incorrect –add(new JButton(“hello”)); u Correct –getContentPane().add(new JButton(“hello”));

University of Limerick12 Adding Components to Containers u Containers exist to hold components which create the UI experience for the user u If you don't care about the layout of the components in the container, adding them is simple Container contentPane = getContentPane(); JButton aButton = new JButton(“Start”); contentPane.add(aButton);

University of Limerick13 Layout managers u Using a layout manager you can choose one of a small number of standard arrangments for subwindows u You create a “layout manager” object - an instance of a class that –keeps track of subwindows and their (minimum) sizes –chooses how to position them in the enclosing window u you associate this layout manager with the window

Arranging components containers components

Example JPanel bluePanel = new JPanel(); bluePanel.setBackground(Color.blue); bluePanel.setOpaque(true); bluePanel.setPreferredSize(new Dimension(200, 200)); …. JPanel normalPanel = new JPanel(new GridLayout(0, 2)); JLabel blackLabel = new JLabel("Black Label"); blackLabel.setOpaque(true); blackLabel.setBackground(Color.black); blackLabel.setForeground(Color.white); JLabel greenLabel = new JLabel("Green Label"); greenLabel.setOpaque(true); greenLabel.setBackground(Color.green); normalPanel.add(blackLabel); normalPanel.add(greenLabel);

Why Layout Managers u So the programmer no longer bares the burden of specifying the exact position and dimension of each component

Layout Managers u each container manages layout of its components u the programmer just adds components, the container looks after layout u the container uses a Layout Manager to handle the layout u different layout managers are available u layout can be specified by specifying layout managers for containers

Layout Managers u Layout managers –FlowLayout –BorderLayout –GridLayout –GridBagLayout –CardLayout

FlowLayout u Arranges all components in a horizontal row u Components flow into next line when no space in row u The FlowLayout managers always honours a components preferred size u Default layout for JPanels

Flow Layout Managers getContentPane().setLayout(new FlowLayout(10, 30, FlowLayout.LEFT)); JButton JButNorth = new JButton("AAAA"); JButton JButCenter = new JButton("BBB"); JButton JButWest = new JButton("CCC"); JButton JButEast = new JButton("DDDD"); JButton JButSouth = new JButton("EEEE"); getContentPane().add(JButNorth); getContentPane().add(JButWest); getContentPane().add(JButSouth); getContentPane().add(JButEast); getContentPane().add(JButCenter);

BorderLayout u Content panes (main containers in JFrame, JDialog, JApplet) use BorderLayout by default) u Holds up to five components in fixed places center west east south north

BorderLayout u The BorderLayout manager honours the preferred height of the North and South sectors but expands the width to fill the entire container u Honours the preferred width of the East and West sectors but expands the height to fill the entire container

Border Layout Managers... JButton JButNorth = new JButton("North"); JButton JButCenter = new JButton("Center"); JButton JButWest = new JButton("West"); JButton JButEast = new JButton("East"); JButton JButSouth = new JButton("South"); getContentPane().add(JButNorth, BorderLayout.NORTH); getContentPane().add(JButWest, BorderLayout.WEST); getContentPane().add(JButSouth, BorderLayout.SOUTH); getContentPane().add(JButEast, BorderLayout.EAST); getContentPane().add(JButCenter);...

GridLayout u Arranges components in a grid u The GridLayout managers ignores a components preferred size –Components are expanded to fill the sector

Grid Layout Managers getContentPane().setLayout(new GridLayout(3, 3)); JButton JButNorth = new JButton("Click"); JButton JButCenter = new JButton("Exit"); JButton JButWest = new JButton("Save"); JButton JButEast = new JButton("Bye"); JButton JButSouth = new JButton("Hello"); getContentPane().add(JButNorth); getContentPane().add(JButWest); getContentPane().add(JButSouth); getContentPane().add(JButEast); getContentPane().add(JButCenter);

CardLayout u Arranges components in time rather than space u Similar to a tabbed panel without the tabs u Components are arranged in sequence and only one is displayed at a time –N.B. A component may be a JPanel

GridBag Layout u Most powerful layout manager u Divides layout into an array of cell but cell may have different height and widths u Considered the most difficult to use

Layout Managers u By default every container has a layout manager u JPanel use FlowLayout by default u Content panes (main containers in JFrame, JApplet) use BorderLayout by default) u To override the default layout for any containers use the setLayout method or specify it during constructor u Remember for top level containers use getContentPane().setLayout(...).

Combining Layout managers u Most moderately sophisticated UI designs are too complex for the layout requirements to be satisfied by a single layout manager u So you will often need to combine two or more separate layout managers to achieve the desired affect overall

Combining Layout managers u This is accomplished by using extra container objects (JPanels) with different layout managers within a main container like a JFrame u It is also possible to specify that you do not want to employ a layout manager, and position subwindows yourself

University of Limerick31 Calculator Example public CalculatorPanel() { setLayout(new BorderLayout()); display = new JTextField("0"); display.setEditable(false); add(display, "North"); JPanel p = new JPanel(); p.setLayout(new GridLayout(4, 4)); String buttons = "789/456*123-0.=+"; for (int i = 0; i < buttons.length(); i++) addButton(p, buttons.substring(i, i + 1)); add(p, "Center"); } New panel Add new panel to existing panel Set layout for panel