FSA for tennis scorekeeping

1
FSA for tennis scorekeeping
A WINS
A
40-0
A
A
B
A
40-15
30-0
A
B
B
A
30-15
15-0
Adv A
B
B
A
A
A
start
B
15-15
Deuce
0-0
A
B
B
B
A
15-30
A
Adv B
0-15
B
A
A
B
15-40
0-30
B
A
B
B
0-40
B WINS
B
2
UI design issues I

• Mental processing requirements
• learning time
• concentration required
• user errors (minimize)
• Allocation of functions
• user
• program
• other programs

3
UI design issues II

• Mental models of system operation
• user expectations
• interface consistency
• may limit extensibility
• physical analogies
• continuous representation
• reversibility
• event-driven style

4
UI design issues III

• Evolving user sophistication
• Choice vs. Confusion
• Multiple paths
• Customization
• Varied User Environments
• Multiple Languages
• Cultural References
• Special User Needs/Handicaps

5
GUI Design I

• Object-Oriented (OO) approach
• Modularity
• Clear Division of Code into Pieces (Modules)
• Encapsulation
• Modules cant play with each others privates
• Abstraction
• Simple, consistent Interfaces,
• complex, changeable Implementation
• Inheritance (Design Hierarchies)

6
GUI Design II

• Front End (UI) must be separate from Back End
  (Application)
• Flexibility (upgrades, extensions, ports)
• Maintainability
• Elegance
• Natural choice of modules
• User view form vs. functionality
• Cleaner code

7
GUI Design III

• Take this one step further
• Presentation, Translation, Application
• Object-Oriented approach leads us to think of the
  front-end components as objects, to which
  functionality is attached.
• Form (Presentation) vs. functionality
  (Translation) within the UI.

8
PTA components

• Presentation
• What the user interacts with directly.
• Translation
• Controls the behavior of the program in
  response to user actions.
• Application
• Core functionality

9
Presentation-Translation- App
Pres
Trans
App
method invocation
event passing
Machine
User
I/O
method invocation
value returned
Note Other arrow-labels are possible
10
Flow of Control
Translator (passed event)
Input
Processing
Output
Application
Presentation
11
Slight modification to Culwin

• Add a 4th component the Program.
• The Program creates Window, and handles
  initialization of the other 3 components
  Application, Presentation, Translator. Culwin
  includes this functionality in the Translator.
• Example MyClock

12
Intro to Events

• Events an alternative to direct method
  invocation. Advantages
• Details moved from code to object.
• Flexibility about what methods are invoked, and
  of what objects.
• Introspection
• Events (intro, SUN)
• Event Listeners (more advanced, SUN)

13
Event passing (Java)

• Three key players
• Event generators
• Events
• Event listeners (a.k.a. event handlers)
• Flexible
• One-to-many (broadcast)
• Many-to-one (can do this with method invocation)
• Combinations of the above

14
Events and GUIs

• Multiple views of information can be
  simultaneously updated
• Easy to support multiple input paths (different
  ways for user to achieve same result)

15
Advice Putting it together

• App, then Presentation, then Translation.
• App must have methods which allow the invoker to
  control its behavior.
• Pres must have methods which allow the invoker
  to control the display.
• Pres should contain some smart GUI components,
  which are capable of generating user-driven
  events. Trans gets registered as a listener with
  these components.

16
Putting it together
App
Pres
set methods
set methods
get methods
User
events
events
private components
17
Java GUI Components

• Suns Visual Index to Components
• Window JFrame, JPanel, LayoutManager, JDialog
• Menu JMenuBar, JMenu, JMenuItem
• Button JButton
• Display JLabel

18
Guide to Components

• Title link takes you to Suns how-to page for
  each component. This contains links to the
  component API, demo code, and related pages.
• My additional comments and links are below.

19
Swing Component Hierarchy
Object
Component
Window
Container
Frame
Dialog
JComponent
JFrame
JDialog
(unfinished)
AbstractButton
JTextComponent
JButton
JMenuItem
JToggleButton
JPanel
JMenu
20
JFrame

• Good parent class for an app.
• By default, hides on close. Must override to
  destroy.
• Primary sub-parts Titlebar, Menubar, ContentPane

21
JDialog

• OptionPane subclass is handy, disposable.
• Design choices Modal or not? Also Is this
  dialog necessary or annoying? (Quit? Are you
  sure? Really?)

22
LayoutManager

• Controls how Components are added to a
  Container. This should be used for almost all
  positioning needs.
• FlowLayout is default. GridLayout also very
  easy to use. BorderLayout, CardLayout,
  GridBagLayout more complex but sometimes useful.
• Nest Panels inside one another to achieve
  complex layout effects.

23
JPanel

• Subclass this to create Viewer components which
  display part or all of your Apps data.
• The contentPane of a JFrame is a JPanel. It can
  also contain smaller JPanels.
• Example

24
JButton

• Can attach text and/or graphics
• Can control size and display style
• Add to container using add() method
• Set up events using setActionCommand and
  addActionListener.
• setEnabled() to toggle on/off.
• keyboard shortcuts, ToolTips also nice.

25
Menus

• Menus can also be MenuItems.
• MenuItems can have graphics attached. Can be
  checkable.
• MenuItems can have 2 types of keyboard shortcuts
  attached (setAccelerator, setMnemonic)
• PopupMenus

26
JTextComponent

• JTextField for up to 1 line. Also
  JPasswordField, which echoes s.
• JTextArea for unlimited text input.
• Reference
• More Examples
• Text Summary
• Advanced Text Concepts

27
Advice Putting it together

• App, then Presentation, then Translation.
• App must have methods which allow the invoker to
  control its behavior.
• Pres must have methods which allow the invoker
  to control the display.
• Pres should contain some smart GUI components,
  which are capable of generating user-driven
  events. Trans gets registered as a listener with
  these components.

28
Putting it together
App
Pres
set methods
set methods
get methods
User
events
events
private components
29
JFrame
MyClock
MyClock
app
main
pres
trans
30
Object
ClockApplication
incHour/Minute/Second
cal
setHour/Minute/Second
val
getHour/Minute/Second
int
tick
listener
addActionListener
listener
removeActionListener
tim
listeners
ActionEvent tick
31
JPanel
ClockPresentation
translator
ClockPresentation
val
setHour/Minute/Second
listener
addActionListener
listener
removeActionListener
hourButton
ActionEvent increment
minButton
secButton
listeners (ClockTranslators)
32
Object
ClockTranslator
clockapp
ClockTranslator
app
clockpres
pres
actionPerformed
ActionEvent e
33
Happy 4th of July!

• Next lecture will be July 11. We will make up
  the missed lecture later in the quarter.
• Assignment