Home | Résumé | Courses | Contact | Useful Links | Favorite Links | USC - Homepage

Computer Science 1 - (CPTR151) - Lectures  

 Return to Courses | Course Content  

Computer Science 1 - (CPTR151)

by David Siguelnitzky, MIS; MTE

Lecture 14 - Version 1.2.1

Graphical User Components - Part 2

Lecture Outline

    14.1 Introduction
    14.2 JTextArea
    14.3 JSlider
    14.4 Windows: Additional Notes
    14.5 Using Menus with Frames
    14.6 JPopupMenu
    14.7 Pluggable Look-and-Feel
    14.8 JDesktopPane and JInternalFrame
    14.9 JTabbedPane
    14.10 Layout Managers: BoxLayout and GridBagLayout
    14.11 (Optional Case Study) Thinking About Objects: Model-View- Controller
    14.14 (Optional) Discovering Design Patterns: Design Patterns Used in Packages java.awt and javax.swing
    14.14.1 Creational Design Patterns
    14.14.2 Structural Design Patterns
    14.14.3 Behavioral Design Patterns
    14.14.4 Conclusion


14.1  Introduction


    • Advanced GUI components
        – Text areas
        – Sliders
        – Menus
    • Multiple Document Interface (MDI)
    • Advanced layout managers
        – BoxLayout
        – GridBagLayout

 

14.2  JTextArea


    • JTextArea
        – Area for manipulating multiple lines of text
        – extends JTextComponent


1      // Fig. 14.1: TextAreaDemo.java
2      // Copying selected text from one textarea to another.
3      import java.awt.*;
4      import java.awt.event.*;
5      import javax.swing.*;
6     
7      public class TextAreaDemo extends JFrame {
8          private JTextArea textArea1, textArea2;
9          private JButton copyButton;
10   
11        // set up GUI
12        public TextAreaDemo()
13        {
14              super( "TextArea Demo" );
15   
16              Box box = Box.createHorizontalBox();
17   
18              String string = "This is a demo string to\n" + "illustrate copying text\nfrom one textarea to \n" +
19             "another textarea using an\nexternal event\n";
20             
21   
22              // set up textArea1                        
23              textArea1 = new JTextArea( string, 10, 15 );
24              box.add( new JScrollPane( textArea1 ) );   
25   
26              // set up copyButton
27              copyButton = new JButton( "Copy >>>" );
28              box.add( copyButton );
29              copyButton.addActionListener(
30   
31               new ActionListener() {  // anonymous inner class
32   
33                // set text in textArea2 to selected text from textArea1
34                public void actionPerformed( ActionEvent event )
35                {
36                       textArea2.setText( textArea1.getSelectedText() );
37                }
38   
39             } // end anonymous inner class
40     
41          ); // end call to addActionListener - Line 29
42   
43          // set up textArea2                    
44          textArea2 = new JTextArea( 10, 15 );   
45          textArea2.setEditable( false );        
46          box.add( new JScrollPane( textArea2 ) );
47   
48          // add box to content pane
49          Container container = getContentPane();
50          container.add( box );   // place in BorderLayout.CENTER
51   
52          setSize( 425, 200 );
53          setVisible( true );
54   
55       } // end constructor TextAreaDemo
56   
57       public static void main( String args[ ] )
58       {
59          TextAreaDemo application = new TextAreaDemo();
60          application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
61       }
62   
63    } // end class TextAreaDemo



    Line 16 Create Box container for organizing GUI components
    Lines 18-24  Populate JTextArea with String, then add to Box
    Line 36  When user presses JButton, textArea1’s highlighted text is copied into textArea2
    Lines 44-45 Instantiate uneditable JTextArea

 





14.3  JSlider


    • JSlider
        – Enable users to select from range of integer values
        – Several features
            • Tick marks (major and minor)
            • Snap-to ticks
            • Orientation (horizontal and vertical)

 


Fig. 14.6  JSlider component with horizontal orientation


1      // Fig. 14.7: OvalPanel.java
2      // A customized JPanel class.
3      import java.awt.*;
4      import javax.swing.*;
5     
6      public class OvalPanel extends JPanel {
7      private int diameter = 10;
8     
9         // draw an oval of the specified diameter
10       public void paintComponent( Graphics g )
11       {
12              super.paintComponent( g );
13   
14              g.fillOval( 10, 10, diameter, diameter );
15       }
16   
17       // validate and set diameter, then repaint
18       public void setDiameter( int newDiameter )
19       {
20              // if diameter invalid, default to 10
21              diameter = ( newDiameter >= 0 ? newDiameter : 10 );
22              repaint();
23       }
24
25       // used by layout manager to determine preferred size
26       public Dimension getPreferredSize()
27       {
28              return new Dimension( 200, 200 );
29       }
30   
31       // used by layout manager to determine minimum size
32       public Dimension getMinimumSize()                 
33       {                                                 
34             return getPreferredSize();                     
35       }                                                 
36   
37    } // end class OvalPanel
   

 

1      // Fig. 14.8: SliderDemo.java
2      // Using JSliders to size an oval.
3      import java.awt.*;
4      import java.awt.event.*;
5      import javax.swing.*;
6      import javax.swing.event.*;
7     
8      public class SliderDemo extends JFrame {
9      private JSlider diameterSlider;
10    private OvalPanel myPanel;
11   
12       // set up GUI
13       public SliderDemo()
14       {
15              super( "Slider Demo" );
16   
17              // set up OvalPanel                  
18              myPanel = new OvalPanel();           
19              myPanel.setBackground( Color.YELLOW );
20   
21              // set up JSlider to control diameter value            
22              diameterSlider = new JSlider( SwingConstants.HORIZONTAL, 0, 200, 10 );
23             
24              diameterSlider.setMajorTickSpacing( 10 );              
25              diameterSlider.setPaintTicks( true );                  
26
27              // register JSlider event listener                       
28              diameterSlider.addChangeListener(                        
29                                                                    
30             new ChangeListener() {  // anonymous inner class      
31                                                                    
32                // handle change in slider value                   
33                public void stateChanged( ChangeEvent e )          
34                {                                                  
35                       myPanel.setDiameter( diameterSlider.getValue() );
36                }                                                  
37                                                                    
38             } // end anonymous inner class                        
39                                                                    
40          ); // end call to addChangeListener - line 28                      
41   
42          // attach components to content pane
43          Container container = getContentPane();
44          container.add( diameterSlider, BorderLayout.SOUTH );
45          container.add( myPanel, BorderLayout.CENTER );
46   
47          setSize( 220, 270 );
48          setVisible( true );
49   
50       } // end constructor SliderDemo
51   
52       public static void main( String args[ ] )
53       {
54              SliderDemo application = new SliderDemo();
55              application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
56       }
57   
58    } // end class SliderDemo




    Lines 18-19  Instantiate OvalPanel object and set background to yellow
    Lines 22-23  Instantiate horizontal JSlider object with min. value of 0, max. value of 200 and initial thumb location at 10
    Line 28  Register anonymous ChangeListener object to handle JSlider events
    Line 35  When user accesses JSlider, set OvalPanel’s diameter according to JSlider value


          

 


14.4  Windows: Additional Notes


    • JFrame
        – Windows with title bar and border
        – Subclass of java.awt.Frame
            • Subclass of java.awt.Window
        – Heavyweight component
        – Three operations when user closes window
            • DISPOSE_ON_CLOSE
            • DO_NOTHING_ON_CLOSE
            • HIDE_ON_CLOSE


 

14.5  Using Menus with Frames


    • Menus
        – Allows for performing actions with cluttering GUI
        – Contained by menu bar
    • JMenuBar
        – Comprised of menu items
    • JMenuItem


 

1      // Fig. 14.9: MenuTest.java

2      // Demonstrating menus
3      import java.awt.*;
4      import java.awt.event.*;
5      import javax.swing.*;
6     
7         public class MenuTest extends JFrame {
8         private final Color colorValues[ ] = { Color.BLACK, Color.BLUE, Color.RED, Color.GREEN };
9              
10       private JRadioButtonMenuItem colorItems[ ], fonts[ ];
11       private JCheckBoxMenuItem styleItems[ ];
12       private JLabel displayLabel;
13       private ButtonGroup fontGroup, colorGroup;
14       private int style;
15   
16       // set up GUI
17       public MenuTest()
18       {
19          super( "Using JMenus" );    
20   
21          // set up File menu and its menu items
22          JMenu fileMenu = new JMenu( "File" );
23          fileMenu.setMnemonic( 'F' );        
24
25          // set up About... menu item
26          JMenuItem aboutItem = new JMenuItem( "About..." );
27          aboutItem.setMnemonic( 'A' );                    
28          fileMenu.add( aboutItem );                       
29          aboutItem.addActionListener(
30   
31             new ActionListener() {  // anonymous inner class
32   
33                // display message dialog when user selects About...
34                public void actionPerformed( ActionEvent event )
35                {
36                   JOptionPane.showMessageDialog( MenuTest.this,
37                      "This is an example\nof using menus", "About", JOptionPane.PLAIN_MESSAGE );
38                }  
39                
40   
41             }  // end anonymous inner class
42   
43          ); // end call to addActionListener
44     
45          // set up Exit menu item
46          JMenuItem exitItem = new JMenuItem( "Exit" );
47          exitItem.setMnemonic( 'x' );                
48          fileMenu.add( exitItem );                   
49          exitItem.addActionListener(
50   
51             new ActionListener() {  // anonymous inner class
52   
53                // terminate application when user clicks exitItem
54                public void actionPerformed( ActionEvent event )
55                {
56                       System.exit( 0 );
57                }
58   
59             }  // end anonymous inner class
60   
61          ); // end call to addActionListener
62   
63          // create menu bar and attach it to MenuTest window
64          JMenuBar bar = new JMenuBar();                    
65          setJMenuBar( bar );                               
66          bar.add( fileMenu );                              
67   
68          // create Format menu, its submenus and menu items
69          JMenu formatMenu = new JMenu( "Format" ); 
70          formatMenu.setMnemonic( 'r' );          
71   
72          // create Color submenu
73          String colors[ ] = { "Black", "Blue", "Red", "Green" };
74   
75          JMenu colorMenu = new JMenu( "Color" );
76          colorMenu.setMnemonic( 'C' );         
77   
78          colorItems = new JRadioButtonMenuItem[ colors.length ];
79          colorGroup = new ButtonGroup();                       
80          ItemHandler itemHandler = new ItemHandler();
81   
82          // create color radio button menu items
83          for ( int count = 0; count < colors.length; count++ ) {
84                 colorItems[ count ] = new JRadioButtonMenuItem( colors[ count ] );
85                
86                 colorMenu.add( colorItems[ count ] );         
87                 colorGroup.add( colorItems[ count ] );        
88                 colorItems[ count ].addActionListener( itemHandler );
89          }
90   
91          // select first Color menu item
92          colorItems[ 0 ].setSelected( true ); 
93   
94          // add format menu to menu bar
95          formatMenu.add( colorMenu );
96          formatMenu.addSeparator(); 
97   
98          // create Font submenu
99          String fontNames[ ] = { "Serif", "Monospaced", "SansSerif" };
100 
101        JMenu fontMenu = new JMenu( "Font" );
102        fontMenu.setMnemonic( 'n' );        
103 
104        fonts = new JRadioButtonMenuItem[ fontNames.length ];
105        fontGroup = new ButtonGroup();                      
106 
107        // create Font radio button menu items
108        for ( int count = 0; count < fonts.length; count++ ) {
109               fonts[ count ] = new JRadioButtonMenuItem( fontNames[ count ] );
110               fontMenu.add( fonts[ count ] );                                
111               fontGroup.add( fonts[ count ] );                               
112               fonts[ count ].addActionListener( itemHandler );
113        }
114 
115        // select first Font menu item
116        fonts[ 0 ].setSelected( true );
117 
118        fontMenu.addSeparator();
119 
120        // set up style menu items
121        String styleNames[ ] = { "Bold", "Italic" };
122 
123        styleItems = new JCheckBoxMenuItem[ styleNames.length ];
124        StyleHandler styleHandler = new StyleHandler();
125
126        // create style checkbox menu items
127        for ( int count = 0; count < styleNames.length; count++ ) {
128               styleItems[ count ] = new JCheckBoxMenuItem( styleNames[ count ] );
129              
130               fontMenu.add( styleItems[ count ] );           
131               styleItems[ count ].addItemListener( styleHandler );
132        }
133 
134        // put Font menu in Format menu
135        formatMenu.add( fontMenu );
136 
137        // add Format menu to menu bar
138        bar.add( formatMenu ); 
139       
140        // set up label to display text
141        displayLabel = new JLabel( "Sample Text", SwingConstants.CENTER );
142        displayLabel.setForeground( colorValues[ 0 ] );
143        displayLabel.setFont( new Font( "Serif", Font.PLAIN, 72 ) );
144 
145        getContentPane().setBackground( Color.CYAN );
146        getContentPane().add( displayLabel, BorderLayout.CENTER );
147 
148        setSize( 500, 200 );
149        setVisible( true );
150 
151     } // end constructor
152 
153     public static void main( String args[ ] )
154     {
155            MenuTest application = new MenuTest();
156            application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
157     }
158 
159     // inner class to handle action events from menu items
160     private class ItemHandler implements ActionListener {
161 
162        // process color and font selections
163        public void actionPerformed( ActionEvent event )
164        {
165           // process color selection
166           for ( int count = 0; count < colorItems.length; count++ )
167    
168              if ( colorItems[ count ].isSelected() ) {
169                     displayLabel.setForeground( colorValues[ count ] );
170                     break;
171              }
172   
173           // process font selection
174           for ( int count = 0; count < fonts.length; count++ )
175 
176              if ( event.getSource() == fonts[ count ] ) {
177                     displayLabel.setFont(new Font( fonts[ count ].getText(), style, 72 ) );
178                     break;
179               }   
180              
181 
182           repaint(); 
183 
184        } // end method actionPerformed
185 
186     } // end class ItemHandler
187 
188     // inner class to handle item events from check box menu items
189     private class StyleHandler implements ItemListener {
190 
191        // process font style selections
192        public void itemStateChanged( ItemEvent e )
193        {
194           style = 0;
195 
196           // check for bold selection
197           if ( styleItems[ 0 ].isSelected() )
198              style += Font.BOLD;
199 
200           // check for italic selection
201           if ( styleItems[ 1 ].isSelected() )
202                  style += Font.ITALIC;
203 
204           displayLabel.setFont(new Font( displayLabel.getFont().getName(), style, 72 ) );
205           repaint();   
206          }
207           
208        
209 
210     } // end class StyleHandler
211 
212  } // end class MenuTest

 



    Line 22   Instantiate File JMenu
    Line 26   Instantiate About… JMenuItem to be placed in fileMenu
    Lines 36-38  When user selects About… JMenuItem, display message dialog with appropriate text
    Line 46  Instantiate Exit JMenuItem to be placed in fileMenu
    Line 56  When user selects Exit JMenuItem, exit system
    Line 64  Instantiate JMenuBar to contain JMenus
    Line 69  Instantiate Format JMenu
    Line 75  Instantiate Color JMenu (submenu of Format JMenu)
    Lines 78-79  Instantiate JRadioButtonMenuItems for Color JMenu and ensure that only one menu item is selected at a time
    Line 96  Separator places line between JMenuItems
    Line 101  Instantiate Font JMenu (submenu of Format JMenu)
    Lines 104-105  Instantiate JRadioButtonMenuItems for Font JMenu and ensure that only one menu item is selected at a time
    Line 163  Invoked when user selects JMenuItem
    Lines 168 and 176  Determine which font or color menu generated event
    Lines 169 and 177-178  Set font or color of JLabel, respectively
    Line 192  Invoked when user selects JCheckBoxMenuItem
    Lines 197-202  Determine new font style

 



 

