1. GUI Components CSCI 201L Jeffrey Miller, Ph.D. HTTP :// WWW - SCF. USC. EDU /~ CSCI 201 USC CSCI 201L

2. Outline USC CSCI 201L2/20 ▪GUI Components ▪Program

3. Java GUI Component Hierarchy USC CSCI 201L3/20 GUI Components

4. Buttons ▪A button is a component that triggers an action event when clicked ▪There are three types of buttons in Swing ›JButton Action is invoked when the button is clicked ›JCheckBox Two-state button that is either on or off ›JRadioButton Can only choose a single item from a group of choices Radio buttons must be grouped with a ButtonGroup if only one option is able to be selected ›With JButton, an ActionEvent will be fired ›With JCheckBox and JRadioButton, an ItemEvent will allow to check the status of the box USC CSCI 201L4/20 GUI Components

5. Button Example 1 import java.awt.FlowLayout; 2 import javax.swing.ButtonGroup; 3 import javax.swing.ImageIcon; 4 import javax.swing.JButton; 5 import javax.swing.JCheckBox; 6 import javax.swing.JFrame; 7 import javax.swing.JRadioButton; 8 9 public class Test extends JFrame { 10 public Test() { 11 super("Button Example"); 12 setLayout(new FlowLayout(FlowLayout.LEFT)); 13 ImageIcon iconUSCshield = new ImageIcon("uscseal.gif"); 14 ImageIcon iconGoogle = new ImageIcon("google.png"); 15 ImageIcon iconExpedia = new ImageIcon("expedia.png"); 16 JButton jb = new JButton("USC", iconUSCshield); 17 jb.setRolloverIcon(iconGoogle); 18 jb.setPressedIcon(iconExpedia); 19 add(jb); 20 21 JCheckBox checkboxUSC = new JCheckBox("USC"); 22 JCheckBox checkboxUCLA = new JCheckBox("UCLA"); 23 add(checkboxUSC); 24 add(checkboxUCLA); 25 26 JRadioButton radioButtonCS = new JRadioButton("CS"); 27 JRadioButton radioButtonCECS = new JRadioButton("CECS"); 28 ButtonGroup bg = new ButtonGroup(); 29 bg.add(radioButtonCS); 30 bg.add(radioButtonCECS); 31 add(radioButtonCS); 32 add(radioButtonCECS); USC CSCI 201L5/20 GUI Components 33 this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE); 34 setSize(400, 100); 35 setLocationRelativeTo(null); 36 setVisible(true); 37 } 38 39 public static void main(String args[]) { 40 Test t = new Test(); 41 } 42 }

6. JLabels ▪JLabels can be either text or images 1 import java.awt.FlowLayout; 2 import javax.swing.ImageIcon; 3 import javax.swing.JFrame; 4 import javax.swing.JLabel; 5 import javax.swing.SwingConstants; 6 7 public class Test extends JFrame { 8 public Test() { 9 super("JLabel Example"); 10 setLayout(new FlowLayout(FlowLayout.LEFT)); 11 ImageIcon iconUSCseal = new ImageIcon("uscseal_large.gif"); 12 JLabel jlbl = new JLabel("USC", iconUSCseal, SwingConstants.CENTER); 13 jlbl.setHorizontalTextPosition(SwingConstants.CENTER); 14 jlbl.setVerticalTextPosition(SwingConstants.BOTTOM); 15 jlbl.setIconTextGap(5); 16 add(jlbl); 17 18 this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE); 19 setSize(150, 200); 20 setLocationRelativeTo(null); 21 setVisible(true); 22 } 23 24 public static void main(String args[]) { 25 Test t = new Test(); 26 } 27 } USC CSCI 201L6/20 GUI Components

7. JTextField vs JTextArea ▪A text field lets a user type text into a single line ▪If you want more than one line of text, you can have more than one text field ▪You can also use a text area, which is a multi-line text field ▪Text areas can have scroll bars added to them in case the number of lines extends beyond the number that is being displayed USC CSCI 201L7/20 GUI Components

