0
Prototyping the
Rich Web Experience
                                   Bill Scott
                      Yahoo! Ajax Evange...
stuff i’ve done




                  2
stuff i’ve done




                  2
stuff i’ve done




                  2
stuff i’ve done




                  2
prototyping
• Have been involved with prototyping for a number of
 years

• Last summer wrote a quick dragdrop proto libra...
what i really want




take a rough prototype




                         4
what i really want




take a rough prototype




                         sprinkle in some behaviors
                    ...
what i really want




take a rough prototype




                         sprinkle in some behaviors
                    ...
what i really want




take a rough prototype




                         sprinkle in some behaviors
                    ...
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
 ...
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
 ...
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
 ...
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
 ...
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
 ...
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
 ...
what i really want              Popup




take a rough prototype




                         sprinkle in some behaviors
 ...
what we will discuss
• quick overview of common design patterns
 (behaviors)

• quick survey of techniques to prototype a ...
patterns
(common interaction behaviors)




                                 6
ria patterns
       invitation. cursor invitation. hover invitation. tooltip invitation. page
   invitation. drop invitati...
8
patterns




           9
patterns




pattern. in-page action.




                           9
patterns




pattern. in-page action.



                           pattern. in-context expand.




                      ...
patterns




pattern. in-page action.

                                                         pattern. inline editing.

...
patterns




pattern. in-page action.

                                                         pattern. inline editing.

...
patterns




pattern. in-page action.

                                                               pattern. inline edit...
patterns




pattern. in-page action.

                                                               pattern. inline edit...
patterns




           10
patterns




pattern. remembered collections.




                                   10
patterns




pattern. remembered collections.



                                   pattern. on-demand scrolling.

       ...
patterns




                                                                   pattern. auto complete.




pattern. remem...
patterns




           11
patterns


pattern. busy indicator.




                           11
patterns


pattern. busy indicator.




pattern. lightweight popup + lightbox.


                                         11
patterns


pattern. busy indicator.




pattern. lightweight popup + lightbox.   pattern. fade transition + self-healing t...
interesting moments




                      12
interesting moments
                                                                                                      ...
Date:                                                  Nov-05

                                             Drag Over     ...
interesting moments for drag drop




                                    13
non-dhtml
prototyping techniques




                         14
challenge of interesting moments
                       Wireframing AJAX is a bitch. The best our agency
                 ...
using keyframes




                  16
using keyframes




                  16
prototyping with visio
    Changes in state placed in different layers
•

    Storyboard steps toggle visibility of associ...
prototyping with visio
    Changes in state placed in different layers
•

    Storyboard steps toggle visibility of associ...
prototyping with keynote/powerpoint
    Slides make major steps
•

    Builds used to bring in transitions, animations
•

...
19
prototyping with photoshop
    Easy to create from a series of images
•

    Images can be created by hand or from other a...
animations from screencasts
Start with screencast (SnapZPro/SnagIt)
Turn movie into animated GIF (Adobe ImageReady)




  ...
other approaches
Flash
Flex
iRise (www.irise.com) $$$
Axure (www.axure.com)
Interactive PDFs
Fireworks + PDF
Powerpoint

D...
dhtml
prototyping




              23