14.6  JPopupMenu


    • Context-sensitive popup menus
        – JPopupMenu
        – Menu generated depending on which component is accessed

 



1      // Fig. 14.10: PopupTest.java
2      // Demonstrating JPopupMenus
3      import java.awt.*;
4      import java.awt.event.*;
5      import javax.swing.*;
6     
7      public class PopupTest extends JFrame {
8         private JRadioButtonMenuItem items[ ];
9         private final Color colorValues[ ] =
10          { Color.BLUE, Color.YELLOW, Color.RED };
11       private JPopupMenu popupMenu;
12   
13       // set up GUI
14       public PopupTest()
15       {
16          super( "Using JPopupMenus" );
17   
18          ItemHandler handler = new ItemHandler();
19          String colors[ ] = { "Blue", "Yellow", "Red" };
20   
21          // set up popup menu and its items
22          ButtonGroup colorGroup = new ButtonGroup();
23          popupMenu = new JPopupMenu();
24          items = new JRadioButtonMenuItem[ 3 ];
25
26          // construct each menu item and add to popup menu; also
27          // enable event handling for each menu item
28          for ( int count = 0; count < items.length; count++ ) {
29             items[ count ] = new JRadioButtonMenuItem( colors[ count ] );
30             popupMenu.add( items[ count ] );
31             colorGroup.add( items[ count ] );
32             items[ count ].addActionListener( handler );
33          }
34   
35          getContentPane().setBackground( Color.WHITE );
36   
37          // declare a MouseListener for the window that displays
38          // a JPopupMenu when the popup trigger event occurs
39          addMouseListener(
40   
41             new MouseAdapter() {  // anonymous inner class
42   
43                // handle mouse press event
44                public void mousePressed( MouseEvent event )
45                {
46                   checkForTriggerEvent( event );
47                }
48   
49                // handle mouse release event
50                public void mouseReleased( MouseEvent event )
51                {
52                   checkForTriggerEvent( event );
53                }
54   
55                // determine whether event should trigger popup menu
56                private void checkForTriggerEvent( MouseEvent event )
57                {
58                   if ( event.isPopupTrigger() )                           
59                      popupMenu.show(event.getComponent(), event.getX(), event.getY() );
60                         
61                }
62   
63             } // end anonymous inner clas
64   
65          ); // end call to addMouseListener - line 39
66   
67          setSize( 300, 200 );
68          setVisible( true );
69   
70       } // end constructor PopupTest
71   
72       public static void main( String args[ ] )
73       {
74              PopupTest application = new PopupTest();
75              application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
76       }
77   
78       // private inner class to handle menu item events
79       private class ItemHandler implements ActionListener {
80   
81          // process menu item selections
82          public void actionPerformed( ActionEvent event )
83          {
84             // determine which menu item was selected
85             for ( int i = 0; i < items.length; i++ )
86                if ( event.getSource() == items[ i ] ) {
87                       getContentPane().setBackground( colorValues[ i ] );
88                       return;
89                }
90          }
91   
92       } // end private inner class ItemHandler
93   
94    } // end class PopupTest

 


    Line 23  Instantiate JPopupMenu object
    Lines 29-32  Create JRadioButtonMenuItem objects to add to JPopupMenu
    Lines 46 and 52  Determine whether popup-trigger event occurred when user presses or releases mouse button
    Lines 59-60  Show JPopupMenu if popup-trigger occurred
    Line 82  Invoked when user selects JRadioButtonMenuItem
    Line 87  Determine which JRadioButtonMenuItem was selected, then set window background color

 

 

 


