GUI by MuzahirSaleem


									                                                                                                 GUI ?

               Basics of GUI

                                                                                    Support for GUI
                                                                  • Abstract Windowing Toolkit (AWT) & Swing packages
                                                                     – Provides rich set of user interface components
                                                                     – java.awt & javax.swing
                                                                     – Old (AWT) VS. New(Swing )
              Support for GUI
                 in Java                                          • Components in awt & swing (start with J)
                                                                     –   Frame, JFrame
                                                                     –   Menu, JMenu
                                                                     –   Button, JButton
                                                                     –   TextField, JTextFiled
                                                                     –   Label, JLabel
                                                                     –   and many more….

                                                                  • Use Java API Documentation well, its your FRIEND.

       Abstract Windowing Toolkit                                                                Swing
    • AWT                                                         • Swing
     – The original GUI components                                   – Newest GUI components, Names start with J can be
     – Referred as “Heavy Weight Components (HWC)”
                                                                     – “replacement” to the AWT
       • Tied directly to the local platform’s GUI capabilities
                                                                     – Referred as “Light Weight Components (LWC)”
                                                                          • Swing components are written, manipulated and displayed
     – Provides                                                             completely in java
       • robust event -handling model                                     • So they are not “weighed down” by the GUI capabilities of
                                                                            local platform
       • Layout Managers
                                                                     – Several Swing components are still HWC like JFrame
                                                                     – Allows uniform “look & feel” across all platforms

          A Part of the Framework


                                                            GUI Creation Steps
                   JComponent                 Window

      AbstractButton            JPanel        Frame


               GUI Creation Steps                          GUI Creation Steps (cont.)
                                                                                                                     System Area

    1. import required package                         3. Get the component Area of
                                                          the top level Container
      – e.g. swing, awt
                                                          Container c = myFrame.getContentPane();

    2. Setup the top level container
      – e.g. JFrame myframe = new JFrame();

                                                                                                    Component Area

        GUI Creation Steps (cont.)                                           Example GUI
    4. Apply layout to that Area
      – c.setLayout(new FlowLayout());

    5. Create & add components
      – JButton b1 = new JButton(“Hello”);
      – c.add(b1);

    6. Set size of Frame and make it Visible
      – myFrame.setSize(200,200);
      – myFrame.setVisible(true);

                        GUI: Example Code                                            GUI: Example Code (cont.)
    //Step 1: import packages                                                      //Step 5: create & add components
    import java.awt.*;                                                             JTextField tf = new JTextField(10);
    import javax.swing .*;                                                         JButton b1 = new JButton("My Button");

    public class GUITest {                                                         c.add(tf);
    JFrame myFrame ;                                                               c.add(b1);
    JTextField tf;
                                                                                  //Step 6: set size of frame and make it visible
    JButton b1;
    public void initGUI ( ) { //method used for setting layout of GUI             myFrame.setSize(200,150);
    //Step 2: setup the top level container
       myFrame = new JFrame();                                                   } //end init method
          //Step 3: Get the component area of top-level container
                                                                                public GUITest () { // constructor
         Container c = myFrame.getContentPane();                                    initGUI ();
         //Step 4: Apply layouts                                                }
         c.setLayout( new FlowLayout( ) );                                     ………

               GUI: Example Code (cont.)                                                          Compile & Execute
     public static void main (String args[ ]) {

             GUITest gui = new GUITest();


    } // end of class

                   GUI Creation Approaches
                  Composition                               Inheritance
     class GUITest{                         class GUITest extends JFrame{
                                            class GUITest extends JFrame{
         JFrame frame;
         Container c;                            Container c;
                                                 Container c;
         public GUITest ( ) {                    public GUITest (( )) {{
                                                 public GUITest                          Layout Managers
             frame = new JFrame ( );
              c = frame.getContentPane();
             c = frame.getContentPane();                   getContentPane();
             ……                                       ……
             frame.setVisible(true);                  setVisible(true);
         }                                       }}
         ………                                     ………
     }                                      }}

                 Layout Managers                                                            Layout Managers
                                                                         •     Layout Managers
        – The layout of components in a container is                         – Java supplies many layout managers. Five
          usually governed by layout managers                                  commonly used are:
                                                                                   §   FlowLayout
        – Similar to HTML – policy, not position                                   §   GridLayout
          • Do not set explicit pixel sizes or positions of things                 §   BorderLayout
          • Layout Managers know the intent (policy)                               §   BoxLayout
          • Layout Managers apply the intent to figure out the                     §   GridBagLayout
            correct size on the fly

                                                                                           GUI: Example Code
                 Layout Managers                                                              FlowLayout
    •    Layout Managers                                                 ….
                                                                         c.setLayout (new FlowLayout() );

        – FlowLayout                                                     JButton   b1 =   new JButton(“Next Slide”);
                                                                         JButton   b2 =   new JButton(“Previous Slide”);
          •   Places components in a line as long as they fit,           JButton   b3 =   new JButton(“Back to Start”);
              then starts the next line.                                 JButton   b4 =   new JButton(“Last Slide”);
                                                                         JButton   b5 =   new JButton(“Exit”);
          •   Uses “best judgement ” in spacing components.
              Centers by default.                                        c.add(b1);
          •   Lets each component assume its natural                     c.add(b3);
              (preferred) size.                                          c.add(b5);
          •   Often used for placing buttons on panels.                  }//end of main

                                                                                           GUI: Example Code
                 Layout Managers                                                               GridLayout
    •    Layout Managers                                                 ….
                                                                         c.setLayout (new GridLayout(3 , 2) );

        – GridLayout                                                     JButton   b1 =   new JButton(“Next Slide”);
                                                                         JButton   b2 =   new JButton(“Previous Slide”);
          •   Splits the panel into a grid with given number of          JButton   b3 =   new JButton(“Back to Start”);
              rows and columns.                                          JButton   b4 =   new JButton(“Last Slide”);
                                                                         JButton   b5 =   new JButton(“Exit”);
          •   Places components into the grid cells.
          •   Forces the size of each component to occupy the            c.add(b2);
              whole cell.                                                c.add(b4);
          •   Allows additional spacing between cells.                   ……               size(200,200)


                           GUI: Example Code
                               GridLayout                                                  Layout Managers
        c.setLayout (new GridLayout(3 , 2, 10, 20 ) );
                                                          Extra space         •   Layout Managers
                                                          between the cells
        JButton   b1 =   new JButton(“Next Slide”);                               – BorderLayout
        JButton   b2 =   new JButton(“Previous Slide”);
        JButton   b3 =   new JButton(“Back to Start”);                              •   Divides the area into five regions
        JButton   b4 =   new JButton(“Last Slide”);
        JButton   b5 =   new JButton(“Exit”);                                       •   Adds a component to the specified region

        c.add(b1);                                                                  •   Forces the size of each component to occupy the
        c.add(b2);                                                                      whole region.
        c.add(b4);                                                                                      NORTH
                         size(200, 200)
        }//end of main                                                                      WEST        CENTER         EAST

                           GUI: Example Code
                             BorderLayout                                                  Layout Managers
        c.setLayout (new BorderLayout( ) );
                                                                              •   Layout Managers
        JButton   b1 =   new JButton(“Next Slide”);                               – Default Layouts
        JButton   b2 =   new JButton(“Previous Slide”);
        JButton   b3 =   new JButton(“Back to Start”);                              •   Each container has a default layout manager,
        JButton   b4 =   new JButton(“Last Slide”);
                                                                                        which remains in effect until the component’s
        JButton   b5 =   new JButton(“Exit”);
                                                                                        setLayout method is called.
       c.add(b1, BorderLayout.NORTH);
       c.add(b2, BorderLayout.SOUTH);                                             – Some of the defaults are:
       c.add(b3, BorderLayout.EAST );
       c.add(b4, BorderLayout.WEST );                                               •   Content pane à BorderLayout
       c.add(b5, BorderLayout.CENTER);
    }//end of main                                                                  •   JPanel         à FlowLayouts

                                                                                              Calculator GUI

                     Making Your own

                   Code: CalculatorGUI                            Code: CalculatorGUI (cont.)
    import java.awt .*;                                        public void initGUI ( ) { //used for setting layout of calculator

    import javax.swing.*;                                          fCalc = new JFrame();

                                                                   b0   =   new   JButton("0");
    public class CalculatorGUI {                                   b1   =   new   JButton("1");
                                                                   b2   =   new   JButton("2");
                                                                   b3   =   new   JButton("3");
      JFrame fCalc;
                                                                   b4   =   new   JButton("4");
                                                                   b5   =   new   JButton("5");
      JButton b1, b2, b3, b4, b5, b6, b7, b8, b9, b0;              b6   =   new   JButton("6");
                                                                   b7   =   new   JButton("7");
      JButton bPlus, bMinus, bMul, bPoint, bEqual, bClear;         b8   =   new   JButton("8");
                                                                   b9   =   new   JButton("9");
     JPanel pButtons;
                                                                   bPlus = new JButton("+");
                                                                   bMinus = new JButton("-");
     JTextField tfAnswer;                                          bMul   = new JButton("*");
                                                                   bPoint = new JButton(".");
                                                                   bEqual = new JButton("=");
     JLabel lMyCalc;                                               bClear = new JButton("C");

                                                                   // continue….

          Code: CalculatorGUI (cont.)                             Code: CalculatorGUI (cont.)
          tfAnswer = new JTextField();                              pButtons.add(b9);
          lMyCalc = new JLabel("My Clacualator");
          //creating panel object and setting its layout            pButtons.add(bPoint);
           pButtons= new JPanel (new GridLayout(4,4));
                                                                    pButtons.add(bEqual );

          //adding components (buttons) to panel                    Container con = fCalc.getContentPane( ) ;
                                                                    con.setLayout(new BorderLayout());
           pButtons.add(b3);                                        //adding components to container
           pButtons.add(bClear);                                    con.add(tfAnswer, BorderLayout.NORTH) ;
                                                                    con.add(lMyCalc, BorderLayout.SOUTH);
          pButtons.add(b4);                                         con.add(pButtons, BorderLayout.CENTER) ;
          pButtons.add(b6);                                         fCalc.setSize(300, 300);
          pButtons.add(bMul );                                      fCalc.setVisible(true);
                                                              } // end of initGUI method

          Code: CalculatorGUI (cont.)                                 More Swing Components
     //default constructor
                                                             • JCheckBox
      public CalculatorGUI ( ) {
                                                                 – Note uppercase B
        initGUI();                                                 (vs. Checkbox in AWT)
      }                                                      • JRadioButton
                                                                 – Use a ButtonGroup to
      //main method                                                link radio buttons

      public static void main(String args[ ]) {
                                                             • JTextArea
          CalculatorGUI calGUI = new CalculatorGUI ();           – Place in JScrollPane if
                                                                   you want scrolling

                                                             • JFileChooser
    } //end of class

           Swing Components                                    Swing Components
                 Top Level Containers                         • General Purpose Containers

    Your application usually extends one of these classes !


To top