8. JTextArea Example 1 import java.awt.Color; 2 import java.awt.FlowLayout; 3 import java.awt.Font; 4 import javax.swing.JFrame; 5 import javax.swing.JTextArea; 6 import javax.swing.JTextField; 7 8 public class Test extends JFrame { 9 public Test() { 10 super("Text Area Example"); 11 setLayout(new FlowLayout(FlowLayout.LEFT)); 12 JTextField jtf = new JTextField("My text field", 30); 13 add(jtf); 14 JTextArea jtaNote = new JTextArea("This is a text area", 5, 20); 15 jtaNote.setLineWrap(true); 16 jtaNote.setWrapStyleWord(true); 17 jtaNote.setForeground(Color.red); 18 jtaNote.setBackground(Color.blue); 19 jtaNote.setFont(new Font("Courier", Font.BOLD, 20)); 20 add(jtaNote); 21 22 this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE); 23 setSize(400, 220); 24 setLocationRelativeTo(null); 25 setVisible(true); 26 } 27 28 public static void main(String args[]) { 29 Test t = new Test(); 30 } 31 } USC CSCI 201L8/20 GUI Components

9. JTextArea with Scroll Bar Example 1 import java.awt.Color; 2 import java.awt.FlowLayout; 3 import java.awt.Font; 4 5 import javax.swing.JFrame; 6 import javax.swing.JScrollPane; 7 import javax.swing.JTextArea; 8 import javax.swing.JTextField; 9 10 public class Test extends JFrame { 11 public Test() { 12 super("Text Area Example"); 13 setLayout(new FlowLayout(FlowLayout.LEFT)); 14 JTextField jtf = new JTextField("My text field", 30); 15 add(jtf); 16 JTextArea jtaNote = new JTextArea("This is a text area", 5, 20); 17 jtaNote.setLineWrap(true); 18 jtaNote.setWrapStyleWord(true); 19 jtaNote.setForeground(Color.red); 20 jtaNote.setBackground(Color.blue); 21 jtaNote.setFont(new Font("Courier", Font.BOLD, 20)); 22 JScrollPane jsp = new JScrollPane(jtaNote); 23 add(jsp); 24 25 this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE); 26 setSize(400, 220); 27 setLocationRelativeTo(null); 28 setVisible(true); 29 } 30 31 public static void main(String args[]) { 32 Test t = new Test(); 33 } 34 } USC CSCI 201L9/20 GUI Components

10. Combo Boxes ▪A combo box contains a list of items from which the user can choose ›The user can only choose one item ▪Combo boxes are useful in limiting what the user can choose ›This reduces the amount of validation of user input required ▪JComboBoxes fire ActionEvent and ItemEvent events when a selection is made ›When a new item is selected, two ItemEvents get fired – one for deselecting an item and one for selecting another ›If the same item is reselected, no ItemEvent gets fired USC CSCI 201L10/20 GUI Components

11. JComboBox Example 1 import java.awt.Color; 2 import java.awt.FlowLayout; 3 import javax.swing.JComboBox; 4 import javax.swing.JFrame; 5 6 public class Test extends JFrame { 7 public Test() { 8 super("JComboBox Example"); 9 setLayout(new FlowLayout(FlowLayout.LEFT)); 10 Object options[] = {"Item 1", "Item 2", "Item 3", "Item 4"}; 11 JComboBox jcb = new JComboBox(options); 12 jcb.setForeground(Color.red); 13 jcb.setBackground(Color.white); 14 jcb.setSelectedItem("Item 2"); 15 add(jcb); 16 17 this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE); 18 setSize(250, 200); 19 setLocationRelativeTo(null); 20 setVisible(true); 21 } 22 23 public static void main(String args[]) { 24 Test t = new Test(); 25 } 26 } USC CSCI 201L11/20 GUI Components

