1. 1 Scriptaculous

2. 2 Thomas Fuchs built it on prototype http://script.aculo.us Takes you from where Prototype left you –Prototype provides ability to Make remote calls Simplifies JavaScript Simplifies DOM API But, what about effects and widgets…?

3. 3 Purpose When you make an Ajax call, you need to let the user know you changed something on the screen –Users are not use to this (yet) –May not know what the effect of a certain action was A good application should avoid (unpleasant) surprises

4. 4 Scriptaculous

5. 5 Effects Animation effects Provides –Core Effect –Prepackaged Combination Effects –A nice cheat sheet at http://www.slash7.com/articles/2006/04/22/ scriptaculous-cheat-sheet-1 http://www.slash7.com/articles/2006/04/22/ scriptaculous-cheat-sheet-1

6. 6 Core Effects Five Core Effects –Effect.Opacity – Changes transparency –Effect.Scale – Changes width and height –Effect.MoveBy – Moves –Effect.Highlight – Changes background color –Effect.Parallel – Executes multiple effects To start an effect use new Effect.EffectName(element, required-params, [options]);

7. 7 Opacity Taking it very slow; disappears in 10 seconds

8. 8 Scale

9. 9 MoveBy

10. 10 Highlight After 10 seconds

11. 11 Parallel

12. 12 Effect Options Source: http://wiki.script.aculo.us/scriptaculous/show/CoreEffects

13. 13 Transition

14. 14 Callbacks You can use some callback events on effects to do special things

15. 15 Callback

16. 16 Combination Effects Based on the core effects In and out effects –Effect.Appear, Effect.Fade –Effect.BlindDown, Effect.BlindUp –Effect.SlideDown, Effect.SlideUp –Effect.Grow, Effect.Shrink Out effects –Effect.Puff –Effect.DropOut –Effect.SwitchOff –Effect.Squish –Effect.Fold Attention effects –Effect.Pulsate –Effect.Shake –Effect.Highlight Toggle can be used with first three to appear and disapper

17. 17 Combination Effects… http://wiki.script.aculo.us/scriptaculous/s how/CombinationEffectsDemo

18. 18 Controls Provides controls for following actions Drag And Drop Autocompletion In Place Editing

19. 19 Drag and Drop Draggables – element can be dragged Droppables – element can be dropped on Sortables – built on Drag and Drop Slider – control to present positional progress

20. 20 Draggable Now you can drag Task1 out

21. 21 Droppable

22. 22 Droppable

23. 23 AutoCompletion Basic AutoCompleter –Fills a list with names Customized AutoCompleter –Specialized view You can set options for frequency, minimum number of characters (before auto complete pops up), number of choices to show, ignore case, and param name to send

24. 24 InPlaceEditor Allows you to fetch data dynamically and fill –For example, fill city when zip code is entered