The "Web 2.0" craze has taken a firm hold of the online tech community, penetrating into the computer of every 14-year-old PHP newbie, through to the cubicles and meeting rooms of Redmond and the Googleplex. Giddy as we are with excitement about another "paradigm shift" (a phrase I haven't heard since, oh, late 1998), it's easy to forget that Web 2.0 has to actually do something useful for us in the long run to stay sustainable.
In my opinion, the flagship application of Web 2.0 remains online mapping, as seen with Google Maps and MSN Virtual Earth. These services are being stretched to unforeseen limits through the endless possibilities of the mashup, making the geospace jump through some amazing hoops.
Most developers of Web 2.0 apps focus on deploying their creations through a traditional browser interface. But for Mac users, a perfectly delightful container for your Web 2.0 apps is staring you right in the face. It's the Dashboard.
Technically, the Dashboard is a great container for your Web 2.0 application. Every Dashboard Widget is written in XHTML, CSS, and JavaScript. Owing to Dashboard's standards compliance and common-sense design, you might be surprised to find how little work it takes to port your own Web 2.0 app into this environment. And from a user's perspective, your Web 2.0 application is "always on," and accessible at the touch of a button.
In this tutorial, I'll walk you through a complete Dashboard implementation of Virtual Earth. If you're impatient, you can jump directly to the completed Widget by visiting my homepage and download it directly.
If you're unfamiliar with the basics of using Virtual Earth in your own web page, visit Via Virtual Earth's tutorials page and brush up first. It's basic stuff, but important groundwork.
Apple has a comprehensive section on their developer pages describing the Dashboard environment. But to summarize, the four basic components you need for a Widget are:
In this case, you'll put all this into a directory called virtualearth.wdgt.
I admit to being less than a genius when it comes to Photoshop. However, I can still knock out something that would make a graphic designer sigh painfully (as opposed to burst with gales of laughter). I thought maybe a bezeled stone sort of look would be a suitably flagrant violation of Apple's user interface guidelines. This is named Default.png.
It's worth noting that the minimum dimensions of the Virtual Earth MapSearchControl forced me to produce a Widget this large; I would have preferred something slightly smaller.
I also pilfered the Via Virtual Earth logo and turned it into a transparent png. This file is named Icon.png.
So now you just need to organize for MapSearchControl to be displayed inside this Widget.
|
Related Reading Mapping Hacks |
|
<html>
<head>
<link href="VirtualEarth.css" type="text/css" rel="stylesheet"/>
<link href="http://dev.virtualearth.net/commercial/v1/VE_MapSearchControl.css" type="text/css" rel="stylesheet"/>
<script type='text/javascript' src="http://dev.virtualearth.net/commercial/v1/VE_MapSearchControl.js"/>
<script type='text/javascript'>
function setup()
{
var map = null;
map = VE_MapSearchControl.Create(37.3189139456153,-122.029211560580,
12, 'r', "absolute", 0, 0, 530, 530,
"http://local.live.com/search.ashx", "http://local.live.com/Ads.ashx");
document.getElementById("contents").appendChild(map.element);
}
</script>
</head>
<body onload="setup();">
<div id="contents"></div>
<img src="Default.png"/>
</body>
</html>I'd like to explain this simple HTML block in more detail.
The first step is to include the style sheet. Its contents will be examined in more detail shortly. I then include the standard MapSearchControl style sheet, followed by the associated JavaScript file supplied by Microsoft.
Next, I have a small block of JavaScript that takes care of initializing the MapSearchControl. The most notable parameters are the two first floating point arguments, which specify the latitude and longitude for this map's starting coordinates. I chose Cupertino, just to be cute.
Another parameter you might tweak would be the 530 pair, which correspond to the dimensions of the control. For a more detailed overview of the MapSearchControl constructor arguments, consult this Microsoft knowledge base article. Finally, I attached the map control itself to element ID contents, defined below.
I then have a body tag which calls the previously defined setup() method after the page has loaded. Inside body are two simple tags: the empty div with ID contents, and an image. The image tag is the same background image I designed earlier.
The layout magic happens (as it should) inside the style sheet.
body {
margin: 0;
}
#contents {
top: 35px;
left: 35px;
width: 530px;
height: 530px;
position: absolute;
-apple-dashboard-region: dashboard-region(control rectangle);
}The contents div is carefully designed to have just the right amount of padding and dimensions so that the MapSearchControl is positioned squarely inside the frame. The way I achieve this is through standard CSS layout techniques.
Apple has provided some special style sheet extensions that handle Dashboard-specific behavior. One of these is the -apple-dashboard-region statement. Normally, one can grab a Widget anywhere and drag it around the Dashboard. I can use dashboard-region to stop certain areas of the Widget from being drag handles. This is pretty important for Virtual Earth, as you must click and drag to actually use the map.
Apple provides in-depth developer documentation for this feature. This application is pretty simple -- I simply define the entire rectangular area of div contents to be excluded.
Info.plist is the property list that contains metadata relating to the Widget. Apple's documentation takes you through the entire list of valid keys and values for this file.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDisplayName</key>
<string>virtualearth</string>
<key>CFBundleIdentifier</key>
<string>com.apple.widget.virtualearth</string>
<key>CFBundleName</key>
<string>Virtual Earth</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1.0</string>
<key>MainHTML</key>
<string>VirtualEarth.html</string>
<key>AllowNetworkAccess</key>
<true/>
</dict>
</plist>CFBundleDisplayName must match the name of the Widget directory on disk, minus its extension. CFBundleIdentifier is a string that uniquely identifies the Widget, a la Java's package- naming system. MainHTML points to the main HTML file of this Widget. And AllowNetworkAccess very importantly grants our Widget access to make network calls. This is important for any AJAX application embedded in a Widget.
|
With all these pieces in place, all that remains is to actually install the Widget. This is accomplished by a simple double-click on the virtualearth.wdgt directory from the Finder. You will be prompted to confirm that you'd like to install this Widget, which then takes you to the Dashboard. You're prompted again to confirm you want this Widget, after which you should finally have it.
Well, give it a try! It should look something like this:
Notice that I can perform searches using the built-in search controls. If you have a Mighty Mouse or other scroll mouse, you can zoom in and out using the scroll wheel. And of course you can pan around the map, switch to Aerial or Hybrid, and generally do everything you normally can using Virtual Earth.
Where can we take our Virtual Earth Dashboard Widget from here? A basic next step might be to include resize capability, although I am not sure if the MapSearchControl offers us this feature. We could also implement a mashup by pulling in some external data and mapping it against our Widget. We could investigate the AllowSystem property list key and the widget.system() call to use external applications to gather information. Don't forget Dashboard Widgets can closely integrate with Apple-specific applications via plugins as documented here.
It is important, of course, not to get carried away and to remember Apple's recommendations regarding whether your Widget is really growing a bit too gnarly for the elegant Dashboard.
I hope you enjoyed this brief tour under Dashboard's hood. Of course, if such a rich Web 2.0 control as Virtual Earth can live happily inside the Dashboard, you should be pretty excited about the possibilities. The sky is the limit, and the cleanliness and elegance of the Dashboard as an AJAX programming environment will make it easy for you.
Don't forget to check out more Dashboard Widgets at Apple's download page.
Luke Burton chipped his teeth on C++, and has lately sought refuge in the beautiful world of scripting languages like Ruby and Perl.
Return to the Mac DevCenter
Copyright © 2009 O'Reilly Media, Inc.