JavaScript and DOM Pattern Implementation

JavaScript DOM Pattern Implementations Dave Johnson [email_address]

Agenda

About me

Patterns Overview

Patterns

Inline Editing

Composite Controls

Popup

Copy and Paste

Live Scrolling

About

Author Enterprise Ajax

http://blogs.nitobi.com/dave

Nitobi

Nitobi co-founder, CTO

Located in Vancouver, Canada

Declarative, server integrated, Ajax user-interface components

User interface consulting and training services

Online usability service RobotReplay

Customers

Patterns OVERVIEW

“Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice”

A Pattern Language

Architectural Patterns

Literally.

MVC

Peer-to-peer

SOA

Software Design Patterns

Gang of Four (GoF)

Creational

Behavioural

Structural

Others

Concurrency

UI Design Patterns

Bill Scott and others

Described as

Problem

Context

Principle

Solution

Why / How

Ajax Design Patterns

What we are talking about today

Applies principles from all areas:

MVC

UI

OOP

Bad Patterns

Increased complexity

Does not provide re-use

Language hacks

THE PROBLEMS

Observer

Event = function(type) {

this.handlers = {};

this.guid = 0;

}

Event.prototype.subscribe = function(func) {

this.handlers[this.guid++] = func;

return guid;

}

Event.prototype.notify = function(evtArgs) {

for (var item in this.handlers) {

this.handlers[item].apply(this, arguments);

}

}

“The meaning of life is that it is to be lived, and it is not to be traded and conceptualized and squeezed into a pattern of systems”

Bruce Lee

Programmers Are Lazy

“ If you have a difficult task, give it to a lazy person - they will find an easier way to do it.”

Hlade's Law

Ajax Patterns - Goals

Making the web like the desktop

Improving user experience

More responsive applications

Remove web / desktop divide

Marriage of JavaScript, DOM, CSS

Describing Ajax Patterns

What is the pattern

When is the pattern applied

Why use the pattern

How is the pattern implemented

Best Practices

Consider the user and the developer

Common approaches

Progressive enhancement

http://en.wikipedia.org/wiki/Progressive_enhancement

Unobtrusive JavaScript

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

Pitfalls

Cross browser

Cross doctype

I18n and localization

Accessibility

THE PATTERNS

Inline Edit

What edit in page without page refresh

When titles, tags etc

Why remove page refreshes

How

User invited to click on data field

Field is replaced with an editing control

User blurs or saves and field is saved behind the scenes and editor removed

DOM

<div id="title" class="editable">Edit me!</div>

CSS

#title {

width:200px;

border:1px solid black;

cursor:pointer;

cursor:hand;

}

Edit

