pragmatic ajax - a web 2.0 primer (2006)

[...]... Creating Google Maps, on page 9, making web pages sing and dance isn’t all that challenging once you know what 4 W HAT I S A JAX ? tools are available It becomes even more impressive once you discover that Google Maps isn’t really proper Ajax; it doesn’t take advantage of any of the modern asynchronous callback technology and is really just dynamic HTML trickery 1.3 What Is Ajax? Ajax is a hard beast... into a one-liner The reason it is so hard is because it has two sides to it: • Ajax can be viewed as a set of technologies • Ajax can be viewed as an architecture Ajax: Asynchronous JavaScript and XML The name Ajax came from the bundling of its enabling technologies: an asynchronous communication channel between the browser and server, JavaScript, and XML When it was defined, it was envisioned as the... intimidation is a bit exaggerated In fact, after spending ten minutes examining Google Maps a bit deeper, we realized that, far from being the product of rocket scientists, the Google Maps interface is actually fairly straightforward to implement Perhaps, some might say, easy Not “same-amount-of-effort-as -a- PHPweb-form” easy, but we were able to implement something a great deal like it in about two hours And this... Google Maps a bit, let’s set about implementing it 2.3 Creating Ajaxian Maps Because Ajaxian Maps won’t bother with all of that geocoding mumbo jumbo, all of our heavy lifting will be in JavaScript However, we will use Java to provide some server features and a few image manipulation tasks IE 6, Firefox 1.x, and Safari 2.x Only We’ve tested this version of Ajaxian Maps in the three major browsers but haven’t... org.apache.batik.apps.rasterizer.DestinationType; import org.apache.batik.apps.rasterizer.SVGConverter; import javax.imageio.ImageIO; import java.io.File; import java.awt.*; 18 C REATING A JAXIAN M APS import java.awt.image.BufferedImage; public class ImageTiler { private static final String BASE_DIR = "resources/"; private static final int TILE_WIDTH = 100; private static final int TILE_HEIGHT = 100; public static... simple transparency that GIF images support; it allows a pixel to be one of 254 different values between fully transparent and fully opaque, and it’s this gradient transparency support that allows the push pins and dialog to use a shadow that blends in with the map alpha transparency 15 C REATING A JAXIAN M APS Showing these features is simply a matter of positioning images in the inner div at an absolute... click, all of the components on the application screen redrew from scratch Seems a little nuts, doesn’t it? On the Web, that was the world we inhabited until Ajax came along Ajax is a new architecture The important parts of this architecture are: • Small server-side events: Now components in a web application can make small requests back to a server, get some information, and tweak the page that is... replace the value of the BASE_DIR variable with whatever is most convenient for you Step 2: Create the Tiles Now that we have a map at two different zoom levels, we need to slice it up into tiles This is pretty easy with the nice image manipulation libraries available in many programming languages We’ll demonstrate how to do that with Java here: File 30 package com.ajaxian.amaps; import org.apache.batik.apps.rasterizer.DestinationType;... edges and shadows that make them blend in with the background map in a sophisticated fashion We said the zoom level was the easiest feature, and frankly, we were probably wrong This is ridiculously easy The push pins and dialogs are simply a PNG image The PNG image format is supported by the major browsers and supports a nice feature called alpha transparency Alpha transparency allows for more than just... be able to leverage Tapestry components, Spring tag libraries, ASP.NET widgets, Rails helpers, and PHP libraries to take advantage of Ajax without having to incorporate a second way of working The (near) future of Ajax development is total, invisible integration And this is exactly what Hector needs 1.2 Google Maps: The Missing Spark Google Maps (http://maps.google.com) really ignited the Ajax fire And .