Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 36 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
36
Dung lượng
0,96 MB
Nội dung
The PasswordPlugin also helps restore the user name and password. function restoreUserLogin(){ backForm = document.backForm; theForm = document.mainForm; if (window.widget){ var savedUsername = widget.preferenceForKey(usernameKey); if (savedUsername != undefined) { backForm.username.value = savedUsername; theForm.journals.options.length = 0; addOptionToList(theForm.journals, backForm.username.value, ‘’); theForm.journals.options.selectedIndex = 0; changeList(“journals_list”, “journals_text”); } if (PasswordPlugin){ backForm.password.value = PasswordPlugin.getPassword(backForm.username.value, “LiveWidgetPassword”); } if ((backForm.password.value.length > 0) & (backForm.password.value.length > 0)){ startGetInfo(); } } } As you saw in Chapter 6, JavaScript is the workhorse carrying the information from the form on the back of the widget to the keychain and the preferences. Using Java Applets As we saw in Chapter 11, Dashboard includes an access key that allows you to incorporate a Java applet into your widget. Because widgets are basically HTML pages, adding an applet to a widget is just like adding an applet to a web page. As simple as this is, Apple suggests that you not use applets or Flash in your widget because they are so memory heavy. It is possible to grab a Java applet and incorporate it into a widget. For example, the 3D Clock applet shown in Figure 12-6 is a Java applet available on the Free Java website (www.javafile.com/clocks/ coolclock/coolclock.php ) or Bennet Uk’s website (www.dataway.ch/~bennet/). You can create a simple widget to hold the Java class and display the clock. Try It Out Add a Java Applet to Your Widget To see how this would work, let’s create a simple widget to hold the Java applet. 1. Create a basic widget background panel (Figure 12-6). 2. Create a folder for the widget and drop all of the widget files in it (Figure 12-7). You can include the AppleClasses directory for backward compatibility and the graphics files for the widget back and icon. 190 Chapter 12 17_778257 ch12.qxp 6/9/06 9:34 AM Page 190 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 Using Plugins and Applets 17_778257 ch12.qxp 6/9/06 9:34 AM Page 191 <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 Chapter 12 17_778257 ch12.qxp 6/9/06 9:34 AM Page 192 </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 Using Plugins and Applets 17_778257 ch12.qxp 6/9/06 9:34 AM Page 193 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 Chapter 12 17_778257 ch12.qxp 6/9/06 9:34 AM Page 194 Summary 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 Using Plugins and Applets 17_778257 ch12.qxp 6/9/06 9:34 AM Page 195 17_778257 ch12.qxp 6/9/06 9:34 AM Page 196 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 18_778257 pt03.qxp 6/9/06 9:34 AM Page 197 18_778257 pt03.qxp 6/9/06 9:34 AM Page 198 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 some- times 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 print- ing 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 inter- face 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. 19_778257 ch13.qxp 6/9/06 9:35 AM Page 199 [...]... 155px; top: 136px; } #fromButtonImage { position: absolute; left: 225px; top: 130px; -apple -dashboard- region: dashboard- region(control rectangle); } #fromButtonText { font: 12px “Helvetica Neue”; font-weight: Bold; 218 SecureCopy Widget color: white; text-shadow: black 0px 1px 0px; position: absolute; left: 230px; top: 136px; } #flip { position: fixed; bottom: 32px; left: 14px; } backgroundImage { position:... 82px; width: 205px; border-width: 0px; border-color: transparent; background-color: transparent; -apple -dashboard- region: dashboard- region(control rectangle); } #toButtonImage { position: absolute; left: 140px; top: 130px; -apple -dashboard- region: dashboard- region(control rectangle); } #toButtonText { font: 12px “Helvetica Neue”; font-weight: Bold; color: white; text-shadow: black 0px 1px 0px; position:... onblur=”changeCustomReturnAddress();”> And the CSS file contains the canvas and text specifications #backReturnAddressText { font: 12px “LucidaGrande” ; font-weight: normal; position: absolute; top: 145px; left: 250px; width: 10000px; clip: rect(0, 145, 70 , 0); } #backReturnAddressCustomText { position: absolute; top: 140px; left: 245px; width: 145px; height: 70 px; visibility: hidden; } #backReturnAddressImage { position:... green; position: absolute; left: 93px; top: 60px; width: 205px; border-width: 0px; border-color: transparent; background-color: transparent; -apple -dashboard- region: dashboard- region(control rectangle); } hostLabel { font: 11px “Helvetica Neue”; font-weight: bold; color: black; position: absolute; left: 56px; top: 43px; } #hostText { font: 12px “Courier New”; font-weight: bold; color: green; position:... of the widget body { margin: 0; } #front { display: block; position: absolute; top: 0px; left: 0px; } windowLabel { font: 15px “Helvetica Neue”; font-weight: bold; color: black; position: absolute; left: 20px; top: 10px; } fileLabel { font: 11px “Helvetica Neue”; font-weight: bold; color: black; position: absolute; left: 34px; top: 64px; } #fileText { font: 12px “Courier New”; 216 SecureCopy Widget. .. left: 93px; top: 38px; width: 205px; border-width: 0px; border-color: transparent; background-color: transparent; -apple -dashboard- region: dashboard- region(control rectangle); } userLabel { font: 11px “Helvetica Neue”; font-weight: bold; color: black; position: absolute; left: 31px; top: 110px; } #userText { font: 12px “Courier New”; font-weight: bold; color: green; position: absolute; left: 93px; top:... 104px; width: 205px; border-width: 0px; border-color: transparent; 2 17 Chapter 14 background-color: transparent; -apple -dashboard- region: dashboard- region(control rectangle); } switchesLabel { font: 11px “Helvetica Neue”; font-weight: bold; color: black; position: absolute; left: 26px; top: 86px; } #switchesText { font: 12px “Courier New”; font-weight: bold; color: green; position: absolute; left: 93px;... backgroundImage { position: absolute; top: 0px; left: 0px; } #back { display: none; position: absolute; top: 0px; left: 0px; } #doneButton { position:absolute; bottom:20px; left:254px; } #man { font: 10px “Helvetica Neue”; color: white; position: absolute; left: 20px; top: 20px; width: 85%; } table font: #r1c1 #r2c1 #r3c1 #r4c1 {table-layout: auto; width: auto; 10px “Helvetica Neue”; color: white;} {width:10%;... id=”returnAddressText” > If you look in the CSS file, you can see the position for the front return address specified as well as the default text specifications for the return address #returnAddressText { font: 12px “LucidaGrande” ; font-weight: normal; position: absolute; top: 20px; left: 25px; } #returnAddressImage { position: absolute; top: 20px; left:... #envelopeCanvas { position: absolute; top: 135; left: 25; } The area on the left side of the widget back contains the envelope icon document.getElementById(“addressText”).blur(); . applets or Flash in your widget? 195 Using Plugins and Applets 17_ 778 2 57 ch12.qxp 6/9/06 9:34 AM Page 195 17_ 778 2 57 ch12.qxp 6/9/06 9:34 AM Page 196 Part III Example Widgets Chapter 13: Easy. 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:. normal; position: absolute; top: 145px; left: 250px; width: 10000px; clip: rect(0, 145, 70 , 0); } #backReturnAddressCustomText { position: absolute; top: 140px; left: 245px; width: 145px; height: