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