edit: function(evt) {

//create the editor

this.editor = nitobi.html.createElement( “input”, { id : ”editor”, type : ”text”, value : this.node.innerHTML }, { width: this.node.offsetWidth, height: this.node.offsetHeight );

this.node.replaceChild(this.editor, this.node.firstChild);

//set the focus so that it is ready to go

this.editor.focus();

//attach events for bluring and key handling

nitobi.html.attachEvent(this.editor, "blur", this.save);

nitobi.html.attachEvent(this.editor, "keydown", this.keydown);

//detach the event for going into edit mode

nitobi.html.detachEvent(this.node, "click", this.edit);

}

Key Handling

keydown: function(evt) {

//check for enter key at least

if (evt.keyCode == 13) {

this.editor.blur();

}

}

Saving

save: function(evt) {

//send the data to the server

var xhr = new HttpRequest();

xhr.onRequestComplete.subscribe(this.afterSave);

xhr.open(“POST”, “mysite.com”, true);

xhr.send(“title=“+this.editor.value);

//revert to the view only

this.node.innerHTML = this.editor.value;

//show an activity indicator

this.activity.style.display = “inline”;

},

afterSave: function(httpResponse) {

//concurrency pattern

//undo with command pattern

attachEvent(this.node, "click", this.edit);

}

Pitfalls / Best Practices

Potential Pitfalls

page contents can move when changing “modes”

too subtle invitation to edit

too many edit invitations

concurrency or failure

Best Practices

avoid page jitter

make render & edit modes same size

activate on click

deactivate on blur

Composite Controls

What inline edit multiple text fields

When simple forms, combo box

How

Create a Form JavaScript class that implements IBlurable interface

All form elements have key and mouse events attached through IBlurable

When user clicks on fields the mousedown event on the newly clicked field blocks the blur on the previous field

When user clicks outside of the composite control the blur event is not blocked

Aside: Event Order

Click on the first name field

mousedown

focus

mouseup

click

Click on the last name field

mousedown (last name)

blur (first name)

focus (last name)

mouseup (last name)

click (last name)

Also consider relatedTarget / fromElement

DOM

<form id="form" name="form">

<label for="first">First: </label>

<input name="first" id="first">

<label for="last">Last: </label>

<input name="last" id="last">

</form>

NameForm

NameForm = function(node) {

this.form = node;

//setup the blurable interface

IBlurable.call(this, this.form.elements);

this.onBlur.subscribe(this.save, this);

}

//implement the interface (ie copy over the methods)

nitobi.lang.implement(NameForm, IBlurable);

NameForm.prototype.save = function(evt) {

//same issues as inline edit case

var xhr = new nitobi.ajax.HttpRequest();

xhr.open("POST", "http://nitobi.com/name", true);

xhr.send(this.form);

};

Potential Pitfalls

event order differences across browsers

event problems on certain controls (select, scrollbars)

Best Practices

use for data validation behind the scenes on sub-forms

consider both keyboard (tabbing) and mouse events

Popup

What display additional information

When details are required in context

Why remove page refresh

How

User moves mouse over element that has mouseover event attached

Popup is displayed

User moves over another part of the trigger element firing mouseout event on a timeout

If show is called while waiting for a hide the hide is cancelled preventing flicker and allowing user to mouse over the contents of the popup

DOM

<span id="title">

<strong>

<a href="#">Iron Man</a>

</strong>

<span class="year">(2008)</span>

</span>

<div id="details">

When wealthy ...

<a href="#">(more)</a>

</div>

Aside: Event Bubbling

Events bubble up through the DOM

They are also “captured”

Event handlers fire when trigged from any child node

CSS

#details {

position: absolute;

display: none;

top: 0px;

left: 0px;

width: 300px;

height: 100px;

border: 1px solid black;

background-color: white;

}

Constructor

Popup = function(title, detail) {

this.detail = detail;

//attach mouseover event for show

nitobi.html.attachEvent(title, "mouseover", this.show);

var _t = this;

this.hideTimeout = null;

//attach a delayed mouseout event for hide

nitobi.html.attachEvent(title, "mouseout", function() {

_t.hideTimeout = setTimeout(_t.hide, 200);

});

}

Show

Popup.prototype.show = function(evt) {

if (this.hideTimeout != null) {

//clear the hide timeout clearTimeout(this.hideTimeout);

this.hideTimeout

} else {

//show the popup

var style = this.detail.style;

style.display = "block";

style.top = (evt.clientY + 5) + "px";

style.left = (evt.clientX + 5) + "px";

}

}

Potential Pitfalls

mouse event bubbling causes flickering or moving of the popup

rogue popups

Interaction between trigger and contents

Best Practices

enable keyboard access

provide some way to close manually

make certain it disappears!

Copy and Paste

What user can enter bulk data

When interop desktop and browser

How - Copy

User clicks on focusable element (<a>)

Filter for ctrl+c on keydown event

Set value of hidden <textarea> to the data that is to be copied

Focus on the hidden <textarea>

Magic

Capture keyup event on hidden <textarea> to focus back on your control

<textarea> value now on OS clipboard

How - Paste

User clicks on focusable element (<a>)

Filter for ctrl+v on keydown event

Focus on the hidden <textarea>

Magic

Capture keyup event on hidden <textarea>

Data from OS clipboard now in the <textarea> where you can access it and focus back on your control

