Beginning Mac OS X Tiger Dashboard Widget Development (2006)
.pdf
Using Plugins and Applets
Figure 12-6
3.Drop the Clock3D.class in the root level of the widget.
Figure 12-7
4.Create an Info.plist file for the widget like the one that follows. Notice the
BackwardsCompatibleClassLookup key and the AllowJava key will enable the widget to run the Java applet.
<plist version=”1.0”> <dict>
<key>AllowJava</key>
<true/>
<key>BackwardsCompatibleClassLookup</key>
<true/>
<key>CFBundleDisplayName</key> <string>3D Clock</string>
191
Chapter 12
<key>CFBundleIdentifier</key>
<string>com.deadtrees.widget.3dclock</string>
<key>CFBundleName</key> <string>3D Clock</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1.0</string>
<key>CloseBoxInsetX</key>
<integer>14</integer>
<key>CloseBoxInsetY</key>
<integer>16</integer>
<key>MainHTML</key>
<string>3DClock.html</string>
</dict>
</plist>
5.In the HTML file for the widget, you must add the code to call the applet. If the applet has any settings, those must be included. The section containing the applet code needs to be placed inside of a <div> tags so you can format it with a selector.
<html>
<head>
<style type=”text/css”> @import “3DClock.css”;
</style>
<script type=’text/javascript’ src=’3DClock.js’ charset=’utf-8’/>
<!-- The Apple Classes are included at the top level of the widget for pre-10.4.3 compatibility -->
<script type=’text/javascript’ src=’AppleClasses/AppleButton.js’ charset=’utf-8’/> <script type=’text/javascript’ src=’AppleClasses/AppleInfoButton.js’ charset=’utf- 8’/>
<script type=’text/javascript’ src=’AppleClasses/AppleAnimator.js’ charset=’utf- 8’/>
</head>
<body onload=”setup();”> <div id=”front”>
<img span=”backgroundImage” src=”Default.png”> <div id=”applet”>
<applet code=”Clock3D.class” WIDTH=”180” HEIGHT=”180”> <param name=”fps” value=”18”>
<param name=”a1” value=”12500”> <param name=”pixd” value=”29”> <param name=”pixangle” value=”5”> <param name=”radius” value=”26”> <param name=”roty” value=”-4”> <param name=”rotx” value=”0”> <param name=”rotz” value=”0.401”> <param name=”irotx” value=”0”> <param name=”iroty” value=”0”> <param name=”irotz” value=”00”> <param name=”style” value=”1”>
<param name=”color” value=”#00FF66”> <param name=”bgcolor” value=”#2B2B2B”> <param name=”12hour” value=”0”>
192
Using Plugins and Applets
</applet>
</div>
<div id=’infoButton’></div> </div>
<div id=”back”>
<img span=”backgroundImage” src=”Back.png”> <div id=”dtLink”>Widget<br><a href=”#”
onclick=widget.openURL(“http://www.deadtrees.net/”);”>http://www.deadtrees.net/</a>
</div>
<div id=”apLink”>Java Applet<br><a href=”#” onClick=”widget.openURL(“http://www.dataway.ch/~bennet/”);”>http://www.dataway.ch/~ bennet/</a></div>
<div id=”doneButton”></div> </div>
</body>
</html>
6.The CSS file must include a selector to control the placement of the applet on the widget. Without the <div> in the HTML file and its selector in the CSS file, the applet will get loaded, but you will not be able to see it on the widget.
body { margin: 0;
}
.backgroundImage { position: absolute; top: 0px;
left: 0px;
}
#applet { position:absolute; top:15px; left:20px;
}
#infoButton { position:absolute; bottom: 35px; right: 30px;
}
#doneButton { position: absolute; bottom: 30px; left: 90px;
}
#front {
display: block;
}
#dtLink { position:absolute;
font: 12px “Helvetica Neue”;
193
Chapter 12
color:white;
bottom:100;
left:25;
}
#apLink { position:absolute;
font: 12px “Helvetica Neue”; color:white;
bottom:60;
left:25;
}
#back {
display: none;
}
How It Works
The widget is a container for the Java applet. In the case of the Distorter widget discussed in Chapter 11, the widget contained a bare minimum of the elements that are typically used for a widget. The CSS markup was included in the HTML file and the widget didn’t have a JavaScript file because it didn’t have a back side. As you can see from the example here, the entry in the Info.plist file, the additions for the applet in the HTML file, and the CSS formatting are all that are needed for the applet. In spite of the simplicity of the 3D Clock widget, it weighs in with 40 megabytes of memory (Figure 12-8).
Figure 12-8
194
Using Plugins and Applets
Summar y
Though you may not be ready to create your own Java applet or custom widget plugin, you can still get the benefits by incorporating them into your widget.
In this chapter, you learned:
Why you might want to use a widget
How to incorporate a plugin into your widget
How to incorporate a Java applet into your widget
Exercises
1.What differentiates widget plugins from WebKit plugins?
2.Do you have to add WebKit plugins to your Widget?
3.Why does Apple suggest that you not include Java applets or Flash in your widget?
195
Part III
Example Widgets
Chapter 13: Easy Envelopes
Chapter 14: SecureCopy Widget
Chapter 15: Amazon Album Art
Chapter 16: Timbuktu Quick Connect
Chapter 17: iPhoto Mini
Chapter 18: iTunes Connection Monitor
Chapter 19: More Widgets
13
Easy Envelopes
More than one critic has commented that it would be quicker to open a browser with bookmarks than Dashboard with the different widgets. That may be the case for most web pages, but sometimes you don’t want the whole web page and not everything that a widget accesses is a web page. For instance, it is quicker to open a widget to get the particular map you want at weather.com than to load the entire page. You could access system information from the command line with Safari, but a widget is much lighter weight for that task. Sometimes you just can’t accomplish
in Safari what a widget will do.
Easy Envelopes
Take the Easy Envelopes by Andrew Welch of Ambrosia Software as an example. Several envelope printing applications have been available for the Macintosh during its history and envelope printing templates are available for most of the word processors. Easy Envelopes, however, captures all of the functionality you need in a widget. Perhaps it is because all of the other envelope printing utilities are full-blown applications that Easy Envelopes seems to stretch the idea of a widget a bit.
If a widget is supposed to do one thing well, however, Easy Envelopes is a widget. It may not be a web page for Dashboard the way most widgets are, but it only prints envelopes and it does that extremely well.
The Interface
Easy Envelopes has one of the cleverest interfaces of the 1,700-plus widgets on the Dashboard Downloads site. Not only does it look like an envelope (Figure 13-1), but every graphic on the interface has a use or provides information to the user. The version number of the widget appears above the stamp, the printer name and the envelope size appear in the lower-left corner of the widget.
Chapter 13
Figure 13-1
Clicking the printer postage stamp opens the print dialog. Once the widget is configured with the return address, printer, and envelope size, you can print an envelope quickly by entering the address and then clicking the postage stamp (Figure 13-2). The print dialog includes an additional warning to feed the envelope face up.
Figure 13-2
200