Propositional Production Systems

State Space

• State space: The set of actions possible in a user interface, defined by a set of fields. In most cases the state space is partitioned into a set of controller state spaces, one controller per widget.

• Field: Set of mutually exclusive conditions (or values). Each field is assigned one of its values. The collection of values gives the state of the system.

Example – Fields

Two fields of a controller of a widget with their values listed in { } may be:

Color {Black, White, Red}

Size {Small, Medium, Large}

Input Events

Widget controllers react to events performed by the user. These inputs are described by the Input field and additional fields to specify button states.

The values of the Input field are events and are distinguished by a leading bullet .

Input Events (2)

Input {MouseDown (one of the mouse buttons is pressed),

MouseUp (one of the mouse buttons is released),

MouseMove (mouse position is changed),

MouseEnter (mouse position enters a subwindow),

MouseExit (mouse position enters a subwindow),

Keypress (from keyboard)

}

Input Events (3)

Button state fieldsShiftKey {Shift, NoShift}ControlKey {Cntl, NoCntl}LeftButton {LeftDown, LeftUp}MiddleButton {MiddleDown, MiddleUp}RightButton {RightDown, RightUp}

and possibly others

Exercises (1)

1. Why do we not use the simpler condition names of down and up for all the buttons?

2. Write the field values that represent discovering what an icon means by displaying its tag.

3. Write the field values that represent clicking on an OK button.

Exercises (2)

4. Write the field values that represent dragging a folder on the desktop to the Recycle Bin.

5. What key fields are missing from the Input event definition?

6. Give the field values that represent choosing the File menu with the keystroke shortcut.

Actions

Widget controllers may have actions that they can perform. For example, a button controller for a Search button should, when pressed, invoke the search process.

There may be more than one Action field if several actions can be carried out simultaneously.

The values of an Action field are distinguished by a leading exclamation point ! .

Actions (2)

Examples:

FileAction { !PrintFile, !DeleteFile,

!CopyFile }. Shows that one must choose only one of the three actions to perform.

Action { !Import }

Outside Events

Frequently two widget controllers will want to communicate with one another.

The values of a field describing an outside event are distinguished by a leading greater than sign > showing information coming to a controller or by a trailing greater than sign > showing information being sent to another controller.

Outside Events (2)

Examples:

EnDis { >Enable, >Disable}

Shows that the widget controller accepts an outside message to enable or disable itself.

Outside Events (3)

Example: A scroll bar needs to report its state to its parent window.

TellParent { Scroll>, StepUp>, StepDown>, PageUp>, PageDown>}

Productions

Productions are rules that show how the field values of the controller state space change.

Productions are written in the form

V1, V2,…, Vp W1, W2,…, Wq

where Vi is the initial value (or condition) of a field and Wj is the resulting value of a field. Because all field values are required to have unique names, the field names do not appear in the productions.

Productions (2)

Example:MouseUp, Shift !DoMultipleSelect,

InSelectModesays if the Input field has value MouseUp

and the ShiftKey field has value Shift, then set the Action field to !DoMultipleSelect (thus performing the action) and set another field to InSelectMode

Simple Button

A simple button is a window area that will invoke an action whenever MouseUp occurs in the area.

The controller state space for a simple button is defined by two fieldsAction { !Import }Input {MouseDown, MouseUp, MouseMove ,MouseEnter, MouseExit, Keypress }and one production

MouseUp !Import

Button Fields

• Input { }

• LeftButton { LeftUp, LeftDown }

• VisualState { Inactive, Active, Disabled}

• Action { !Extract }

• DamageAction { !DamageAll }

• OutsideAction { >Enable, >Disable }

Example

Location Input LeftButton• A MouseMove LeftUp• B MouseEnter LeftUp• C MouseDown LeftDown• D MouseMove LeftDown• E MouseUp LeftUp• F MouseMove LeftUp• G MouseExit LeftUp• H MouseMove LeftUp

Button Rules (Productions)

1. MouseDown, LeftDown, Inactive Active, !DamageAll

2. MouseUp, LeftUp, Active Inactive, !Extract, !DamageAll

3. >Disable Disabled, !DamageAll

4. >Enable, LeftDown Active, !DamageAll

5. >Enable, LeftUp Inactive, !DamageAll

Button Rules (2)

6. MouseExit, Active Inactive, !DamageAll

7. MouseEnter, LeftDown, Inactive Active, !DamageAll

Button: Exercises

1. Write the rules that describe the behavior of the Minimize button when it is pointed to.

2. Write the rules that describe the behavior of a button whose view does not change when it is pointed to.

3. Write the rules that describe the behavior of the Folders button in Windows Explorer when it is pointed to and the left mouse button is pressed.

Button: Exercises (2)

4. Write the rules that describe the behavior of the Folders button in Windows Explorer when the cursor is moved off the button while the left mouse button is pressed.

5. Write the rules that describe the behavior of the Folders button in Windows Explorer when it is pointed to and clicked.

Query Fields

• A query field describes information the widget controller needs from the View. Each field represents one type of information, with one of several values. E.g., the following field checks the mouse location for a scroll bar.

Mouse Location { ?InSlider, ?InPageUp,

?InPageDown, ?InStepUp, ?InStepDown }

Query Fields: Exercises

1. Write a query field to work with a dialog box with drop down menu.

2. Write a query field to work with a pane separator.

Text Box Fields

SelectionQuery { ?SelectedPoint, ?SelectedRange}

SelectionAction { !SetSelectStart, !SetSelectEnd, !OrderSelection }

State { Inactive, Dragging }

KeyQuery { ?DeleteKey, ?LeftArrow, ?RightArrow, ?NormalKey }

EditAction { !DeleteSelectedRange, !DeletePreviousChar, !InsertChar, !DecrementSelection, !IncrementSelection }

Text Box Productions

1. -MouseDown, LeftDown, Inactive !GrabMouseFocus, !SetSelectStart, Dragging

2. -MouseMove, Dragging !SetSelectEnd

3. -MouseUp, LeftUp, Dragging !ReleaseMouseFocus, !SetSelectEnd, !OrderSelection, Inactive

4. -MouseDown, LeftDown, Inactive !GrabKeyFocus

5. -KeyPress, ?DeleteKey, ?SelectedRange !DeleteSelectedRange

Text Box Productions

6. -KeyPress, ?DeleteKey, ?SelectedPoint !DeletePreviousChar

7. -KeyPress, ?LeftArrow !DecrementSelection

8. -KeyPress, ?RightArrow !IncrementSelection

9. -KeyPress, ?NormalKey, ?SelectedRange !DeletedSelectedRange, !InsertChar

10. -KeyPress, ?NormalKey, ?SelectedPoint !InsertChar

Text Box: Exercises (1)

1. Verify the productions (or change them as necessary) for the Named text box in the Find All Files window.

2. Verify the productions (or change them as necessary) for the text box that opens renaming a file in Windows Explorer.

3. Verify the productions (or change them as necessary) for the Location text box in Netscape.

Text Box: Exercises (2)

4. For Raskin’s design principles that describe interactions with text boxes, construct productions that codify these interactions.

5. For the course design principles that describe interactions with text boxes, construct productions that codify these interactions.

Text Box: Exercises (3)

6. Construct productions to describe the action that fills in a text box with a default character and leaves the character selected when one tabs to the next box.

7. Construct productions to describe the action that deselects a text string when either the right arrow or left arrow key is pressed.