Dashboard (Mac OS) - Creation of Widgets

Creation of Widgets

Dashboard widgets are created using Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript. Because the same languages are used for creating websites, many web developers can already build them. Widgets themselves are, at the core, simply HTML files that are displayed within the Dashboard layer; they use the WebKit application framework that is also used in Apple's Safari web browser, meaning even users running earlier versions of Mac OS X — where Dashboard is unavailable — can build them.

When a Dashboard widget is built, it usually consists of six files:

• The widget's HTML file, which is the actual file that will be displayed in the Dashboard layer
• The widget's CSS file, which is used for styling the widget (but is called on from the HTML file)
• The widget's JavaScript file, although it may be implemented directly within the HTML file if the developer desires
• The widget's Property List (called “Info.plist”), which is what Dashboard uses to load the widget’s properties (i.e.: name, version, HTML file, etc.)
• The background image of the widget, in PNG format
• The icon that is displayed in the menu bar

Once all of these files are in the root of a directory, it is given a name and the extension ".wdgt", and then it can be opened up in Dashboard as a widget. More complex widgets may also include a Cocoa widget plugin (for platform-specific functionality), one or more JavaScript files (for text scrolling, preferences, etc.) or multiple images (for personalized select menus or buttons).

Mac OS X v10.5 "Leopard" includes an application called Dashcode, which is a more user-friendly way of creating widgets. Another new feature of Mac OS X Leopard is called "Web Clips" which lets users easily create widgets from parts of a webpage. During the WWDC 2007 keynote, Steve Jobs made widgets out of the following: the featured news headlines on Yahoo.com, the top ten most searched terms on Google, the Photo of the Day on National Geographic, the Dilbert comic strip, and the box office information from Rotten Tomatoes. The user can also customize the border to further personalize the widgets.