How to Make a Widget

Dashboard widgets are created using a mix of HTML, JavaScript and CSS and are a useful feature for Tiger users, helping them to utilize the power of Mac OS X. If you already know how to write web content using the current web-standard practices that comply with the XHTML standard, (Strict, Transitional or Frameset,) creating a new Mac widget is fun and simple.

Instructions

1. Create a directory to hold your widget. Widgets install as "widget packages" or directories with a .wdgt extension and are found in OS X in one of two folders. Standard Tiger system widgets are stored in the "/Library/Widgets" folder and user-installed widgets are stored in the "~/Library/Widgets" folder.

2. Open the new widget folder. Hold down on the "Control" key while you click on the newly created "Wdgt file." In the menu, select "Show Package Contents" to open a new folder. Keep the folder open in order to easily drag files into it.

3. Choose your widget image. Take the images you have selected and create a PNG image file. Label the file "default.png." Once created, drag the file into the widget folder.

4. Define the "info.plist" file, a property list that holds important information used by Dashboard to identify the widget. Use the Property List Editor application found in: "/Developer/Applications/Utilities." Use XML code to create the CFBundleIdentifier key, a unique string for your widget and the MainHTML key, which tells the dashboard the HTML file to use in your widget. Choose "Save As" from the file and label the file as "info.plist" and then drag it into your widget folder.

5. Establish the main HTML file. Make an HTML file and label it as "index.html" and drag the file into your widget folder.

6. Open the HTML file to view the widget running and to see your changes. A widget is created using HTML, for this reason it is possible to preview your widget using Safari, or another web browser, while at the same time writing the markup in your favorite text editor.

Tips & Warnings

• Xcode 2.0, included with Tiger, contains information and examples to help get you started. This information is available in the Apple Applications in the ADC Reference Library.

• For sample code and sample widget install the Tiger Developer Tools and see /Developer/Examples/Dashboard.