Apple Developer Connection
Member Login Log In | Not a Member? Contact ADC

< Previous PageNext Page > Hide TOC

Widget Implementation

Your widget’s HTML file provides the implementation of the widget. It can be named anything but must reside at the root level of the widget bundle and must be specified in the Info.plist file. For the Hello World sample widget, the HTML file displays an image and the words "Hello, World!" Here are the contents of the HelloWorld.html file:

<html>
<head>
<style>
    @import "HelloWorld.css";
</style>
</head>
 
<body>
 
    <img src="Default.png" />
    <span class="helloText">Hello, World!</span>
 
</body>
</html>

The HTML for this widget specifies the image used as the background and the text to display. You’ll notice however that the above HTML file doesn’t contain any style information. Instead, it imports another file that has this information: HelloWorld.css. As discussed in “HTML, CSS, and JavaScript Files,” it isn’t required that you break your CSS and JavaScript out of the HTML file, but it is recommended. The file HelloWorld.css contains all of the style information for the widget:

body {
    margin: 0;
}
 
.helloText {
    font: 26px "Lucida Grande";
    font-weight: bold;
    color: white;
    position: absolute;
    top: 41px;
    left: 32px;
}

The style sheet defines the styles for the body and for an arbitrary span class called helloText. This class is applied to the "Hello, World!" text in the Hello World HTML file.

Figure 2-3 shows what the code looks like when rendered in Safari.


Figure 2-3  The Hello World widget being previewed in Safari

The Hello World widget being previewed in Safari

In fact, when testing your widget, you can load it into Safari and get the same behavior that you would if it were loaded into Dashboard. The exception to this rule are interactions that rely specifically on the presence of Dashboard, as discussed in coming chapters.



< Previous PageNext Page > Hide TOC

Last updated: 2006-01-10

Did this document help you?
Yes: Tell us what works for you.

It’s good, but: Report typos, inaccuracies, and so forth.

It wasn’t helpful: Tell us what would have helped.
Get information on Apple products.
Visit the Apple Store online or at retail locations.
1-800-MY-APPLE

Copyright © 2007 Apple Inc.
All rights reserved. | Terms of use | Privacy Notice