1. Copyright 2005 John Gaver - Not for commercial display.8/20/05 Creating & Manipulating Dashboard Widgets presented to the Houston Area Apple User Group by John Gaver

2. 8/20/05Copyright 2005 John Gaver - Not for commercial display. What is a widget? Dashboard Widgets are very small, specialized applets, created using a mix of HTML, JavaScript, and CSS. Though some basic web skills are needed, you don’t need to be a programming wiz, to create a basic widget. You just have to know enough to be dangerous.

3. 8/20/05Copyright 2005 John Gaver - Not for commercial display. What’s in a Widget? Info.plist Describes the widget to Dashboard. icon.png The image for the Dashboard icon. Default.png The image that displays while the widget is loading. index.html The main html file that is the basis of the widget. stylesheet.css The optional stylesheet defines the appearance, visibility and placement of html elements in the widget. javascript.js The optional JavaScript file does most of the real work in complex widgets. These are only the base files that will be a part of most widgets. The CSS and JavaScript files are not required for simple widgets, but you will need them to flip the widget, access the internet or do calculations. Other common files are front and back images and localization files.

4. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Creating a Widget Create folder for widget (name.wdgt) Create the Info.plist file Create icon & background graphics Create main HTML file Create CSS & JavaScript files as needed Test basic functions of widget in Safari Place new folder in Widgets folder

5. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Info.plist Selected Definitions KeyPurposeTypeRequired CFBundleNameName of the bundleStringYes CFBundleDisplayNameDisplay name of the bundleStringYes CFBundleIdentifierReverse domain style identifierStringYes CFBundleVersionWidget version numberStringYes MainHTMLName of main html fileStringYes AllowMultipleInstancesMultiple instances permissionBooleanNo AllowSystemSystem access permissionBooleanNo AllowNetworkAccessNetwork access permissionBooleanNo WidthWidth of widget in pixelsNumberNo HeightHeight of widget in pixelsNumberNo CloseBoxInsetXHorizontal pixel inset of close boxNumberNo CloseBoxInsetYVertical pixel inset of close boxNumberNo PluginName of plugin used by widgetStringNo http://developer.apple.com/documentation/AppleApplications/Reference/Dashboard_Ref/DashboardPlist/chapter_4_section_1.html

6. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Sample Info.plist AllowFullAccess CFBundleDisplayName My Cool Widget CFBundleIdentifier com.methegreat.mywidget CFBundleName MyCoolWidget CFBundleShortVersionString 1.0 CFBundleVersion 1.0 CloseBoxInsetX 10 CloseBoxInsetY 10 Height 150 MainHTML index.html Width 150 When you see this, wonder why.

7. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Icon Image Portable Network Graphics (.PNG) Transparent background (preferred) Maximum size 150x150 pixels

8. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Widget Design Conventions All images are “.PNG” format Transparent background (preferred) K.I.S.S. Keep it small - leave room for others Use custom controls on front This: Not this: Use Aqua interface for preferences on back, but use custom buttons

9. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Main HTML K.I.S.S. Use Apple sample or plagiarize Best use of HTML is tiny file that calls & relies upon CSS and JavaScript Place elements with CSS - not HTML Do the work with JavaScript - not HTML HTML should define and direct only

10. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Sample HTML File @import "stylesheet.css"; ??? The Wham-Bam-Tram Ram Counter celebrates Houston's "World Class" (snicker) light rail system that is reducing Houston traffic, by taking cars off the roads - one crash at a time. (more…) @import "stylesheet.css"; ??? The Wham-Bam-Tram Ram Counter celebrates Houston's "World Class" (snicker) light rail system that is reducing Houston traffic, by taking cars off the roads - one crash at a time. (more…)

11. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Key CSS Features Front and back background –Front initially visible –Back initially hidden “flip” and “fliprollie” image & positioning Text formats and positioning Controls positioning

12. 8/20/05Copyright 2005 John Gaver - Not for commercial display. CSS Sample Styles body { margin: 0; }.backgroundf { position: absolute; background-image: url(front.png); background-repeat: no-repeat; top: 0px; left: 0px; width: 200px; height: 114px; }.bg { position: absolute; top: 43px; left: 0px; width: 151px; height: 71px; text-align: center; color: #FFFFFF; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }

13. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Flip i CSS Styles.flip { position:absolute; top: 1px; right: 1px; width:13px; height:13px; } #flip { opacity:0; background: url(file:///System/Library/WidgetResources/ibutton/black_i.png) no-repeat top left; z-index:7999; } #fliprollie { display:none; opacity:0.25; background: url(file:///System/Library/WidgetResources/ibutton/black_rollie.png) no-repeat top left; z-index:8000; }

14. 8/20/05Copyright 2005 John Gaver - Not for commercial display. JavaScript File Called by the HTML file Does most of the work There may be more than one Works with the CSS file Uses special widget extensions Should activate on open/display Should sleep when dashboard hides

15. 8/20/05Copyright 2005 John Gaver - Not for commercial display. JavaScript Activate & Sleep Functions function setup() { if (window.widget) { widget.onhide = onhide; widget.onshow = onshow; } myFunction(); } var timerInterval = null; function onshow() { if (timerInterval == null) { timerInterval = setInterval(”myFunction(true);", 600000); } myFunction(); } function onhide() { if (timerInterval != null) { clearInterval(timerInterval); timerInterval = null; } } Do NOT leave a timed function running when Dashboard is hidden!

16. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Other Important JavaScript Code function showBack () function hideBack () function mousemove (event) function mouseexit (event) function enterflip (event) function exitflip (event) http://developer.apple.com/documentation/AppleApplications/Conceptual/Dashboard_Tutorial/Preferences/chapter_5_section_3.html

17. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Other Important JavaScript Code function animate () function limit_3 (a, b, c) function computeNextFloat (from, to, ease) http://developer.apple.com/documentation/AppleApplications/Conceptual/Dashboard_Tutorial/Preferences/chapter_5_section_3.html

18. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Web Resources Dashboard Programming Guide http://developer.apple.com/documentation/AppleApplications/Conceptual/Dashboard_Tutorial/index.html Dashboard Reference http://developer.apple.com/documentation/AppleApplications/Reference/Dashboard_Ref/index.html Sample Code http://developer.apple.com/samplecode/AppleApplications/idxDashboard-date.html

19. 8/20/05Copyright 2005 John Gaver - Not for commercial display. More Info (Just Released) http://www.spiderworks.com/books/dashboard.php Mac OS X Technology Guide to Dashboard By Danny Goodman Print version – ISBN: 0-9744344-7-7 eBook version – ISBN: 0-9744344-0-X

20. 8/20/05Copyright 2005 John Gaver - Not for commercial display. Conclusion DON’T RE-INVENT THE WHEEL! Cut and Paste Whenever Possible.

21. 8/20/05Copyright 2005 John Gaver - Not for commercial display. This presentation and some of the widgets and tools mentioned in this presentation may be downloaded from the Downloads page of the ActionAmerica.org web site at: Thank You http://www.ActionAmerica.org/downloads/index.shtml