CMPUT 301: Lecture 30 Dialog Notations and Design

1. CMPUT 301: Lecture 30Dialog Notations and Design Ken Wong Department of Computing Science University of Alberta 2001-11-21

2. Textual Notations • Selected kinds: • grammars • production rules

3. Example • Creating a polyline: • select line item from palette • click first point • click a second point • … • double click last point

4. Grammars • BNF: • Backus-Naur Form • a notation that specifies a grammar or syntax for a language • e.g., valid command lines • e.g., valid source code • e.g., valid user/computer dialogs

5. Grammars • BNF: • non-terminals • terminals (lowest-level symbols) • metacharacters ::= is defined as (can be replaced by) + sequence (or use space) | choice • left-hand-side ::= right-hand-side

6. Grammars • BNF • recursive definitions for iteration some-things ::= thing | thing some-things • EBNF • extended BNF (for readability) some-things ::= thing+

7. EBNF notation: () grouping | alternate * zero or more occurrences + one or more occurrences {} list of alternates [] optional items zero or one occurrences Grammars

8. Grammars • BNF for creating a polyline: • draw-line ::= select-line choose-points last-pointselect-line ::= position-mouse CLICK-MOUSEchoose-points ::= choose-one | choose-one choose-pointschoose-one ::= position-mouse CLICK-MOUSElast-point ::= position-mouse DBL-CLICK-MOUSEposition-mouse ::= empty | MOVE-MOUSE position-mouse

9. Grammars • EBNF for creating a polyline: • draw-line ::= select-line choose-one+ last-pointselect-line ::= position-mouse CLICK-MOUSEchoose-one ::= position-mouse CLICK-MOUSElast-point ::= position-mouse DBL-CLICK-MOUSEposition-mouse ::= MOVE-MOUSE*

10. EBNF • Interaction: • select line item from palette • MOVE-MOUSE, CLICK-MOUSE • click first point • MOVE-MOUSE, CLICK-MOUSE • click a second point • MOVE-MOUSE, CLICK-MOUSE • double click last point • MOVE-MOUSE, DBL-CLICK-MOUSE

11. EBNF • Creating a polyline: • draw-line ::= select-line choose-one+ last-pointselect-line ::= MOVE-MOUSE* CLICK-MOUSEchoose-one ::= MOVE-MOUSE* CLICK-MOUSElast-point ::= MOVE-MOUSE* DBL-CLICK-MOUSE

12. EBNF • Derivation: • draw-line • select-linechoose-one+last-point • MOVE-MOUSE* CLICK-MOUSEchoose-one+last-point • MOVE-MOUSE CLICK-MOUSEchoose-one+last-point • MOVE-MOUSE CLICK-MOUSEchoose-onechoose-onelast-point

13. EBNF • Derivation: • MOVE-MOUSE CLICK-MOUSEMOVE-MOUSE* CLICK-MOUSEchoose-onelast-point • MOVE-MOUSE CLICK-MOUSEMOVE-MOUSE CLICK-MOUSEchoose-onelast-point • MOVE-MOUSE CLICK-MOUSEMOVE-MOUSE CLICK-MOUSEMOVE-MOUSE* CLICK-MOUSElast-point • MOVE-MOUSE CLICK-MOUSEMOVE-MOUSE CLICK-MOUSEMOVE-MOUSE CLICK-MOUSElast-point

14. EBNF • Derivation: • MOVE-MOUSE CLICK-MOUSEMOVE-MOUSE CLICK-MOUSEMOVE-MOUSE CLICK-MOUSEMOVE-MOUSE* DBL-CLICK-MOUSE • MOVE-MOUSE CLICK-MOUSEMOVE-MOUSE CLICK-MOUSEMOVE-MOUSE CLICK-MOUSEMOVE-MOUSE DBL-CLICK-MOUSE

15. Grammars • Regular expressions: • specifies the structure of lexical elements • e.g., valid Java identifiers • less expressive than BNF • e.g., cannot express matching brackets (of arbitrary depth of nesting) • can be implemented using a finite state machine • e.g., use lex tool • not “wildcard” expressions

16. A regexp notation: () grouping | alternates * zero or more + one or more . any character ^ beginning of line $ end of line [] range \ escape Regular Expressions

17. Regular Expressions • Examples: • a postal code [A-Z][0-9][A-Z] [0-9][A-Z][0-9] • a positive integer (unlimited digits) [0-9]+ • a Java identifier [_a-zA-Z][_a-zA-Z0-9]* • sometimes useful at low-level dialogs select-line click click* double-click

18. Production Rules • Notation: • if condition then action • condition  action • condition: action

19. Production Rules • How: • conditions of all rules are matched against occurring events and/or current state (user and/or system) • any and all matching rules fire to execute the corresponding actions • foundation of rule-based systems

20. Event-Oriented Production Rules • Events: • user • e.g., user clicking mouse • internal • e.g., for keeping track of dialog state • system response • e.g., visible or audible system feedback

21. Event-Oriented Production Rules • Creating a polyline: • Select-line  start-line <highlight ‘line’>C-point start-line  rest-line <rubber band on>C-point rest-line  rest-line <draw line>D-point rest-line  <draw line> <rubber band off> • Event notation: • User-event • internal-event • <system response>

22. Event-Oriented Production Rules • User events: • select line item from palette • Select-line • click first point • C-point • click a second point • C-point • double click last point • D-point

23. Event-Oriented Production Rules • System response events: • select line item from palette • <highlight ‘line’> • click first point • <rubber band on> • click a second point • <draw line> • double click last point • <draw line> <rubber band off>

24. Event-Oriented Production Rules • Creating a polyline: • Select-linestart-line <highlight ‘line’>C-point start-linerest-line <rubber band on>C-point rest-linerest-line <draw line>D-point rest-line<draw line> <rubber band off> • Note: • system events are removed once processed

25. Event-Oriented Production Rules • Memory of events: • Select-line • start-line <highlight ‘line’> • start-line • start-line C-point • rest-line <rubber band on> • rest-line • rest-line C-point • rest-line <draw line> • rest-line • rest-line D-point • <draw line> <rubber band off>

26. State-Oriented Production Rules • Attributes and states: • Mouse:{ mouse-off, select-line, click-point, double-click } • Line-state:{ menu, start-line, rest-line } • Rubber-band:{ rubber-band-off, rubber-band-on } • Draw:{ draw-nothing, draw-line }

27. State-Oriented Production Rules • Creating a polyline: • select-linemouse-off start-lineclick-point start-linemouse-off rest-line rubber-band-onclick-point rest-linemouse-off draw-linedouble-click rest-linemouse-off menu draw-line rubber-band-off • Note: • attribute values are removed when a new value is set

28. State-Oriented Production Rules • Memory of state: • mouse-off menu draw-nothing rubber-band-off • select-line menu draw-nothing rubber-band-off • mouse-off start-line draw-nothing rubber-band-off • click-point start-line draw-nothing rubber-band-off • mouse-off rest-line draw-nothing rubber-band-on • click-point rest-line draw-nothing rubber-band-on • mouse-off rest-line draw-line rubber-band-on • double-clickrest-line draw-line rubber-band-on • mouse-off menu draw-line draw-line rubber-band-off

29. Production Rules • Mixing events and state: • event: condition  action • Note: • the event must occur and the condition must be true for the rule to fire

30. Production Rules • State: • Bold: { off, on } • Italic: { off, on } • Underline: { off, on } • Events and conditions: • click-bold: Bold=off  Bold=onclick-bold: Bold=on  Bold=offclick-italic: Italic=off  Italic=onclick-italic: Italic=on  Italic=offclick-underline: Underline=off  Underline=onclick-underline: Underline=on  Underline=off

31. Production Rules • Issues: • better able to handle concurrency • somewhat awkward at handling sequential dialogs • start-line, rest-line

32. Human-Computer Interaction A. Dix et al. Prentice Hall, 1998 [d8] References