Try the all-new QuickBooks Online for FREE.  No credit card required.


Document Sample
GUI Powered By Docstoc
					              Introduction to GUI Programming

• Introduction to User Interfaces
• Introduction to GUI Programming
• GUI Design Issues
• GUI Programming Issues
• Java GUI Library Evolution
• GUI Components and Containers
• Swing's Top-level Containers
• Learning Outcomes
    o Explain the motivation for, and usefulness of GUIs.
    o List and explain seven principles of good GUI design and their benefits.
    o Discuss what GUI programming involves, and explain how Java's GUI
      library evolved.
 Exercises
                                       Unit 09                                   1
                    GUIs—Graphical User Interfaces

•   In a text-based UI the commands are entered from the keyboard.
•   In a console program, the system usually controls user actions.
          > Enter number of classes: 3
          > Enter number of students: 15
          > You have 45 students
•   Most modern programs use a GUI (pronounced “gooey”):
•   Graphical: Not just text or characters but windows, menus, buttons, ..
•   User: Person using the program
•   Interface: Way to interact with the program
Graphical elements include:
•   Window: Portion of screen that serves as a smaller screen within the screen
•   Menu: List of alternatives offered to user
•   Button: Looks like a button that can be pressed
•   Text fields: The user can write something in
                                             Unit 09                              2
                  A New Approach to Programming

Previous Style of Programming:             Event-Driven Style of Programming:

• List of instructions performed in        • Objects that can fire events and

   order                                        objects that react to events

• Next thing to happen is next thing in    • Next thing to happen depends on

   list                                         next event

• Program performed by one agent—          • Program is interaction between user

   the computer                                 and computer

                                      Unit 09                                   3
                    Event-Driven Programming

• Programs with GUIs often use Event-Driven Programming
• A user interacts with the application by:
   – Clicking on a button to choose a program option.
   – Making a choice from a menu.
   – Entering text in a text field.
   – Dragging a scroll bar.
   – Clicking on a window's close button.
• Program waits for events to occur and then responds
• Firing an event: When an object generates an event
• Listener: Object that waits for events to occur
• Event handler: Method that responds to an event
                                      Unit 09             4
                   Principles of GUI Design

• Give time for GUI design and integration.
• Have a simple and clear layout.
• Use graphics objects and terminology consistently.
• Be functionally intuitive and visually attractive.
• Provide visual and audible feedback.
• Be responsive.
• Be flexible and customizable.

                                  Unit 09              5
                 Benefits of Good GUIs

• Facilitate higher user productivity and lower long-term costs.

• Improve integrity of underlying application.

• Improve the reliability and safety of mission-critical

• Improve user confidence.

• Make software more marketable.

                               Unit 09                             6
              GUI Programming Issues

•   What do I need to know to write good GUI applications?

•   Writing GUI applications requires knowledge of:

    1. Graphics

    2. Media

    3. Windows

    4. Events

    5. Multithreading

                             Unit 09                         7
               Three Parts of a GUI Program

• A GUI program consists of three types of software:
1. Graphical Components that make up the GUI.
2. Listener methods that receive the events and respond to them.
3. Application methods that do useful work for the user.
• In Java, you can get the GUI components you want by asking for them.
  Most of the work has already been done and is contained in the
  Swing/AWT packages. Swing/AWT contains windows, frames, buttons,
  menus and other components.
• You get graphical components by constructing Swing/AWT objects.
• Listener methods and application methods are Java methods that you
  write or invoke from JDK.
• To write a GUI application, keep the three types software separated
  (while keeping the big picture in mind).
                                   Unit 09                          8
                  Building a GUI

• Create:                                   Listener
     • Frame/JFrame
     • Panel/JPanel                JLabel   JButton
     • Components
     • Listeners
• Add:
     • Listeners into components
     • Components into panel
     • Panel into frame                JFrame

                        Unit 09                        9
               Using a GUI Component

1.   Create it
                                       Order is
2.   Configure it
3.   Add children (if container)
4.   Add to parent (if not JFrame)
5.   Add Listeners of events

                          Unit 09                   10
                 Using a GUI Component

1.   Create it
       • Instantiate object:
                      JButton b = new JButton();
2.   Configure it
       • Methods:
                        b.setText(“Press me”);

3.   Add it
       • panel.add(b);
                                       Press me
4.   Listen to it
       • Events: Listeners

                             Unit 09               11
                  Application Code

                                        press me

import javax.swing.*;

class Hello {
  public static void main(String[] args){
      JFrame f = new JFrame(“Hello World”);
      JPanel p = new JPanel();
      JButton b = new JButton(“press me”);
      p.add(b);               // add button to panel
      f.getContentPane().add(p); // add panel to frame;

                          Unit 09                    12
                   Java GUI API Evolution

• Java provides classes representing UI items like windows, buttons,
   menus etc.
• The GUI toolkit in older versions of Java is called AWT.
• An enriched version the toolkit, Swing, was developed in later versions
   of Java.
• AWT and Swing are part of the
  Java Foundation Classes (JFC).
• Why was Swing developed in addition to AWT?
• Special library of classes that allows Java programs to have a windowing
• An improved version of older library called Abstract Window Toolkit
• Standard part of all versions of Java 2 (JDK 1.2)
                                   Unit 09                             13
           Java GUI API Evolution (cont'd)
AWT components:
   – Heavyweight components
   – Associated with native components called peers
   – Same behaviour, but platform-dependent look
   – Package java.awt
• By relying on native peers, AWT components are limited:
   • Slow on some platforms.
   • Portability problems.
Swing components:
   – Lightweight components
   – Are rendered and controlled by the JVM.
   – Swing has more powerful options
   – Swing can be shipped with application
     as it is non-native.
   – Package javax.swing
                              Unit 09                       14
    Swing Features and Concepts

• Swing is based on a composite design
• Top-Level Container
       – Example: JFrame
       – Holds all other swing components
       – Other options: JDialog and JApplet
• Intermediate Container
       – Example: JPanel
       – Used to control placement of GUI components
       – Acts as a middle person
       – Other options: JScrollPane, JTabbedPane, …
• Atomic Components
       – Example: JButton
       – Used for self-contained GUI components
       – Other options: JTextField, JTable,
                     Unit 09                       15
            Containment hierarchy

           Top level containers: JFrame, JDialog, JApplet

    Content pane: the main container in JApplet, JDialog, and
                        JFrame Objects

    Basic controls: JButton,
                                       General purpose containers:
 JComboBox, List, Menu, Slider,
                                       Panel, scroll pane, split pane,
JTextField, JLabel, progress bar,
                                          tabbed pane, tool bar
              tool tip

                             Unit 09                                     16
                        Review Exercises

1.   Explain the advantages of graphics-based over text-based user
2.   What is a good and effective GUI? Why is it necessary to design GUI
     for all on-trivial applications? Explain..
3.   Explain the implications of good as well as badly designed GUIs.
4.   What is JFC? What Swing? Why was the JFC enriched with Swing?
5.   AWT components are said to be heavy weight while Swing
     components are said to be light weight. Explain what these notions
6.   Enumerate the major knowledge units that must be understood for
     developing effective GUI applications. Briefly explain each of these
     knowledge units.
                                   Unit 09                                17

Shared By: