Chapter%207%20GUI%20design

1
Chapter 7 GUI design
2
So far this semester

• Have programmed in a stop and wait mode
• Program displays dialog box and waits for user to
  respond
• This was the way programs were previously created
  (back in my early days)

3
Modern design (Event driven)

• Todays users control the program
• They decide what they want to do next
• Users control the flow of the program
• Thing about MS word
• many options to choose from
• Programming in an event driven environment
  requires careful GUI design

4
Section 7.1 AWT, Swing

• GUI design is also a study of Object Orientation
• Creating GUI is done by using pre-existing
  objects
• Early versions of Java used AWT
• Java 1.2 introduced a new library called Swing

5
Swing versus AWT

• AWT matches corresponding components in the OS
• platform dependent
• Swing API looks the same on all platforms
• platform independent

6
AWT versus Swing

• AWT relies on the platform peer component to draw
  it.
• Swing uses components written entirely in Java is
  called lightweight component

7
Categories of Classes

• Swing GUI component
• AWT layout manager
• AWT event classes
• AWT listener classes
• Top of page 441

8
GUI component classes

• Includes windows objects
• buttons
• text fields
• menu items
• containers
• panels
• applets

9
Example

• See components bottom of page 441
• GUI design page 442

10
Hierarchy

• Page 443
• 4 abstract classes
• Container
• Component
• JComponent
• AbstractButton

11
Containers

• Containers hold components
• Panels are containers
• group components
• Windows are containers
• top level displayed by OS windows contains panels
• Applet is special kind of container
• Applet is contained in a window, specifically the
  browser

12
Browser applet Interaction

• Applet context is the browser or applet viewer
• Applets are caused to run in the browser via the
  applet tag
• bottom of page 444

13
Browser create object

• The browser instantiates your object and then
  calls init
• DistanceGUI dGUI new DistanceGUI()
• dGUI.init()
• When user loads different page or overlays
  browser calls stop
• When user returns calls start
• User exits browser calls destroy

14
Your task

• Properly override the init method in Japplet to
  perform the necessary tasks.
• See diagram top of page 446.

15
Designing your GUI

• This is the GUI we need to create

16
Adding components

• We need to add the components in the proper order
• See code pages 448 - 449

17
Order

• We declare as class data fields
• input
• output
• toKms
• toMiles
• need to be used though out the class

18
Order

• Declare as local variables (to init())
• inputLab
• dataPanel
• buttonPanel
• These are the objects we are placing in our GUI
  (this slide and previous)

19
Placing objects

• Now that we declared objects we must place them
  correctly
• First we set the layout manager
• We set this to FlowLayout (left to right) (top to
  bottom) more later
• We add components to the container via add()
  method
• We must add the components before adding the
  container.

20
Code

• dataPanel.add(inputLab)
• adds the inputLab label to the Panel
• dataPanel.add(input)
• adds the input field to the Panel
• getContentPane().add(dataPanel)
• What does getContentPane look like?
• Adds the dataPanel to the applets content pane

21
Data Panel
Input Label
Input Field has focus
22
Code

• input.requestFocus()
• puts the cursor in the input field it has focus
• code then repeats previous slide to add the
  buttons to the button panel and the panel to the
  pane

23
Code

• getContentPane().add(output)
• adds the output area to the pane

Output area
24
2 more important lines

• toMiles.addActionListener(this)
• toKms.addActionListener(this)
• Makes the buttons work
• Has them listen for user events
• More in next section 7.3

25
Extras

• Other methods exist to change components
  appearance
• component.setBackground(Color col)
• component.setForeground(Color col)
• component.setBorder(Border bor)

26
Example

• buttonPanel.setBorder(BorderFactory.
• createTitledBorder("Control Panel"))

27
Java Event Driven Model

• On the scale of cool, very cool or super
  cool
• Event driven programming is super cool
• Our program then responds to the user rather then
  the user responding to our program.

28
Java Event Model

• Haw events are handled is the event model.
• An event generator is an object that generates
  events.
• An event listener is an object that listens for
  and responds to events.
• The AWTEvent class handles these functions for
  Java

29
How to

• The event generator and event listener must know
  about each other for this to work.
• Must register itself with listener.
• // Register applet as listener for button
• toMiles.addActionListener(this)
• toKms.addActionListener(this)

30
Format

• generatorObject.addActionListener
• (listenerObject)
• ActionListener is an interface not a class
• A class must implement ActionListener

31
Now What?

• We have solved half the problem
• We have a listener registered for the generators
• Now we must make the program respond to these
  events

