object-oriented programming design topic : user interface components with swing gui part iii

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!"); }}



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



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



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(); }}



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); }




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); }




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



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(); }}



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(); }}



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)



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(); }}



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(); }}



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



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(); }}



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); }


new TextFieldTest2(); testFrame.pack(); testFrame.show(); }}



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



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); }


new TextFieldTest2(); testFrame.pack(); testFrame.show(); }}



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



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



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); }


JList Example – with Selection Listener



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); }


JComboBox Example – Not Editable



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); }


JComboBox Example -- Editable



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



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



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



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)



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?

object-oriented programming design topic : user interface components with swing gui part iii

Documents

addnew jbuttonfourth

addnew jbuttonfirst

addnew jbuttonthird

addnew jbuttonsecond

border layout jpanel

labels p

west p

east p