Real World Ajax Learning the magic behind Google, Yahoo!, and other Ajax-driven websites Scott Davis Davisworld Consulting Scott Davis Real World AJAX Page 1
Introduction My name is Scott Davis JBoss At Work (O Reilly) Google Maps API (Pragmatic Bookshelf) Pragmatic GIS (Pragmatic Bookshelf) Scott Davis Real World AJAX Page 2
The release of Google Maps (Feb 7, 2005) was a Wizard of Oz / Technicolor moment Not just for web mapping, but for web development in general 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 a proprietary plug-in It used standard technologies (JavaScript, CSS) in new and interesting ways Scott Davis Real World AJAX Page 3
Welcome to Web 2.0 Ajax Web Services In this talk, we ll look at next generation website features and show you how to incorporate them into your own website Scott Davis Real World AJAX Page 4
Examples Google Maps Slippy Maps Yahoo! Mail Tabbed interfaces Apple Live subtotals Scott Davis Real World AJAX Page 5
Ajaxian Techniques It all boils down to: CSS Divs Events Scott Davis Real World AJAX Page 6
CSS Cascading Style Sheets More than just pretty colors and fonts CSS Positioning is key to many ajaxian features Scott Davis Real World AJAX Page 7
No Style Scott Davis Real World AJAX Page 8
Style #1 Scott Davis Real World AJAX Page 9
Style #2 Scott Davis Real World AJAX Page 10
csszengarden.com For more examples of the power of CSS, see: Scott Davis Real World AJAX Page 11
Divs Divs are semantically-named divisions of HTML Scott Davis Real World AJAX Page 12
CSS can be used to style regular old HTML tags Scott Davis Real World AJAX Page 13
or it can be used to style Divs Scott Davis Real World AJAX Page 14
Events The key to an interactive web site is tapping into the JavaScript event model Courtesy: http://www.w3schools.com/jsref/jsref_events.asp Scott Davis Real World AJAX Page 15
Ajax Frameworks Working with CSS, Divs, and Events is considerably easier when helper frameworks come along for the ride: Prototype http://prototype.conio.net/ Script.aculo.us http://script.aculo.us/ Scott Davis Real World AJAX Page 16
Google Maps Slippy Maps -- how d they do that? Scott Davis Real World AJAX Page 17
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 a fully functional slippy map, including zooming and multiple map types Scott Davis Real World AJAX Page 18
RYOGM-1 Scott Davis Real World AJAX Page 19
RYOGM-1: Basic HTML Scott Davis Real World AJAX Page 20
RYOGM-2 Scott Davis Real World AJAX Page 21
RYOGM-2: Basic CSS Scott Davis Real World AJAX Page 22
RYOGM-5 Scott Davis Real World AJAX Page 23
RYOGM-5: Events Scott Davis Real World AJAX Page 24
RYOGM-5 Scott Davis Real World AJAX Page 25
CSS Whole map / viewable map <div id= viewablemap > #viewablemap { width: 500px ; } Scott Davis Real World AJAX Page 26
Divs Getting a <div> using $() Without Prototype: document.getelementbyid( foo ) With Prototype: $( foo ) Scott Davis Real World AJAX Page 27
Events Click, drag events Without Prototype: <div id= wholemap onmousedown= startdrag() > With Prototype: Event.observe( wholemap, mousedown, startdrag) Scott Davis Real World AJAX Page 28
Yahoo! Mail Tabbed interface how d they do that? Scott Davis Real World AJAX Page 29
Solution: DynamicDrive s Ajax Tabs http://www.dynamicdrive.com/ dynamicindex17/ajaxtabscontent/ Single zip file containing all required code, including a simple example Scott Davis Real World AJAX Page 30
Tabs, Unstyled Scott Davis Real World AJAX Page 31
Scott Davis Real World AJAX Page 32
Tabs, Styled Scott Davis Real World AJAX Page 33
This removes the bullet This makes the list horizontal instead of vertical Scott Davis Real World AJAX Page 34
CSS Links Rollover No JavaScript required to create the Rollover effect (These CSS styling rules are called pseudoclasses ) Scott Davis Real World AJAX Page 35
JavaScript Scott Davis Real World AJAX Page 36
Programmatically adding an onclick() to each <a> -- calls ajaxpage() Scott Davis Real World AJAX Page 37
JavaScript Ajax Scott Davis Real World AJAX Page 38
Scott Davis Real World AJAX Page 39
CSS UL, styled Links, hover style (no JavaScript needed) ID (singleton) vs. Class Selectors.shadetabs li a{ } Pseudoclasses.shadetabs li a:hover{ } Scott Davis Real World AJAX Page 40
Divs Placed Ajax content in the div <div id= ajaxcontentarea > Scott Davis Real World AJAX Page 41
Events OnClick > ajaxpage() Scott Davis Real World AJAX Page 42
The Apple Store Live Subtotals how d they do that? Scott Davis Real World AJAX Page 43
Solution: Let s view/source Scott Davis Real World AJAX Page 44
Dojo They re using the Dojo Ajax library Scott Davis Real World AJAX Page 45
They are building Divs on the fly Scott Davis Real World AJAX Page 46
Tabs Hyperlinks for tabs Scott Davis Real World AJAX Page 47
Subtotal Scott Davis Real World AJAX Page 48
The Order Form Scott Davis Real World AJAX Page 49
Summary Google Maps Slippy Maps Yahoo! Mail Tabbed interfaces Apple Live subtotals Scott Davis Real World AJAX Page 50
Ajaxian Techniques It all boils down to: CSS Divs Events Scott Davis Real World AJAX Page 51
Conclusion Questions? Thanks for your time! Email: scottdavis99@yahoo.com Code examples: http://www.davisworld.org/presentations Scott Davis Real World AJAX Page 52