Navigator-AS3      /navigation/made/f/*/simple/http://github.com/epologee/navigator-as3
Worth listening?■ Introduction to Navigator■ Example I - Simple Navigator■ Example II - RobotLegs Navigator
Don’t repeat yourself?
Don’t repeat yourself?■ Every multi-view app needs navigation
Don’t repeat yourself?■ Every multi-view app needs navigation■ Most multi-view apps need transitions
Don’t repeat yourself?■ Every multi-view app needs navigation■ Most multi-view apps need transitions■ How many times have ...
Don’t repeat yourself?■ Every multi-view app needs navigation■ Most multi-view apps need transitions■ How many times have ...
Don’t repeat yourself?■ Every multi-view app needs navigation■ Most multi-view apps need transitions■ How many times have ...
Navigation State
Navigation State■ A state looks /like/a/url/
Navigation State■ A state looks /like/a/url/■ /we/call/these/segments/
Navigation State■ A state looks /like/a/url/■ /we/call/these/segments/■ Words, numbers or wildcard *
NavigationState.as
NavigationState.as■ Fancy wrapper for dealing with string paths
NavigationState.as■ Fancy wrapper for dealing with string paths■ “aa//b B/C/5” → /aa/b-b/c/5
NavigationState.as■ Fancy wrapper for dealing with string paths■ “aa//b B/C/5” → /aa/b-b/c/5■ /a/ .add(“b”) → /a/b/
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/...
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/...
Current State
Current State■ One state at any time, application wide
Current State■ One state at any time, application wide■ Component + Behavior = Responder
Current State■ One state at any time, application wide■ Component + Behavior = Responder■ Responders are added to states
Current State■ One state at any time, application wide■ Component + Behavior = Responder■ Responders are added to states■ ...
Current State■ One state at any time, application wide■ Component + Behavior = Responder■ Responders are added to states■ ...
State Containment    /don-t/act/like/urls/
//a/d/         /a/e/         /*/f/        /a/           /b/           /c/                      /
/a//a/d/         /a/e/         /*/f/        /a/           /b/           /c/                      /
/a/d//a/d/         /a/e/           /*/f/        /a/            /b/            /c/                       /
/a/e//a/d/         /a/e/           /*/f/        /a/            /b/            /c/                       /
/b//a/d/         /a/e/         /*/f/        /a/           /b/           /c/                      /
/b/f//a/d/         /a/e/           /*/f/        /a/            /b/            /c/                       /
/c//a/d/         /a/e/         /*/f/        /a/           /b/           /c/                      /
/c/f//a/d/         /a/e/           /*/f/        /a/            /b/            /c/                       /
Behavior interfaces
Behavior interfaces■ Transition (show=in, hide=out)
Behavior interfaces■ Transition (show=in, hide=out)■ Update
Behavior interfaces■ Transition (show=in, hide=out)■ Update■ Swap (galleries, anyone?)
Behavior interfaces■ Transition (show=in, hide=out)■ Update■ Swap (galleries, anyone?)■ Validate (sync and async)
Behavior interfaces■ Transition (show=in, hide=out)■ Update■ Swap (galleries, anyone?)■ Validate (sync and async)■ Redirec...
Behavior interfaces■ Transition (show=in, hide=out)■ Update■ Swap (galleries, anyone?)■ Validate (sync and async)■ Redirec...
Project examples■ http://rss.dev/ing-sail/development/public/■ http://rss.dev/het-jaar-van/development/  public/■ Very fre...
Exampe ISimple Navigator
Integration
Integration■ SWFAddress *duh!*
Integration■ SWFAddress *duh!*■ PureMVC *meh...*
Integration■ SWFAddress *duh!*■ PureMVC *meh...*■ Singleton Navi.gator() *boo!*
Integration■ SWFAddress *duh!*■ PureMVC *meh...*■ Singleton Navi.gator() *boo!*■ RobotLegs *awesome!*
Why RobotLegs?
Why RobotLegs?■ Super mediator stage magic
Why RobotLegs?■ Super mediator stage magic■ Awesome actor wizardry
Why RobotLegs?■ Super mediator stage magic■ Awesome actor wizardry■ PureMVC workflow flipped upside-down
Why RobotLegs?■ Super mediator stage magic■ Awesome actor wizardry■ PureMVC workflow flipped upside-down■ Question: “So how ...
Why RobotLegs?■ Super mediator stage magic■ Awesome actor wizardry■ PureMVC workflow flipped upside-down■ Question: “So how ...
Why RobotLegs?■ Super mediator stage magic■ Awesome actor wizardry■ PureMVC workflow flipped upside-down■ Question: “So how ...
RobotLegs integration
RobotLegs integration■ NavigatorContext, NavigatorSignalContext
RobotLegs integration■ NavigatorContext, NavigatorSignalContext ■ stateActorMap
RobotLegs integration■ NavigatorContext, NavigatorSignalContext ■ stateActorMap ■ stateViewMap
RobotLegs integration■ NavigatorContext, NavigatorSignalContext ■ stateActorMap ■ stateViewMap ■ stateControllerMap
RobotLegs integration■ NavigatorContext, NavigatorSignalContext  ■ stateActorMap  ■ stateViewMap  ■ stateControllerMap■ Ju...
Example IIRobotLegs Navigator      ***branch warning***
Thanks!■ http://github.com/epologee/navigator-as3■ RobotLegs integration is fresh, feedback!■ Unit Testing step by step, b...
Upcoming SlideShare
Loading in …5
×

