1. 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 Deuce start A B A A A A A A A A A A A A A A B B B B B B B B B B B B B 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 can’t 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 User TransApp Machine I/O event passing method invocation method invocation value returned Note: Other arrow-labels are possible

10. Flow of Control Input Processing Output Translator (passed event) Presentation Application

11. Slight modification to Culwin: Add a 4 th 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 GUI’s 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 User Pres App Trans “set” methods “get” methods private components events

17. Java GUI Components Sun’s 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 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.

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

20. JFrame Good parent class for an app. By default, hides on close. Must override to destroy. override 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.Nest Panels

23. 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

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)setAccelerator, setMnemonic PopupMenus

26. JTextComponent JTextField for up to 1 line. Also JPasswordField, which echoes *’s.JTextField 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 User Pres App Trans “set” methods “get” methods private components events

29. MyClock main JFrame trans pres app MyClock

30. listeners ClockApplication incHour/Minute/Second tim cal setHour/Minute/Second Object getHour/Minute/Second val int listener ActionEvent “tick” “tick” removeActionListener addActionListener

31. ClockPresentation JPanel hourButton minButton secButton listeners (ClockTranslators) ActionEvent “increment” val setHour/Minute/Second ClockPresentation translator removeActionListener addActionListener listener

32. ClockTranslator Object app pres ClockTranslator actionPerformed clockapp clockpres ActionEvent e

33. Happy 4 th of July! Next lecture will be July 11. We will make up the missed lecture later in the quarter. Assignment