Graphical User Interfaces Part 2

1
Graphical User Interfaces Part 2

• Dialogs
• JButton
• JLabel
• JTextField, JTextArea
• JRadioButton and ButtonGroup

2
Last week

• command line interface
• no choice, no user input
• menu-driven with user input
• GUI menu using javax.swing
• this week
• input and output using javax.swing

3
Dialog boxes

• simple way to
• get one item of input from user
• confirm actions
• output messages
• use static methods of JOptionPane class
• useful for 'find student' use case
• as shown here

4
JOptionPane.showMessageDialog

• used to output a message
• parameters
• parent frame (usually this)
• message to output
• title
• icon JOptionPane.WARNING_MESSAGE,
  JOptionPane.ERROR_MESSAGE, JOptionPane.QUESTION_ME
  SSAGE, JOptionPane.INFORMATION_MESSAGE

JOptionPane.showMessageDialog(this, "Student "
studentName " not found", "Not found",
JOptionPane.WARNING_MESSAGE)
5
JOptionPane.showInputDialog

• used for simple input
• parameter
• prompt
• if OK button clicked, returns the input as a
  String
• if Cancel button clicked, returns null
• can also specify title and icon as in message
  dialog

String studentName JOptionPane.showInputDialog(
"Name of student?")
6
printStudentDetails() method

• Public void printStudentDetails()
• String studentName JOptionPane.showInputDial
  og("Name of student?")
• Student tempStudent soc.getStudentByName(stu
  dentName)
• if (tempStudent ! null)
• JTextArea outputArea new JTextArea()
• outputArea.setEditable(false)
• getContentPane().add(outputArea)
• outputArea.setText(tempStudent.toString())
  
