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:
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_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_right will have the left and right image slices, respectively.
bottom div works exactly like the
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
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.