Scriptaculous

CSE 190 M (Web Programming), Spring 2008

University of Washington

Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.1 Valid CSS!

What is usability?

Dilbert

Visibility and feedback

visibility example

Common web usability problems

Content usability problems

Users do not read

too much text vs. better text

Link usability problems

Feature usability problems

Web design suggestions

More web design suggestions

Sites about web design

Writing for the web

Web pages that suck

What's wrong with each of these web sites?

Ajax usability

Gmail loading

Forms and usability

Search Engine Optimization (SEO)

Scriptaculous overview

Scriptaculous is another JavaScript library, built on top of Prototype, that adds:

Downloading and using Scriptaculous

<script src="http://www.cs.washington.edu/education/courses/cse190m/08sp/prototype.js"
 type="text/javascript"></script>

<script src="http://www.cs.washington.edu/education/courses/cse190m/08sp/scriptaculous.js"
 type="text/javascript"></script>

Learning about Scriptaculous

There's no complete online API documentation (argh), but the following are useful resources:

Visual effects

Elements that appear, disappear, animate, grow, shrink, highlight, jiggle, ...

Effects demo

(Appearing)


(Disappearing)

(Getting attention)

scriptaculous logo Click effects above

Adding effects to an element

new Effect.name(element or id);

new Effect.Shake("sidebar");

var buttons = $$("results > button");
for (var i = 0; i < buttons.length; i++) {
	new Effect.Fade(buttons[i]);
}

Effect options

new Effect.name(element or id,
	{
		option: value,
		...
		option: value,
	}
);
new Effect.Opacity("my_element",
	{
		duration: 2.0, 
		from: 1.0,
		to: 0.5
	}
);

Effect events

new Effect.Fade("my_element", {
	duration: 3.0, 
	afterFinish: displayMessage
});

function displayMessage(effect) {
	alert(effect.element + " is done fading now!");
}

Auto-completion

Text fields that let you type in partial text and suggest values that contain that text

Auto-completing text fields

autocomplete

Scriptaculous offers ways to make a text box that auto-completes based on prefix strings:

Using Autocompleter.Local

new Autocompleter.Local(
	element or id of text box, 
	element or id of div,
	array of choices, 
	{ options }
);

Autocompleter.Local demo

<input id="bands70s" size="40" type="text" />
<div id="bandlistarea"></div>
window.onload = function() {
	new Autocompleter.Local(
		"bands70s",
		"bandlistarea",
		["ABBA", "AC/DC", "Aerosmith", "America", "Bay City Rollers", ...], 
		{}
	);
};

Using Ajax.Autocompleter

new Ajax.Autocompleter(
	element or id of text box, 
	element or id of div,
	url, 
	{ options }
);

Drag and Drop

Elements that can be moved by dragging them with the mouse

Drag and drop facilities

Scriptaculous provides several classes for supporting drag-and-drop functionality:

Draggable

new Draggable(element or id,
	{ options }
);

Draggable example

<div id="draggabledemo1">Draggable demo. Default options.</div>
<div id="draggabledemo2">Draggable demo.
	{snap: [40,40], revert: true}</div>
window.onload = function() {
	new Draggable("draggabledemo1");
	new Draggable("draggabledemo2", {revert: true, snap: [40, 40]});
};
logo Draggable demo.
Default options.
Draggable demo.
{snap:[40, 40], revert:true}

Draggables

Droppables

Droppables.add(element or id,
	{ options }
);

Drag/drop shopping demo

<img id="product1" src="images/shirt.png" alt="shirt" />
<img id="product2" src="images/cup.png" alt="cup" />
<div id="droptarget"></div>
window.onload = function() {
	new Draggable("product1");
	new Draggable("product2");
	Droppables.add("droptarget", {onDrop: productDrop});
}

function productDrop(drag, drop, event) {
	alert("You dropped " + drag.id);
}
shirt cup

Sortable

Sortable.create(element or id of list,
	{ options }
);

Sortable demo

<ol id="simpsons">
	<li id="simpsons_0">Homer</li>
	<li id="simpsons_1">Marge</li>
	<li id="simpsons_2">Bart</li>
	<li id="simpsons_3">Lisa</li>
	<li id="simpsons_4">Maggie</li>
</ol>
window.onload = function() {
	Sortable.create("simpsons");
};

  1. Homer
  2. Marge
  3. Bart
  4. Lisa
  5. Maggie

Events on rearranged items

window.onload = function() {
	Sortable.create("simpsons", {
			onUpdate: listUpdate
	});
};

function listUpdate() {
	// I can do anything I like here; create an Ajax.Request, etc.
	new Effect.Shake("simpsons");
}

  1. Homer
  2. Marge
  3. Bart
  4. Lisa
  5. Maggie

Persistent saved items

problem: rearranged items are not "remembered"; they return to their original order when we revisit the page

Subtleties of sortable lists

In-place editing

Elements whose text content can be changed dynamically (and saved to a server)

Ajax.InPlaceEditor

new Ajax.InPlaceEditor(element or id,
	url,
	{ options }
);

Ajax.InPlaceCollectionEditor

new Ajax.InPlaceCollectionEditor(element or id,
	url,
	{
		collection: array of choices,
		options
	}
);

Practice problem: Blinged out ASCII art

Modify our ubiquitous ASCII art program in the following ways: