fuser interface-development-using-jquery

User Interface
Development with jQuery

Colin Clark, Fluid Project Technical Lead, Adaptive Technology Resource Centre
Antranig Basman, Software Architect, University Cambridge

Topics We’ll Cover
• What is jQuery?

• JavaScript 101: A refresher course

• The jQuery Way

• Finding things

• Modifying elements

• Attaching Events

• Accessibility

• DOM manipulation

• AJAX

• Quick intro to Fluid Infusion

Example code and exercises

http://source.fluidproject.org/svn/sandbox/jquery-workshop/trunk

Things You’ll Need

• Your favourite editor
• Aptana or Eclipse?

• A sane browser with a good debugger
• Firefox + Firebug

• A Servlet container
• Tomcat or Jetty

jQuery solves real problems...

What is hard?
• browser inconsistencies and bugs

What is hard?
• the depth and complexity of the DOM

What is hard?
• creating a rich and dynamic UI

What is hard?
• the call and response of asynchronous
client-server interaction

Frameworks can help!
• Browser Abstraction

• DOM traversal, selection, and
manipulation

manipulation
• easy and dynamic event binding

manipulation
• easy and dynamic event binding
• easy-to-use AJAX functionality

Find something...

and do something
with it

doing something without a framework
function stripeListElements(listID) {
// get the items from the list
var myItems = getElementsByTagName("li");
// skip line 0 as it's the header row
for(var i = 0; i < myItems.length; i++) {
if ((i % 2) === 0) {
myItems[i].className = "odd";
}
}
}

doing something with jQuery

jQuery("li");


jQuery("li:even");


jQuery("li:even").addClass("striped");

Types of framework

Foundational toolkits vs. application frameworks

Foundational toolkits
• Totally presentation focused
• DOM manipulation
• Event binding
• Ajax

• eg. jQuery, Prototype

Widget Libraries
• Reusable user interface widgets
• Drag & Drop
• Tabs
• Sliders
• Accordions
• etc.
• eg. jQuery UI, Ext, Scriptaculous

Application frameworks

• Notiﬁcations “something changed here”
• Views to help keep your presentational code clean
• Data binding to sync the display with your model

• eg. Fluid Infusion, Sproutcore, etc.

jQuery in a Nutshell
• Everything you need for:
• Finding things
• Styling things
• Manipulating things
• Attaching events
• Making AJAX Requests
• Pretty low-level: you’ll need more

jQuery Philosophy

• Unobtrusiveness
• Separation of presentation, structure, logic
• Lightweight and DOM oriented
• Doesn’t do everything, but is very focused
• Functional

JavaScript is Different
• Everything is an object
• Extremely loose type system
• No classes
• Functions are ﬁrst class
• Some annoying quirks

Deﬁning Variables
• Deﬁne variables with var
• No need to declare types

var mango = "yum";
mango = 12345;
mango = false;

Deﬁning Variables
• If you omit var, it will be deﬁned as a global variable.
• This is extremely dangerous; JavaScript won't warn you!
rottenTomato = "gross!"; // This is global

Truthy and Falsey
• JavaScript does a lot of automatic type
coercion
• Shades of true and false
• Helpful when evaluating arguments
• Use with care

Falsey Values
• false
• null
• undefined
• ""
• 0 (zero)
• NaN

• Everything else is truthy. Careful...
-1,"false","0" are all true

Equal vs. Equivalent
Comparisons are coercive:

1 == "1" // true

0 == false // true

Non-coercive comparison:

0 === false // false

1 !== "1" // true

1 === Number("1") // true

Objects Are Loose Containers
• At their core, objects are just maps

• Keys can be any string, values can be anything

• Two diﬀerent ways to access members:
basketOfFruit.kiwis; // dot notation
basketOfFruit["figs"]; // subscript notation

• You can add new members to any object at any time

Objects Are Modiﬁable
var basketOfFruit = {
pears: “bartlett”,
oranges: “mandarin”
};

// New property
basketOfFruit.apples = "macintosh";

// New method
basketOfFruit.eat = function () {
return “tasty”;
};

No Classes
• JavaScript doesn't have any concept of
classes
• Methods are just properties in a container:
• pass them around
• modify them
• delete them

First Class Functions
• Functions are data
• You can assign them
• You can pass them as arguments
• You can return them as results
• Functions can contain member variables

Let’s Skip the Theory

1. Functions are real objects.
2. Functions remember the deﬁnition of nested
variables.

A Simple Closure
var addNumber = function (a) {
// This function will remember the values of a
return function (b) {
return a + b;
};
};

var addOne = addNumber(1); // result is an “add 1” Function
addOne(5); // Result is 6
addOne(41); // Result is 42

A shape for your code
// Your namespace is the only global variable.
var namespace = namespace || {};

// A private space, with a helpful alias to jQuery
(function ($) {

// To make something available, add it to your namespace.
namespace.myFunction = function () {

};

})(jQuery);

Defining a new thing
var fluid = fluid || {};

(function ($) {
// Creator function
fluid.cat = function (name) {
// Create your new instance
var that = {};

// Define public variables
that.name = name;

// Define public methods
that.meow = function () {
return that.name + ” says meow.”;
};

// Return your new instance.
return that;
};
})(jQuery);

jQuery === $

Constructor:

$(selectorString | Element | Array | jQuery);

Returns:

A jQuery instance.

Examples

// Selector
var allListItems = $(“li”);

// DOM Element
var theWholeDocument = $(document);

What’s a jQuery?

• A wrapper for one or many elements
• A real object with useful methods
• A better API than the raw DOM
• Context-oriented and chainable:

$(“li”).addClass(“selected”).attr(“tabindex”, “-1”).text(“Hello!”);

Basic jQuery Methods
var allListItems = $(“li”);

// Get the id attribute
allListItems.attr(“id”);

// Add a CSS class name.
allListItems.addClass(“stripey”);

// Get all the children
allListItems.children();

// Find items scoped within another jQuery
$(“a”, allListItems);

A Unified API for One or Many

• Most DOM code requires a lot of looping:
var myItems = getElementsByTagName("li");
// skip line 0 as it's the header row
for (var i = 0; i < myItems.length; i++) {
myItems[i].tabIndex = -1;
}

• jQuery treats sets the same as single elements:
$("li").attr(“tabindex”, -1);

• Bottom line: no iteration means way less code (and
it’s portable)

One or many?
// Returns the id attribute of the first element.
$(“li”).attr(“id”);

// Sets the tabindex attribute of all elements.
$(“li”).attr(“tabindex”, -1);

// Adds the class name to all elements.
$(“li”).addClass(“highlighted”);

// Returns true if at least one has this class
$(“li”).hasClass(“highlighted”);

Accessing Members

// Get the element at a specific position, as a jQuery
$(“li”).eq(0);

// Get the element at a specific position,
// as a pure DOM element
$(“li”)[0];

What’s a Selector?

• Selectors are speciﬁed by a string
• A notation for identifying elements
in the DOM
• The same thing you use when you’re
writing CSS

Types of Selectors
• Element selectors

“div” “span” “ul” “li” “body”

• id selectors

“#flutter-friends” “#friends-error-dialog”

• Class name selectors
“.invisible” “.flutter-status-panel”

More Selectors
• Descendent selectors:
ancestor descendent
“.flutter-status-panel textarea”

• Child selectors:
ancestor child child
“#friends>li>img”

