CS 3331 1

GUI Frameworks

CS 3331

Fall 2009

2CS 3331

Outline

MVC Model GUI components (widgets) Layout managers Handling events

3CS 3331

MVC Model A way of cleanly breaking an application into

three parts Model for maintaining data, View for displaying all or a portion of the data, and Controller for handling events that affect the model or

views.

Model

ControllerView

4CS 3331

Separating M from VC

Controller

changes model or view

get datafrom model

update viewwhen data changes

View

Model

5CS 3331

Due to Separation …

Multiple views and controllers for models

gui.ppt

change notificationrequest & modificationviews

model

6CS 3331

Due to Separation … (Cont.)

New views and controllers can be added for the model.

Changes in views are localized; such changes have minimal or no impact on the model.

7CS 3331

Outline

MVC Model GUI components (widgets) Layout managers Handling events

8CS 3331

Sample GUI Program Counter applet

Increment10Value:

9CS 3331

Java GUI Frameworks GUI frameworks

Part of Java Foundation Class (JFC) Abstract Window Toolkit (AWT) and Swing

Framework classes GUI components (or widgets) Layout managers Events and event listeners Graphics and imaging classes

10CS 3331

AWT vs. Swing

AWT Heavyweight components Associated with native components called peers Same behaviour, but platform-dependent look Package java.awt

Swing Lightweight components, i.e., no peer components Same look and feel across platforms Support pluggable look and feel Package javax.swing

11CS 3331

AWT Components

primitive container

12CS 3331

Swing ComponentsEvery widget is a container!

13CS 3331

Composite Design Pattern To allow clients to treat both single components and collections of

components identically To define recursive data structures such as trees

Clientuses

Leaf

operation()

Component

operation()

Composite

operation()add(Component)remove(Component)

*

14CS 3331

Exercise Design a class hierarchy to represent parse

trees for:Expression ::= Literal | Expression “+” Expression

15CS 3331

Outline

MVC Model GUI components (widgets) Layout managers Handling events

16CS 3331

Q: How to Layout Widgets? Three approaches

Manually specify absolute positions Manually specify relative positions Automate it

What’re pros and cons?

17CS 3331

Layout Managers Associated with containers Automate the layout of elements

When elements are added to the containerWhen the window is resized

automatically adjust the positions and sizes of the elements.

18CS 3331

Hierarchy of Layout Managers

Q: Can you identify the design pattern used here?

19CS 3331

Using Layout Managers

Method Description

setLayout(lm) Set lm as the layout manageradd(comp) Add a componentadd(comp, cst) Add a component with constraint

