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

2. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-152 Object-Oriented Programming Design Creating GUI Apps – The Process Overview 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 Title Here Label: Text Field OkCancel // The Listener class MyActionListener implements ActionListener { public void actionPerformed( ActionEvent e) { JOptionPane.showMessageDialog( null, "Button clicked!"); }

3. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-153 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-154 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-155 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-156 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-157 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-158 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-159 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1510 Object-Oriented Programming Design CheckBox Button Example 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(); }

11. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1511 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1512 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1513 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1514 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1515 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1516 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1517 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1518 Object-Oriented Programming Design JTextPane/JTextEditor Example 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); } public static void main(String[] args) { TextFieldTest2 testFrame = new TextFieldTest2(); testFrame.pack(); testFrame.show(); }

19. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1519 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1520 Object-Oriented Programming Design 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(); } JList Example

21. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1521 Object-Oriented Programming Design 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(); } JList Example – with Selection Listener

22. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1522 Object-Oriented Programming Design 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(); } JComboBox Example – Not Editable

23. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1523 Object-Oriented Programming Design 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); // 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(); } JComboBox Example -- Editable

24. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1524 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1525 Object-Oriented Programming Design // 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); Menu Example

26. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1526 Object-Oriented Programming Design //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); } Menu Example -- Continued

27. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1527 Object-Oriented Programming Design 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. Air Force Institute of Technology Electrical and Computer Engineering 7-Oct-1528 Object-Oriented Programming Design 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?