prototyping with DHTML
• Benefits
  •   Can start simple and layer in complexity
  •   Works well across different teams (d...
dhtml prototyping skills/techniques
• Keep structure, style and logic separate
  •   Avoid adding onclick handlers in the ...
dhtml prototyping skills/techniques
• Use anchors as basic navigation/action hooks
• Use background images in CSS with sty...
underlying desire for protoscript
• address the conceptual phase of interface development
 -- think “interaction theme”
 (...
protoscript approach
• JSON used to express interaction theme to
 express relationship between dom elements,
 behaviors, a...
Demo
http://protoscript.com/demos.php




                                   29
simple example




Simple Click, Fade, Close
(self-healing delete)




                            30
sprinkling in behaviors




                          31
anatomy of an interaction
DOM elements
                                             DOM
 Target an element or elements    ...
anatomy of self-healing delete

                                  DOM
                                 Element




       ...
anatomy of self-healing delete

                                  DOM
                                 Element




       ...
anatomy of self-healing delete
DOM elements
                                   DOM
 [X]                              Eleme...
anatomy of self-healing delete
DOM elements
                                   DOM
 [X]                              Eleme...
anatomy of self-healing delete
DOM elements
                                   DOM
 [X]                              Eleme...
protoscript code




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {
     onClick: {
       Fade...
selecting dom elements (targeting)   Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {...
selecting dom elements (targeting)   Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {...
selecting dom elements (targeting)   Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {...
selecting dom elements (targeting)   Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {...
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {...
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {...
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {...
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {...
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {...
chaining of target scope             Element




$proto('span:contains([X])', {
  SetStyle: {cursor:'pointer'},
  Click: {...
selector syntax                                                  Element



Consult jQuery docs:
 http://docs.jquery.com/D...
behaviors                               Behavior




       Animate. ColorAnimate. Fade.
           Move. Spotlight. Close...
behavior demos                                     Behavior



Site has a demo page for each behavior
 http://protoscript....
behavior attributes                                         Behavior


Behaviors may supply attributes for configuring the
...
plug-in behavior                                               Behavior


Protoscript core is independent of any single to...
peek under the hood of a behavior                                                  Behavior


YAHOO.protoscript.Show = fun...
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Protoscript - Simplified prototype scripting
Upcoming SlideShare
Loading in...5
×

Protoscript - Simplified prototype scripting

4,244

Published on

Given at the Rich Web Experience 2007.

http://protoscript.com

Protoscript is a simplified scripting language for creating Ajax style prototypes for the Web. With Protoscript it's easy to bring interface elements to life. Simply connect them to behaviors and events to create complex interactions.

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,244
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
139
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Protoscript - Simplified prototype scripting"

  1. 1. Prototyping the Rich Web Experience Bill Scott Yahoo! Ajax Evangelist b.scott@yahoo.com 1
  2. 2. stuff i’ve done 2
  3. 3. stuff i’ve done 2
  4. 4. stuff i’ve done 2
  5. 5. stuff i’ve done 2
  6. 6. prototyping • Have been involved with prototyping for a number of years • Last summer wrote a quick dragdrop proto library that was based on CSS class names and associating behavior to these classes (‘dragme’, ‘drophere’) • Goal was to make it easy for designers to start prototyping • However it was not possible to provide enough logic without resorting to writing code • Been planning to get back to the idea for a year. • This got me thinking about simplifying the experience of prototyping with dhtml/ajax 3
  7. 7. what i really want take a rough prototype 4
  8. 8. what i really want take a rough prototype sprinkle in some behaviors 4
  9. 9. what i really want take a rough prototype sprinkle in some behaviors 4
  10. 10. what i really want take a rough prototype sprinkle in some behaviors 4
  11. 11. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  12. 12. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  13. 13. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  14. 14. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  15. 15. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  16. 16. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  17. 17. what i really want Popup take a rough prototype sprinkle in some behaviors 4
  18. 18. what we will discuss • quick overview of common design patterns (behaviors) • quick survey of techniques to prototype a rich web experience • dive into protoscript and discuss how it can be used to sprinkle behaviors into web pages • look at similar techniques emerging (jQuery, css behaviors, DED | Chain, etc. 5
  19. 19. patterns (common interaction behaviors) 6
  20. 20. ria patterns invitation. cursor invitation. hover invitation. tooltip invitation. page invitation. drop invitation. available. selected. auto complete. live suggest. refining search. dynamic filtering. live search. on-demand scrolling. deferred content loading. fresh content. on-demand content. periodic refresh. resizable modules. scrolling modules. hover detail. narrowing actions. narrowing choices. auto form fill. in-place drill down. dependent choices. look before you leap. drag and drop. drag and drop modules. drag and drop objects. persistant portals. in page edit. inline text edit. inline custom edit. direct state edit. rating an object. inline custom edit. inline tag edit. popup custom edit. grid cell edit. slide out custom edit. module configure. module flip configure. module inline configure. module slide out configure. module faceplate. expandable content. in- context tools. in-context links. in-context hover menu. silent submit. remembered collection. auto save. remembered preferences. hover spy. inline assistant. inline validation. validate then suggest. indicator. busy indicator. progress indicator. inline status. in-context busy. cursor busy. opacity fade. high contrast. balloon error tip. dynamic goal. opacity focus. detail zoom. lightbox. transition. brighten. cross-fade. dim. expand. fade-in. fade-out. flip. move. self-heal. collapse. slide. animate. 7
  21. 21. 8
  22. 22. patterns 9
  23. 23. patterns pattern. in-page action. 9
  24. 24. patterns pattern. in-page action. pattern. in-context expand. 9
  25. 25. patterns pattern. in-page action. pattern. inline editing. pattern. in-context expand. 9
  26. 26. patterns pattern. in-page action. pattern. inline editing. pattern. in-context expand. pattern. drag & drop. 9
  27. 27. patterns pattern. in-page action. pattern. inline editing. pattern. in-context expand. pattern. hover details. pattern. drag & drop. 9
  28. 28. patterns pattern. in-page action. pattern. inline editing. pattern. in-context expand. pattern. in-context tools. pattern. hover details. pattern. drag & drop. 9
  29. 29. patterns 10
  30. 30. patterns pattern. remembered collections. 10
  31. 31. patterns pattern. remembered collections. pattern. on-demand scrolling. 10
  32. 32. patterns pattern. auto complete. pattern. remembered collections. pattern. on-demand scrolling. 10
  33. 33. patterns 11
  34. 34. patterns pattern. busy indicator. 11
  35. 35. patterns pattern. busy indicator. pattern. lightweight popup + lightbox. 11
  36. 36. patterns pattern. busy indicator. pattern. lightweight popup + lightbox. pattern. fade transition + self-healing transitio 11
  37. 37. interesting moments 12
  38. 38. interesting moments Drag and Drop Modules - Interesting Moments Grid ID: Bill Scott & Eric Miraglia Date: Currently on beta.my.yahoo.com Nov-0 Mouse Drag Over Drag Over Drag Over Drop Drop Hover Mouse Down Drag Initiated Valid Target Invalid Target Parent Container Accepted Rejected Cursor CSS Move cursor Move cursor CSS CSS Move cursor CSS Move cursor CSS Move cursor CSS Move cursor Normal Cursor Normal Cursor Tool Tip Drag Object Modules animates into the area Modules animates back to Full Opacity Reduced Opacity Reduced Opacity Reduced Opacity & Invalid Badge Reduced Opacity just below insertion bar the home area Module comes to rest in new Module comes back to rest area at full opacity Modules slide up in a self-healing transition to close hole Drop Target Insertion bar is removed as first Insertion bar is removed No insertion bar, just a gap No insertion bar, just a gap Insertion bar showing where it will drop No insertion bar, just a gap No insertion bar, just a gap & original holeframe of animation as first frame of animation 12
  39. 39. Date: Nov-05 Drag Over Drag Over Drop Drop Drop On interesting moments Invalid Target Parent Container Accepted Rejected Parent Container CSS Move cursor CSS Move cursor Normal Cursor Normal Cursor Normal Cursor Drag and Drop Modules - Interesting Moments Grid ID: Bill Scott & Eric Miraglia Date: Currently on beta.my.yahoo.com Nov-0 Mouse Drag Over Drag Over Drag Over Drop Drop Hover Mouse Down Drag Initiated Valid Target Invalid Target Parent Container Accepted Rejected Cursor CSS Move cursor Move cursor CSS CSS Move cursor CSS Move cursor CSS Move cursor CSS Move cursor Normal Cursor Normal Cursor Tool Tip Drag Object Modules animates into the area Modules animates back to Modules animates back t Reduced Opacity & Invalid Badge Reduced Opacity just below insertion bar the home area the home area Modules animates into the area Modules animates back to Full Opacity Reduced Opacity Reduced Opacity Reduced Opacity & Invalid Badge Reduced Opacity just below insertion bar the home area Module comes to rest in new Module comes Module comesrest in Modules comes back to rest back to to rest new Module comes back to at full opacity area rest at at full opacity area full opacity Modules slide up in a self-healing transition to close hole Drop Target Modules slide up in a self-healing transition to close hole Insertion bar is removed as first Insertion bar is removed No insertion bar, just a gap No insertion bar, just a gap Insertion bar showing where it will drop No insertion bar, just a gap No insertion bar, just a gap & original holeframe of animation as first frame of animation Insertion bar is removed Insertion bar is removed as first Insertion bar is removed as first frame of it will drop No insertion bar, just a gap No insertion bar, just a gap & original holeframe of animation as first frame of animation animation 12
  40. 40. interesting moments for drag drop 13
  41. 41. non-dhtml prototyping techniques 14
  42. 42. challenge of interesting moments Wireframing AJAX is a bitch. The best our agency has come up with is the Chuck Jones approach: draw the key frames. Chuck Jones had an advantage: he knew what Bugs Bunny was going to do. We have to determine all the things a user might do, and wireframe the blessed moments of each possibility. - Jeffrey Zeldman http://www.alistapart.com/articles/web3point0/ Blessed Moments = Microstates = Interesting Moments • behavior is not static - Multiple states need to be captured - Happens within a context - Not suited for wireframes 15
  43. 43. using keyframes 16
  44. 44. using keyframes 16
  45. 45. prototyping with visio Changes in state placed in different layers • Storyboard steps toggle visibility of associated layers • Each storyline serves as a use case in the wireframe • Source: http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio 17
  46. 46. prototyping with visio Changes in state placed in different layers • Storyboard steps toggle visibility of associated layers • Each storyline serves as a use case in the wireframe • Source: http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio 17
  47. 47. prototyping with keynote/powerpoint Slides make major steps • Builds used to bring in transitions, animations • 18
  48. 48. 19
  49. 49. prototyping with photoshop Easy to create from a series of images • Images can be created by hand or from other apps • 20
  50. 50. animations from screencasts Start with screencast (SnapZPro/SnagIt) Turn movie into animated GIF (Adobe ImageReady) 21
  51. 51. other approaches Flash Flex iRise (www.irise.com) $$$ Axure (www.axure.com) Interactive PDFs Fireworks + PDF Powerpoint DHTML 22
  52. 52. dhtml prototyping 23
  53. 53. prototyping with DHTML • Benefits • Can start simple and layer in complexity • Works well across different teams (design to code) • Technology the same or similar to final implementation • Most capable to approximate final result • Living example • Disadvantages • Requires technical savvy • Bugs can suck down time • Too much time spent ‘messing with code’ • Hard to extract into documentation 24
  54. 54. dhtml prototyping skills/techniques • Keep structure, style and logic separate • Avoid adding onclick handlers in the HTML (unobtrusive) • Avoid any direct styles or html style tags (font, etc.) • Use style class switching for visual changes • Use CSS to simulate most mouse hover behavior • Use innerHTML for content changes • Understand when to use a class vs. id • Use CSS query libraries for referencing interface parts • CSS selector syntax allows non-intrusive behavior injection 25
  55. 55. dhtml prototyping skills/techniques • Use anchors as basic navigation/action hooks • Use background images in CSS with style switching • Use a grid layout system • YUI Grid • Use Firebug • Understand CSS Selectors • Ext, jQuery, Dojo, Mootoos, Prototype, cssQuery() • Use JSON syntax (options) 26
  56. 56. underlying desire for protoscript • address the conceptual phase of interface development -- think “interaction theme” (free from solving production issues) • express an interaction as a configuration (no code; declarative approach) • dynamically insert interaction themes (behaviors) to any web page (allows experimentation) • create a gui tool for configuring & exploring interactions 27
  57. 57. protoscript approach • JSON used to express interaction theme to express relationship between dom elements, behaviors, attributes, and callbacks • jQuery CSS Selector syntax for dom elements • Chain dependent behavior as well as parallel behavior with JSON syntax • Simple to add behaviors (class with 2 methods) • Focus is on prototyping 28
  58. 58. Demo http://protoscript.com/demos.php 29
  59. 59. simple example Simple Click, Fade, Close (self-healing delete) 30
  60. 60. sprinkling in behaviors 31
  61. 61. anatomy of an interaction DOM elements DOM Target an element or elements Element for attaching events & behaviors. Events Events are the glue between the user and Event behaviors. They start behaviors. Behaviors Blocks of logic, patterns, actions that Behavior operate on elements. 32
  62. 62. anatomy of self-healing delete DOM Element Event Behavior 33
  63. 63. anatomy of self-healing delete DOM Element Event Behavior 33
  64. 64. anatomy of self-healing delete DOM elements DOM [X] Element <LI>[X] oldmove.mov</LI> Event Behavior 33
  65. 65. anatomy of self-healing delete DOM elements DOM [X] Element <LI>[X] oldmove.mov</LI> Events Click Event onClick (callback) Behavior 33
  66. 66. anatomy of self-healing delete DOM elements DOM [X] Element <LI>[X] oldmove.mov</LI> Events Click Event onClick (callback) Behaviors Fade Behavior Close 33
  67. 67. protoscript code $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { Element target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 34
  68. 68. selecting dom elements (targeting) Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 35
  69. 69. selecting dom elements (targeting) Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 35
  70. 70. selecting dom elements (targeting) Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 35
  71. 71. selecting dom elements (targeting) Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 35
  72. 72. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  73. 73. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  74. 74. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  75. 75. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  76. 76. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  77. 77. chaining of target scope Element $proto('span:contains([X])', { SetStyle: {cursor:'pointer'}, Click: { onClick: { Fade: { target: '#multiple li', opacity: {to: 0}, onComplete: {Close : {} } Behavior } } }, Event }); 36
  78. 78. selector syntax Element Consult jQuery docs: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors If you are setting up your own prototypes, stick with class and identifier .my-class-name #my-id-name Other useful examples a:contains(Click Here) .my-class-name #my-id-under-there #my-specific-container .my-items Consult CSS-1, CSS-2, CSS-3 and XPath Behavior Event 37
  79. 79. behaviors Behavior Animate. ColorAnimate. Fade. Move. Spotlight. Close. DragDrop. Hide. Open. Popup. ReplaceClass. Script. SetClass. SetStyle. Show. ToggleClass. ToggleOpenClose. ToggleShowHide. FetchHtml. SetHtml. Event Element 38
  80. 80. behavior demos Behavior Site has a demo page for each behavior http://protoscript.com/demos.php Site has a wiki with documentation page for each behavior http://docs.protoscript.com/ Event Element 39
  81. 81. behavior attributes Behavior Behaviors may supply attributes for configuring the behavior Where possible if an underlying YUI component or utility has a config object, this is exposed EXAMPLE FROM Popup BEHAVIOR (bold denotes from Panel cfg) close: true, width: '300px', draggable: true, height: null, underlay: 'shadow', zIndex: null, model: false, contraintoviewport: false, visible: true, iframe: false, effect: null, id: 'popup_panel', monitorresize: true, hd: 'Panel Title', x: null, bd: 'This is the body', Event y: null, ft: null xy: null, context: null, fixedcenter: true, Element 40
  82. 82. plug-in behavior Behavior Protoscript core is independent of any single toolkit selector is a plugin. default set uses jQuery behavior set is plugged in. default set uses YUI. ProtoScript.Core.registerBehaviorSet($, YAHOO.protoscript); (yui-proto.js) You are free to create your own behavior sets or plug in other selector technologies Example: Mootools selector & behaviors ProtoScript.Core.registerBehaviorSet($ES, MooBehaviors); (moo-proto.js) You can also add behaviors to the default set Event Element 41
  83. 83. peek under the hood of a behavior Behavior YAHOO.protoscript.Show = function (behaviorName, behaviorCfg) {
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×