oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

Extending the Dashboard Virtual Earth Widget
Pages: 1, 2, 3, 4

Laying Out the HTML

We'll be introducing quite a few new ideas in our revised HTML. But it's small enough that we can examine it as a whole. So let's see:


<link href="VirtualEarth.css" type="text/css" rel="stylesheet"/>
<link href="" type="text/css" rel="stylesheet"/>
<script type='text/javascript' src=""/>
<script type='text/javascript' src='AppleClasses/AppleInfoButton.js' charset='utf-8'/>
<script type='text/javascript' src='AppleClasses/AppleAnimator.js' charset='utf-8'/>
<script type='text/javascript' src='AppleClasses/AppleButton.js' charset='utf-8'/>
<script type='text/javascript' src='VirtualEarth.js' charset='utf-8'/>


<body onload="setup();">
        <div id="front">
            <div id="top">
                <div id="top_left"></div>
                <div id="top_inner"></div>
                <div id="top_right"></div>

            <div id="inner_contents"></div>
            <div id="inner_left"></div>
            <div id="inner_right"></div>

            <div id="bottom">
                <div id="bottom_left"></div>
                <div id="bottom_inner"></div>
                <div id="bottom_right"></div>
            <img id='resize' src='/System/Library/WidgetResources/resize.png' onmousedown='mouseDown(event);'/>
            <div id="infoButton"></div>
        <div id="back">
            <div id="back_contents">
                VirtualEarth Dashboard Widget v1.5<br/>
                Luke Burton, 2006<br/>
                <span class="link" onclick="widget.openURL('');"></span><br/>
                Visit <span class="link" onclick="widget.openURL('')">Luke's website</span> for more info and new versions.<br/>
            <div id="doneButton"></div>

Setting Up the Apple Classes

The first thing you'll notice in our <head> section is the heap of inclusions we make from something called the Apple Classes. These classes are a convenience for developers who want to include custom widget stuff like sliders, scroll bars, glass buttons, info buttons, and more. This all helps us attain that genuine Widget look and feel.

You can read more in-depth documentation on the Apple Classes here. For now, it suffices for you to copy the entire AppleClasses directory into your project:

cd /path/to/my/widget.wdgt
cp -r /System/Library/WidgetResources/AppleClasses .

In our case, we then include the AppleInfoButton, AppleAnimator, and AppleButton in our widget's HTML source file.

Divs Inside Divs Inside Divs ...

I'll be honest and admit that when it comes to CSS layout, I employ a lot of trial and error. I browse through other people's code, looking for that magic configuration of nested divs and CSS that renders correctly. In this case I'm pretty pleased with the result; the code is quite clean.

We start by defining two major divs. The first is front and the second is back. These will correspond to the front and back of the widget itself. We'll cover the back part of the widget, and how it is displayed, in more detail later. For now we'll concentrate on the front.

The front starts with a top div, inside of which are top_left, top_inner, and top_right divs. As you might guess from how we sliced our image in Photoshop, I intend to put one image in each of these divs.

The middle three divs, after much consternation, hair pulling, and rude words, ended up being configured without a container div. I found this the easiest configuration to guarantee proper resizing. The inner_contents div will contain the actual Virtual Earth object, while inner_left and inner_right will have the left and right image slices, respectively.

The bottom div works exactly like the top one.

We have two final points of interest in the front HTML. One is the resize button, which is declared here as an image. Note that we also associate a mouseDown event here, which will be covered when we come to the JavaScript. We also include a div for the infoButton, which is the little "i" symbol that flashes up on some widgets when you mouse over them, indicating they have a preference or information pane.

Pages: 1, 2, 3, 4

Next Pagearrow