Building Graphical User Interface in Java - PowerPoint - PowerPoint by msz78385

VIEWS: 39 PAGES: 33

									Object-Oriented Programming with Java




                  Graphical User Interface in Java
                             Java AWT


                                        Seree Chinodom


                                                         Burapha University, 2005
Object-Oriented Programming with Java


                                        Lecture Outline
         Java AWT
         AWT Class Hierarchy
         AWT Component & Container
         AWT Layout Manager
         Building GUI applications with AWT




                                                          Burapha University, 2005
Object-Oriented Programming with Java


                                        Overview
   AWT (Abstract Window Toolkit) เป็นชุดของเครื่องมือในการพัฒนา
  GUI application
      กลุ่มของ widgets (ได้แก่ interaction techniques,
     components)
         Pre-defined, reusable, generically useful classes, buttons,
        menus, etc.
      ชุดเครื่องมือ (A toolkit)
         กลุ่มของ Class และ Abstract Class สาหรับสร้าง
        (compose) จัดการ (manage) Graphical User Interfaces
        (GUIs) จากกลุ่มของ widgets
                                                        Burapha University, 2005
Object-Oriented Programming with Java


                                        Widgets




                                                  Burapha University, 2005
Object-Oriented Programming with Java


                                 AWT Look and Feel
      AWT library ไม่ขึ้นกับ platform
      Look and Feel แตกต่างกัน ในแต่ละ
     platform




                                                     Burapha University, 2005
Object-Oriented Programming with Java


                               AWT and AWT Event
     โปรแกรมภาษาจาวาที่เรียกใช้งาน AWT ต้องเรียกใช้ Package ที่ชื่อ
   java.awt
        ประกอบด้วยกลุ่มของ Class และ Abstract Class
                  ่
       รวมถึง กลุมของ Interface ที่สามารถถ่ายทอดคุณสมบัติให้กับคลาส
       อื่นๆ ได้
        ทุกๆ GUI Components ที่แสดงผลออกทางหน้าจอ ต้องเป็น
       Subclass ของคลาส Component หรือ ของ MenuComponent
    โปรแกรมภาษาจาวาทีเรียกใช้งาน AWT Event่
   ต้องเรียกใช้ Package ที่ชื่อ java.awt.event
        ประกอบด้วยกลุ่มของ Class และ Abstract Class
                    ่                                   GUI
       รวมถึง กลุมของ Interface ที่สามารถใช้ในการจัดการBurapha University, 2005
Object-Oriented Programming with Java


                                AWT Class Hierarchy
                                          List

                      AWTEvent           Container       Panel                Applet

                                         Label          Window                Frame
                       Font
                                        Button
                                                        ScrollPane           Diaglog
                      FontMetrics
   Object                               Choice
                        Color
                                        TextComponent         TextField
                       Graphics
                                        Checkbox             TextArea
                      Component
                                        ChekboxGroup

                                        Canvas

                                        MenuComponent

                                          Scrollbar                  Burapha University, 2005
Object-Oriented Programming with Java


                         The AWT Component Class
                                   ิ
    คลาส Component ถ่ายทอดคุณสมบัตต่างๆ ให้กับ children ดังต่อไปนี้
   เช่น
           set the component’s background color
           enable/disable/test if enabled
           find its screen location
           find/set its size
           find its parent
           make visible/invisible/test if visible
           register an event handler with the component
             ...
                                                           Burapha University, 2005
Object-Oriented Programming with Java


                Primitive AWT Component Subclass
    เพิ่มคุณสมบัติเฉพาะ (properties) ให้กับ widget
    Buttons มี methods สาหรับ:
         get/set the label
    Lists มี methods สาหรับ:
         add/delete items
      select/deselect/find which is selected item
      find number of items
    Primitive AWT Component Subclass ยังมี methods สาหรับ:
      register particular types of even handlers


                                                      Burapha University, 2005
Object-Oriented Programming with Java

           Composite AWT Components Subclasses
      Primitive Widgets ไม่สามารถสร้างขึ้นอยู่โดดเดี่ยวได้
      ต้องประกอบด้วย Composite Widget ย่อย
     โดยทั่วๆไป Composite Widget ได้แก่ Subclass ของคลาส Container
                                         List

                                        Container     Panel       Applet

                                        Canvas       Window       Frame

                                        Label        ScrollPane
          Component                                               Diaglog
                                         Scrollbar

                                    Button

                                    Choice
                                                                   Burapha University, 2005
Object-Oriented Programming with Java



                           The Container Subclass




                                                    Burapha University, 2005
Object-Oriented Programming with Java


                                        Frame
           Frame เป็น subclass ของWindow
           สามารถกาหนด title ให้กับ Frame และสามารถ Resize
      ได้
         เมื่อวัตถุถูกสร้างจากคลาส Frame เริ่มต้นจะเป็น
      Invisible ต้องเรียกใช้ Method ที่ชื่อ setVisible(true) เพื่อให้วัตถุที่สร้าง
      จากคลาส Frame แสดงบนหน้าจอ
       มี default Layout Manager เป็น BorderLayout

       เรียกใช้ Method ที่ชื่อ setLayOutManager เพื่อกาหนด Layout
      Manager ใหม่ให้กับวัตถุที่สร้างจากคลาส Frame
                                                                Burapha University, 2005
