gui frameworks l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
GUI Frameworks PowerPoint Presentation
Download Presentation
GUI Frameworks

Loading in 2 Seconds...

play fullscreen
1 / 41

GUI Frameworks - PowerPoint PPT Presentation


  • 117 Views
  • Uploaded on

GUI Frameworks. CS 3331 Fall 2009. Outline. MVC Model GUI components (widgets) Layout managers Handling events. Model. Controller. View. MVC Model. A way of cleanly breaking an application into three parts Model for maintaining data,

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'GUI Frameworks' - lore


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
gui frameworks

GUI Frameworks

CS 3331

Fall 2009

outline
Outline
  • MVC Model
  • GUI components (widgets)
  • Layout managers
  • Handling events
mvc model

Model

Controller

View

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.
separating m from vc

Controller

Model

View

Separating M from VC

changes

model or view

get data

from model

update view

when data changes

due to separation

gui.ppt

request & modification

change notification

Due to Separation …
  • Multiple views and controllers for models

model

views

due to separation cont
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.
outline7
Outline
  • MVC Model
  • GUI components (widgets)
  • Layout managers
  • Handling events
sample gui program

Increment

Value:

10

Sample GUI Program
  • Counter applet
java gui frameworks
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
awt vs swing
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
awt components
AWT Components

container

primitive

composite design pattern

Component

operation()

Leaf

operation()

uses

*

Client

Composite

operation()

add(Component)

remove(Component)

Composite Design Pattern
  • To allow clients to treat both single components and collections of components identically
  • To define recursive data structures such as trees
exercise
Exercise
  • Design a class hierarchy to represent parse trees for:

Expression ::= Literal | Expression “+” Expression

outline15
Outline
  • MVC Model
  • GUI components (widgets)
  • Layout managers
  • Handling events
q how to layout widgets
Q: How to Layout Widgets?
  • Three approaches
    • Manually specify absolute positions
    • Manually specify relative positions
    • Automate it
  • What’re pros and cons?
layout managers
Layout Managers
  • Associated with containers
  • Automate the layout of elements
    • When elements are added to the container
    • When the window is resized
      • automatically adjust the positions and sizes of the elements.
hierarchy of layout managers
Hierarchy of Layout Managers

Q: Can you identify the design pattern used here?

using layout managers
Using Layout Managers

Method Description

setLayout(lm) Set lm as the layout manager

add(comp) Add a component

add(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”));

}

}

flow layout
Flow Layout

width=400 height=50

width=100 height=120

flow layout cont
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"));

}

}

grid layout
Grid Layout

3x2 grid

0x1 grid

1x0 grid

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"));

}

}

Grid Layout (Cont.)
question
Question
  • Why compose the GUI in the init() method not in the constructor?
border layout cont
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);

}

}

exercise27
Exercise
  • Write an applet of the following layout.

public class ClassRoom extends Applet {

public ClassRoom () {

setLayout(new BorderLayout());

// WRITE YOUR CODE HERE…

}

}

outline28
Outline
  • MVC Model
  • GUI components (widgets)
  • Layout managers
  • Handling events
event handling
Event Handling
  • Mechanism to write control code
  • Composed of:
    • Event
    • Event source
    • Event listener (or handler)
event handling cont
Event Handling (Cont.)
  • Event
    • A way for GUI components to communicate with the rest of application
    • Implemented as event classes (e.g., ActionEvent)
  • Event source
    • Components generating events
    • Examples: buttons, check boxes, combo boxes, etc.
event handling cont31
Event Handling (Cont.)
  • Event listener (or handler)
    • Objects that receives and processes events
    • Must implement an appropriate listener interface
    • Must inform the source its interest in handling a certain type of events (by registering)
    • May listen to several sources and different types of events
example
Example

// create a button

JButton button = new JButton(“Increment”);

// register an action listener

button.addActionListener(new ButtonActionListener());

// Action listener class

class ButtonActionListener implements ActionListener {

public void actionPerformed(ActionEvent e) {

// handle the event e …

System.out.println(“Increment button pressed!”);

}

}

how does it work

h: ActionListener

b: JButton

e: ActionEvent

How Does It Work?

addActionListener(h)

<<create>>

actionPerformed(e)

getSource()

naming convention
Naming Convention
  • For event XYZ …
    • Event class: XYZEvent
    • Listener interface: XYZListener
    • Adapter class: XYZAdapter
    • Registration method: addXYZListener()
events and listeners
Events and Listeners

Event Listener Adapter

ActionEvent ActionListener

ComponentEvent ComponentListener ComponentAdapter

FocusEvent FocusListener FocusAdapter

KeyEvent KeyListener KeyAdapter

MouseEvent MouseListener MouseAdapter

MouseMotionListenerMouseMotionAdapter

WindowEvent WindowListener WindowAdapter

ItemEvent ItemListener

TextEvent TextListener

example resizing component
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);

}

// …

}

example cont
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

}

using anonymous class
Using Anonymous Class

// same code with anonymous class

public 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

}

exercise39
Exercise

Write 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

}

// …

}

exercise40
Exercise

Extend 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()”.
exercise cont
Exercise (Cont.)

public CounterApplet extends Applet {

public CounterApplet() {

// …

JButton button = new JButton("Increment");

// WRITE YOUR CODE HERE!

// …

}

// …

}