32
Interface

• Remember interfaces contain abstract methods.
• Implementers must define those methods
• ActionListener has one method
• actionPerformed(ActionEvent e)

33
Automatic

• actionPerformed method is called automatically
  when event occurs.
• You do not need to call this, java does this for
  you
• What do we want to do when event occurs?
• See code page 458

34
Methods and Objects

• See table of methods bottom page 459
• Doing GUI design is simply a matter of learning
  to use the java GUI classes and methods
• Swing
• AWT

35
BTW

• Did you notice something very cool about the
  applet?
• No loop but program continues running
• Just keeps responding to the event
• A built in loop until you exit the app

36
Section 7.4 GUI in application

• Creating a GUI application
• Use the same basic techniques as for Applet
• Basically 3 changes to our applet GUI will make
  it an application

37
Step 1

• Instead of extending JApplet we extend Jframe
• JFrame is a typical GUI window
• It has
• border
• title
• buttons, minimize, maximize, close

38
Step 2

• Replace the init() method with a constructor.
• The new constructor has the same body as init().
• Used when application creates an instance of the
  object.

39
Step 3

• Write a main method for the application class.
• Create the object and takes care of properly
  closing it when user closes window.

40
Example

• Code on pages 462-463 of text.
• Application class on 464.
• See running code in Jbuilder and a new way of
  testing our code.
• embed main method directly in the worker class.
• Creates instance of itself

41
Section 7.5 Making choices

• Look at Check boxes
• not mutually exclusive
• can check many
• Look at Radio buttons
• mutually exclusive
• can only check one

42
Check boxes

• Provide boolean data to program
• true (checked)
• false (not checked)
• See GUI page 465
• See code pages 466 467
• Run code in Jbuilder
• Also look at in HTML

43
Radio Buttons

• Since radio buttons are designed to be mutually
  exclusive
• can put radio buttons in a group
• only one can be picked
• swing class ButtonGroup
• ButtonGroup controls that can only select one

44
Code

• Code puts buttons into an array
• see page 469
• first create array of buttons
• for loop to
• put buttons on panel
• add buttons to group
• registers action listener
• Bottom loop to find one choosen

45
Code complete example

• Review code pages 470 471
• 3 arrays of radio buttons
• 3 groups of code to set these up
• actionPerformed checks array to see one choosen
• look at in HTML

46
Combo boxes

• Allows selection of one of many choices
• setSelectedIndex() returns index of the selection
  (starts with 0)
• Can initialize using arrays of strings
• can also use addItem to add individually
• Review code 472-473
• Look at in JBuilder

47
Review

• Methods for making choices
• page 475

48
Section 7.6

• This is our old friend the phone book class
• You looked at this several different time.
• They have now front-ended it with a GUI
• Review the code pages 480 - 483

49
Section 7.7 Inner classes

• Sometimes methods get quite lengthy
• For instance the actionPerformed()
• You can create separate listener classes
• respond to specific event
• respond to group of events
• These should be inner classes
• wholly contained in GUI class
• allows for referencing private data fields

50
Differences?

• Class visibility is private
• only used within the class
• Action event only for submit button
• do not need to check source
• already checked before sent to this class
• See code pages 486 487
• See code page 488

51
Changes to original

• The class (PhoneBookGUI) no longer implements
  ActionListener
• Bottom of page 488 shows code to register new
  inner classes as ActionListeners.
• Inner classes nested somewhere in Class
• Not in method
• typically at very beginning
• Or more likely at very end

52
Java Layout Managers

• Determines size and placements of objects
• Defaults
• Applet flow
• JApplet border
• Panel or JPanel flow
• Can change via setLayout()

53
Flow Layout

• Simplest
• Puts as many components in row as possible
• When row is filled go to next row
• In row components are centered (default), left or
  right justified

54
Border Layout

• Sets up 5 areas
• 1 component per area
• Can put a container (panel) with multiple
  components in an area
• See layout middle page 491

55
Box layout

• New layout in Swing
• Placement in
• single row (X_AXIS)
• single column (Y_AXIS)
• See example middle 492
• See total example pages 493 - 495

56
Grid Layout

• Allows use to create a 2d grid to place
  components.
• See 4x3 example top of page 497
• Code page 498 - 499

57
Payroll app

• Review application page 499 508
• Show GUI designer in Jbuilder
• new
• application
• then use designer tab
• create panel set flow manager to null
• add some controls

58
Common Programming errors

• Create listener for event generator
• Make sure you implement required interface.