Object-Oriented Programming with Java



                                        MyFrame.java
    import java.awt.*;
    public class MyFrame {
      public static void main(String[] args) {
         Frame f = new Frame("Test Frame");
         f.setSize(400,300);
         f.setVisible(true);
       }
    }




                                                       Burapha University, 2005
Object-Oriented Programming with Java


                           MyExtendedFrame.java
    import java.awt.*;
    public class MyExtendedFrame extends Frame {
      public static void main(String[] args) {
         Frame f = new MyExtendedFrame("Test Frame");
         f.setSize(400,300);
         f.setVisible(true);
      }
      public MyExtendedFrame(String title) {
         super(title);
       }
    }




                                                        Burapha University, 2005
Object-Oriented Programming with Java


                                        Panel
        Panel กาหนดเนื้อที่สาหรับสร้าง Component
        สามารถมี subpanel ซึ่งแต่ละ subpanel มี Layout
       Manager ของตัวเอง




                                                 Burapha University, 2005
Object-Oriented Programming with Java

                             FrameWithPanel.java
    import java.awt.*;
    public class FrameWithPanel extends Frame {
       public static void main(String[] args) {
          Frame f = new FrameWithPanel("Frame with Panel");
          Panel p = new Panel();
          f.setSize(200, 200);
          f.setBackground(Color.blue);
          f.setLayout(null);
          p.setSize(100, 100);
          p.setBackground(Color.yellow);
          f.add(p);
          f.setVisible(true);
        }
        public FrameWithPanel(String title) {
          super(title);
      }
    }                                                       Burapha University, 2005
Object-Oriented Programming with Java


                                   Layout Manager
      ใช้ Layout Manager ในการจัดวางรูปแบบ Container
                               ่
      Layout Manager ทาหน้าทีจัดการ widgets ตาม Layout ที่ระบุ

      Layout Managers ที่สาคัญๆ ดังนี้
           • FlowLayout - widgets added in order form top L to bottom R.
           • GridLayout - a grid of equally spaced rows and columns.
           • BorderLayout - window divided into 5 areas: top, bottom, left, right and
           centre.
           • CardLayout - widgets are stacked as a pack of cards.
           • GridBagLayout - a more flexible grid of rows and columns of individual
           height and width.
                                                                   Burapha University, 2005
Object-Oriented Programming with Java


                         The FlowLayout Manager
      FlowLayout - widgets added in order form top L to bottom R.

  import java.awt.*;
  public class FlowLayOutFrame extends Frame
  {
    public static void main(String[] args) {
       Frame f = new FrameWithPanel("Demo");
       f.setLayout(new FlowLayout());
       Button b1 = new Button("Yes");
       Button b2 = new Button("No");
       Button b3 = new Button("Cancel");
       f.add(b1); f.add(b2); f.add(b3);
       f.pack(); f.setVisible(true);
    }
    public FlowLayOutFrame(String title) {
         super(title);
    }
  }                                                   Burapha University, 2005
Object-Oriented Programming with Java

                      The BorderLayout Manager
     BorderLayout - 5           areas dividing: top, bottom, left, right and centre
       :
    public static void main(String[] args) {
      Frame f = new FrameWithPanel("Demo");
      f.setLayout(new BorderLayout());
      Button b1 = new Button("b1");
      Button b2 = new Button("b2");
      Button b3 = new Button("b3");
      Button b4 = new Button("b4");
      Button b5 = new Button("b5");
      f.add(b1, BorderLayout.NORTH);
      f.add(b2, BorderLayout.EAST);
      f.add(b3, BorderLayout.CENTER);
      f.add(b4, BorderLayout.WEST);
      f.add(b5, BorderLayout.SOUTH);
      f.pack(); f.setVisible(true);
    }
}                                                                  Burapha University, 2005
Object-Oriented Programming with Java


                         The GridLayout Manager
          GridLayout - a grid of equally spaced rows and columns.

         :
     public static void main(String[] args) {
        Frame f = new FrameWithPanel("Demo");
        f.setLayout(new GridLayout(3, 2));
        Button b1 = new Button("b1");
        Button b2 = new Button("b2");
        Button b3 = new Button("b3");
        Button b4 = new Button("b4");
        Button b5 = new Button("b5");
        Button b6 = new Button("b6");
        f.add(b1); f.add(b2);
        f.add(b3); f.add(b4);
        f.add(b5); f.add(b6);
        f.pack();    f.setVisible(true);
      }
 }
                                                        Burapha University, 2005
Object-Oriented Programming with Java



                       Calculator GUI application




                                                Burapha University, 2005