DOM

<div id="copyable">

Copy this text

</div>

<textarea id=“clipboard”></textarea>

CSS

#clipboard {

position: absolute;

left: -5000px;

}

Constructor

var Copyable = function(node) {

//replace the contents with an <a> tag so that it is focusable

this.source = node;

this.source.innerHTML = "<a href="#" class="focusable">"+this.source.innerHTML+"</a>";

//intercept all key presses to look for ctrl+c/v

nitobi.html.attachEvent(this.source, "keydown", this.handleKey);

//create the clipboard

this.clipboard = nitobi.html.createElement("textarea", { id : "clipboard"+node.id } );

document.body.appendChild(this.clipboard);

}

handleKey

handleKey: function(evt) {

var k = evt.keyCode;

//offset keycode for modifier keys

k = k + (evt.shiftKey?256:0)+

(evt.ctrlKey?512:0)+

(evt.metaKey?1024:0);

//lookup the method in a map

var handler = this.keyMap[k];

//call that method

if (handler != null)

handler.call(this);

}

Copy

copy: function() {

//get the data we want to copy

var data = this.source.firstChild.innerHTML;

if (!nitobi.browser.IE) {

//focus back control when the copy is complete

attachEvent(this.clipboard, "keyup", this.focus);

//set the value, focus and select the value

this.clipboard.value = data;

this.clipboard.focus(); this.clipboard.setSelectionRange(0,data.length);

} else {

window.clipboardData.setData("Text",data);

}

}

Paste

paste: function() {

//catch the textarea keyup to grab the results

nitobi.html.attachEventOnce(this.clipboard, "keyup", this.pasteReady);

this.clipboard.focus();

},

pasteReady: function() {

//get the clipboard value and insert it

this.source.firstChild.innerHTML = this.clipboard.value;

//focus back on the control

this.source.firstChild.focus();

}

Pitfalls

user is unaware of functionality

keyboard short cuts don’t match OS

no context menu support in some browsers

Best Practices

capture ctrl/cmd+c/v/x for different OS

support various formats depending on use case

Live Scrolling

What scroll through large datasets

When viewing, filtering, sorting

How

Create clipping <div> and surface <div> where data goes

Repeat for a scrollbar

Connect scrollbar scroll events to position the data surface

Retrieve data from the server as user scrolls

DOM

<div id=“viewport”>

<div id=“surface”>

<div id=“data”></div>

</div>

</div>

<div id=“scrollcontainer">

<div id="scrollbar">

<div id=“range”></div>

</div>

</div>

CSS

#scrollcontainer {

width: 16px;

height: 300px;

overflow: hidden;

}

#scrollbar {

height: 100%;

width: 16px;

//width: 17px;

position: relative;

overflow-x: hidden;

overflow-y: scroll;

}

#range {

overflow: hidden;

width: 1px;

height: 3000px;"

}

#viewport { position: relative; overflow: hidden; width: 300px; height: 300px; border: 1px solid black; } #surface { width: 2000px; height: 2000px; }

Scrolling

var evt = “mousewheel”;

if (nitobi.browser.MOZ)

evt = “DOMMouseScroll”;

//attach the event to the surface

nitobi.html.attachEvent(

scollSurface, evt,

this.handleMouseWheel);

Potential Pitfalls

dual-scrollbar issue

sluggish performance

extremely large data sets

Best Practices

provide dynamic tooltip showing location within scroll

animate scroll

if desire a hybrid, use animation on paging.

support mouse scroll wheel

Acknowledgements

Bill Scott

Michael Mahemoff

Andre Charland

Thank You

Questions?

email: [email_address]

blog: blogs.nitobi.com/dave

book: enterpriseajax.com

tweets: twitter.com/davejohnson

http://flickr.com/photos/daveknapik/2115474105/

http://flickr.com/photos/preciouskhyatt/2153351428/

http://flickr.com/photos/sandcastlematt/403101240/

JavaScript and DOM Pattern Implementation

0 comments

Notes on slide 1

4 Favorites & 1 Event