• Pseudo selectors:
“:first” “:even” “:hidden”
“:contains(‘John Resig’)
“:not(#flutter-friends-template)”

Manipulating Attributes
var friends = $(“#friends li”);

// Get the id attribute
friends.attr(“id”);

// Set the id attribute
friends.attr(“id”, “123456789”);

// attr() also provides normalization
friends.attr(“tabindex”, -1);

Manipulating Classes


// Add a class name
friends.addClass(“flutter-hidden”);

// Remove a class name
friends.removeClass(“flutter-hidden”);

// Toggle a class name on or off
friends.toggleClass(“flutter-hidden”);

Directly Manipulating Styles

// Get the element’s computed border-color style
friends.css(“border-color”);

// Set the element’s style
friends.css(“border-color”, “red”);
friends.css(“border”, “5px”);

// Get and set height and width
settingsPanel.height();
settingsPanel.width(400);

Is the document ready?
• HTML gets parsed by the browser linearly

• Head ﬁrst, then body, etc.

• So all your <head> scripts will execute immediately
$(“li”).length === 0

• Need to know as soon as the document is ready
$(document).ready(function () {
// This is the earliest point at which
// the document is ready.
});

Finding Things
• Using FindingThings.html, find the following things:

• The friends list

• All list items in every list on the page

• The list items inside the friends list

• Everything with the class fl-centered

• The first form element on the page

• The last item in the friends list

• The label for the username text field

• Give each thing a background colour

Types of Browser Events
• Mouse
• click() when the mouse button is clicked

• mouseover() when the cursor is over an element

• Keyboard events:
• keydown() as soon as a key is pressed down

• keyup() when the key is released

• keypress() can be buggy and inconsistent

• Other
• focus() when an element is clicked or focused with the keyboard

• blur() when focus leaves the event

jQuery and Events

• Events vary wildly across browsers

• Netscape vs. IE vs. W3C: they’re all different

• jQuery normalizes all the standard browser events

• Also lets you deﬁne your own custom events

How events work

• Event Bubbling:

• Browser detects an event

• Starts at the immediate target element

• If a handler is not found, the parent is then checked

• And onwards up the tree

• If a handler is present, it is invoked

• Handler can stop bubbling; otherwise, the event
propagates up the tree as above

Binding Events

// The generic way
$(“li”).bind(“click”, function (event) {
alert(“You clicked me!”);
});

// Event binding shortcut
$(“li”).click(function (event) {
alert(“You clicked me!”);
});

Event Handlers
• The event object provides more information
about the event that occurred

• this points to the element on which the event
listener was bound. Be careful!

• Event handlers always deal with pure elements,
not jQuery instances (this and event.target)

var friends = $(“#friends”);
friends.click(function (event) {
showTweetsForFriend(this);
// this === friends[0];
});

The Event Object
{
altKey: boolean,
ctrlKey: boolean,
metaKey: boolean,
shiftKey: boolean, // Were these modifier keys depressed?
keyCode: Number, // The numeric keycode for key events
which: Number, // Keycode or mouse button code
pageX: Number, // Horizontal coordinate relative to page
pageY: Number, // Vertical coordinate relative to page
relatedTarget: Element, // Element left or entered
screenX: Number, // Horizontal coordinate relative to screen
screenY: Number, // Vertical coordinate relative to screen
target: Element, // The element for which the event was triggered
type: String // The type of event that occurred (eg. “click”)
}

Default Actions
• The browser provides a default action for many
elements, for example:

• When links are clicked, a new page loads

• When an arrow key is pressed, the browser scrolls

• When Enter is pressed in a form, it submits

• You can prevent it if you want to handle the behaviour
yourself:
$(“a”).bind(“click”, function (event) {
event.preventDefault();
});

Stopping Propagation
• By default, events will propagate up the tree after your
handler runs

• To prevent propagation:
$(“a”).click(function (event) {
event.stopPropagation();
});
$(“a”).each(function idx, item) {
item.click(function () {
item.doSomething();
};
};
• To swallow propagation and the default action:
$(“a”).click(function (event) {
return false;
});

Removing Events

// Remove all event listeners.
$(“li”).unbind();

// Remove all click event listeners.
$(“li”).unbind(“click”);

// Remove a specific listener.
var myListener = function (event) {...};
$(“li”).bind(myListener);
$(“li”).unbind(myListener);

One-off Events
// This event will only ever fire once.
$(“li”).one(function (event) {
alert(“You’ll only see me once.”);
});

// A more awkward, verbose version:
var fireOnce = function (event) { ... };
$(“li”).bind(“click”, function (event) {
fireOnce();
$(“li”).unbind(fireOnce);
});

Binding Events

• Using BindingEvents.html:

• Bind click handlers to each of the friend <li> elements.

• Your click handler should invoke the selectFriend()
function with the friend that was clicked.

• The function should use jQuery to adjust the CSS classes
of the friend elements so that just the clicked has the
flutter-active style

Adding things to the DOM
• The traditional DOM API provides methods for
creating new elements and adding them to existing
elements

• Can also be quite slow

• IE implemented the now ad-hoc standard innerHTML,
which was faster

• jQuery provides a great API for DOM manipulation, as
well as cross-browser manipulation

• Ultimately, it still uses the DOM APIs underneath: still
slow

More DOM Manipulation
// Create a new element.
var myList = $(“<ul></ul>”);

// Appending elements to the end of a container.
var otherListItems = $(“li”);
myList.append(otherListItems);

// Same result.
otherListItems.appendTo(myList);

// Remove an element from the DOM entirely.
// Conveniently, this returns the item you just removed
$(“#flutter-friend-template).remove();

// Remove all children from a container.
myList.empty();

More manipulation: copying

// Clone an element
$(“#flutter-friend-template”).clone();

// Clone an element, along with all its event handlers
$(“#flutter-friend-template”).clone(true);

Getting/Setting Element Values

// Get a value from a form element.
$(“#status”).val();

// Set a value on a form element.
$(“#status”).val(“Giving a presentation a Jasig.”);

// Getting the text of an element.
$(“#status”).text();

// Setting the text of an element.
$(“#status”).text(“John Resig”);

DOM Manipulation Advice

• Try to use CSS instead of DOM manipulation where
possible (e.g. hiding/showing elements, etc.)

• DOM manipulation can be very costly

• jQuery’s API is great, but it isn’t magic

• Avoid building up elements one at a time

• Injecting whole blocks of HTML at once:

myContainer.html(“<ul><li>Colin</li><li>Antranig</li><li>Jess</li></ul>”);

Manipulating the DOM

• Using domManipulation.html:

• Bind a key handler to the entry field

• The key handler should i) fetch the field text, ii) clone
a template node for a new Twitter item, iii) fill in the
node text with the field text, iv) add the template to
the twitter list, v) make it visible, vi) clear the entry
field

DHTML: A New Can of Worms
• The shift from documents to applications
• Familiar a11y techniques aren’t enough
• Most DHTML is completely inaccessible
• New techniques are still being ﬁgured out

Assistive Technologies
• Present and control the user interface
in diﬀerent ways
• Screen readers
• Screen magniﬁers
• On-screen keyboards
• Use built-in operating system APIs to
understand the user interface

The Problem
• Custom widgets often look, but don’t act,
like their counterparts on the desktop
• HTML provides only simple semantics
• Not enough information for ATs
• Dynamic updates require new design
strategies to be accessible

The Solution
• Describe user interfaces with ARIA
• Add consistent keyboard controls
• Provide ﬂexible styling and presentation

Keyboard Conventions
• Tab key focuses the control or widget
• Arrow keys select an item
• Enter or Spacebar activate an item

• Tab is handled by the browser. For the
rest, you need to write code.

Tabbing and Tabindex
• Each focusable item can be reached in
sequence by pressing the Tab key
• Shift-Tab moves backwards
• The tabindex attribute allows you to
customize the tab order
• tabindex=”-1” removes element from
the tab order: useful for custom handlers

Tabindex examples

<ul id=”animalTabs” tabindex=”0”>


<li id=”tab1” tabindex=”-1”>Cats</li>
<li id=”tab2” tabindex=”-1”>Dogs</li>
<li id=”tab3” tabindex=”-1”>Alligators</li>
</ul>

Setting Tabindex with jQuery
// Put the friends list in the tab order.
jQuery(“#friends”).attr(“tabindex”, 0);

// Remove the individual friends from the tab order.
// We’ll focus them programmatically with the arrows.
jQuery(“#friends li”).attr(“tabindex”, -1);

Navigating with the Arrow Keys
// Make the tabs selectable with the arrow keys.
$(“#friends”).fluid(“selectable”, {
selectableSelector: “li”
});

Adding Activation Handlers

// Make each tab activatable with Enter & Spacebar
friends.fluid(“activatable”, function(aFriend) {
alert(“You just selected: “ + aFriend.text());
});

Supporting Assistive Technology

Opaque Markup
// These are tabs. How would you know?
<ul>
<li>Cats</li>
<li>Dogs</li>
<li>Gators</li>
</ul>
<div>
<div>Cats meow.</div>
<div>Dogs bark.</div>
<div>Gators bite.</div>
</div>

ARIA
• Accessible Rich Internet Applications
• W3C speciﬁcation in the works
• Fills the semantic gaps in HTML
• Roles, states, and properties
• Live regions

Roles
• Describe widgets not present in HTML 4
• slider, menubar, tab, dialog
• Applied using the role attribute

States and Properties
• Added to elements within the DOM
• Properties describe characteristics:
• draggable, hasPopup, required
• States describe what’s happening:
• busy, disabled, selected, hidden
• Applied using custom aria- attributes

Using ARIA
// Now *these* are Tabs!
<ul id=”animalTabs” role=”tablist” tabindex=”0”>


<li id=”cats” role=”tab” tabindex=”-1”>Cats</li>
<li id=”dogs” role=”tab” tabindex=”-1”>Dogs</li>
<li id=”gators” role=”tab” tabindex=”-1”>Gators</li>
</ul>
<div id=”panels”>
<div role=”tabpanel” labelledby=”cats”>Cats meow.</div>
<div role=”tabpanel” labelledby=”dogs”>Dogs bark.</div>
<div role=”tabpanel” labelledby=”gators”>Gators bite.</div>
</div>

Setting ARIA with jQuery
var friendsList = $(“#friends”);
friendsList.attr(“aria-role”, “tablist”);

var friends = jQuery(“li”, friendsList);
friends.each(function(idx, friend) {
jQuery(friend).attr(“aria-role”, “tab”);
});
friends.eq(0).attr(“aria-selected”, “true”);

var panel = jQuery(“#tweets-panel”);
panel.attr(“aria-role”, “tabpanel”);
};

What is AJAX?

• A technique for making HTTP requests from
JavaScript without loading the page

• Asynchronous, meaning it doesn’t block the UI

• The X stands for XML, but JSON is often more
convenient

• The heart of Web 2.0: enables unprecedented
dynamism on the Web

REST
• Just the way the Web works

• Resources are the nouns, referred to by URL

• e.g. http://twitter.com/friends

• Representations deﬁne a format for a resource (eg.
XML or JSON)

• e.g. http://twitter.com/friends.json

• A small set of verbs:

• GET: gets data from the server

• POST: updates data on the server

• DELETE, PUT

AJAX with jQuery
$.ajax({
url: “http://twitter.com/friends”,
type:”GET”,
dataType: “json”, // “xml”, “json”, “html”, “script”
data: { // Object containing query variables
id: 123457
},
success: function (data) { }, // A callback upon success
error: function () { } // Callback if an error occurs
});

AJAX calls to Twitter
• Twitter.js contains a stubbed-out object designed to
fetch and send data to our Twitter server

• Implement the following methods, using jQuery’s AJAX
functions:

• getFriend()

• getTweets()

• postStatus()

fuser interface-development-using-jquery

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to fuser interface-development-using-jquery (20)

More from Kostas Mavridis (10)

fuser interface-development-using-jquery