Scriptaculous Venkat Subramaniam svenkatcs uh edu 1 Scriptaculous

Scriptaculous Venkat Subramaniam – svenkat@cs. uh. edu 1

Scriptaculous • 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 Java. Script • Simplifies DOM API • But, what about effects and widgets…? Venkat Subramaniam – svenkat@cs. uh. edu 2

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 Venkat Subramaniam – svenkat@cs. uh. edu 3

Scriptaculous Venkat Subramaniam – svenkat@cs. uh. edu 4

Effects • Animation effects • Provides – Core Effect – Prepackaged Combination Effects – A nice cheat sheet at http: //www. slash 7. com/articles/2006/04/22/ scriptaculous-cheat-sheet-1 Venkat Subramaniam – svenkat@cs. uh. edu 5

Core Effects • Five Core Effects – Effect. Opacity – Changes transparency – Effect. Scale – Changes width and height – Effect. Move. By – Moves – Effect. Highlight – Changes background color – Effect. Parallel – Executes multiple effects • To start an effect use new Effect. Name(element, required-params, [options]); Venkat Subramaniam – svenkat@cs. uh. edu 6

Opacity Taking it very slow; disappears in 10 seconds Venkat Subramaniam – svenkat@cs. uh. edu 7

Scale Venkat Subramaniam – svenkat@cs. uh. edu 8

Move. By Venkat Subramaniam – svenkat@cs. uh. edu 9

Highlight After 10 seconds Venkat Subramaniam – svenkat@cs. uh. edu 10

Parallel Venkat Subramaniam – svenkat@cs. uh. edu 11

Effect Options Source: http: //wiki. script. aculo. us/scriptaculous/show/Core. Effects Venkat Subramaniam – svenkat@cs. uh. edu 12

Transition Venkat Subramaniam – svenkat@cs. uh. edu 13

Callbacks • You can use some callback events on effects to do special things Venkat Subramaniam – svenkat@cs. uh. edu 14

Callback Venkat Subramaniam – svenkat@cs. uh. edu 15

Combination Effects • Based on the core effects • In and out effects – – Effect. Appear, Effect. Fade Effect. Blind. Down, Effect. Blind. Up Effect. Slide. Down, Effect. Slide. Up Effect. Grow, Effect. Shrink – – – Effect. Puff Effect. Drop. Out Effect. Switch. Off Effect. Squish Effect. Fold Toggle can be used with first three to appear and disapper • Out effects • Attention effects – Effect. Pulsate – Effect. Shake – Effect. Highlight Venkat Subramaniam – svenkat@cs. uh. edu 16

Combination Effects… • http: //wiki. script. aculo. us/scriptaculous/s how/Combination. Effects. Demo Venkat Subramaniam – svenkat@cs. uh. edu 17

Controls • Provides controls for following actions • Drag And Drop • Autocompletion • In Place Editing Venkat Subramaniam – svenkat@cs. uh. edu 18

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 Venkat Subramaniam – svenkat@cs. uh. edu 19

Draggable Now you can drag Task 1 out Venkat Subramaniam – svenkat@cs. uh. edu 20

Droppable Venkat Subramaniam – svenkat@cs. uh. edu 21

Droppable Venkat Subramaniam – svenkat@cs. uh. edu 22

Auto. Completion • Basic Auto. Completer – Fills a list with names • Customized Auto. Completer – 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 Venkat Subramaniam – svenkat@cs. uh. edu 23

In. Place. Editor • Allows you to fetch data dynamically and fill – For example, fill city when zip code is entered Venkat Subramaniam – svenkat@cs. uh. edu 24