Scott Grissom, copyright 2006Ch 11: GUI Slide 1 Graphical User Interfaces (Ch 11) Careful design of a graphical user interface is key to a viable software

Scott Grissom, copyright 2006 Ch 11: GUI Slide 1

Graphical User Interfaces (Ch 11)

• Careful design of a graphical user interface is key to a viable software system

• To the user, the user interface is the system

• Java provides strong support for building GUIs through the javax.swing package

• Platform independencesame code

same appearance

• This is a large topic but we will only cover a portion of the chapterJFrame (11.1 - 11.4.2)

menus (11.4.3)

layout managers (11.5.3, 11.5.4)

event handling (11.4.4, 11.4.5)

GUI components (11.7.1)

Dialogs (11.5.6)


Event-Driven Programming

• the user controls when and what happens in a program

• GUI components are the screen elements that a user manipulates with the mouse and keyboard

• Layout managers govern how the components appear on the screen

• Event handling allows a program to respond to user actions


Frame (11.4.1)

• the top level of a GUI application

• We need to import three packagesjava.awt.*;

java.awt.events.*;

javax.swing.*;

• be familiar with a few of Jframe’s methodsJFrame f;

f = new JFrame(“some title”);

f.setSize(400,300);

f.pack();

f.setVisible(true);


Menus (11.4.3)

• Create pull down menusJMenuBar

JMenu

JMenuItem

• Sample code to create a menu// create the menu bar

menus = new JMenuBar();

f.setJMenuBar(menus);

// build a Fle menu with Quit

fileMenu = new JMenu(“File”);

quitItem = new JMenuItem(“Quit”);

quitItem.addActionListener(this);

fileMenu.add(quitItem);

// add menu to the bar

menus.add(fileMenu);


Layout Managers (11.5.3)

• Java Swing layout is dynamic to allow for different screen sizes and platformsautomatically sizes and places components

• There are several layout managers to choose from:flow layout

border layout

grid layout

box layout


Flow Layout

• Components are placed in a row from left to right in the order in which they are added

• New rows are created as needed

• Components are displayed at their preferred size

• Show demo


Border Layout

• Defines five locations where a component can be addedNorth, South, East, West, and Center

• The programmer specifies the area in which a component should appearadd(BorderLayout.NORTH, comp)

• Only one component per location

• Components expand to full size

• Default for JFrame

• Show demo


Box Layout

• Components are placed in a row OR a column as specified

• Sample CodeBoxLayout b;

b = new BoxLayout(f.getContentPane(), BoxLayout.X_AXIS)

• Show demo


Grid Layout

• Components are placed in a grid with a user-specified number of columns and rows

• Each cell is the same size

• Components placed left to right and top to bottom

• Sample CodeGridLayout g;

g = new GridLayout(row, col)

• Show demo


Nested Containers (11.5.4)

• Place multiple components inside a Panel

• Flow is default layout manager

• Sample CodeJPanel p = new JPanel();

p.setLayout(new FlowLayout());

Jbutton b1 = new Jbutton(“one”);

Jbutton b2 = new Jbutton(“two”);

p.add (b1);

p.add (b2);

add(p,BorderLayout.NORTH);

• Show demo


GUI Components (11.7.1)

• There are several GUI components that permit specific kinds of user interaction:JTextField, JTextArea

JButton, JComboBox, JCheckBox

JLabel, JMenu

• We are only interested in buttons and menus

• Useful methodssetBackground(Color c)

setEnabled(boolean)

setSize(width, height)

setVisible(boolean)


Event Handling (11.4.4, 11.4.5)

• When the user performs an action, an event is fired

• Selecting a menu item or a button fires an ActionEvent

• Open or closing a Frame fires a WindowEvent

• Classes can be designed to listen for specific types of events

• For exampleA mother and her son at the park


Action Event

• when user selects menu items or clicks on a button

• there must be a class that implements ActionListener

• this class must include a special methodpublic void actionPerformed(

ActionEvent e)

• each component must register the listener


actionPerformed

• this method is called automatically when one of the registered components is selected

• public void actionPerformed(ActionEvent e)• how do we determine which component was clicked?

String str = e.getActionCommand();

if (str.equals(“sort”)

• orJComponent = e.getSource();

if (comp == SortButton)


Using GUI Components

• Four Critical Steps1) define as an instance variable2) instantiate the component 3) display within the Frame4) register a listener

• For ExamplesortButton = new JButton (“Sort”);getContentPane().add (sortButton);sortButton.addActionListener(this);


JOptionPanes (11.5.6)

• Simple solution for common pop-up message boxes that requires little code

• Different styles are providedWARNING_MESSAGE

ERROR_MESSAGE

PLAIN_MESSAGE

• Sample CodeJOptionPane.showMessageDialog (frame, “my specific warning message”, “some

title”, JOptionPane.WARNING_MESSAGE);

JOptionPane.showMessageDialog (frame, “my specific error message”, “some title”, JOptionPane.ERROR_MESSAGE);


Model View Pattern

• Separate GUI front end from the application

• provides flexibility for future interface development

• Viewcreate frames and components

create instance of model

handle events

• Modelmanage data

respond to View requests

should not know anything about the View

• ResponsibilitiesTom and Mary have their own jobs and will be upset if

someone else does it

Documents

Scott Grissom, copyright 2006Ch 11: GUI Slide 1 Graphical User Interfaces (Ch 11) Careful design of a graphical user interface is key to a viable software