Scriptaculous-Effects.pdf - Core...
Transcript of Scriptaculous-Effects.pdf - Core...
© 2009 Marty Hall
The Script aculo us JavaScriptThe Script.aculo.us JavaScript Library Part II: Visual Effects
Originals of Slides and Source Code for Examples:http://courses.coreservlets.com/Course-Materials/ajax.html
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
p j
© 2009 Marty Hall
For live Ajax & GWT training, see training t htt // l t /courses at http://courses.coreservlets.com/.
Taught by the author of Core Servlets and JSP, More Servlets and JSP and this tutorial Available at public Servlets and JSP, and this tutorial. Available at public venues, or customized versions can be held on-site at
your organization.C d l d d t ht b M t H ll
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
• Courses developed and taught by Marty Hall– Java 6, intermediate/beginning servlets/JSP, advanced servlets/JSP, Struts, JSF 1.x & 2.0, Ajax, GWT, custom mix of topics– Ajax courses can concentrate on one library (jQuery, Prototype/Scriptaculous, Ext-JS, Dojo) or survey several
• Courses developed and taught by coreservlets.com experts (edited by Marty)– Spring, Hibernate/JPA, EJB3, Ruby/Rails
Contact [email protected] for details
Topics in This Section
• Overview• Basic syntax• Highlighting• Showing/hiding elements• Moving, resizing, and styling elements• Effect options
5
© 2009 Marty Hall
Introduction
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Overview
• Animation effects– Usually a temporary change to the color, size, opacity, or
position of some element • Possibly a compound element like a divPossibly a compound element like a div
– Sometimes gradually displays hidden element– Sometimes gradually removes item
• Purposes– Draw attention to some Ajax result
D i ( i h li id lid i )– Draw attention to error (e.g., with client-side validation)– To remove some previous result
7
Installation and Documentation
• InstallationY d h P d S i l J S i– You need the Prototype and Scriptaculous JavaScript libraries. Download from http://script.aculo.us/.
• Details in previous lecture on Scriptaculous Ajax support.
• Documentation– General Scriptaculous (effects, Ajax, drag/drop, etc.)
• http://wiki.script.aculo.us/http://wiki.script.aculo.us/– Officially supported visual effects (this lecture)
• http://wiki.script.aculo.us/scriptaculous/show/VisualEffectsUser submitted visual effects– User-submitted visual effects
• http://wiki.script.aculo.us/scriptaculous/show/EffectsTreasureChest
– Visual effects cheat sheet (one page PDF)– Visual effects cheat sheet (one page, PDF)• http://www.slash7.com/cheats/scriptaculous_fx1.pdf
8
Invoking Effects
• new Effect.someName(someID, { options })– new Effect.Highlight("myTextField'")
• Don't forget the "new"
– This is most common usage and version I will use– This is most common usage, and version I will use
• element.visualEffect(effectName, { options })– $("myTextField").visualEffect("Highlight")$( y ) ( g g )
• Remember from Prototype that $("someID") is a souped up version of document.getElementByID("someID")
– Every new Effect Blah() can also be done with– Every new Effect.Blah() can also be done with someElement.visualEffect("Blah")
• element.shortcut({ options }) ({ p })– $("myTextField").highlight()– Only a few of the most common effects have this option
9
© 2009 Marty Hall
Highlighting Effects
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Highlighting Effects
• IdeaTh ff d i hi i– These effects draw attention to something important
• E.g., a new Ajax result or a validation error
• Effects– Effect.Highlight (also $("id").highlight() )
• Also known as Yellow Fade Technique, makes background color change gradually (to yellow by default), then revert to normal
• Options: startcolor, endcolor, revertcolor, keepBackgroundImage– Effect.Pulsate
• Fades in and out several times• Options: pulse
– Effect.Shake• Moves left/right several times• Options: duration, distance
11
Highlighting Effects:Header For All ExamplesHeader For All Examples
...<head><title>Scriptaculous Effects</title><head><title>Scriptaculous Effects</title><link rel="stylesheet"
href="./css/styles.css"type="text/css"/>type text/css />
<script src="./scripts/prototype.js"type="text/javascript"></script>
<script psrc="./scripts/scriptaculous/scriptaculous.js?load=effects"type="text/javascript"></script>
</head>...
If you know you will only use certain parts of scriptaculous
12
If you know you will only use certain parts of scriptaculous library, you can save download time by loading only some of it. To load all of it, just omit the "load=" part. I.e., <script src=".../scriptaculous.js"...></script>
Highlighting Effects Example
<fieldset><legend>Highlight, Pulsate, & Shake</legend><legend>Highlight, Pulsate, & Shake</legend><form action="#"><input type="button" value="Highlight (Opt 1)"
onclick="new Effect.Highlight('id-to-highlight')"/>g g ( g g )<input type="button" value="Highlight (Opt 2)"
onclick="$('id-to-highlight').highlight()"/><input type="button" value="Pulsate"
onclick="new Effect.Pulsate('id-to-highlight')"/><input type="button" value="Shake"
onclick="new Effect.Shake('id-to-highlight')"/><h2 id "id t hi hli ht"><h2 id="id-to-highlight"><img src="images/ajax.gif" align="middle"/>Important</h2></form></fieldset></fieldset>
13
Don't forget "new". It is "new Effect.Whatever(...)", not just "Effect.Whatever(...)".
Highlighting Effects Example: ResultsResults
14
© 2009 Marty Hall
Making Elements AppearMaking Elements Appear and Disappear
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Fading Effects
• IdeaTh ff d ll i i ibl i ibl– These effects gradually turn invisible text visible, or gradually turn visible text invisible
• Use lower-level Effect.Scale and Effect.Opacity
• Effects– Effect.Appear
• Takes hidden element (style="display:none") and graduallyTakes hidden element (style display:none ) and gradually increases opacity
– Effect.Fade• Decreases opacity and then leaves it hiddenDecreases opacity and then leaves it hidden
– Effect.Grow• Takes hidden element and grows it from tiny to normal• Better with option of { direction: 'top-left' }Better with option of { direction: top left }
– Effect.Shrink• Decreases size, then makes it hidden
16
Fading Effects Example
<fieldset><legend>Appear, Fade, Grow, Shrink</legend>g pp , , , / g<form action="#"><input type="button" value="Fade In"
onclick="new Effect.Appear('id-to-grow')"/><input type="button" value="Fade Out"<input type="button" value="Fade Out"
onclick="new Effect.Fade('id-to-grow')"/><input type="button" value="Grow"
onclick="new Effect.Grow('id-to-grow', { direction: 'top-left'})"/>
<input type="button" value="Shrink"onclick="new Effect.Shrink('id-to-grow',
{ direction: 'top-left'})"/>{ direction: top left }) /><h2 id="id-to-grow" style="display:none">Grow/Fade</h2></form></fieldset>
17
You must start hidden elements with an inline style for display:none. You cannot use a style sheet.
Fading Effects Example: Results
18
Disappearing Effects
• Idea– Kill off elements in creative ways
• EffectsEff P ff– Effect.Puff
• Increases size while fading opacity
– Effect.SwitchOff• Supposedly simulates old-style tv turning off
– Effect.SquishSimilar to Shrink b t more reliabl to ard center• Similar to Shrink, but more reliably toward center
– Effect.Fold• Shrinks vertically, then left. Unclear on many browsers.
– DropOut• Moves lower, then off (like falling through trap door)
19
Disappearing Effects Example
<fieldset><legend>Puff, SwitchOff, Squish, Fold, DropOut</legend><legend>Puff, SwitchOff, Squish, Fold, DropOut</legend><form action="#"><input type="button" value="Puff"
onclick="new Effect.Puff('id-to-kill')"/><input type="button" value="SwitchOff"
onclick="new Effect.SwitchOff('id-to-kill')"/><input type="button" value="Squish"
onclick="new Effect Squish('id-to-kill')"/>onclick= new Effect.Squish( id-to-kill ) /><input type="button" value="Fold"
onclick="new Effect.Fold('id-to-kill')"/><input type="button" value="DropOut"p yp p
onclick="new Effect.DropOut('id-to-kill')"/><input type="button" value="Restore"
onclick="new Effect.Appear('id-to-kill')"/>h2 id "id t kill" C ti l Kill /h2<h2 id="id-to-kill">Creatively Kill</h2></form></fieldset>
20
Disappearing Effects Example: ResultsResults
21
PowerPoint-Like Effects
• IdeaMake elements appear or disappear in slide show manner– Make elements appear or disappear in slide-show manner.
– Important: if you have multiple elements (e.g., image plus text), enclose in an inner div.
• Effects• Effects– Effect.BlindUp
• Keep element fixed, make appear from bottom up.• Think of element in window as blind is raised.Think of element in window as blind is raised.
– Effect.BlindDown• Keep element fixed, make disappear from top down
– Effect.SlideUpp• Move element up into region.• Think of looking at window (with blind already up), and elements
moves up into window.Eff Slid D– Effect.SlideDown
• Slide element down out of site
22
Blind/Slide Example
<fieldset><legend>BlindUp, BlindDown, SlideUp, SlideDown</legend><legend>BlindUp, BlindDown, SlideUp, SlideDown</legend><form action="#"><input type="button" value="BlindUp"
onclick="new Effect.BlindUp('id-to-slide')"/><input type="button" value="BlindDown"
onclick="new Effect.BlindDown('id-to-slide')"/><input type="button" value="SlideUp"
onclick="new Effect SlideUp('id-to-slide')"/>onclick= new Effect.SlideUp( id-to-slide ) /><input type="button" value="SlideDown"
onclick="new Effect.SlideDown('id-to-slide')"/><input type="button" value="Restore"p yp
onclick="new Effect.Appear('id-to-slide')"/><h2 id="id-to-slide"><div><img src="images/ajax.gif" align="middle"/>Blind/Slide/di /h2</div></h2></form></fieldset>
23
Blind/Slide Example: Results
24
© 2009 Marty Hall
CSS Effects
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Morph
• Idea– Gradually changes all style elements from current to
those in style specified
• Variations• Variations– Class name
• new Effect.Morph('id', 'css-class-name')p ( )
– Inline style• new Effect.Morph('id',
'color: red; border: 5; ')color: red; border: 5; ... )
– Anonymous object with styles• new Effect.Morph('id',
{ color: 'red' border: 5 }){ color: red , border: 5, ...})
26
Morph Example: HTML
<fieldset><legend>Morph</legend><legend>Morph</legend><form action="#"><input type="button" value="Morph"
onclick="new Effect Morph('id-to-morph'onclick= new Effect.Morph( id to morph , {style: 'weird'})"/>
<h2 id="id-to-morph" class="boring">Morph</h2></form></form></fieldset>
27
Morph Example: CSS
.boring {color: black;color: black;background-color: #fdf5e6;border: 0px solid cyan;font-family: serif;font family: serif;font-size: 18px;
}.weird {.weird {
color: yellow;background-color: red;border: 10px solid cyan;bo de : 0p so d cya ;font-family: Arial, sans-serif;font-size: 100px;
}}
28
Morph Example: Results
29
© 2009 Marty Hall
Lower-Level Effects
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Lower-Level Effects
• IdeaEff hi h h b il– Effects upon which most others are built
• Effects– Effect.MoveEffect.Move
• new Effect.Move('id', { x: ..., y: ...})– Effect.Scale
• new Effect Scale('id' percent)• new Effect.Scale( id , percent)• Scales entire container, not just text
– Use embedded span to scale text only
– Effect Opacity– Effect.Opacity• new Effect.Opacity('id', { to: ... })
– Effect.Tween• Gradually adjusts property or function• Gradually adjusts property or function• See upcoming slide
31
Lower-Level Effects Example
<input type="button" value="Move Down/Right"onclick="new Effect.Move('id-to-move',
{x: 50, y: 100})"/><input type="button" value="Move Up/Left"
onclick="new Effect.Move('id-to-move',{x: -50, y: -100})"/>{x: 50, y: 100}) />
<input type="button" value="Bigger"onclick="new Effect.Scale('id-to-move', 150)"/>
<input type="button" value="Smaller"onclick="new Effect Scale('id to move' 66 66)"/>onclick="new Effect.Scale('id-to-move', 66.66)"/>
<input type="button" value="Low Opacity"onclick="new Effect.Opacity('id-to-move',
{to: 0.25})"/>i t t "b tt " l " di O it "<input type="button" value="Medium Opacity"
onclick="new Effect.Opacity('id-to-move', {to: 0.50})"/>
<input type="button" value="Opaque"onclick="new Effect.Opacity('id-to-move',
{to: 1.0})"/><h2 id="id-to-move" style="background:red">Move</h2>
32
Lower-Level Effects Example: ResultsResults
33
Effect.Tween
• Version 1Sets a property to start value several intermediate values end value– Sets a property to start value, several intermediate values, end value
– new Effect.Tween('textField1', 10, 50, 'value')• Sets the 'value' property of $('textField1') to 10, then to several
values between 10 and 50, then to 50,• Options: { ... } can be before last argument
• Version 2– Calls an element's method with start value, several intermediate ,
values, and then end value– new Effect.Tween('heading1', 10, 50, 'setHeight')
• Calls $('heading1').setHeight(10), then calls $('heading1') setHeight on intermediate al es then calls$('heading1').setHeight on intermediate values, then calls $('heading1').setHeight(50)
• Version 3Calls an arbitrary function with start intermediate end values– Calls an arbitrary function with start, intermediate, end values.
– new Effect.Tween($('element'), 10, 50, function(x) {... })
34
© 2009 Marty Hall
Effect Options
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Effect Options: Speed
• delay – Time in seconds before effect starts– Default: 0.0
duration• duration – How long (in seconds) from start to finish– Default: 1 0Default: 1.0
• fps – Frames per secondp– Default: depends on cpu, usually between 25 and 100
• Example– new Effect.Highlight('id', { delay: 0.5, duration: 5.0 })
36
Effect Options: transition
• flicker– Randomly picks from last 25% of framesRandomly picks from last 25% of frames
• full, none– Shows last frame (final result) or first frame (nothing)
• linearlinear– Steady transition.
• pulse– Runs through transitions five timesg
• reverse– Does effect backward
• sinoidal (misspelling of sinusoidal)– Starts/ends slowly, fast in between. Default.
• spring– Overshoots final result then bounces back and forth to final value.
E l• Example– new Effect.Highlight('id', {duration: 10, transition: 'pulse'})
37
Effect Options: Callbacks
• beforeStart– Function to call after effect is queued
• beforeSetup, afterSetupF i ll f d l d fi f d– Function to call after delay and first frame renders
• beforeUpdate, afterUpdateFunction to call before/after each frame renders– Function to call before/after each frame renders
• beforeFinish, afterFinish– Function to call before/after finishFunction to call before/after finish– afterFinish can be used to trigger another effect, but effect
queues are more powerful
38
Effect Options: queue
• Idea– Specify order in which serial effects should take place– Parallel by default, and parallel effects can be
synchronized with Effect Parallel (see next slide)synchronized with Effect.Parallel (see next slide)
• Simple usage (global queue)– new Effect.Blah(..., { queue: 'front' })( , { q })– new Effect.Blah(..., { queue: end' })
• Advanced usage (named queues)– new Effect.Blah(..., { queue: { position: 'front',
scope: 'queue1' }})
39
Effect.Parallel
• IdeaL l ff i h f h i d– Lets you run several effects at one, with frames synchronized
– Although you are not required to apply effects to same element, it is usually used that way
– Effects must set { sync: true } in their options– Time options (duration, fps, etc. are applied to Effect.Parallel, not to
individual effects)
• Syntax– new Effect.Parallel(id, arrayOfEffects, { timeOptions })
• ExampleExample– new Effect.Parallel('id',
[new Effect.Blah1(..., { sync: true}),new Effect Blah2( { sync: true})]new Effect.Blah2(..., { sync: true})],
{ duration: 5 });
40
Effect.Parallel Example
<form action="#"><script type="text/javascript"><script type= text/javascript >function doParallelEffects(id) {
new Effect.Parallel([ new Effect Move(id {sync: true x: 50})[ new Effect.Move(id, {sync: true, x: 50}),
new Effect.Opacity(id, {sync: true, to: 0.5}),new Effect.Scale(id, 400, {sync: true})],
{ d ti 10 } ){ duration: 10 } );}</script><input type="button" value="Do Effects"
onclick="doParallelEffects('id-to-munge')"/><h2><span id="id-to-munge">Some Text</span></h2></form>
41
Use embedded span so that you scale text, not the fullbrowser-width heading.
Effect.Parallel Example: Results
42
Advanced Features
• Effect.toggle– Flips state back and forth– Note this (and next two) are methods, not classes
Effect multiple• Effect.multiple– Applies effects over a series of elements
• Effect tagifyText• Effect.tagifyText– Encloses each character in its own span. Helpful for
Effect.multiple to applies effects to one char at a time
• Effect.Base– Base class on which to build your own effects
• More details– http://wiki.script.aculo.us/scriptaculous/tags/effects
43
© 2009 Marty Hall
Wrap-up
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Summary
• Highlighting– Effect.Highlight
• Showing/HidingEff A Eff F d Eff G Eff Sh i k– Effect.Appear, Effect.Fade, Effect.Grow, Effect.Shrink
• BasicsEffect Move Effect Scale Effect Opacity– Effect.Move, Effect.Scale, Effect.Opacity
• Remember these apply to entire container
• Combining effectsg– queue option– Effect.Parallel
45
© 2009 Marty Hall
Questions?
Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.