12. JComboBox with Images Example 1 import java.awt.Color; 2 import java.awt.FlowLayout; 3 import javax.swing.ImageIcon; 4 import javax.swing.JComboBox; 5 import javax.swing.JFrame; 6 7 public class Test extends JFrame { 8 public Test() { 9 super("JComboBox Example"); 10 setLayout(new FlowLayout(FlowLayout.LEFT)); 11 ImageIcon i1 = new ImageIcon("uscseal.gif"); 12 ImageIcon i2 = new ImageIcon("google.png"); 13 ImageIcon i3 = new ImageIcon("expedia.png"); 14 Object options[] = {i1, i2, i3}; 15 JComboBox jcb = new JComboBox(options); 16 jcb.setForeground(Color.red); 17 jcb.setBackground(Color.white); 18 jcb.setSelectedItem("Item 2"); 19 add(jcb); 20 21 this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE); 22 setSize(250, 200); 23 setLocationRelativeTo(null); 24 setVisible(true); 25 } 26 27 public static void main(String args[]) { 28 Test t = new Test(); 29 } 30 } USC CSCI 201L12/20 GUI Components

13. Lists ▪A list is a component that basically performs the same as a combo box, but the user can choose either a single value or multiple values ›Lists are implemented with the JList class in Swing ›Multiple selections are made with the Ctrl or Shift key ▪The selection mode on a JList can be set to one of the following ›ListSelectionModel.SINGLE_SELECTION ›ListSelectionModel.SINGLE_INTERVAL_SELECTION ›ListSelectionModel.MULTIPLE_INTERVAL_SELECTION This is the default value ▪If you want the list to be scrollable, add the list to a scroll pane USC CSCI 201L13/20 GUI Components

14. JList Example 1 import java.awt.Color; 2 import java.awt.FlowLayout; 3 import javax.swing.ImageIcon; 4 import javax.swing.JFrame; 5 import javax.swing.JList; 6 7 public class Test extends JFrame { 8 public Test() { 9 super("JComboBox Example"); 10 setLayout(new FlowLayout(FlowLayout.LEFT)); 11 ImageIcon iconUSCseal = new ImageIcon("uscseal.gif"); 12 Object values[] = {"Item 1", "Item 2", iconUSCseal, "Item 3", "Item 4"}; 13 JList jlst = new JList(values); 14 jlst.setForeground(Color.BLUE); 15 jlst.setBackground(Color.RED); 16 jlst.setSelectionForeground(Color.PINK); 17 jlst.setSelectionBackground(Color.BLACK); 18 jlst.setVisibleRowCount(4); 19 add(jlst); 20 21 this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE); 22 setSize(250, 200); 23 setLocationRelativeTo(null); 24 setVisible(true); 25 } 26 27 public static void main(String args[]) { 28 Test t = new Test(); 29 } 30 } USC CSCI 201L14/20 GUI Components

15. Scroll Bars ▪Scroll bars allow the user to drag a component through a range of values ▪The user can change the value of a scroll bar through a number of different actions ›Mouse click and drag of bubble ›Mouse click in open part of scroll bar ›Page Up/Page Down works like clicking in open part of scroll bar ›Keys may allow the value of the scroll bar to change ▪JScrollBar fires an AdjustmentEvent when the user changes the value of the scroll bar USC CSCI 201L15/20 GUI Components