Robot legs workshop extra session navigator-as3

6,539 views

Published on

Bonus session slides at the january 29th RobotLegs workshop by Erik & Eric-Paul.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,539
On SlideShare
0
From Embeds
0
Number of Embeds
3,111
Actions
Shares
0
Downloads
42
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \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
  • Robot legs workshop extra session navigator-as3

    1. 1. Navigator-AS3 /navigation/made/f/*/simple/http://github.com/epologee/navigator-as3
    2. 2. Worth listening?■ Introduction to Navigator■ Example I - Simple Navigator■ Example II - RobotLegs Navigator
    3. 3. Don’t repeat yourself?
    4. 4. Don’t repeat yourself?■ Every multi-view app needs navigation
    5. 5. Don’t repeat yourself?■ Every multi-view app needs navigation■ Most multi-view apps need transitions
    6. 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. 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. 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...
    9. 9. Navigation State
    10. 10. Navigation State■ A state looks /like/a/url/
    11. 11. Navigation State■ A state looks /like/a/url/■ /we/call/these/segments/
    12. 12. Navigation State■ A state looks /like/a/url/■ /we/call/these/segments/■ Words, numbers or wildcard *
    13. 13. NavigationState.as
    14. 14. NavigationState.as■ Fancy wrapper for dealing with string paths
    15. 15. NavigationState.as■ Fancy wrapper for dealing with string paths■ “aa//b B/C/5” → /aa/b-b/c/5
    16. 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. 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. 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. 19. Current State
    20. 20. Current State■ One state at any time, application wide
    21. 21. Current State■ One state at any time, application wide■ Component + Behavior = Responder
    22. 22. Current State■ One state at any time, application wide■ Component + Behavior = Responder■ Responders are added to states
    23. 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. 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. 25. State Containment /don-t/act/like/urls/
    26. 26. //a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
    27. 27. /a//a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
    28. 28. /a/d//a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
    29. 29. /a/e//a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
    30. 30. /b//a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
    31. 31. /b/f//a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
    32. 32. /c//a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
    33. 33. /c/f//a/d/ /a/e/ /*/f/ /a/ /b/ /c/ /
    34. 34. Behavior interfaces
    35. 35. Behavior interfaces■ Transition (show=in, hide=out)
    36. 36. Behavior interfaces■ Transition (show=in, hide=out)■ Update
    37. 37. Behavior interfaces■ Transition (show=in, hide=out)■ Update■ Swap (galleries, anyone?)
    38. 38. Behavior interfaces■ Transition (show=in, hide=out)■ Update■ Swap (galleries, anyone?)■ Validate (sync and async)
    39. 39. Behavior interfaces■ Transition (show=in, hide=out)■ Update■ Swap (galleries, anyone?)■ Validate (sync and async)■ Redirect (combined with validation)
    40. 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. 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/
    42. 42. Exampe ISimple Navigator
    43. 43. Integration
    44. 44. Integration■ SWFAddress *duh!*
    45. 45. Integration■ SWFAddress *duh!*■ PureMVC *meh...*
    46. 46. Integration■ SWFAddress *duh!*■ PureMVC *meh...*■ Singleton Navi.gator() *boo!*
    47. 47. Integration■ SWFAddress *duh!*■ PureMVC *meh...*■ Singleton Navi.gator() *boo!*■ RobotLegs *awesome!*
    48. 48. Why RobotLegs?
    49. 49. Why RobotLegs?■ Super mediator stage magic
    50. 50. Why RobotLegs?■ Super mediator stage magic■ Awesome actor wizardry
    51. 51. Why RobotLegs?■ Super mediator stage magic■ Awesome actor wizardry■ PureMVC workflow flipped upside-down
    52. 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. 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. 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!”
    55. 55. RobotLegs integration
    56. 56. RobotLegs integration■ NavigatorContext, NavigatorSignalContext
    57. 57. RobotLegs integration■ NavigatorContext, NavigatorSignalContext ■ stateActorMap
    58. 58. RobotLegs integration■ NavigatorContext, NavigatorSignalContext ■ stateActorMap ■ stateViewMap
    59. 59. RobotLegs integration■ NavigatorContext, NavigatorSignalContext ■ stateActorMap ■ stateViewMap ■ stateControllerMap
    60. 60. RobotLegs integration■ NavigatorContext, NavigatorSignalContext ■ stateActorMap ■ stateViewMap ■ stateControllerMap■ Just-in-time instantiation of actors, views and commands (RL does the rest)
    61. 61. Example IIRobotLegs Navigator ***branch warning***
    62. 62. Thanks!■ http://github.com/epologee/navigator-as3■ RobotLegs integration is fresh, feedback!■ Unit Testing step by step, bug reports! epologee.com

    ×