Object-Oriented Programming with Java

                                        TextArea
  import java.awt.*;
  import java.awt.event.*;
  public class SampleTextArea {
    Frame f;
    TextArea ta;
    public static void main (String args[]) {
      SampleTextArea sampleTextArea = new SampleTextArea();
       sampleTextArea.go();
    }
    public void go() {
            f = new Frame("Sample TextArea");
            ta = new TextArea("Initial text", 4, 20);
            f.add(ta, BorderLayout.CENTER);
            f.pack();
            f.setVisible(true);
    }
  }

                                                              Burapha University, 2005
Object-Oriented Programming with Java


                                  Drawing in AWT
       ทุก Component สามารถใช้ในการวาด (ถึงแม้ว่า AWT จะใช้
     Canvas สาหรับวาดรูปเท่านั้น)
      สร้าง subclass ของ Canvas และทาการ Override เมทธอด
     paint()
      เมทธอด paint() จะถูกเรียกทุกครั้งที่ Component นั้นถูก
     แสดงบนหน้าจอ (ตัวอย่างเช่น มี window อื่นทับซ้อนบน Component
     ดังกล่าว และถูกย้ายออก)
      ทุก Component มีวตถุทสร้างขึ้นจากคลาส Graphics
                            ั ี่
      คลาส Graphics มีเมทธอดหลายๆ เมทธอดที่ใช้ในการวาด
                                                    Burapha University, 2005
Object-Oriented Programming with Java


                                    CanvasDemo
       import java.awt.*;
       public class CanvasDemo extends Frame {
           private MyCanvas c; //declare a Canvas
           public static void main(String[] args) {
                  CanvasDemo f = new CanvasDemo();
                   f.setSize(300,150);           f.setVisible(true);
           }
           public CanvasDemo() {
                   setTitle("Canvas Demo");
                   //create a MyCanvas instance
                   c = new MyCanvas("Welcome to Java");
                   c.setBackground(Color.yellow);
                   c.setForeground(Color.black);
                   c.setSize(280,120);
                   //place canvas in the frame
                  setLayout(new FlowLayout());         add(c);
         }
       }
                                                                       Burapha University, 2005
Object-Oriented Programming with Java

  //MyCanvas draws a message
  class MyCanvas extends Canvas {
     private String message;

       public MyCanvas(String s) {
         message = s;
         repaint();
       }
      public void paint(Graphics g) {
         Font myFont = new Font("Times", Font.BOLD, 16);
         g.setFont(myFont);
         g.drawString("Welcome to Java", 20, 40);

          //set a new font
          g.setFont(new Font("Courier", Font.BOLD+Font.ITALIC, 12));
          g.drawString("Welcome to Java", 20, 70);
      }
  }



                                                                  Burapha University, 2005
Object-Oriented Programming with Java


                     Graphics Coordinate System
            (0, 0)                                            X
                                         x



               y
                                        (x, y)




                                                 (width-1, height-1)
               Y




                                                            Burapha University, 2005
                                         Drawing Lines
Object-Oriented Programming with Java




                           drawLine(x1, y1, x2, y2);

                              (x1 ,y1)




                                                         (x2 , y2)




                                                                     Burapha University, 2005
Object-Oriented Programming with Java


                                Drawing Rectangles
           • drawRect(x, y, w, h);
           • fillRect(x, y, w, h);
                  (x,y)                 w




                  h




                                                     Burapha University, 2005
                      Drawing Rounded Rectangles
Object-Oriented Programming with Java




     • drawRoundRect(x, y, w, h, aw, ah);
     • fillRoundRect(x, y, w, h, aw, ah);
                               aw
                    (x,y)
                    ah



                                              h




                                        w

                                              Burapha University, 2005
                                        Drawing Ovals
Object-Oriented Programming with Java




           • drawOval(x, y, w, h);
           • fillOval(x, y, w, h);

                      (x,y)                  w




                      h




                                                        Burapha University, 2005
Object-Oriented Programming with Java


                                        Drawing Arcs
     • drawArc(x, y, w, h, angle1, angle2);
     • fillArc(x, y, w, h, angle1, angle2);

               (x,y)                          w


                                                       angle2

                                                           angle1
                h




                                                                Burapha University, 2005
                                   Drawing Polygons
Object-Oriented Programming with Java




              int x[] = {40, 70, 60, 45, 20};
              int y[] = {20, 40, 80, 45, 60};
              g.drawPolygon(x, y, x.length);
              g.fillPolygon(x, y, x.length);
                        (x[0],y[0])
                                                               (x[1],y[1])
                                        (x[3],y[3])



                     (x[4],y[4])
                                                      (x[2],y[2])

                                                                         Burapha University, 2005
Object-Oriented Programming with Java

                                        Summary
         Java AWT
         AWT Class Hierarchy
         AWT Component & Container
         AWT Layout Manager
         Building GUI applications with AWT




                                                  Burapha University, 2005

								
To top