CPSC150 Week 12 Graphical User Interfaces Chapter 11

CPSC150 Designing Program with Graphical User Interfaces Programs have two parts/classes: –the User Interface –the engine In Connect4 –User interface is board and drawing the board –The engine is what does the logic: calculates win/lose etc. GUI is User Interface: how program is shown to user

CPSC150 Implementating GUIs: GUI parts Components –buttons, menus, textfields, etc. Event Handling –instead of executing methods when called (by BlueJ or in code), execute methods when an event occurs (e.g., mouse click on a button) Layout –Where on the screen to put the components. use LayoutManager

CPSC150 GUIs Components –JFrames and Windows creating a Window –Menus adding a Window to the menu Event Handling –handling events that happen in the Window Layouts –arranging components in the Window

CPSC150 Swing Java has AWT (old, Abstract Window Toolkit) and Swing (based on AWT) Swing prefixes components with J –e.g., Button is from AWT, JButton is Swing –We’ll use Swing To use Swing: import javax.swing.*; // note ‘x’

CPSC150 Java GUI The Java GUI packages GUI classes are found in two packages: AWT (Abstract Windows Toolkit) Swing Swing components are based on AWT classes Java 2 released Swing as an alternative to AWT AWT uses platform-specific GUI components Swing is less reliant on platform-specific components more less heavyweight components AWT lightweight components Swing reliance on platform-specific GUI components

CPSC150 Java GUI The Java GUI inheritance hierarchy Object Color Container Component LayoutManager Panel Window Applet Frame Dialog JComponent JApplet JFrame JDialog Swing AWT Components we will use

CPSC150 Java GUI The Java GUI inheritance hierarchy JComponent JMenuBar AbstractButton JScrollPane JPanel JTextComponent JLabel JComboBox JMenuItem JButton JTextArea JTextField JPasswordField … etc. Swing … components we will use

CPSC150 Building a Window Everything is in a top level container (JFrame) JFrame has –Title bar –Menu bar (optional) –Content Pane title bar menu bar content pane Frame (whole window)

CPSC150 Code for a JFrame 3. pack frame. arrange components windowFrame.pack( ) 4. make the frame visible (can also make it invisible, as in quitWord) windowFrame.setVisible(true);

CPSC150 Code for a Frame To build a JFrame, do 4 things (From 150 lab3 GuiInterface.java) 1. Create new JFrame and put a title in private JFrame windowFrame = new JFrame(“Word Jumble 1.0”); 2. Tie parts to JFrame (component, menubar, etc) // if gameWordPanel already exists – type JPanel Container cp = WindowFrame.getContentPane( ); cp.add(gameWordPanel); OR windowFrame.getContentPane().add(gameWordPanel); OR (in Java5): windowFrame.add(gameWordPanel);

CPSC150 JFrame Lots of parts to a JFrame, mostly ContentPane –content panes can hold any number of components –(4 components in windowFrame in lab3) –contentPane (only one) vs JPanel (can have lots) Pre-Java5 –add content (components) to the contentPane –Now, add to the JFrame. adds to contentPane

CPSC150 Some Components JButton JPanel JLabel Lots, look at: /swing/package-summary.html

