Object-Oriented Programming Design Topic : User Interface Components with Swing GUI Part III

1. Air Force Institute of Technology Electrical and Computer Engineering Object-Oriented Programming DesignTopic : User Interface Components with Swing GUI Part III Maj Joel Young Joel.Young@afit.edu Maj Joel Young

2. Creating GUI Apps – The Process Overview // The Listener class MyActionListener implements ActionListener { public void actionPerformed( ActionEvent e) { JOptionPane.showMessageDialog( null, "Button clicked!"); } } Title Here Text Field Label: Ok Cancel • Step 1. Create a JFrame • Step 2. Create JPanel(s) to hold controls • Step 3. Add JPanel(s) to JFrame’s content pane, and put JPanels within other JPanels as needed • Step 4. Create Controls • Step 5. Add Controls to JPanel(s) • Step 6. Create event listeners, add to components

3. Layout Managers - Basics • Positioning controls/panels is not a trivial task • What if the user resizes the window? • What if the resolution of the screen is changed? • What if the application is run on two different operating system environments? (Win 2000, Solaris) • Layout Managers help to keep our interfaces organized even if the above changes do occur • A layout manager sets the policy for how an interface’s components will be ordered, stacked, and packed

4. Layout Managers - Basics • There are many kinds of layout managers: • Border Layout (simple): Organizes display into North, South, East, West, and Center regions • Flow Layout (simple): Organizes display by simply creating rows of components, where a new row is created when horizontal space runs out • Grid Layout (medium): Organizes display into an evenly divided grid, where each component gets one cell • Box Layout (medium): Organizes display into a column or row of boxes, the size of which can be specified • Gridbag Layout (complex): Organizes display into a grid, but components may take multiple cells, and cells are not of uniform size • Null Layout: No layout management, components are placed at specific X,Y coordinates and never move or resize

