davisrealworldajax

Colorado Software Summit: October 22 – 27, 2006 © Copyright 2006, Davisworld.org

Scott Davis — Real World AJAX

Real World AjaxLearning the magic behind Google, Yahoo!,and other Ajax-driven websites

Scott DavisDavisworld Consulting



Introduction

My name is Scott DavisJBoss At Work(O’Reilly)

Google Maps API(Pragmatic Bookshelf)

Pragmatic GIS(Pragmatic Bookshelf)



The release of Google Maps (Feb 7, 2005) was a“Wizard of Oz / Technicolor” moment

Not just for web mapping, but for web development ingeneral

It put Ajax on the map (no pun intended)• Jesse James Garrett’s seminal article coining the phrase (and

mentioning GM) was published on Feb 18, 2005

What made it special was that it didn’t require aproprietary plug-in

It used standard technologies(JavaScript, CSS) in new and interesting ways



Welcome to Web 2.0

Ajax

Web Services

In this talk, we’ll look at “next generation”website features and show you how toincorporate them into your own website



Examples

Google Maps

“Slippy Maps”

Yahoo! Mail

Tabbed interfaces

Apple

Live subtotals



Ajaxian Techniques

It all boils down to:

CSS

Divs

Events



CSS

Cascading Style Sheets

More than just pretty colors and fonts

CSS Positioning is key to many ajaxian features



No Style



Style #1



Style #2



cssZenGarden.com

For more examples of the power of CSS,see:



Divs

Divs are semantically-named divisions ofHTML



CSS can be used to style regular old HTMLtags…



… or it can be used to style Divs



Events

The key to aninteractiveweb siteis tapping intothe JavaScriptevent model

Courtesy: http://www.w3schools.com/jsref/jsref_events.asp



Ajax Frameworks

Working with CSS, Divs, and Events isconsiderably easier when “helper”frameworks come along for the ride:

Prototype

• http://prototype.conio.net/

Script.aculo.us

• http://script.aculo.us/



Google Maps

“Slippy Maps” -- how’d they do that?



Solution:

Rolling Your Own Google Maps

http://www.mapmap.org/ryogm

• ~200 lines of JavaScript

• 12 step-by-step pages take you from static HTML to afully functional “slippy map”, including zooming andmultiple map types



RYOGM-1



RYOGM-1: Basic HTML



RYOGM-2



RYOGM-2: Basic CSS



RYOGM-5



RYOGM-5: Events



RYOGM-5



CSS

Whole map / viewable map

<div id=‘viewableMap’>

#viewableMap { width: ‘500px’; … }



Divs

Getting a <div> using $()

Without Prototype:

• document.getElementById(‘foo’)

With Prototype:

• $(‘foo’)



Events

Click, drag events

Without Prototype:

• <div id=‘wholeMap’ onMouseDown=‘startDrag()’>

With Prototype:

• Event.observe(‘wholeMap’, ‘mousedown’, startDrag)



Yahoo! Mail

Tabbed interface – how’d they do that?



Solution:

DynamicDrive’s Ajax Tabs

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

• Single zip file containing all required code, including asimple example



Tabs, Unstyled



Tabs, Styled



This removesthe bullet

This makes the listhorizontal insteadof vertical



CSS Links “Rollover”

No JavaScriptrequired to createthe “Rollover”effect

(These CSS stylingrules are called‘pseudoclasses’)



JavaScript



Programmatically adding an ‘onClick()’ toeach <a> -- calls ajaxpage()



JavaScript – Ajax



CSS

UL, styled

Links, hover style (no JavaScript needed)

ID (singleton) vs. Class

Selectors

.shadetabs li a{ … }

Pseudoclasses

.shadetabs li a:hover{ … }



Divs

Placed Ajax content in the div

<div id=‘ajaxContentArea’>



Events

OnClick –> ajaxPage()



The Apple Store

“Live Subtotals” – how’d they do that?



Solution: Let’s view/source



Dojo

They’re using the Dojo Ajax library



They are building Divs on the fly



Tabs

Hyperlinksfor tabs



Subtotal



The Order Form



Summary

Google Maps

“Slippy Maps”

Yahoo! Mail

Tabbed interfaces

Apple

Live subtotals



Ajaxian Techniques

It all boils down to:

CSS

Divs

Events



Conclusion

Questions?

Thanks for your time!

Email:[email protected]

Code examples:http://www.davisworld.org/presentations

davisrealworldajax

Documents

colorado software summit

scott davis jboss

web mapping

orgcsscascading style

orgthe release of google

web development ingeneralit

orgeventsthe key

power of css