fsa for tennis scorekeeping 40-15 40-0 30-0 0-15 0-0 15-30 0-30 0-40 15-0 15-15 30-15 b wins a wins...
Post on 21-Dec-2015
224 views
TRANSCRIPT
FSA for tennis scorekeeping
40-15
40-0
30-0
0-15
0-0
15-30
0-30
0-40
15-0
15-15
30-15
B WINS
A WINS
Adv B
Adv A
15-40
Deucestart
A
B
A
A
A
A
A
A
A
A
A
A
A
A
A
A
B
B
B
B
B
BB
B
B
B
B
B
B
B
UI design issues I
Mental processing requirements learning time concentration required user errors (minimize)
Allocation of functions user program other programs
UI design issues II
Mental models of system operation user expectations interface consistency
may limit extensibility physical analogies
continuous representation reversibility event-driven style
UI design issues III
Evolving user sophistication Choice vs. Confusion Multiple paths Customization
Varied User Environments Multiple Languages Cultural References Special User Needs/Handicaps
GUI Design I
Object-Oriented (OO) approach Modularity
Clear Division of Code into Pieces (Modules) Encapsulation
Modules can’t play with each others privates Abstraction
Simple, consistent Interfaces, complex, changeable Implementation
Inheritance (Design Hierarchies)
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
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.
PTA: components
Presentation What the user interacts with directly.
Translation Controls the behavior of the program
in response to user actions.
Application Core functionality
Presentation-Translation- App
PresUser Trans App MachineI/O
event
passing
method
invocation
method
invocation
value
returned
Note: Other arrow-labels are possible
Flow of Control
Input
ProcessingOutput
Translator (passed event)
Presentation Application
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
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)
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
Events and GUI’s
Multiple views of information can be simultaneously updated Easy to support multiple input paths (different ways for user to achieve same result)
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.
Putting it together
User
Pres App
Trans“set” methods “set” methods
“get” methods
private components
eventsevents
Java GUI Components
Sun’s Visual Index to Components Window: JFrame, JPanel, LayoutManager, JDialog Menu: JMenuBar, JMenu, JMenuItem Button: JButton Display: JLabel
Guide to Components
Title link takes you to Sun’s “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.
Swing Component Hierarchy
JComponent
AbstractButton
JButton
JTextComponent
Object
Component
Container
JMenu
JMenuItem JToggleButtonJPanel
JFrame
Frame
Window
Dialog
JDialog(unfinished)
JFrame
Good parent class for an app. By default, hides on close. Must override to destroy. Primary sub-parts: Titlebar, Menubar, ContentPane
JDialog
OptionPane subclass is handy, disposable. Design choices: Modal or not? Also: Is this dialog necessary or annoying? (Quit? Are you sure? Really?)
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.
JPanel
Subclass this to create Viewer components which display part or all of your App’s data. The contentPane of a JFrame is a JPanel. It can also contain smaller JPanels. Example
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.
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
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
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.
Putting it together
User
Pres App
Trans“set” methods “set” methods
“get” methods
private components
eventsevents
MyClock
main
JFrame
trans
pres
app
MyClock
listeners
ClockApplication
incHour/Minute/Second
tim
calsetHour/Minute/Second
Object
getHour/Minute/Second
val
int
listener
listener
ActionEvent “tick”
“tick”
removeActionListener
addActionListener
ClockPresentation
JPanel
hourButton
minButton
secButton listeners (ClockTranslators)
ActionEvent “increment”
valsetHour/Minute/Second
ClockPresentation translator
removeActionListener
addActionListener listener
listener
ClockTranslator
Object
app
pres
ClockTranslator
actionPerformed
clockappclockpres
ActionEvent e
Happy 4th of July!
Next lecture will be July 11. We will make up the missed lecture later in the quarter. Assignment