1cs480: graphical user interfaces. dario salvucci, drexel university. lecture 3: layout basics

1CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.

Lecture 3:Layout Basics

CS480: Graphical User Interfaces. Dario Salvucci, Drexel University. 1

Overview Last week…

– GUI design– Java (everybody comfy?)– Very little bit of Swing

This week…– Swing Time!– Building the GUI

• components, layout– Handling GUI events


Building a Swing GUI Consider the following

“SwingApplication”(courtesy of Sun’s Java Swing Tutorial)

Every app defines a hierarchy of components– “component” = “widget”!

Containment Relationship


Model-View-Controller Architecture What defines a component? In Swing (and similar frameworks), a

component has three crucial elements:– model: what data is associated with component– view: how the component is displayed on-

screen– controller: how the component responds to

user interaction / events For example, a JTextArea component

– Model: The text, stored in a String object.– View: A white window with text cursor.– Controller: A listener that updates the String


Model-View-Controller Architecture Another Example: the scrollbar

How about a menu? a toolbar?

Model

min = 0max = 255value = 87

View Controller

mouse click on endmouse click on bar

mouse drag on scroller


Model-View-Controller Architecture All three elements are interdependent!

Why is this breakdown useful?– multiple components can tied to same

model– models can have different “look & feel”s

Model

View

Controller

Component UserConduit


The Model Is The Program Models are your internal

representation of the state of the program.

Use any data structure you want, its up to the Component to visualize it.

You program the Component to display it the way you want!

You program the Model to store the data (hopefully efficiently) the way you want!


Swing components Top-level containers

JFrame JDialog JApplet


Swing components General-purpose containers

JSplitPane

JToolbar

JScrollPane

JPanel

JTabbedPane


Swing components Special-purpose containers

JLayeredPane JInternalFrame


JavaDocs look at Swing! JavaDocs are a Great Tool! Program with the window open, it will

save you time and headaches. Swing Components have MANY

options and methods available. Lets take a look at the JavaDocs for

Java and for Swing!


Swing components Basic Controls

JButton JComboBoxJList

JMenu JSlider JTextField


Swing components Uneditable displays

JLabelJProgressBar

JToolTip


Swing components Editable displays

JColorChooser JFileChooser

JTreeJTextJTable


Creating components Just call the constructors!

All we’ve done is create the structures

Still need to:– add components to container, w/ layout– display container

frame = new JFrame (...);button = new JButton (...);label = new JLabel (...);pane = new JPanel ();… Use the JavaDocs!


Layout managers Set the layout manager and add

components For top-level containers as root frames:

– add components to Content Pane

– add components to intermediate components

frame.getContentPane().add (button);

JPanel panel = new Jpanel ();panel.add (button); // … and more…frame.getContentPane().add (panel);


Layout managers BorderLayout (the default)

JPanel pane = new JPanel();pane.setLayout (new BorderLayout()); // not really needed…pane.add (buttonNorth, BorderLayout.NORTH);pane.add (buttonCenter, BorderLayout.CENTER);…


Layout managers BorderLayout (cont.)

– can’t add twice in the same place

– can add spacing with the constructorJPanel pane = new JPanel();pane.setLayout (new BorderLayout (5, 20)); // xGap, yGap

contentPane.add (buttonNorth1, BorderLayout.NORTH);contentPane.add (buttonNorth2, BorderLayout.NORTH);// this second add() puts the second button on top of the first!


Layout managers BoxLayout: across or up/down

private void addAButton(String text, JPanel container) { JButton button = new JButton(text); button.setAlignmentX(Component.CENTER_ALIGNMENT); container.add(button);}

public BoxWindow() { JPanel contentPane = (JPanel)getContentPane(); contentPane.setLayout(new BoxLayout(contentPane, BoxLayout.Y_AXIS)); addAButton("Button 1", contentPane); addAButton("2", contentPane); addAButton("Button 3", contentPane); addAButton("Long-Named Button 4", contentPane); addAButton("Button 5", contentPane); …}


Layout managers GridLayout: equal-sized grid of

panels

JPanel contentPane = (JPanel)getContentPane(); contentPane.setLayout(new GridLayout(0,2)); // grid layout with 2 columns; doesn’t specify number of rows! contentPane.add(new JButton("Button 1")); contentPane.add(new JButton("2")); contentPane.add(new JButton("Button 3")); contentPane.add(new JButton("Long-Named Button 4")); contentPane.add(new JButton("Button 5"));


Layout managers FlowLayout: flows the rows, you

knows

JPanel contentPane = getContentPane(); contentPane.setLayout(new FlowLayout()); contentPane.add(new JButton("Button 1")); contentPane.add(new JButton("2")); contentPane.add(new JButton("Button 3")); contentPane.add(new JButton("Long-Named Button 4")); contentPane.add(new JButton("Button 5"));


Layout managers GridBagLayout: more flexible grid

CardLayout: changing components

Very Hard, Complex!.. but Powerful!


Layout tips Spacing components out

– create space with rigid boxes

– create space with “glue” (really bad name!)

pane.add (Box.createRigidArea (new Dimension (0,5)));

container.add (firstComponent);container.add (Box.createHorizontalGlue());container.add (secondComponent);


Layout tips Absolute positioning

JPanel contentPane = getContentPane(); contentPane.setLayout(null);

b1 = new JButton("one"); contentPane.add(b1); b2 = new JButton("two"); contentPane.add(b2); b3 = new JButton("three"); contentPane.add(b3);

Insets insets = contentPane.getInsets(); b1.setBounds(25 + insets.left, 5 + insets.top, 75, 20); b2.setBounds(55 + insets.left, 35 + insets.top, 75, 20); b3.setBounds(150 + insets.left, 15 + insets.top, 75, 30);


“SwingApplication” example High-level view

import javax.swing.*;import java.awt.*;import java.awt.event.*;

public class SwingApplication {

public JComponent createComponents(){ … }

public static void main (String[] args){ … }

}


“SwingApplication” example main()

public JComponent createComponents(){ … }

public static void main (String[] args) { … JFrame frame = new JFrame("SwingApplication"); SwingApplication app = new SwingApplication(); JComponent contents = app.createComponents(); frame.getContentPane().add(contents, BorderLayout.CENTER); … frame.pack(); frame.setVisible(true); }


“SwingApplication” example createComponents()

public JComponent createComponents() {

final JLabel label = new JLabel(labelPrefix + "0 ");

JButton button = new JButton("I'm a Swing button!"); … << set actions for button >> label.setLabelFor(button);

JPanel pane = new JPanel(); pane.setBorder (BorderFactory.createEmptyBorder(30,30,10,30)); pane.setLayout(new GridLayout(0, 1)); pane.add(button); pane.add(label); return pane; }

create border space!


“MyWindow” example Let’s design a window that looks like

this when resized…


Keeping things Flexible The “glue” example and “positioning”

are nice to know, but not practical. Use your Layout Manager to do

everything. Put panels within panels! Stack em',

each panel can have its own layout.

Flow LayoutBorder

Grid


Recommendation Best Layout Manager: Border

– Flexible: You know that the CENTER expands.

– Easy: Not difficult to configure.– Sizes: Set Preferred Size

• Not as bad as Absolute Positioning, but not great!

– Recommended– And hey, its the default for a reason!

1cs480: graphical user interfaces. dario salvucci, drexel university. lecture 3: layout basics

Documents