CPSC150 title bar minimize maximize close come for free component (JPanel) { Also in lab3, what to do on close (click on red X): windowFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

CPSC150 GUIs JFrames and Windows –creating a Window Menus –adding a Window to the menu Event Handling –handling events that happen in the Window Layouts –arranging components in the Window

CPSC150 Building a Window Everything is in a JFrame JFrame has –Title bar –Menu bar (optional) –Content Pane title bar menu bar content pane Frame (whole window)

CPSC150 Adding menus: 3 parts JMenuBar –Displayed below the title. –Contains the menus. JMenu –e.g. File. Contains the menu items. JMenuItem –e.g. Open. Individual items.

CPSC150 private void makeMenuBar(JFrame frame) { JMenuBar menubar = new JMenuBar(); frame.setJMenuBar(menubar); // create the File menu JMenu fileMenu = new JMenu("File"); menubar.add(fileMenu); JMenuItem openItem = new JMenuItem("Open"); fileMenu.add(openItem); JMenuItem quitItem = new JMenuItem("Quit"); fileMenu.add(quitItem); } To add JMenuBar to JFrame } To add JMenuItem to JMenu { To add JMenu to JMenuBar {

CPSC150 Struts and Glue Invisible components used as spacing. Available from the Box class. Strut: fixed size. –Component createHorizontalStrut(int width) –Component createVerticalStrut(int height) Glue: fills available space. –Component createHorizontalGlue() –Component createVerticalGlue()

CPSC150 Pushing a menu to the right menu = new JMenu("File"); menubar.add(menu); menu = new JMenu("Filter"); menubar.add(menu); menubar.add(Box.createHorizontalGlue()); menu = new JMenu("Help"); menubar.add(menu); Glue (invisible)

CPSC150 GUIs Components –JFrames and Windows creating a Window –Menus adding a Window to the menu Event Handling –handling events that happen in the Window Layouts –arranging components in the Window

CPSC150 Events We can now put items on a JFrame and arrange them. We need to be able to do something with them. Action Events –mouse click, mouse over, window action, menu choice, etc. General, ActionListener –Something happened –in java.awt.event –( vent/package-summary.html) vent/package-summary.html

CPSC150 “Check” button in Lab 3: add ActionListener event actionPerformed in the outer class class someclass { // inside some method: b = new JButton("Check"); b.addActionListener(this); // "this" is the current class public void actionPerformed(ActionEvent e) { System.out.println("Check is " + e.getActionCommand()); checkWord(); }

CPSC150 Action Listeners: Inner Classes class someclass { // inside some method: b = new JButton("Check"); b.addActionListener(new checkAction( )); private class checkAction implements ActionListener { public void actionPerformed(ActionEvent e) { System.out.println("Check is " + e.getActionCommand()); checkWord(); } } // end of checkAction } // end of someclass

CPSC150 A third way: anonymous inner classes // Associate actionlistener with button and write actionPerformed b = new JButton("Check"); b.addActionListener(new ActionListener( ) { public void actionPerformed(ActionEvent e) { System.out.println("Check is " + e.getActionCommand()); checkWord(); } );

CPSC150 Anonymous class elements b.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e) { System.out.println("Check is " + e.getActionCommand()); checkWord(); } ); Anonymous object creation Actual parameter Class definition

CPSC150 GUIs JFrames and Windows –creating a Window Menus –adding a Window to the menu Event Handling –handling events that happen in the Window Layouts –arranging components in the Window

CPSC150 Layout managers Manage limited space for components. –FlowLayout, BorderLayout, GridLayout, BoxLayout, GridBagLayout (most flexible, hardest) Manage Container objects, e.g. a content pane. Each imposes its own style.

CPSC150 FlowLayout

CPSC150 BorderLayout default for top level containers (JFrame)

CPSC150 GridLayout

CPSC150 BoxLayout Note: no component resizing.

CPSC150 Layout Manager Lab 3 4 JPanels gameWordPanel, gameGuessPanel, gameButtonPanel, gameStatusPanel

CPSC150 Layout Managers – Lab 3 Container contentPane = windowFrame.getContentPane ( ); contentPane.setLayout(new GridLayout(4, 1)); OR windowFrame.getContentPane().setLayout(new GridLayout(4,1)); OR windowFrame.setLayout(new GridLayout(4, 1)); // add panels in order windowFrame.getContentPane().add(gameWordPanel); windowFrame.getContentPane().add(gameGuessPanel); windowFrame.getContentPane().add(gameButtonPanel); windowFrame.getContentPane().add(gameStatusPanel);

CPSC150 Buttons and nested layouts Use JPanels and embedded layouts A GridLayout inside a FlowLayout inside a BorderLayout.