Java Graphical User Interface (GUI) Programming


    Introduction

  1. Java includes in its library a vast amount of classes that allow you to write graphical applications/applets

  2. There are two aspects to GUI:

  3. There are two different types of GUI objects in Java:

  4. Java has already provided pre-defined class of containers and components with default behaviors

    User can modify the default behaviors by OVERRIDING some methods...

    In other words, in GUI programming, you ALWAYS define your GUI objects by extending an existing Java GUI-class

    Examples:

    Example: defining your own Framed Window
      class MyFrame extends JFrame  // Always extend some Java GUI class   
      {  
         // *******************************************************
         // Add a constructor to make your frame 
         // *******************************************************
         public MyFrame()
         {  
            ... create the MyJFrame object according to 
            ... your own specifications
         }
    
         ... other methods ...
      }
    

    Example: defining your own Button
      class MyButton extends JButton  // Always extend some Java GUI class   
      {  
         // *******************************************************
         // Add a constructor to make your button
         // *******************************************************
         public MyButton()
         {  
            ... create the MyButton object according to 
            ... your own specifications
         }
    
         ... other methods ...
      }
    

  5. Order of Presentation:


    Container: JFrame

  6. JFrame is a framed window and it is the "top" level window object.

  7. Here is a very simple example that makes an empty framed window:

  8. The JFrame has a number of "panes" and each pane has different properties (background, transparent, etc)

    Each pane is itself a container !

    The pane that is most useful for GUI programming is the "content pane"

    To obtain the content pane of a JFrame:

      class MyGUIclass extends SomeJavaGUIclass   
      {
         ...
         SomeMethod(...)
         {
            Container contentPane;  // Variable to hold content pane  
    
            contentPane = getContentPane(); // get content pane
         }
      }
    

  9. You can add (or "stick") components and other containers into the content pane of a JFrame using:

    
           contentPane.add(someComponent);     
    or:
           contentPane.add(someContainer);
    
    


    Container: JPanel

  10. JPanel is a generic lightweight (simple) container

    JPanel is itself a "pane"

  11. You can add (or "stick") components and other containers into a JPanel using:

    
        JPanel MyPanel = new Panel();    // Create a panel object
    
        MyPanel.add(someComponent);  // Will add someComponent to MyPanel 
    or:
        MyPanel.add(someContainer);  // Will add someContainer to MyPanel
    
    

    The JPanel object is ideal for designing layout of the graphical user interface !!!


    Containers: Layout Management

  12. Main purpose of using containers (JFrame and JPanel) is to make a "sexy looking" window layout

  13. Java object classes that help you creating your layout are called layout managers

  14. There are many (and getting more) layout managers in Java, for example:

    I will discussed the first 3 only, you will get the basic idea and you should be able to learn about the other yourself - the principle is the same and very simple...

  15. Choosing Flow Layout managers:

    To use a particular layout manager for a container, you pick it with the setLayout method in the container object.

  16. Flow Layout:

  17. Border Layout: you specify exactly where the component/container should be placed:

    NOTE: when 2 (or more) components/containers are added to the same spot in border layout, only the last added component/container will be displayed.

    • Example of Border Layout with 2 JPanels added to North & South: click here

    • Example of Border Layout with 2 JPanels added to North: click here

  18. The 3rd and final layout manager is the grid layout:

    
        JPanel MyPanel = new JPanel();
    
        MyPanel.setLayout( new GridLayout(4, 3) );  // Grid layout    
    
        MyPanel.add(....);   // Items are added into grid
        MyPanel.add(....);   // Filling rows from top to bottom...
    
    

    • Example of Grid Layout with a 4x3 grid (key pad): click here


    Event Programming

  19. User interact with graphical programs by clicking on some part of the window or entering text in some text areas.

    Every time the user types a character or pushes a mouse button, an event occurs.

  20. A (GUI) component can ask the Java run-time system to notify it when certain type of event occurs.

    The (GUI) component must do the following:

    • register an event listener for a certain type of event. for the desired event source.
    • implement (i.e., write/provide code for) all the methods defined in the interface

  21. Here is a list of event that a GUI object can listen for and the corresponding interface that it must implement to handle the event(s):

    Event Interface
    User clicks a button, presses Return while typing in a text field, or chooses a menu item ActionListener
    User closes a frame (main window) WindowListener
    User presses a mouse button while the cursor is over a component MouseListener
    User moves the mouse over a component MouseMotionListener
    Component becomes visible ComponentListener
    Component gets the keyboard focus FocusListener
    Table or list selection changes ListSelectionListener

    More details on events: click here

  22. How to make a GUI component react on users input:

    1. First, determine the type of events you want to handle.

      Note that there may be multiple interfaces suitable for handling an event....

      Some common event & their listener interface(s):

      • Mouse click: ActionListener, MouseListener
      • Enter Key: ActionListener

    2. Second, add (register) an Event Listeners OBJECTS to that a GUI component.

  23. Some common listener INTERFACES:

    
     interface ActionListener 
     {
        void actionPerformed(ActionEvent e);  // Called when Mouse click or
    					  // ENTER key pressed
     }
    
     Use addActionListener() to add an ActionListener
    
    
    interface MouseListener { void mouseClicked(MouseEvent e); // Called when Mouse clicked void mouseEntered(MouseEvent e); // Called when Mouse enters component void mouseExited(MouseEvent e); // Called when Mouse exits component void mousePressed(MouseEvent e); // Called when Mouse was pressed void mouseReleased(MouseEvent e); // Called when Mouse released } Use addMouseListener() to add a MouseListener

  24. How to register Event Listeners react on users input:

    Example: install a listener for a GUI object
    
    //
    // Step (1): Define a listenerClass to process events
    //
    public class myListenerClass implements someJavaListenerClass
    {
       ... provide all methods in the "someJavaListenerClass"
    }
    
    public class myGUIobject extends someJavaGUIclass
    {
       public myGUIobject()  // do installation in CONSTRUCTOR
       {
          private int X;
          ....
          //
          // Step (2): Register the listenerClass to the GUI component
          //
          this.add???Listener(new myListenerClass());   // Register !
    
          // For example:
          this.addMouseListener(new myListenerClass());
          this.addEventListener(new myListenerClass());
    
          
          CAVEAT: use a compatible add method !!!!!!!!!!!!
    
          addMouseListener() adds a class that implements MouseListener
          addEventListener() adds a class that implements ActionListener
       }
    
       ... other methods in the myGUIobject class
    }
    

  25. Example, install a Listeners object to the JFrame to make the JFrame listen for Mouse Events:

    DEMO program: click here

  26. Communication between the Listeners object and the GUI object:

    There is a BIG problem when we want methods in a listener class to update variables in the GUI object:


    That's all folk... it's that simple with Java... even highschoolers can write Java GUI programs...

  27. A Functional Example: Compute the Average of a bunch of numbers

  28. More advance text area: scrolling


  29. Turning a GUI application into an applet:


  30. An drawing example.... click to show an oval (SKIP THIS)

    DEMO program: click here