1. 1CS480: Graphical User Interfaces. Dario Salvucci, Drexel University. Lecture 3: Layout Basics

2. 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

3. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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

4. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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

5. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Model-View-Controller Architecture Another Example: the scrollbar How about a menu? a toolbar? Model min = 0 max = 255 value = 87 ViewController mouse click on end mouse click on bar mouse drag on scroller

6. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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 User Conduit

7. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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!

8. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Swing components Top-level containers JFrameJDialogJApplet

9. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Swing components General-purpose containers JSplitPane JToolbar JScrollPane JPanel JTabbedPane

10. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Swing components Special-purpose containers JLayeredPane JInternalFrame

11. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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!

12. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Swing components Basic Controls JButton JComboBox JList JMenu JSlider JTextField

13. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Swing components Uneditable displays JLabel JProgressBar JToolTip

14. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Swing components Editable displays JColorChooserJFileChooser JTreeJTextJTable

15. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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!

16. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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);

17. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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); …

18. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Layout managers BorderLayout (cont.) – can’t add twice in the same place – can add spacing with the constructor JPanel 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!

19. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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); … }

20. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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"));

21. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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"));

22. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 Layout managers GridBagLayout: more flexible grid CardLayout: changing components Very Hard, Complex!.. but Powerful!

23. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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);

24. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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);

25. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 “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) { … } }

26. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 “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); }

27. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 “SwingApplication” example createComponents() public JComponent createComponents() { final JLabel label = new JLabel(labelPrefix + "0 "); JButton button = new JButton("I'm a Swing 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!

28. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 “MyWindow” example Let’s design a window that looks like this when resized…

29. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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 Layout Border Grid

30. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.1 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!