![Page 1: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/1.jpg)
Lab 8: States and Transitions
User Interface Lab: GUI LabOct. 16th, 2013
![Page 2: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/2.jpg)
Flash Builder Expiring!
• Flash Developer for Windows• Eclipse for Macs
• Website will update with fxp/zip options
• Make sure to read instructions if using Eclipse!
![Page 3: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/3.jpg)
Hw2 Updated
• Due next Wednesday
• Added in states & transitions- making the Easy Button clickable.
![Page 4: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/4.jpg)
Project Proposal
• Also due next Wednesday!
• Main goal: communicate your project idea– Preliminary scheduling/outlining– Iterable!
• Extra office hours at request
![Page 5: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/5.jpg)
Lab 8 goals
• States
• Transitions
![Page 6: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/6.jpg)
defaultdefault hoverhover
pressedpressed
We’ve learned how to change the look of an UI component based on user’s actions using event handlers
![Page 7: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/7.jpg)
States
• Different looks of an UI component can be considered as different states of the component
• The component goes from one state to another based on different events
defaultdefault
hoverhover
pressedpressed
![Page 8: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/8.jpg)
Using states in Flex
• UI components– E.g., buttons– MXML component file
• The whole application– E.g., the application goes from a “login” state to a
“welcome” state– MXML application file
![Page 9: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/9.jpg)
State machine diagram
• Solid circles: start/end point
• Rectangles: states• Arrows: transitions
(directions, conditions)
![Page 10: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/10.jpg)
idleidle
hoverhover
pressedpressed
![Page 11: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/11.jpg)
State machine diagram
• States make it easier to conceptualize different sets of appearance and behaviors– A good practice is to draw
the design before you start to write code
– The diagram could later be used to explain your code to other people
![Page 12: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/12.jpg)
Steps
0. Design your state machine1. Define states2. Create the appearance of different states3. Set up transition using event handlers
![Page 13: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/13.jpg)
idleidle
hoverhover
pressedpressed
Step 0.
![Page 14: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/14.jpg)
Step 1: Define states
• Define three states for the MXML component: idle, hover, pressed
idleidle hoverhover pressedpressed
![Page 15: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/15.jpg)
Alternative State Definition
![Page 16: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/16.jpg)
Step 2: Create the appearance of different states
• Text shows the name of the current state• Background color: 0xdcdcdc, 0xe6e6fa, 0x8b8989
• Use attribute.state=“…” to assign values in different states – E.g., text.idle=“idle”
idleidle hoverhover pressedpressed
![Page 17: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/17.jpg)
Alternative Appearance Setting
• protected function draw():void { switch (state) { IDLE : {set color for IDLE}; break; … }
• }
![Page 18: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/18.jpg)
Step 3: Set up transitions using event handlers
• Based on the diagram, what event should we handle? – mouseover, mouseout,
mouseup, mousedown– Create these four event
handlers
![Page 19: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/19.jpg)
Step 3: Set up transition using event handlers
• The state of the component can be accessed in currentState
• Set initial state to be idle• Set the rest of the
transition based on the diagram
![Page 20: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/20.jpg)
Step 3: Set up transition using event handlers
idleidle hoverhover pressedpressed
![Page 21: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/21.jpg)
idleidle
hoverhover
pressedpressed
![Page 22: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/22.jpg)
idleidle
hoverhover
pressedpressed
mouseout
![Page 23: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/23.jpg)
idleidle
hoverhover
pressedpressed
pressedoutpressedout
(application)
![Page 24: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/24.jpg)
idleidle
hoverhover
pressedpressed
![Page 25: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/25.jpg)
View states for Application
• Application can go from one view to another based on user’s actions
• Let’s create a simple login interface– What is your state diagram?
![Page 26: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/26.jpg)
Login button Is clicked
Submit button Is clicked but
user name/passwor
d is missingSubmit button is clicked and both
user name & password are
entered
Logout button Is clicked
![Page 27: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/27.jpg)
Step 1: Define states
• Define four states
![Page 28: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/28.jpg)
Step 2: Create the appearance of different states
• Utilize the IDE!– Design view states pane– Code view state selection
• Use includeIn/excludeIn attribute to include/exclude a component in a state– Avoid redundant code– attribute.state still works!
![Page 29: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/29.jpg)
Step 3: Set up transition using event handlers
• Based on the diagram
• Change the value of a userName variable based on the current state
![Page 30: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/30.jpg)
Other State Diagram Examples
• Another common actions in an interactive UI – dragging.
• Moves an item or changes the size of an item
![Page 31: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/31.jpg)
Step 0.
Start
![Page 32: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/32.jpg)
Step 0.
Idle Dragging
Start
![Page 33: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/33.jpg)
Step 0.
Idle Draggingmousedown
mouseupmousemove
Start
![Page 34: Lab 8: States and Transitions User Interface Lab: GUI Lab Oct. 16 th, 2013](https://reader036.vdocuments.site/reader036/viewer/2022062421/56649c855503460f9493ba6c/html5/thumbnails/34.jpg)
Next time: Code Organization
• Very helpful for designing and organizing projects!