• else
• JOptionPane.showMessageDialog(this,
  "Student " studentName " not found", "Not
  found", JOptionPane.WARNING_MESSAGE)

7
More complex input

• could make a custom dialog box
• by extending swing's JDialog class
• add other GUI components to it

8
registerStudent()

• change method registerStudent() so that it
  creates the new dialog box to do student
  registration
• when this dialog is closed, control returns to
  SchoolApp and another menu item can be selected
• public void registerStudent()
• new RegisterStudentDialog(this, soc)

9
RegisterStudentDialog

• need to write this new class
• look at code RegisterStudentDialog.java
• subclass of JDialog
• implements ActionListener interface
• method to deal with JButton, and JRadioButton
  presses
• import javax.swing.
• import java.awt.
• import java.awt.event.
• public class RegisterStudentDialog extends
  JDialog implements ActionListener

10
Using components
11
Using components

• declare components as attributes
• create components in constructor
• add listeners to buttons and radiobuttons
• add components to the dialog or frame
• write actionPerformed() method for buttons and
  radiobuttons
• write any methods called by these methods

12
Declare components as attributes

• private JButton register, clear, exit
• private JLabel nameLabel
• private JTextField nameText
• private ButtonGroup programGroup
• private JRadioButton computingRadio, SERadio,
  ITRadio
• private JTextArea messageArea
• private String program "Computing"
• private School soc

13
Create components in constructor

• public RegisterStudentDialog(JFrame schoolApp,
  School s)
• super(schoolApp, "Register New Student", true)
  // parent frame, title, is it modal?
• soc s
• // create buttons, label and textfield
• register new JButton("Register")
• clear new JButton("Clear")
• exit new JButton("Exit")
• nameLabel new JLabel("Name")
• nameText new JTextField(30)

String for the button
what the label will say
width of TextField, in characters
14
Create components in constructor

• // create button group and radio buttons
• programGroup new ButtonGroup()
• computingRadio new JRadioButton("Computing")
  
• computingRadio.setActionCommand("Computing")
• // associated command
• computingRadio.setSelected(true)
• // show selected when Dialog first appears
• SERadio new JRadioButton("Software
  Engineering")
• SERadio.setActionCommand("Software
  Engineering")
• ITRadio new JRadioButton("Internet
  Technology")
• ITRadio.setActionCommand("Internet
  Technology")
• programGroup.add(computingRadio)
• programGroup.add(SERadio)
• programGroup.add(ITRadio)

15
Add listeners to buttons and radiobuttons

• // create text area for feedback
• messageArea new JTextArea("", 2, 30)
• messageArea.setEditable(false)
• messageArea.setLineWrap(true)
• // add listeners to buttons and radio buttons
• register.addActionListener(this)
• clear.addActionListener(this)
• exit.addActionListener(this)
• computingRadio.addActionListener(this)
• SERadio.addActionListener(this)
• ITRadio.addActionListener(this)

16
Add components to dialog

• Container cp getContentPane()
• cp.setLayout(new FlowLayout())
• cp.add(nameLabel)
• cp.add(nameText)
• cp.add(computingRadio)
• cp.add(SERadio)
• cp.add(ITRadio)
• cp.add(register)
• cp.add(clear)
• cp.add(exit)
• cp.add(messageArea)
• setSize(400,150)
• setLocation(100, 100)
• show()

17
actionPerformed() method for buttons and
radiobuttons

• public void actionPerformed(ActionEvent e)
• if (e.getSource() instanceof JButton)
• messageArea.setText("")
• JButton b (JButton)e.getSource()
• if (b register)
• registerStudent()
• else if (b clear)
• nameText.setText("")

18
actionPerformed() method for buttons and
radiobuttons

• else if (b exit)
• setVisible(false)
• dispose()
• else if(e.getSource() instanceof
  JRadioButton)
• program e.getActionCommand()

19
registerStudent() method

• public void registerStudent()
• String name nameText.getText()
• if (!name.equalsIgnoreCase("")
  !program.equalsIgnoreCase(""))
• Student stud new Student(name, program)
• if (soc.addStudent(stud))
• messageArea.setText(name "
  successfully added with program " program)
• else
• messageArea.setText("Sorry the school is
  full")
• nameText.setText("")
• else
• messageArea.setText("Enter student name and
  program")

20
Layouts

• this example used a FlowLayout object to manage
  the layout of components
• displays the components from left to right in the
  order they are added
• centres the line of components
• wraps to next line when first line is full
• alternative layout managers
• BorderLayout
• GridLayout
• GridBagLayout

21
BorderLayout

• components can be added to one of five regions
• only one component per region
• to add more, define a Panel object, add the
  components to the Panel, then add the Panel to
  the region

22
BorderLayout

• setLayout(new BorderLayout())
• add("Center", messageLabel)
• add("South", okButton)

23
GridLayout

• places components in rows and columns
• fills up left to right by row
• setLayout(new GridLayout(2,3))

24
GridBagLayout

• allows precise placement of components on a grid
  of cells
• components can occupy more than one cell
• component can occupy entire cell, or be padded
  with white spaces
• flexible but complicated!!

25
Class diagram
Interface
System
26
Designing the interface

• have a clear separation between interface
  (command line menu or GUI) and system code
• system code unchanged when interface changes
• can incrementally improve interface
• may need to implement more GUI classes
• keep it modular
• replace one use case at a time with GUI version
• don't be afraid to mix GUI and command line

27
Designing the interface

• think about GUI (or menu) design
• make flow charts
• when use case finishes, what happens next?
• user returned to previous menu?
• user has opportunity to repeat use case?
• there are many more Swing components
• but general principles same
• similar to
• awt components used in Applets
• VB GUI components
• for more info, see Swing tutorials on Sun website
• http//java.sun.com/docs/books/tutorial/uiswing/TO
  C.htmllearn

28
Further work

• Reading
• Malik and Nair
• Chapter 3 "Using Dialog Boxes for Input/Output"
  p. 113-120
• Chapter 6 "Graphical User Interfaces" p. 263-290
  
• Tutorial
• add Dialog box to School system
• add GUI components to your assignment system
• for Distinction
• don't attempt until you've fulfilled Pass and
  Merit criteria