public class CounterApplet extends Applet { public CounterApplet () { setLayout(new FlowLayout()); add(new JButton(“Increment")); add(new JButton(“Decrement”)); }}

20CS 3331

Flow Layoutwidth=400 height=50

width=100 height=120

21CS 3331

Flow Layout (Cont.)

public class Flow extends Applet { public Flow () { setLayout(new FlowLayout()); add(new JButton("Java")); add(new JButton("C++")); add(new JButton("Perl")); add(new JButton("Ada")); add(new JButton("Smalltalk")); add(new JButton("Eiffel")); }}

22CS 3331

Grid Layout

3x2 grid

1x0 grid

0x1 grid

23CS 3331

Grid Layout (Cont.)public class Grid extends Applet { public void init () { int row = 0; int col = 0; String att = getParameter("row"); if (att != null) { row = Integer.parseInt(att); } att = getParameter("col"); if (att != null) { col = Integer.parseInt(att); } if (row == 0 && col == 0) { row = 3; col = 2; }

setLayout(new GridLayout(row, col)); add(new JButton("Java")); add(new JButton("C++")); add(new JButton("Perl")); add(new JButton("Ada")); add(new JButton("Smalltalk")); add(new JButton("Eiffel")); }}

24CS 3331

Question Why compose the GUI in the init() method

not in the constructor?

25CS 3331

Border Layout

26CS 3331

Border Layout (Cont.)

public class Border extends Applet { public Border () { setLayout(new BorderLayout()); add(new JButton("North"), BorderLayout.NORTH); add(new JButton("South"), BorderLayout.SOUTH); add(new JButton("East"), BorderLayout.EAST); add(new JButton("West"), BorderLayout.WEST); add(new JButton("Center"), BorderLayout.CENTER); }}

27CS 3331

Exercise Write an applet of the following layout.

public class ClassRoom extends Applet { public ClassRoom () { setLayout(new BorderLayout()); // WRITE YOUR CODE HERE…

}}

28CS 3331

Outline

MVC Model GUI components (widgets) Layout managers Handling events

29CS 3331

Event Handling

Mechanism to write control code Composed of:

EventEvent sourceEvent listener (or handler)

30CS 3331

Event Handling (Cont.) Event

A way for GUI components to communicate with the rest of application

Implemented as event classes (e.g., ActionEvent)

Event sourceComponents generating eventsExamples: buttons, check boxes, combo

boxes, etc.

31CS 3331

Event Handling (Cont.) Event listener (or handler)

Objects that receives and processes eventsMust implement an appropriate listener

interfaceMust inform the source its interest in handling

a certain type of events (by registering)May listen to several sources and different

types of events

32CS 3331

Example// create a buttonJButton button = new JButton(“Increment”);

// register an action listenerbutton.addActionListener(new ButtonActionListener());

// Action listener classclass ButtonActionListener implements ActionListener { public void actionPerformed(ActionEvent e) { // handle the event e … System.out.println(“Increment button pressed!”); }}

33CS 3331

How Does It Work?

<<create>>

h: ActionListenerb: JButton

e: ActionEvent

addActionListener(h)

actionPerformed(e)

getSource()

34CS 3331

Naming Convention

For event XYZ …Event class: XYZEventListener interface: XYZListenerAdapter class: XYZAdapterRegistration method: addXYZListener()

35CS 3331

Events and Listeners

Event Listener Adapter ActionEvent ActionListenerComponentEvent ComponentListener ComponentAdapterFocusEvent FocusListener FocusAdapterKeyEvent KeyListener KeyAdapterMouseEvent MouseListener MouseAdapter MouseMotionListener MouseMotionAdapterWindowEvent WindowListener WindowAdapterItemEvent ItemListenerTextEvent TextListener…

36CS 3331

Example: Resizing Component To prevent windows from being resized too small, use

ComponentEvent and ComponentListener

public class WinJava extends JFrame { public WinJava(String name) { super(name); // …. setResizable(true); addComponentListener(Util.createComponentListener(400, 300); } // …}

37CS 3331

Example (Cont.)public class Util { public static ComponentListener createComponentListener(int width, int height) { return new MyComponentListener(width, height); }

private static class MyComponentListener extends ComponentAdapter { private int width, height; public MyComponentListener(int w, int h) { width = w; height = h; } public void componentResized(ComponentEvent e) { Component c = e.getComponent(); if (c.getWidth() < width || c.getHeight() < height) { c.setSize(Math.max(width, c.getWidth()), Math.max(height, c.getHeight())); } } } // MyComponentListener}

38CS 3331

Using Anonymous Class// same code with anonymous classpublic class Util {

public static ComponentListener createComponentListener( final int width, final int height) {

return new ComponentAdapter() { public void componentResized(ComponentEvent e) { Component c = e.getComponent(); if (c.getWidth() < width || c.getHeight() < height) { c.setSize(Math.max(width, c.getWidth()), Math.max(height, c.getHeight())); } } // componentResized }; // ComponentAdapter

} // createComponentListener}

39CS 3331

ExerciseWrite handler code by using anonymous class to print a goodbye message to System.out when the main window is closed.

Hint: The WindowListener interface defines, among others, the method “void windowClosing(WindowEvent)”.

public class WinJava extends JFrame { public WinJava(String name) { // …. // WRITE YOUR CODE HERE

} // …}

40CS 3331

ExerciseExtend the counter applet to change its button color when the mouse enters the button.

Hints - The interface MouseListener declares, among others, void MouseEntered(MouseEvent) and void mouseExited(MouseEvent).- The method setBackground(Color) sets the background color of a widget.- The source (e.g., JButton) can be obtained from an event object by calling the method “Object getSource()”.

41CS 3331

Exercise (Cont.)public CounterApplet extends Applet { public CounterApplet() { // … JButton button = new JButton("Increment"); // WRITE YOUR CODE HERE!

// … } // …}