Robot legs workshop extra session navigator-as3
•Download as KEY, PDF•
3 likes•3,906 views
This document introduces the Navigator-AS3 library for handling navigation and state management in Flex applications. It discusses key concepts like navigation state, current state, state containment, and behavior interfaces. It also covers how Navigator-AS3 integrates with frameworks like RobotLegs to allow just-in-time instantiation of actors, views, and commands for each navigation state. Examples of real-world applications using this approach are provided.
More Related Content
Viewers also liked
Similar to Robot legs workshop extra session navigator-as3
Similar to Robot legs workshop extra session navigator-as3 (20)
Recently uploaded
Recently uploaded (20)
Robot legs workshop extra session navigator-as3
- 1. Navigator-AS3 /navigation/made/f/*/simple/ http://github.com/epologee/navigator-as3
- 2. Worth listening? ■ Introduction to Navigator ■ Example I - Simple Navigator ■ Example II - RobotLegs Navigator
- 4. Don’t repeat yourself? ■ Every multi-view app needs navigation
- 5. Don’t repeat yourself? ■ Every multi-view app needs navigation ■ Most multi-view apps need transitions
- 6. Don’t repeat yourself? ■ Every multi-view app needs navigation ■ Most multi-view apps need transitions ■ How many times have you written code for handling async transitions?
- 7. Don’t repeat yourself? ■ Every multi-view app needs navigation ■ Most multi-view apps need transitions ■ How many times have you written code for handling async transitions? ■ How many exceptions were implemented afterwards, that should’ve been known up front? (deeplinks, anyone?)
- 8. Don’t repeat yourself? ■ Every multi-view app needs navigation ■ Most multi-view apps need transitions ■ How many times have you written code for handling async transitions? ■ How many exceptions were implemented afterwards, that should’ve been known up front? (deeplinks, anyone?) ■ March 2010...
- 10. Navigation State ■ A state looks /like/a/url/
- 11. Navigation State ■ A state looks /like/a/url/ ■ /we/call/these/segments/
- 12. Navigation State ■ A state looks /like/a/url/ ■ /we/call/these/segments/ ■ Words, numbers or wildcard *
- 14. NavigationState.as ■ Fancy wrapper for dealing with string paths
- 15. NavigationState.as ■ Fancy wrapper for dealing with string paths ■ “aa//b B/C/5” → /aa/b-b/c/5
- 16. NavigationState.as ■ Fancy wrapper for dealing with string paths ■ “aa//b B/C/5” → /aa/b-b/c/5 ■ /a/ .add(“b”) → /a/b/
- 17. NavigationState.as ■ Fancy wrapper for dealing with string paths ■ “aa//b B/C/5” → /aa/b-b/c/5 ■ /a/ .add(“b”) → /a/b/ ■ /a/b/c/ .contains(“/a/”) → true
- 18. NavigationState.as ■ Fancy wrapper for dealing with string paths ■ “aa//b B/C/5” → /aa/b-b/c/5 ■ /a/ .add(“b”) → /a/b/ ■ /a/b/c/ .contains(“/a/”) → true ■ /a/b/c/ .contains(“/c/”) → false (errr. what?)
- 19. Current State
- 20. Current State ■ One state at any time, application wide
- 21. Current State ■ One state at any time, application wide ■ Component + Behavior = Responder
- 22. Current State ■ One state at any time, application wide ■ Component + Behavior = Responder ■ Responders are added to states
- 23. Current State ■ One state at any time, application wide ■ Component + Behavior = Responder ■ Responders are added to states ■ Navigator will let the responders behave
- 24. Current State ■ One state at any time, application wide ■ Component + Behavior = Responder ■ Responders are added to states ■ Navigator will let the responders behave ■ No redundant responses, brrr!
- 25. State Containment /don-t/act/like/urls/
- 26. / /a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
- 27. /a/ /a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
- 28. /a/d/ /a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
- 29. /a/e/ /a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
- 30. /b/ /a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
- 31. /b/f/ /a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
- 32. /c/ /a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
- 33. /c/f/ /a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
- 35. Behavior interfaces ■ Transition (show=in, hide=out)
- 36. Behavior interfaces ■ Transition (show=in, hide=out) ■ Update
- 37. Behavior interfaces ■ Transition (show=in, hide=out) ■ Update ■ Swap (galleries, anyone?)
- 38. Behavior interfaces ■ Transition (show=in, hide=out) ■ Update ■ Swap (galleries, anyone?) ■ Validate (sync and async)
- 39. Behavior interfaces ■ Transition (show=in, hide=out) ■ Update ■ Swap (galleries, anyone?) ■ Validate (sync and async) ■ Redirect (combined with validation)
- 40. Behavior interfaces ■ Transition (show=in, hide=out) ■ Update ■ Swap (galleries, anyone?) ■ Validate (sync and async) ■ Redirect (combined with validation) ■ Initialization (combined with any above)
- 41. Project examples ■ http://rss.dev/ing-sail/development/public/ ■ http://rss.dev/het-jaar-van/development/ public/ ■ Very fresh, from Random.nu: http://www.quick-step.com/flooradvisor/
- 43. Integration
- 45. Integration ■ SWFAddress *duh!* ■ PureMVC *meh...*
- 46. Integration ■ SWFAddress *duh!* ■ PureMVC *meh...* ■ Singleton Navi.gator() *boo!*
- 47. Integration ■ SWFAddress *duh!* ■ PureMVC *meh...* ■ Singleton Navi.gator() *boo!* ■ RobotLegs *awesome!*
- 48. Why RobotLegs?
- 49. Why RobotLegs? ■ Super mediator stage magic
- 50. Why RobotLegs? ■ Super mediator stage magic ■ Awesome actor wizardry
- 51. Why RobotLegs? ■ Super mediator stage magic ■ Awesome actor wizardry ■ PureMVC workflow flipped upside-down
- 52. Why RobotLegs? ■ Super mediator stage magic ■ Awesome actor wizardry ■ PureMVC workflow flipped upside-down ■ Question: “So how do you put it on stage?”
- 53. Why RobotLegs? ■ Super mediator stage magic ■ Awesome actor wizardry ■ PureMVC workflow flipped upside-down ■ Question: “So how do you put it on stage?” ■ Answer robotlegs.org: “Errrr....”
- 54. Why RobotLegs? ■ Super mediator stage magic ■ Awesome actor wizardry ■ PureMVC workflow flipped upside-down ■ Question: “So how do you put it on stage?” ■ Answer robotlegs.org: “Errrr....” ■ Answer epologee.com: “Navigator baby!”
- 56. RobotLegs integration ■ NavigatorContext, NavigatorSignalContext
- 57. RobotLegs integration ■ NavigatorContext, NavigatorSignalContext ■ stateActorMap
- 58. RobotLegs integration ■ NavigatorContext, NavigatorSignalContext ■ stateActorMap ■ stateViewMap
- 59. RobotLegs integration ■ NavigatorContext, NavigatorSignalContext ■ stateActorMap ■ stateViewMap ■ stateControllerMap
- 60. RobotLegs integration ■ NavigatorContext, NavigatorSignalContext ■ stateActorMap ■ stateViewMap ■ stateControllerMap ■ Just-in-time instantiation of actors, views and commands (RL does the rest)
- 61. Example II RobotLegs Navigator ***branch warning***
- 62. Thanks! ■ http://github.com/epologee/navigator-as3 ■ RobotLegs integration is fresh, feedback! ■ Unit Testing step by step, bug reports! epologee.com
Editor's Notes
- \n
- \n
- Background information on why the Navigator came into existence.\nWritten something like this a 1000 times.\n
- Background information on why the Navigator came into existence.\nWritten something like this a 1000 times.\n
- Background information on why the Navigator came into existence.\nWritten something like this a 1000 times.\n
- Background information on why the Navigator came into existence.\nWritten something like this a 1000 times.\n
- Background information on why the Navigator came into existence.\nWritten something like this a 1000 times.\n
- Don’t explain everything at once. Let’s start with the state concept.\n
- Don’t explain everything at once. Let’s start with the state concept.\n
- Don’t explain everything at once. Let’s start with the state concept.\n
- \n
- \n
- \n
- \n
- \n
- Before explaining state containment, break away to behaviorism\n
- Before explaining state containment, break away to behaviorism\n
- Before explaining state containment, break away to behaviorism\n
- Before explaining state containment, break away to behaviorism\n
- Before explaining state containment, break away to behaviorism\n
- Alright, let’s do this.\n
- 1/8- empty paths default to the root paths “/”\n
- 2/8- Any responder added to the root, will be considered for a response.\n
- 3/8-keep up the speed!\n
- 4/8\n
- 5/8-nothing surprising here. Let’s go see the wildcard!\n
- 6/8-BAM! Wildcards will match any segment.\n
- 7/8\n
- 8/8-“So what do you do with these states?” Up next are the Behaviors.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n