JavaScript and DOM Pattern Implementation

CommunityOne :: May 5 :: 2008

JavaScript DOM PatternImplementations

Dave Johnsondave@nitobi.com

Agenda

• About me• Patterns Overview• Patterns

– Inline Editing– Composite Controls– Popup– Copy and Paste– Live Scrolling

• 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

ObserverEvent = 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 patternWhen is the pattern appliedWhy use the patternHow is the pattern implemented

Best Practices

• Consider the user and the developer

• Common approaches– Progressive enhancement

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

– Unobtrusive JavaScripthttp://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

1. User invited to click on data field2. Field is replaced with an editing

control3. User blurs or saves and field is

saved behind the scenes and editor removed

#title {

width:200px;

border:1px solid black;

cursor:pointer;

cursor:hand;

Editedit: function(evt) {

//create the editorthis.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 gothis.editor.focus();

//attach events for bluring and key handlingnitobi.html.attachEvent(this.editor, "blur", this.save);nitobi.html.attachEvent(this.editor, "keydown", this.keydown);

//detach the event for going into edit modenitobi.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();

Savingsave: function(evt) {

//send the data to the servervar xhr = new HttpRequest();xhr.onRequestComplete.subscribe(this.afterSave);xhr.open(“POST”, “mysite.com”, true);xhr.send(“title=“+this.editor.value);//revert to the view onlythis.node.innerHTML = this.editor.value;//show an activity indicatorthis.activity.style.display = “inline”;

},afterSave: function(httpResponse) {

//concurrency pattern//undo with command patternattachEvent(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• Why remove page refreshes

1. Create a Form JavaScript class that implements IBlurable interface

2. All form elements have key and mouse events attached through IBlurable

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

4. 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

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

</form>

NameFormNameForm = function(node) {

this.form = node;//setup the blurable interfaceIBlurable.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 casevar 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

• What display additional information• When details are required in context• Why remove page refresh

1. User moves mouse over element that has mouseover event attached

2. Popup is displayed3. User moves over another part of the

trigger element firing mouseout event on a timeout

4. 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

</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

#details {position: absolute;display: none;top: 0px;left: 0px;width: 300px;height: 100px;border: 1px solid black;background-color: white;

ConstructorPopup = function(title, detail) {

this.detail = detail;//attach mouseover event for shownitobi.html.attachEvent(title, "mouseover", this.show);var _t = this;this.hideTimeout = null;//attach a delayed mouseout event for hidenitobi.html.attachEvent(title, "mouseout", function() {

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

ShowPopup.prototype.show = function(evt) {

if (this.hideTimeout != null) {//clear the hide timeout

clearTimeout(this.hideTimeout);this.hideTimeout

} else {//show the popupvar 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• Why remove page refreshes

How - Copy

1. User clicks on focusable element (<a>)2. Filter for ctrl+c on keydown event3. Set value of hidden <textarea> to the

data that is to be copied4. Focus on the hidden <textarea>5. Magic6. Capture keyup event on hidden

<textarea> to focus back on your control7. <textarea> value now on OS clipboard

How - Paste

1. User clicks on focusable element (<a>)2. Filter for ctrl+v on keydown event3. Focus on the hidden <textarea>4. Magic5. Capture keyup event on hidden

<textarea>6. Data from OS clipboard now in the

<textarea> where you can access it and focus back on your control

Copy this text

</div>

#clipboard {position: absolute;

left: -5000px;

Constructorvar Copyable = function(node) {

//replace the contents with an <a> tag so that it is focusablethis.source = node;this.source.innerHTML = "<a href=\"#\" class=\"focusable\">"+this.source.innerHTML+"</a>";

//intercept all key presses to look for ctrl+c/vnitobi.html.attachEvent(this.source, "keydown", this.handleKey);

//create the clipboardthis.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 keysk = k + (evt.shiftKey?256:0)+

(evt.ctrlKey?512:0)+(evt.metaKey?1024:0);

//lookup the method in a mapvar handler = this.keyMap[k];//call that methodif (handler != null)

handler.call(this);}

Copycopy: function() {

//get the data we want to copyvar data = this.source.firstChild.innerHTML;if (!nitobi.browser.IE) {

//focus back control when the copy is completeattachEvent(this.clipboard, "keyup",

this.focus);//set the value, focus and select the valuethis.clipboard.value = data;this.clipboard.focus();

this.clipboard.setSelectionRange(0,data.length);} else {

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

Pastepaste: function() {

//catch the textarea keyup to grab the resultsnitobi.html.attachEventOnce(this.clipboard, "keyup", this.pasteReady);this.clipboard.focus();

pasteReady: function() {//get the clipboard value and insert itthis.source.firstChild.innerHTML = this.clipboard.value;//focus back on the controlthis.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• Why remove page refreshes

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

2. Repeat for a scrollbar3. Connect scrollbar scroll events to

position the data surface4. Retrieve data from the server as

user scrolls

</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: dave@nitobi.comblog: blogs.nitobi.com/davebook: enterpriseajax.comtweets: 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

Business

Javascript inside Browser (DOM)

Javascript & DOM

Javascript #7 : manipuler le dom

JavaScript and the DOM

JavaScript DOM i XML

DOM, Javascript, and jQueryaryo.lecture.ub.ac.id/files/2014/11/DesainWeb-08-DOM-Javascript-and-jQuery.pdf · Java ! Cannot interact with Browser or control content ! JavaScript is

Javascript dom event

Javascript and Dom HTML

JavaScript Objects, Variables, and DOM

DOM, Javascript, and jQuery - Universitas Brawijayaaryo.lecture.ub.ac.id/files/2013/12/Desain-Web-04-DOM-Javascript-and-jQuery.pdf · DOM, Javascript, and jQuery ... HTML DOM ! DOM

JavaScript Ajax & DOM Manipulation

DOM and JavaScript

Introdução JavaScript e DOM 2016

Introduction to HTML / JavaScript / DOM - Arnaud …arnaud-nauwynck.github.io/docs/Intro-Html-JS-DOM.pdf · Introduction to HTML / JavaScript / DOM ... DOM = Document Object Model

ASYNCHRONOUS JAVASCRIPT AND XML · Programmation XML en JavaScript Retour sur l’API DOM (Document Object Model) Utilisation du DOM XML en JavaScript Asynchronous Javascript And

Javascript Dom

JavaScript OOP Pattern

Javascript essential-pattern

Tkltweb c06 Javascript Dom

Javascript: Ajax & DOM Manipulation v1.2