16. JScrollBar Example 1 import java.awt.BorderLayout; 2 import java.awt.event.AdjustmentEvent; 3 import java.awt.event.AdjustmentListener; 4 import javax.swing.ImageIcon; 5 import javax.swing.JFrame; 6 import javax.swing.JLabel; 7 import javax.swing.JPanel; 8 import javax.swing.JScrollBar; 9 10 public class Test extends JFrame { 11 12 private JScrollBar jscbHort, jscbVert; 13 private JPanel messagePanel; 14 public Test() { 15 jscbHort = new JScrollBar(JScrollBar.HORIZONTAL); 16 jscbVert = new JScrollBar(JScrollBar.VERTICAL); 17 messagePanel = new JPanel(); 18 ImageIcon uscseal = new ImageIcon("uscseal_large.gif"); 19 JLabel message = new JLabel(uscseal); 20 21 messagePanel.add(message); 22 add(messagePanel, BorderLayout.CENTER); 23 add(jscbVert, BorderLayout.EAST); 24 add(jscbHort, BorderLayout.SOUTH); 25 26 jscbHort.addAdjustmentListener(new AdjustmentListener() { 27 public void adjustmentValueChanged(AdjustmentEvent e) { 28 double value = jscbHort.getValue(); 29 double maximumValue = jscbHort.getMaximum(); 30 double newX = (value * messagePanel.getWidth() / maximumValue); 31 messagePanel.setLocation((int)newX, (int)messagePanel.getLocation().getY()); 32 } 33 }); USC CSCI 201L16/20 GUI Components 34 jscbVert.addAdjustmentListener(new AdjustmentListener() { 35 public void adjustmentValueChanged(AdjustmentEvent e) { 36 double value = jscbVert.getValue(); 37 double maximumValue = jscbVert.getMaximum(); 38 double newY = (value * messagePanel.getHeight() / maximumValue); 39 messagePanel.setLocation((int)messagePanel.getLocation().getX(), (int)newY); 40 } 41 }); 42 43 setTitle("ScrollBarDemo"); 44 setLocationRelativeTo(null); // Center the frame 45 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 46 pack(); 47 setVisible(true); 48 } 49 public static void main(String [] args) { 50 Test t = new Test(); 51 } 52 }

17. Sliders ▪Sliders let the user graphically select a value by sliding a knob within a bounded interval ▪Sliders can show major and minor tick marks ›We can control the number of pixels between the tick marks as well ▪When the user changes the value of a slider, a ChangeEvent is fired USC CSCI 201L17/20 GUI Components

18. JSlider Example 1 import java.awt.BorderLayout; 2 import java.awt.event.AdjustmentEvent; 3 import java.awt.event.AdjustmentListener; 4 import javax.swing.*; // should import indivdually 5 Import javax.swimg.event.*; // should import individually 6 public class Test extends JFrame { 7 8 private JSlider jsldHort; 9 private JSlider jsldVert; 10 private JPanel messagePanel; 11 12 public Test() { 13 jsldHort = new JSlider(JSlider.HORIZONTAL); 14 jsldVert = new JSlider(JSlider.VERTICAL); 15 16 messagePanel = new JPanel(); 17 ImageIcon uscseal = new ImageIcon("uscseal_large.gif"); 18 JLabel message = new JLabel(uscseal); 19 messagePanel.add(message); 20 add(messagePanel, BorderLayout.CENTER); 21 add(jsldVert, BorderLayout.EAST); 22 add(jsldHort, BorderLayout.SOUTH); 23 24 jsldHort.setMaximum(50); 25 jsldHort.setPaintLabels(true); 26 jsldHort.setPaintTicks(true); 27 jsldHort.setMajorTickSpacing(10); 28 jsldHort.setMinorTickSpacing(1); 29 jsldHort.setPaintTrack(false); 30 jsldVert.setInverted(true); 31 jsldVert.setMaximum(10); 32 jsldVert.setPaintLabels(true); 33 jsldVert.setPaintTicks(true); 34 jsldVert.setMajorTickSpacing(10); 35 jsldVert.setMinorTickSpacing(1); USC CSCI 201L18/20 GUI Components 36 jsldHort.addChangeListener(new ChangeListener() { 37 public void stateChanged(ChangeEvent e) { 38 double value = jsldHort.getValue(); 39 double maximumValue = jsldHort.getMaximum(); 40 double newX = (value * messagePanel.getWidth() / maximumValue); 41 messagePanel.setLocation((int)newX, (int)messagePanel.getLocation().getY()); 42 } 43 }); 44 jsldVert.addChangeListener(new ChangeListener() { 45 public void stateChanged(ChangeEvent e) { 46 double value = jsldVert.getValue(); 47 double maximumValue = jsldVert.getMaximum(); 48 double newY = (value * messagePanel.getHeight() / maximumValue); 49 messagePanel.setLocation((int)messagePanel.getLocation().getX(), (int)newY); 50 } 51 }); 52 setTitle("Slider Demo"); 53 setLocationRelativeTo(null); // Center the frame 54 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 55 pack(); 56 setVisible(true); 57 } 58 public static void main(String [] args) { 59 Test t = new Test(); 60 } 61 }

19. Outline USC CSCI 201L19/20 ▪G▪GUI Components ▪P▪Program

20. Program ▪Create the following GUI with the actions associated with all of the lists and buttons. Add a few different fonts and sizes. ▪After finishing the top requirement, give the user the ability to change the text. ▪Add a set of radio buttons for changing the look and feel to the different options available in Java. USC CSCI 201L20/20 Program