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/

http://blogs.nitobi.com	85
http://www.slideshare.net	14
http://onwebdev.blogspot.com	3
http://hi.chibaole.com	3
http://www.cn-cuckoo.com	1

JavaScript and DOM Pattern Implementation

by davejohnson on May 05, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 106

Statistics

JavaScript and DOM Pattern Implementation — Presentation Transcript