gui by entwdz

VIEWS: 0 PAGES: 41

									          GUI Frameworks

             CS 3331
             Fall 2009

CS 3331                    1
Outline

n MVC Model
n GUI components (widgets)
n Layout managers
n Handling events




CS 3331                      2
MVC Model
 n   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.

                       View             Controller



                               Model



CS 3331                                                         3
Separating M from VC
            get data                changes 
          from model               model or view

            View                   Controller



                         Model
                      update view
                   when data changes



CS 3331                                            4
Due to Separation …
n   Multiple views and controllers for models


                                  model
                                  gui.ppt




          views                    request & modification
                                   change notification



CS 3331                                                     5
Due to Separation … (Cont.)
n New views and controllers can be added 
  for the model.
n Changes in views are localized; such 
  changes have minimal or no impact on the 
  model.




CS 3331                                   6
Outline

Ö MVC Model
n GUI components (widgets)
n Layout managers
n Handling events




CS 3331                      7
Sample GUI Program
 n Counter applet




            Value:   10   Increment




CS 3331                               8
Java GUI Frameworks
 n   GUI frameworks
      ¨ Part of Java Foundation Class (JFC)
      ¨ Abstract Window Toolkit (AWT) and Swing

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




CS 3331                                           9
AWT vs. Swing
 n   AWT
      ¨  Heavyweight components
      ¨  Associated with native components called peers
      ¨  Same behaviour, but platform-dependent look
      ¨  Package java.awt
 n   Swing
      ¨  Lightweight components, i.e., no peer components
      ¨ Same look and feel across platforms
      ¨  Support pluggable look and feel
      ¨  Package javax.swing


CS 3331                                                     10
AWT Components
          primitive   container




CS 3331                           11
Swing Components
                   Every widget is a container!




CS 3331                                           12
Composite Design Pattern
 n   To allow clients to treat both single components and collections of 
     components identically
 n   To define recursive data structures such as trees


                        uses                                *
             Client                        Component
                                        operation()




                                Leaf                     Composite
                          operation()                  operation()
                                                       add(Component)
                                                       remove(Component)



CS 3331                                                                    13
Exercise
 n   Design a class hierarchy to represent parse 
     trees for:
     Expression ::= Literal | Expression “+” Expression




CS 3331                                                   14
Outline

Ö MVC Model
Ö GUI components (widgets)
n Layout managers
n Handling events




CS 3331                      15
Q: How to Layout Widgets?
 n   Three approaches
      ¨  Manually specify absolute positions
      ¨  Manually specify relative positions
      ¨  Automate it

 n   What’re pros and cons?




CS 3331                                        16
Layout Managers
 n Associated with containers
 n Automate the layout of elements
      ¨ When elements are added to the container
      ¨ When the window is resized
          n    automatically adjust the positions and sizes of the 
              elements. 




CS 3331                                                          17
Hierarchy of Layout Managers




    Q: Can you identify the design pattern used here?

CS 3331                                                 18
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”));
            }
          }



CS 3331                                                      19
Flow Layout
          width=400 height=50




                      width=100 height=120




CS 3331                                      20
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"));  
    }
  }



CS 3331                                21
Grid Layout

             3x2 grid


                        0x1 grid

          1x0 grid




CS 3331                            22
Grid Layout (Cont.)
  public class Grid extends Applet {          setLayout(new GridLayout(row, col));
    public void init () {                     add(new JButton("Java"));
      int row = 0;                            add(new JButton("C++"));
      int col = 0;                            add(new JButton("Perl"));
      String att = getParameter("row");       add(new JButton("Ada"));
      if (att != null) {                      add(new JButton("Smalltalk"));
         row = Integer.parseInt(att);         add(new JButton("Eiffel"));
      }                                     }
      att = getParameter("col");          }
      if (att != null) { 
         col = Integer.parseInt(att); 
      }
      if (row == 0 && col == 0) { 
          row = 3; col = 2; 
      }


CS 3331                                                                          23
Question
 n   Why compose the GUI in the init() method 
     not in the constructor?




CS 3331                                     24
Border Layout




CS 3331         25
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);
    }
  } 




CS 3331                                                  26
Exercise
n   Write an applet of the following layout.
                       public class ClassRoom extends Applet {
                         public ClassRoom () {
                           setLayout(new BorderLayout()); 
                           // WRITE YOUR CODE HERE…




                          }
                       } 
CS 3331                                                          27
Outline

Ö MVC Model
Ö GUI components (widgets)
Ö Layout managers
n Handling events




CS 3331                      28
Event Handling
 n Mechanism to write control code
 n Composed of:
      ¨ Event
      ¨ Event source
      ¨ Event listener (or handler)




CS 3331                               29
Event Handling (Cont.)
 n   Event
      ¨ A way for GUI components to communicate 
        with the rest of application
      ¨ Implemented as event classes (e.g., 
        ActionEvent)
 n   Event source
      ¨ Components generating events
      ¨ Examples: buttons, check boxes, combo 
          boxes, etc.

CS 3331                                            30
Event Handling (Cont.)
 n   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


CS 3331                                               31
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!”);
     }
  }


CS 3331                                                      32
How Does It Work?
          b: JButton                              h: ActionListener

                                     addActionListener(h)



                <<create>>
                             e: ActionEvent

                actionPerformed(e)
                                              getSource()




CS 3331                                                               33
Naming Convention
n   For event XYZ …
     ¨ Event class: XYZEvent
     ¨ Listener interface: XYZListener
     ¨ Adapter class: XYZAdapter
     ¨ Registration method: addXYZListener()




CS 3331                                        34
Events and Listeners

          Event                           Listener                 Adapter 
                        
          ActionEvent                      ActionListener
          ComponentEvent     ComponentListener                     ComponentAdapter
          FocusEvent                       FocusListener           FocusAdapter
          KeyEvent                         KeyListener             KeyAdapter
          MouseEvent                       MouseListener           MouseAdapter
                                           MouseMotionListener     MouseMotionAdapter
          WindowEvent                      WindowListener          WindowAdapter
          ItemEvent                        ItemListener
          TextEvent                        TextListener
          …




CS 3331                                                                                 35
Example: Resizing Component
 n   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);
         }
         // …
      }




CS 3331                                                                     36
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
  }
CS 3331                                                                        37
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
  }

CS 3331                                                                   38
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

         


       }
       // …
    }
CS 3331                                                               39
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()”.

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




     
         // …
       }
       // …
    }
CS 3331                                                 41

								
To top