Intro to GUI programming with Java

1
Intro to GUI programming with Java
2
Model-View-Controller architectural design
pattern

• Good designs separate data (the model) from its
  presentation (the view)
• MVC pattern
• Provides for a good way to partition work and
  create a modular design
• Provide multiple ways to look at the same
  information
• MVC componets
• Model
• Data storage, no presentation elements
• View
• No data storage, presentation elements
• Controller
• Glue to tie the model and the view together

3
Source sun.com
4
Model

• aka Data Model
• Application state (e.g., storage), not
  presentation
• Knows data, not pixels
• Support data model operations
• E.g., file saving, history, password, networked
  data
• All operations on the model
• Work out logic for manipulating chat data (e.g.,
  storage of chat history) without worrying about
  pixels

5
View / Controller

• View
• Presentation layer
• Gets relevant data from the model
• and renders it for the user
• Controller
• The logic that glues things together
• Manage the relationship between the model and the
  view
• Most data changes are initiated by user events.
  Translated into messages to the model
• The view needs to hear about changes. This is
  done in Java using Listeners

6
Model Role

• Respond to getter methods to provide data
• Respond to setters to change data
• Manage a list of listeners
• When data changes notify call listeners to notify
  the change
• Iterate through the listeners and notify each
  about the change
• fireXXXChanged()

7
A possible source of confusion

• Model-View-Controller design is applied at two
  levels
• Your own code should use this design
• Java GUIs (Swing) components use the design
  themselves

8
Java and practical issues
9
Coding by hand vs. GUI editors

• You still need to understand the basics
• --gt Build at least one GUI by hand
• GUI editor pros
• Programming productivity
• GUI editor cons
• Learning curve
• Possible vendor lock-in
• Complex layouts still require good understanding
  of swing concepts.

10
AWT vs. Swing

• AWT Abstract Windowing Toolkit
• import java.awt.
• AWT drawing uses "native peers" -- creating an
  AWT button creates a native peer (Unix, Mac,
  Win32) button to put on screen, and then tries to
  keep the AWT button and the peer in sync.
• Advantage an AWT app has the "native" appearance
  for buttons etc. since there are in fact native
  buttons on screen.
• Disadvantage very hard to implement in a
  reliable way -- keeping peers consistent on all
  platforms.
• Swing new with Java2
• import javax.swing.
• Extends AWT
• Standard dialog boxes, tooltips,
• Look-and-feel, skins
• Event listeners
• API http//java.sun.com/j2se/1.5.0/docs/api/

11
GUI Component API

• Java GUI component class
• Properties
• Methods
• Events

JButton
12
Using a GUI Component

• Create it
• Instantiate object b new JButton(press
  me)
• Configure it
• Properties b.text press me
• Methods b.setText(press me)
• Add it
• panel.add(b)
• Listen to it
• Events Listeners

JButton
13
Anatomy of an Application GUI
GUI
Internal structure
JFrame
JFrame
JPanel
containers
JPanel
JButton
JButton
JLabel
JLabel
14
Using a GUI Component (II)

• Create it
• Configure it
• Add children (if container)
• Add to parent (if not JFrame)
• Listen to it

the order ISimportant
15
Build from bottom up

• Create (order indifferent)
• Frame
• Panel
• Components
• Listeners
• Build (aggregate bottom up)
• listeners into components
• components into panel
• panel into frame

Listener
JButton
JLabel
JPanel
JFrame
16
Code

• JFrame f new JFrame(title)
• JPanel p new JPanel( )
• JButton b new JButton(press me)
• p.add(b) // add button to panel
• f.setContentPane(p) // add panel to frame
• f.setVisible (true)

press me
17
(trivial) Application Code

• import javax.swing.
• class hello
• public static void main(String args)
• JFrame f new JFrame(title)
• JPanel p new JPanel()
• JButton b new JButton(press me)
• p.add(b) // add button to panel
• f.setContentPane(p)// add panel to frame
• f.setVisible (true)

18
Layout Managers

• Automatically control placement of components in
  a panel
• Why?

19
Layout Manager Heuristics
FlowLayout
GridLayout
null
Left to right, Top to bottom
none, programmer sets x,y,w,h
GridBagLayout
BorderLayout
CardLayout
n
c
One at a time
JButton
e
w
s
20
Combinations
JButton
JButton
JTextArea
21
Combinations
JButton
JButton
JFrame
n JPanel BorderLayout c
JPanel FlowLayout
JTextArea
22
Our code so far null layout

• JFrame f new JFrame(title)
• JPanel p new JPanel( )
• JButton b new JButton(press me)
• b.setBounds(new Rectangle(10,10, 100,50))
• p.setLayout(null) // x,y layout
• p.add(b)
• f.setContentPane(p)

press me
23
Code FlowLayout

• JFrame f new JFrame(title)
• JPanel p new JPanel( )
• FlowLayout L new FlowLayout( )
• JButton b1 new JButton(press me)
• JButton b2 new JButton(then me)
• p.setLayout(L)
• p.add(b1)
• p.add(b2)
• f.setContentPane(p)
• Set layout mgr before adding components

press me
then me
24
(Recap) Using a GUI Component

• Create it
• Configure it
• Add children (if container)
• Add to parent (if not JFrame)
• Listen to it

the order ISimportant
25
Callbacks (again)

• JButton b new JButton()
• b.addActionListener(new MyButtonListener())
• A listener implements ActionListener interface
• sole method void actionPerformed (ActionEvent e)
  
• class MyButtonListener implements ActionListener
  
• void actionPerformed(ActionEvent e)
• CALLBACK your code to
• -- obtain the details of the event, and
• -- react appropriately
• Often implemented an inner class if you need
  access to otherwise private fields in the GUI

26
Example
27
Summary

• Model-View-Controller design
• Building GUIs form individual components
• Create component
• Configure it
• Add children (if container)
• Add to parent (if not JFrame)
• Listen to it
• -- Another use of callbacks again

28
Discussion

• Build GUI in main() vs. JFrame or JPannel
  subclass
• Threading at least three threads that are
  typically used in a GUI application.
• Initial thread - This is the thread that start
  main. Stops when main returns.
• Event Dispatch Thread (EDT) - Initializes and
  runs the GUI, and calls listeners.
• Worker threads - These should be started for any
  slow listener.

29
Backup slides
30
Clean initialization

• import javax.swing.
• //////////////////////////////////////////////////
  //// class TinyWindow2
• class TinyWindow2T extends JFrame
• //
  method main
• public static void main(String args)
• SwingUtilities.invokeLater(new Runnable()
  //Note 1
• public void run()
• TinyWindow2T window new
  TinyWindow2T()
• window.setVisible(true)
• )
• //
  constructor
• public TinyWindow2T()
• //... Set window characteristics
• setTitle("Tiny Window using JFrame
  Subclass")