Intro to Graphical User Interfaces GUIs

1
Intro to Graphical User Interfaces (GUIs)

• Rick Mercer

2
GUIs

• Most applications have graphical user interfaces
  to respond to user desires

3
A Few Graphical Components

• A Graphical User Interface (GUI) presents a
  graphical view of an application to users.
• To build a GUI application, you must
• Have a well-tested model that will be used
• Make graphical components visible to the user
• ensure the correct things happen for each event
• user clicks button, moves mouse, presses enter
  key, ...
• Let's first consider some of Java's graphical
  components
• windows, buttons, text fields, and text areas

4
Classes in the swing package

• The javax.swing package has components that show
  in a graphical manner
• JFrame window with title, border, menu,
  buttons
• JButton A component that can "clicked"
• JLabel A display area for a small amount of
  text
• JTextField Allows editing of a single line
  of text

5
Get a "window" to show itself

• Have a class extend javax.swing.JFrame
• Your new class inherits all the methods and
  instance variables for putting a window on the
  computer
• Add a main method to call the constructor
• Layout Set up the GUI in the constructor
• See program on the next slide

6
Can you see the "window"?

• Code to tell a window to show itself
• // Use any javax.swing component
• import javax.swing.
• public class FirstGUI extends JFrame
• public static void main(String args)
• JFrame aWindow new FirstGUI()
• aWindow.setVisible(true)
• public FirstGUI()
• layoutGUI() // The first of three things to
  do
• private void layoutGUI()
• setTitle("Graffiti")
• setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
  

7
Some JFrame messages

• Set the size and location of the window with
• setSize(200, 150) // 200 pixels wide, 150
  pixels tall
• setLocation(75, 40) // left 75, down 40

8
Building Graphical Components

• Add these three graphical components to the
  "content pane" of the JFrame
• private JLabel aLabel
• new JLabel("Change with
  setText(String)")
• private JTextArea textEditor
• new JTextArea("You can edit this text ")
• private JButton clickMeButton
• new JButton("Nobody is listening to me")

9
The 5 areas of BorderLayout

• By default, JFrame objects have only five places
  where you can add components a 2nd add wipes out
  the 1st
• This can be modified to other layouts
• Can use a javax.swing.JPanel to store a
  collection of graphical components to be treated
  as one

10
Add components to a window

• Add the previously constructed components to one
  of the five areas of a JFrame
• // Add components to the content pane
• Container cp this.getContentPane()
• cp.add(aLabel, BorderLayout.NORTH)
• cp.add(textEditor, BorderLayout.CENTER)
• cp.add(clickMeButton, BorderLayout.SOUTH)

11
Get Word Wrap

• Type into the JTextArea to see it will not wrap
  text as the default
• Then add these two messages
• textEditor.setLineWrap(true)
• textEditor.setWrapStyleWord(true)

12
Other useful JTextArea methods

• textEditor.setBackground(Color.CYAN)
• textEditor.setText( "first line" "\n"
• "second line" "\n"
• "3rd line")
• textEditor.setEditable(false)