5. Border Layout public class TestFrame5 extends JFrame { public TestFrame5() { // Create a JPanel with a border layout JPanel p = new JPanel(new BorderLayout()); // Add labels p.add(new JButton("North"),BorderLayout.NORTH); p.add(new JButton("South"),BorderLayout.SOUTH); p.add(new JButton("East"),BorderLayout.EAST); p.add(new JButton("West"),BorderLayout.WEST); p.add(new JButton("Center"),BorderLayout.CENTER); // Add panel to content pane this.getContentPane().add(p); } public static void main(String[] args) { TestFrame5 testFrame = new TestFrame5(); testFrame.setSize(300,300); testFrame.show(); } }

6. FlowLayout public class TestFrame6 extends JFrame { public TestFrame6() { // Create a JPanel with a flow layout - centering items JPanel p = new JPanel(new FlowLayout(FlowLayout.CENTER)); // Add labels p.add(new JButton("First")); p.add(new JButton("Second")); p.add(new JButton("Third")); p.add(new JButton("Fourth")); p.add(new JButton("Fifth")); // Add panel to content pane this.getContentPane().add(p); } public static void main(String[] args) { TestFrame6 testFrame = new TestFrame6(); testFrame.setSize(300,300); testFrame.show(); } }

7. Grid Layout public class TestFrame7 extends JFrame { public TestFrame7() { // Create a JPanel with a grid layout JPanel p = new JPanel(new GridLayout(3,2)); // Add labels p.add(new JButton("Row 1, Col 1")); p.add(new JButton("Row 1, Col 2")); p.add(new JButton("Row 2, Col 1")); p.add(new JButton("Row 2, Col 2")); p.add(new JButton("Row 3, Col 1")); // Add panel to content pane this.getContentPane().add(p); } public static void main(String[] args) { TestFrame7 testFrame = new TestFrame7(); testFrame.setSize(300,300); testFrame.show(); } }

8. Buttons • Plain Vanilla Buttons (JButton) • Clicking causes an action to occur (fires ActionEvent) • Can have a text label, icon, or both • Checkbox Buttons (JCheckBox) • A toggle button – click to turn on state • Application can examine to see if button selected or not • Radio Buttons (JRadioButton) • A toggle button – but buttons are arranged in groups, and only one button can be active • Application can examine which is active

9. Button Example public class ButtonTest1 extends JFrame { public ButtonTest1() { // Create a JPanel with a box layout JPanel p = new JPanel(); p.setLayout(new BoxLayout(p,BoxLayout.Y_AXIS)); // Add buttons JButton tb = new JButton("Text Button"); tb.setAlignmentX(Component.CENTER_ALIGNMENT); p.add(tb); JButton ib = new JButton(new ImageIcon("icons/Help24.gif")); ib.setAlignmentX(Component.CENTER_ALIGNMENT); p.add(ib); this.getContentPane().add(p); } public static void main(String[] args) { ButtonTest1 testFrame = new ButtonTest1(); testFrame.setSize(300,300); testFrame.show(); } }

10. public class ButtonTest2 extends JFrame implements ActionListener { JCheckBox cbRed = new JCheckBox("Red"); JCheckBox cbGreen = new JCheckBox("Green"); JCheckBox cbBlue = new JCheckBox("Blue"); JLabel selLabel = new JLabel("Selected: (none)"); public ButtonTest2() { // Create a JPanel with a box layout JPanel p = new JPanel(); p.setLayout( new BoxLayout(p,BoxLayout.Y_AXIS)); // Add buttons cbRed.addActionListener(this); p.add(cbRed); cbGreen.addActionListener(this); p.add(cbGreen); cbBlue.addActionListener(this); p.add(cbBlue); p.add(Box.createRigidArea( new Dimension(0,20))); p.add(selLabel); // Add panel to content pane this.getContentPane().add(p); } public void actionPerformed(ActionEvent e) { String label = "Selected: "; if (cbRed.isSelected()) label += "Red "; if (cbGreen.isSelected()) label += "Green "; if (cbBlue.isSelected()) label += "Blue"; selLabel.setText(label); } public static void main(String[] args) { ButtonTest2 testFrame = new ButtonTest2(); testFrame.setSize(300,300); testFrame.show(); } } CheckBox Button Example

11. Labels (JLabel) • Usually displays a line of text to explain something on the display (like a prompt next to a text field) • Can also be an image, or an image with text • Label does not get keyboard focus, does not issue label-specific events • Can be dynamically changed by the application (useful for counters or status fields)

12. Label Example public class LabelTest1 extends JFrame { public LabelTest1() { // Create a JPanel with a box layout JPanel p = new JPanel(); p.setLayout(new BoxLayout(p,BoxLayout.X_AXIS)); // Add controls p.add(Box.createHorizontalGlue()); JLabel lb = new JLabel("Click this button to explode:"); lb.setAlignmentY(Component.CENTER_ALIGNMENT); p.add(lb); p.add(Box.createRigidArea(new Dimension(5,0))); JButton tb = new JButton("Self-Destruct"); tb.setAlignmentY(Component.CENTER_ALIGNMENT); p.add(tb); p.add(Box.createHorizontalGlue()); // Add panel to content pane this.getContentPane().add(p); } public static void main(String[] args) { LabelTest1 testFrame = new LabelTest1(); testFrame.setSize(300,300); testFrame.show(); } }

13. Dynamic Label Example public class LabelTest1 extends JFrame { int counter = 0; JLabel hitLabel; public LabelTest1() { // Create a JPanel with a box layout JPanel p1 = new JPanel(); p1.setLayout(new BoxLayout(p1,BoxLayout.X_AXIS)); // Add controls p1.add(Box.createHorizontalGlue()); JLabel lb = new JLabel("Click this button to explode:"); lb.setAlignmentY(Component.CENTER_ALIGNMENT); p1.add(lb); p1.add(Box.createRigidArea(new Dimension(5,0))); JButton tb = new JButton("Self-Destruct"); tb.setAlignmentY(Component.CENTER_ALIGNMENT); tb.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { hitLabel.setText(String.valueOf(++counter)); } }); p1.add(tb); p1.add(Box.createHorizontalGlue()); JPanel p2 = new JPanel(); p2.setLayout(new FlowLayout(FlowLayout.CENTER)); hitLabel = new JLabel(""); p2.add(hitLabel); // Add panel to content pane this.getContentPane().setLayout(new BorderLayout()); this.getContentPane().add(p1,BorderLayout.CENTER); this.getContentPane().add(p2,BorderLayout.SOUTH); } public static void main(String[] args) { LabelTest1 testFrame = new LabelTest1(); testFrame.setSize(300,300); testFrame.show(); } }

14. Text Handling • Text Fields (JTextField) • Used to input small amounts of text (usually single fields, like names or addresses) • Text Editors (JTextEditor, JTextPane) • Essentially small word processors that can be embedded in your GUI • Text Areas (JTextArea) • Simplified text editing controls

15. Text Field Example public class TextFieldTest1 extends JFrame { JTextField userText; public TextFieldTest1() { // Create a JPanel with a box layout JPanel p1 = new JPanel(); p1.setLayout(new BoxLayout(p1,BoxLayout.X_AXIS)); // Create a label for a prompt JLabel prompt = new JLabel("Enter Name:"); p1.add(prompt); // Create text field userText = new JTextField(); userText.setMaximumSize(new Dimension(150,20)); userText.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { JOptionPane.showMessageDialog(null, "You typed:"+userText.getText()); } }); p1.add(userText); this.getContentPane().add(p1); } public static void main(String[] args) { TextFieldTest1 testFrame = new TextFieldTest1(); testFrame.setSize(300,300); testFrame.show(); } }

16. JTextPane/JTextEditor Example public class TextFieldTest2 extends JFrame { JTextPane tp = new JTextPane(); JEditorPane ep = new JEditorPane("text/html",""); public TextFieldTest2() { // Create a JPanel with a box layout JPanel p1 = new JPanel(); p1.setLayout(new GridLayout(1,2)); // Create a ScrollPane for the TextPane JScrollPane sp = new JScrollPane(tp); p1.add(sp); sp = new JScrollPane(ep); p1.add(sp); ep.setEditable(false); // Add a button to transfer text JPanel p2 = new JPanel( new FlowLayout(FlowLayout.CENTER)); JButton copy = new JButton("Copy"); copy.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { ep.setText(tp.getText()); } }); p2.add(copy); this.getContentPane().setLayout(new BorderLayout()); this.getContentPane().add(p1,BorderLayout.CENTER); this.getContentPane().add(p2,BorderLayout.SOUTH); } public static void main(String[] args) { TextFieldTest2 testFrame = new TextFieldTest2(); testFrame.pack(); testFrame.show(); } }

17. Borders • All JComponents allow you to specify a border • Types of Borders • Line borders • Etched borders • Beveled borders • Title borders www.java.sun.com/tutorial

18. JTextPane/JTextEditor Example public static void main(String[] args) { TextFieldTest2 testFrame = new TextFieldTest2(); testFrame.pack(); testFrame.show(); } } public class TextFieldTest2 extends JFrame { JTextPane tp = new JTextPane(); JEditorPane ep = new JEditorPane("text/html",""); public TextFieldTest2() { // Create Borders Border etch = BorderFactory.createEtchedBorder(); // Create a JPanel with a box layout JPanel p1 = new JPanel(); p1.setLayout(new GridLayout(1,2)); // Create a ScrollPane for the TextPane JScrollPane sp = new JScrollPane(tp); sp.setBorder( BorderFactory.createTitledBorder(etch,"Text Pane")); p1.add(sp); sp = new JScrollPane(ep); sp.setBorder( BorderFactory.createTitledBorder(etch,"Editor Pane")); p1.add(sp); ep.setEditable(false); // Add a button to transfer text JPanel p2 = new JPanel(new FlowLayout(FlowLayout.CENTER)); JButton copy = new JButton("Copy"); copy.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { ep.setText(tp.getText()); } }); p2.setBorder(etch); p2.add(copy); this.getContentPane().setLayout(new BorderLayout()); this.getContentPane().add(p1,BorderLayout.CENTER); this.getContentPane().add(p2,BorderLayout.SOUTH); }

19. Lists • Plain Lists (JList) • Just show a list of items • Single or multiple select • Scrollable • Drop-Down Lists (JComboBox) • Show a list of options you can pick from • Can’t be altered by user • Combo Lists (JComboBox) • Same as drop-down, but allows users to edit entries

20. JList Example public class TestList1 extends JFrame implements ActionListener { private JList list; private DefaultListModel model; private JTextField text; public TestList1() { // Create model, populate with data model = new DefaultListModel(); model.addElement("CSCE 694"); model.addElement("CSCE 646"); model.addElement("CSCE 593"); model.addElement("EENG 653"); // Create list, specify data model list = new JList(model); JScrollPane sp = new JScrollPane(list); // Create a JPanel with a box layout JPanel p = new JPanel(); p.setLayout(new BoxLayout(p,BoxLayout.X_AXIS)); text = new JTextField(); text.setMinimumSize(new Dimension(150,5)); p.add(text); JButton b = new JButton("Add Class"); b.addActionListener(this); p.add(b); // Add panel to content pane this.getContentPane().setLayout(new BorderLayout()); this.getContentPane().add(p,BorderLayout.SOUTH); this.getContentPane().add(sp,BorderLayout.CENTER); } public void actionPerformed(ActionEvent e) { model.addElement(text.getText()); text.setText(""); } public static void main(String[] args) { TestList1 testFrame = new TestList1(); testFrame.setSize(300,300); testFrame.show(); } }

21. JList Example – with Selection Listener public class TestList2 extends JFrame implements ListSelectionListener { private JList list; private DefaultListModel model; private JLabel text; public TestList2() { // Create model, populate with data model = new DefaultListModel(); model.addElement("CSCE 694"); model.addElement("CSCE 646"); model.addElement("CSCE 593"); model.addElement("EENG 653"); // Create list, specify data model list = new JList(model); list.addListSelectionListener(this); JScrollPane sp = new JScrollPane(list); // Create a JPanel with a flow layout JPanel p = new JPanel(new FlowLayout()); text = new JLabel("(Nothing selected)"); p.add(text); // Add panel to content pane this.getContentPane().setLayout(new BorderLayout()); this.getContentPane().add(p,BorderLayout.SOUTH); this.getContentPane().add(sp,BorderLayout.CENTER); } public void valueChanged(ListSelectionEvent e) { String item = (String) list.getSelectedValue(); text.setText(item); } public static void main(String[] args) { TestList2 testFrame = new TestList2(); testFrame.setSize(300,300); testFrame.show(); } }

22. JComboBox Example – Not Editable public class TestList3 extends JFrame implements ActionListener { private JComboBox list; private JLabel text; public TestList3() { text = new JLabel("(Nothing selected)"); // Create combo box list = new JComboBox(); list.addItem("CSCE431"); list.addItem("CSCE492"); list.addItem("CSCE486"); list.addItem("CSCE531"); list.addItem("CSCE586"); list.addItem("CSCE593"); list.addItem("CSCE646"); // Scroll after four entries list.setMaximumRowCount(4); // Respond to selections list.addActionListener(this); // Create a JPanel with a flow layout JPanel p = new JPanel(new FlowLayout()); p.add(text); // Add panel to content pane this.getContentPane().setLayout(new BorderLayout()); this.getContentPane().add(p,BorderLayout.SOUTH); this.getContentPane().add(new JLabel(" "),BorderLayout.CENTER); this.getContentPane().add(list,BorderLayout.NORTH); } public void actionPerformed(ActionEvent e) { String item = (String) list.getSelectedItem(); text.setText("Registered for: "+item); } public static void main(String[] args) { TestList3 testFrame = new TestList3(); testFrame.setSize(300,300); testFrame.show(); } }

23. JComboBox Example -- Editable // Add panel to content pane this.getContentPane().setLayout(new BorderLayout()); this.getContentPane().add(p,BorderLayout.SOUTH); this.getContentPane().add(new JLabel(" "),BorderLayout.CENTER); this.getContentPane().add(list,BorderLayout.NORTH); } public void actionPerformed(ActionEvent e) { String item = (String) list.getSelectedItem(); text.setText("Registered for: "+item); } public static void main(String[] args) { TestList4 testFrame = new TestList4(); testFrame.setSize(300,300); testFrame.show(); } } public class TestList4 extends JFrame implements ActionListener { private JComboBox list; private JLabel text; public TestList4() { text = new JLabel("(Nothing selected)"); // Create combo box list = new JComboBox(); list.addItem("CSCE431"); list.addItem("CSCE492"); list.addItem("CSCE486"); list.addItem("CSCE531"); list.addItem("CSCE586"); list.addItem("CSCE593"); list.addItem("CSCE646"); // Make editable list.setEditable(true); // Scroll after four entries list.setMaximumRowCount(4); // Respond to selections list.addActionListener(this); // Create a JPanel with a flow layout JPanel p = new JPanel(new FlowLayout()); p.add(text);

24. Menus • Menus (JMenu) • Top-level menu items, do not cause action to occur • Containers for JMenuItems and other JMenus • Menu Items (JMenuItem) • Bottom-level menu items, selecting causes an action • Menu Bars (JMenuBar) • Container for menus, are placed in the JFrame

25. Menu Example // Modified example from The Java Tutorial public class TestMenu1 extends JFrame implements ActionListener { JTextArea output; public TestMenu1() { JMenuBar menuBar; JMenu menu, submenu; JMenuItem menuItem; JRadioButtonMenuItem rbMenuItem; JCheckBoxMenuItem cbMenuItem; //Add regular components to the window Container contentPane = getContentPane(); output = new JTextArea(5, 30); output.setEditable(false); contentPane.add(new JScrollPane(output), BorderLayout.CENTER); //Create the menu bar. menuBar = new JMenuBar(); setJMenuBar(menuBar); //Build the first menu. menu = new JMenu("A Menu"); menuBar.add(menu); //a group of JMenuItems menuItem = new JMenuItem("A menu item", KeyEvent.VK_T); menuItem.addActionListener(this); menu.add(menuItem); menuItem = new JMenuItem("Another menu item",KeyEvent.VK_B); menuItem.addActionListener(this); menu.add(menuItem);

26. Menu Example -- Continued //a group of radio button menu items menu.addSeparator(); ButtonGroup group = new ButtonGroup(); rbMenuItem = new JRadioButtonMenuItem( "A radio button menu item"); rbMenuItem.setSelected(true); group.add(rbMenuItem); rbMenuItem.addActionListener(this); menu.add(rbMenuItem); rbMenuItem = new JRadioButtonMenuItem( "Another one"); group.add(rbMenuItem); rbMenuItem.addActionListener(this); menu.add(rbMenuItem); //a group of check box menu items menu.addSeparator(); cbMenuItem = new JCheckBoxMenuItem( "A check box menu item"); cbMenuItem.addActionListener(this); menu.add(cbMenuItem); cbMenuItem = new JCheckBoxMenuItem( "Another one"); cbMenuItem.addActionListener(this); menu.add(cbMenuItem); //a submenu menu.addSeparator(); submenu = new JMenu("A submenu"); menuItem = new JMenuItem( "An item in the submenu"); menuItem.addActionListener(this); submenu.add(menuItem); menuItem = new JMenuItem("Another item"); menuItem.addActionListener(this); submenu.add(menuItem); menu.add(submenu); //Build second menu in the menu bar. menu = new JMenu("Another Menu"); menuBar.add(menu); } public void actionPerformed(ActionEvent e) { JMenuItem source = (JMenuItem)(e.getSource()); String s = "Item clicked: "+source.getText()+"\n"; output.append(s); } public static void main(String[] args) { TestMenu1 window = new TestMenu1(); window.setSize(450, 260); window.setVisible(true); } }

27. Approach to building a user interface • Design the interface (pen and paper, or visual toolkit) • Convert design to code • Make the components in the interface look the way you want them to • Position user interface components where you want them • Handle user input (respond to events generated by user interface components) • In Java • Create the component with the appropriate constructor parameters • Add a flow layout manager to container • Add individual components to container • Add appropriate event handlers (listener interfaces)

28. Homework • Code the basic GUI window for your tabulation mode • display, buttons, operations, =, clear • No functionality required, not even for number buttons to cause text to appear in the display • REMEMBER! Draw it on paper. Use containers to group things (maybe a grid for the numbers beside a grid for the operations, with a display on top). • Amazed at how easy it is? 