14.7  Pluggable Look-and-Feel


    • Pluggable look-and-feel
        – Change look-and-feel dynamically
            • e.g., Microsoft Windows look-and-feel to Motif look-and-feel
        – Flexible

 

1      // Fig. 14.11: LookAndFeelDemo.java
2      // Changing the look and feel.
3      import java.awt.*;
4      import java.awt.event.*;
5      import javax.swing.*;
6     
7         public class LookAndFeelDemo extends JFrame {
8         private final String strings[ ] = { "Metal", "Motif", "Windows" };
9         private UIManager.LookAndFeelInfo looks[ ];
10       private JRadioButton radio[ ];
11       private ButtonGroup group;
12       private JButton button;
13       private JLabel label;
14       private JComboBox comboBox;
15   
16       // set up GUI
17       public LookAndFeelDemo()
18       {
19          super( "Look and Feel Demo" );
20   
21          Container container = getContentPane();
22   
23          // set up panel for NORTH of BorderLayout
24          JPanel northPanel = new JPanel();
25          northPanel.setLayout( new GridLayout( 3, 1, 0, 5 ) );
26
27          // set up label for NORTH panel
28          label = new JLabel( "This is a Metal look-and-feel", SwingConstants.CENTER );
29          northPanel.add( label );
30          
31   
32          // set up button for NORTH panel
33          button = new JButton( "JButton" );
34          northPanel.add( button );
35   
36          // set up combo box for NORTH panel
37          comboBox = new JComboBox( strings );
38          northPanel.add( comboBox );
39         
40          // create array for radio buttons
41          radio = new JRadioButton[ strings.length ];
42   
43          // set up panel for SOUTH of BorderLayout
44          JPanel southPanel = new JPanel();
45          southPanel.setLayout( new GridLayout( 1, radio.length ) );
46   
47          // set up radio buttons for SOUTH panel
48          group = new ButtonGroup();
49          ItemHandler handler = new ItemHandler();
50   
51          for ( int count = 0; count < radio.length; count++ ) {
52             radio[ count ] = new JRadioButton( strings[ count ] );
53             radio[ count ].addItemListener( handler );
54             group.add( radio[ count ] );
55             southPanel.add( radio[ count ] );
56          }
57   
58          // attach NORTH and SOUTH panels to content pane
59          container.add( northPanel, BorderLayout.NORTH );
60          container.add( southPanel, BorderLayout.SOUTH );
61   
62          // get installed look-and-feel information
63          looks = UIManager.getInstalledLookAndFeels();
64   
65          setSize( 300, 200 );
66          setVisible( true );
67   
68          radio[ 0 ].setSelected( true );
69   
70       } // end constructor LookAndFeelDemo
71   
72       // use UIManager to change look-and-feel of GUI
73       private void changeTheLookAndFeel( int value )
74       {
75          // change look and feel
76          try {
77             UIManager.setLookAndFeel( looks[ value ].getClassName() );
78             SwingUtilities.updateComponentTreeUI( this );            
79          }
80   
81          // process problems changing look and feel
82          catch ( Exception exception ) {
83             exception.printStackTrace();
84          }
85       }
86   
87       public static void main( String args[ ] )
88       {
89          LookAndFeelDemo application = new LookAndFeelDemo();
90          application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
91       }
92   
93       // private inner class to handle radio button events
94       private class ItemHandler implements ItemListener {
95   
96          // process user's look-and-feel selection
97          public void itemStateChanged( ItemEvent event )
98          {
99             for ( int count = 0; count < radio.length; count++ )
100 
101              if ( radio[ count ].isSelected() ) {
102                     label.setText( "This is a " + strings[ count ] + " look-and-feel" );
103                    
104                     comboBox.setSelectedIndex( count );
105                     changeTheLookAndFeel( count );
106              }
107        }
108 
109     } // end private inner class ItemHandler
110 
111  } // end class LookAndFeelDemo

 


    Line 9  Hold installed look-and-feel information
    Lines 77-78 Change look-and-feel


 


 

14.8  JDesktopPane and JInternalFrame


    • Multiple document interface
            – Main (parent) window
            – Child windows
            – Switch freely among documents


1      // Fig. 14.12: DesktopTest.java
2      // Demonstrating JDesktopPane.
3      import java.awt.*;
4      import java.awt.event.*;
5      import javax.swing.*;
6     
7         public class DesktopTest extends JFrame {
8         private JDesktopPane theDesktop;