object-oriented programming design topic : user interface components with swing gui part iii
DESCRIPTION
Object-Oriented Programming Design Topic : User Interface Components with Swing GUI Part III. Maj Joel Young [email protected]. Maj Joel Young. Creating GUI Apps – The Process Overview. // The Listener class MyActionListener implements ActionListener { - PowerPoint PPT PresentationTRANSCRIPT
Apr 21, 2023
Air Force Institute of TechnologyElectrical and Computer Engineering
Object-Oriented Programming Design
Topic : User Interface Components with Swing
GUI Part III
Maj Joel [email protected]
Maj Joel Young
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 2
Object-Oriented Programming
DesignCreating 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
Ok Cancel
// The Listenerclass MyActionListener
implements ActionListener{ public void actionPerformed(
ActionEvent e) { JOptionPane.showMessageDialog(
null, "Button clicked!"); }}
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 3
Object-Oriented Programming
DesignLayout 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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 4
Object-Oriented Programming
DesignLayout 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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 5
Object-Oriented Programming
DesignBorder 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(); }}
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 6
Object-Oriented Programming
DesignFlowLayout
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(); }}
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 7
Object-Oriented Programming
DesignGrid 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(); }}
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 8
Object-Oriented Programming
DesignButtons
• 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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 9
Object-Oriented Programming
DesignButton 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(); }}
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 10
Object-Oriented Programming
DesignCheckBox 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(); }}
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 11
Object-Oriented Programming
DesignLabels (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)
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 12
Object-Oriented Programming
DesignLabel 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(); }}
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 13
Object-Oriented Programming
DesignDynamic 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(); }}
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 14
Object-Oriented Programming
DesignText 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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 15
Object-Oriented Programming
DesignText 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(); }}
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 16
Object-Oriented Programming
DesignJTextPane/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(); }}
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 17
Object-Oriented Programming
DesignBorders
• All JComponents allow you to specify a border• Types of Borders
– Line borders – Etched borders– Beveled borders– Title borders
www.java.sun.com/tutorial
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 18
Object-Oriented Programming
DesignJTextPane/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(); }}
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 19
Object-Oriented Programming
DesignLists
• 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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 20
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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 21
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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 22
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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 23
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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 24
Object-Oriented Programming
DesignMenus
• 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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 25
Object-Oriented Programming
Design
// Modified example from The Java Tutorialpublic 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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 26
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
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 27
Object-Oriented Programming
DesignApproach 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)
Air Force Institute of TechnologyElectrical and Computer EngineeringApr 21, 2023 28
Object-Oriented Programming
DesignHomework
• 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?