Chapter 1. Innovate with Windows Vista Sidebar Gadgets
"...the only reason to invest in companies in the future is their ability to innovate...
—Jeffrey Immelt, CEO, GE
IN THIS CHAPTER
- Introducing Gadgets and the Vista Sidebar
- Innovate with Gadgets
- Gadgets in Depth
- Multiple Platforms for Gadgets
Introducing Gadgets and the Vista Sidebar
For many people, Sidebar gadgets are the coolest new feature in the Windows Vista operating system. Gadgets are small, lightweight applications that reside on the Windows Vista Sidebar or Windows Vista desktop. They provide ready-to-use information and easy access to frequently used features and tools.
Gadgets offer a diverse range of functionality, from giving you an at-a-glance view of your upcoming appointments, to listing online contacts, to displaying a picture slideshow of your Flickr account, to offering an easy way to control your media player. Gadgets can have any number of dedicated purposes. As shown in Figure 1.1, they can be clocks, calculators, games, sticky notes, and more.
FIGURE 1.1. Gadgets can be placed anywhere on the Vista desktop, but most are organized on the Windows Sidebar.
Windows Sidebar
The Windows Sidebar is a pane on the side of the Microsoft Windows Vista desktop and is used to place and organize the gadgets. You can easily customize the Windows Sidebar to suit your preference: always on top or resting below maximized windows. If you don't want to keep your gadgets on the Windows Sidebar, you can drag them to your desktop and hide the Sidebar. The Windows Sidebar can also be activated from the icon in the system tray.
Gadgets can have multiple instances, both in the Sidebar as well as on the Windows desktop, and these can be configured with different settings. For example, you can have two instances of a Clock Gadget, one showing the current time for San Diego, California and the other one for Paris, France.
A Vista Sidebar gadget consists of HTML, CSS, JavaScript, and image files, all coordinated to accomplish a variety of tasks. You can host a mini web page, call a web service, integrate with a business application, or even call operating system APIs to create a custom application.
Technology Behind Gadgets
Gadgets are developed using standard web technologies, namely HTML, CSS, and JavaScript, but they can also use technologies such as DHTML, Ajax, and ActiveX COM for advanced functionalities. A gadget can be thought of as an HTML Application (HTA) with advanced features and properties. All the interfaces used in the gadget, the gadget main window, the settings page, as well as the flyout window, all are HTML pages.
A gadget can also use advanced plug-ins such as Adobe Flash, Windows Media Player, and Microsoft Silverlight. Anything that can be hosted in a web page can be used in gadget development.
Figure 1.2 gives an overview of the technology and related platforms used for gadget development. Most of the technologies overlap in a number of applications.
FIGURE 1.2. Different types of applications require different technologies in gadget development.
In the next section we discuss these technologies in more detail.
Different types of applications can be created using Sidebar gadgets:
• A mini web application— Mini web applications use HTML, CSS, and JavaScript and can display a small web page from a website or part of the functionality of an existing web application. Or they can just show an existing website on the flyout window.
• A data application— Data applications that collect and aggregate data are quite popular nowadays because of the interoperability advantage an XML file provides. XML data is available all over the Internet in the form of RSS/atom feeds, plain XML files, XHTML pages, and web services providing XML data.
DHTML, XML, XHTML, and Ajax are the tools for development of data applications.
• A lightweight application that uses the Gadget Object Model and Windows APIs to give shortcuts to frquently accessed tools and features —Quick information and shortcuts to frequently used features, tools, and applications are also among the attractive options for developing gadgets. You can use gadget APIs to develop utilities, which exposes system functionalities such as hardware information, files and folders, network, memory, CPU, and so on.
Brief History of Gadgets
Windows XP includes a feature called Active Desktop, which provides the functionality of hosting web pages and channels built with Microsoft's Channel Definition Format (CDF) on the desktop. This is significant because it provides some of the features now found in desktop gadgets. Vista Sidebar gadgets are the logical evolution from Active Desktop.
Channel Definition Format (CDF) is a standard XML file that helps web masters organize their websites. It is used to store website information and image file locations related to a website in a hierarchical format.
More information can be found at http://msdn2.microsoft.com/en-us/library/aa768024.aspx (keyword "Create Channel Definition Format").
Gadgets have evolved as a result of different trends in computing:
- Efficient use of desktop space with respect to the current trend for widescreen monitors/dual monitors
- Better personalization of the desktop experience
- Need for lightweight applications
- New dashboard-style presentation of data, which permits access to a variety of different data sources and formats
Sidebar gadget technology is much more structured than Active Desktop and follows an extensible model. It comes with a full set of APIs to support rich and powerful applications.
Innovate with Gadgets
A Sidebar gadget provides information and interacts with the user in a unique way. It extracts useful information from a variety of sources, an application running in the background, RSS feeds, an enterprise solution, or a web application (see Figure 1.3). There are endless possibilities for what you can do with a gadget.
FIGURE 1.3. Gadgets extract information from multiple sources and present it to the user.
The gadget platform gives you quick access to both desktop and web applications, which make it a platform on which you can innovate and implement ideas in unique ways. It reduces the gap between useful information and the user by providing information in a ready-to-use format in the Windows Sidebar.
For example, you no longer have to open a website to read news. Instead, a news gadget displays the latest news in your Sidebar; the RSS Reader Gadget makes your favorite blog available at your fingertips.
Some of the things a Sidebar gadget can do include the following:
- Host a web page, read an RSS feed
- Connect to a web service
- Use an online streaming server to play audios/videos
- Provide system information
- Host calculators, games, calendars, and so on
- Connect to an enterprisewide application such as Microsoft SharePoint
Consider an example of a utility gadget. Many users like to know what their CPU utilization is, which up to this point required you to start the Windows Task Manager. With the availability of gadgets in Vista, you need only hold down the Windows key and press the spacebar (the shortcut for showing the Sidebar on the desktop) and then look at the CPU Meter Gadget. If you have a widescreen monitor or dual monitor it's even simpler to just keep the Sidebar and the gadgets you need on display full time.
Imagine an application that can use a native Windows application along with real-time online data, providing you information you want in the way you want it. For example, you might make a Radio Gadget for your favorite radio channel from your hometown, or a media player combined with a real-time streaming audio server, or a section of a web page hosted in a gadget, for which you needed to go to the website. These are some of the time-saving capabilities and fingertip information that make a gadget very useful.
Types of Gadgets
Gadgets can be broadly classified into four major types:
- Information gadgets
- Application gadgets
- Utility gadgets
- Fun gadgets
This classification affects the implementation of the gadget and determines the technology to be used for that implementation. Table 1.1 offers a brief rundown of each gadget type, and the following sections dig into each type in more detail.
TABLE 1.1. Different Types of Gadgets with Technology and Usage
Information Gadgets
Information gadgets provide easy access to relevant content from a web page, RSS feed, or web service. Some examples of this class of gadgets are a stock ticker, RSS feed reader, currency converter, or a gadget showing real-time traffic data. Figure 1.4 shows an example of a gadget that tells you the local weather.
The gadget acquires its data from an online web service. You can see the similarities in the data related to the weather of San Diego, in the gadget, and in the website in Figure 1.5.
The Weather Gadget queries the web service located at the URL http://weather.msn.com for data related to the climatic condition of a particular city. The web service returns the current weather information to the gadget in text format. The data is then rendered in the gadget, along with other user-friendly images that are available with the gadget. In the example of Figure 1.4 and Figure 1.5, the city queried to the web service is San Diego, California. And based on the data returned (72 degree Fahrenheit) the image of a bright sun is shown.
FIGURE 1.4. The Weather Gadget is an example of the Information gadget type.
FIGURE 1.5. The Weather web service at http://weather.msn.com provides the data for the current conditions based on location.
Application Gadgets
Application gadgets are those that rely on other applications to get the information required. Examples include an Outlook Gadget that shows upcoming appointments from Microsoft Outlook and a Messenger Gadget that displays online contacts from an instant messenger application (see Figure 1.6). Obviously, these gadgets are not of much use without the main application, but they do serve as valuable tools for quickly accessing baseline information.
The application gadgets shown in Figure 1.6 use Windows APIs and Registry information to get access to frequently used data related to the corresponding application. Most Recent Used (MRU) lists are maintained by the Windows operating system in the Registry. The Recent Documents Gadget lists the most recently used Microsoft Office documents and the Outlook Appointment Gadget shows the upcoming appointments from Microsoft Outlook.
FIGURE 1.6. The Recent Documents Gadget and Microsoft Outlook Gadget provide quick access to current data.
You can access these application-related information sources by using either Gadget Object or ActiveX technology.
Utility Gadgets
Utility gadgets are standalone mini-applications designed to enable fast access to frequently used features such as the CPU Meter, Calendar control, and so forth (see Figure 1.7).
FIGURE 1.7. The Clock Gadget for Time and CPU Meter Gadget showing real-time CPU usage are examples of Utility gadgets.
A utility gadget normally uses the local computer's resources to provide quick access to useful information. These gadgets use Windows APIs to get access to advanced features of the operating system.
Fun Gadgets
Fun gadgets are the most popular kinds of gadgets. Unlike other gadget types, they don't have a specific implementation. They can use an online feed to display interesting information like an information gadget, and even be a standalone game with properties similar to those of a utility gadget. A fun gadget can use images stored in the local computer to display a slideshow and also act as an application gadget. The purpose of these gadgets is to provide fun and entertainment.
They normally take the shape of Utility gadgets and are standalone lightweight applications for fun and games, such as the Minesweeper Gadget. But developers are also creating them as information gadgets and even application gadgets. Developers all over the world are coming up with ideas that combine online feeds, Windows applications, and more for the purposes of making a gadget platform for fun.
Figure 1.8 shows a Video Gadget, which takes an RSS feed from soapbox.msn.com and shows video in a Flash player embedded in the flyout window.
FIGURE 1.8. The Video Gadget gets the data from the RSS feed provided by http://videos.msn.com and plays the media in a Flash Player plug-in.
Ultimately, gadgets are all about enhancing productivity and personalizing the user's experience for visualizing information. They open a world of new and innovative ideas that hasn't been widely exploited on the Windows platform up to this point.
Gadgets in Depth
To understand gadgets in further detail you need to know what the limitations of the gadget are, what gadgets are meant for, and what gadgets are not. You need to know the different views of the gadget and how to customize the gadget.
Some of the topics worth discussion are
- What gadgets are not
- Different views of the gadget
- Opacity level and Always on Top property
- Using flyout for more information
- Other customization options
What Gadgets Are Not
Gadgets are task-specific applications. They aren't designed to replace a fully functional application, but are instead designed to either live on their own with a small set of functionality or complement an application.
As a gadget developer, remember that gadgets are lightweight. There is no need to try and squeeze too much information into a gadget. Just provide the most interesting information to users and then let them go and navigate to a website or an application to examine that information in more depth.
Gadgets are not fully fledged applications, so there are number of things to consider when creating a gadget:
- Gadgets are not executable files.
- Gadgets do not run as individual processes but on the Sidebar pane and can be dragged onto the Windows desktop.
- Gadgets are not available in the Start menu or Task Manager, and cannot be accessed using Alt +Tab keys.
- Gadgets don't have window dialogs with menus, toolbars, or Maximize and Minimize buttons.
- Gadgets are not complete web pages: You cannot navigate links inside a gadget.
Different Views—The Three Hats of the Gadget
Based on the user's choice, the gadget can provide information in three different views:
- Docked view— The gadget is placed on the Windows Vista Sidebar (see Figure 1.9). It provides the basic information of the gadget and there is an optional flyout window for more information. This is also the default view of all gadgets.
FIGURE 1.9. Gadgets, when added, are docked in the Vista Sidebar. This is the default state of the gadget.
- Floating view— A floating gadget can be dragged from the Sidebar pane to the desktop, which gives a bigger and better view of the information (see Figure 1.10).
- Multiple view— You can also have multiple instances of the gadget, both in the Sidebar pane as well as on the desktop. Multiple views are useful when you want information filtered by different criteria displayed in individual instances of the gadget. For example, to compare weather for two different locations, all you need to do is add two instances of the gadget, each customized for an individual location.
Figure 1.10. Gadgets can be dragged from the Sidebar and can be placed anywhere in the user's desktop.
Opacity Level and Always on Top Property
Gadgets provide a unique level of customization. When the gadget is in a floating view, you can right-click a gadget and check the Always on Top property (see Figure 1.11). This enables a gadget to remain above all the running windows and makes it more efficient and useful. For example, while running a CPU-intensive application you can see the CPU meter on top of it and monitor the usage in real time.
FIGURE 1.11. The Always on Top property ensures the visibility of the gadget even above maximized windows of other applications.
Gadgets also have an Opacity property, which enables users to customize their opacity levels. The opacity level is defined in terms of percentage. For example an opacity level of 50%, used along with the Always on Top property, gives a translucent effect to a gadget when it is above other applications.
Using Flyout for More Information
Gadgets also have an optional flyout window that can be used for providing further interactive information based on user choice (see Figure 1.12).
FIGURE 1.12. A flyout window in a Feed Headlines Gadget is used to display details on the feed selected by the user.
A flyout is an excellent tool for displaying additional information related to the limited amount available within the gadget. It also enables the user to interact with the gadget and to navigate to another resource from the gadget. If you click on the desktop or any other window on the desktop, the flyout window automatically hides.
Customization
All gadgets have a settings and configuration page that you can access by clicking on Options in the context menu (which is displayed by right-clicking on the gadget) or clicking on the Settings icon as shown in Figure 1.13. The Settings page enables users to customize the gadget the way they want, providing a much more personalized experience. It is particularly helpful when you want multiple views of the gadget with different data.
FIGURE 1.13. The Settings page of the Gadget with current location set to San Diego in a Weather Gadget. Note the option for changing the temperature in Celsius or Fahrenheit.
Multiple Platforms for Gadgets
This is fast becoming an era of gadgets. Microsoft gadget platforms have three different kinds of gadgets:
- Sidebar gadget (Windows Vista Desktop)
- Web gadget (Live.com or Live Spaces)
- SideShow gadget (auxiliary hardware devices)
Sidebar gadgets are aimed at the desktop; web gadgets run in a web browser either on the Live.com page or Live Spaces, whereas SideShow gadgets are aimed at auxiliary hardware devices.
Sidebar gadgets use DHTML as a development platform and are meant for the desktop. The gadgets that you write for Windows Sidebar are developed with the Gadget Object Model, which lets you interact with your desktop as well as with web services. They do not run on a web browser, but rather on a Sidebar or desktop as small mini-applications.
The web gadgets are usually understood to reside on Live.com (see Figure 1.14). They are written in DHTML with Ajax libraries. They run with in any web browser and are hosted in either live.com or Live Spaces.
FIGURE 1.14. An example of a web gadget, the Weather Gadget is hosted by the Live.com web page.
NOTE
A web gadget for Live.com and Live Spaces is hosted on a web server rather than a Sidebar and runs inside a browser. Developers develop these gadgets using JavaScript libraries provided by Microsoft, along with the platform to host them. More information on development of Live Gadgets can be found at http://microsoftgadgets.com/livesdk/index.
SideShows are hardware devices that can be found, for example, on the side of a laptop PC (see Figure 1.15), on smart portable devices, or even on mobile phones.
FIGURE 1.15. A Windows SideShow device can be a part of laptop, a smart portable object device, or a cell phone with SideShow capabilities.
SideShow gadgets are written with applications developed with C++ and are more device oriented. A gadget for Windows SideShow is a mini-application running on the PC that sends data to devices with the Windows SideShow platform. The gadget retrieves data from a data source such as an application or web service, and sends this data to the Windows SideShow platform, which sends it to the appropriate devices. A gadget can communicate with the Windows SideShow platform, using one of the following options:
- C++ with SideShow COM APIs
- SideShow-managed APIs with C# or Visual Basic .NET
- Microsoft Sidebar gadget, using the SideShow object model
The SideShow devices are especially interesting because they still function when the laptop is turned off, closed, or in sleep. You therefore have access to information that the Sidebar gadget has sent to the device.
Meeting Points for Different Gadgets
The different platforms on which you can develop different gadgets are also similar in many ways. Their unified goal is to provide quick information from different applications, web services, and XML feeds.
Most of the web gadgets can be tweaked to run as Sidebar gadgets. A widget box is a Sidebar gadget that can include any number of web gadgets in the Sidebar. Check Appendix B for more details on Widgetbox Gadgets.
A Sidebar gadget also can create data on SideShow devices, such that a Sidebar Weather Gadget can send the information to the device on the side of the laptop, as illustrated in Figure 1.16.
Figure 1.16. A web gadget can be converted to a Sidebar gadget and a Sidebar can send data to SideShow devices.
The Development Platform
Different gadget platforms use different development platforms:
- Sidebar gadget uses Gadget Object Model, HTML, CSS, and JavaScript.
- Web gadget primarily uses DHTML with the Ajax library.
- SideShow gadget uses C++, SideShow COM APIs, and SideShow-managed APIs with managed code.
Table 1.2 shows a comprehensive chart of the differences between the different gadget platforms.
TABLE 1.2. Gadget Platforms Differ in Use, Technology, and the Target Host
Gadget Ecosystem
Microsoft Gadgets have an online community at http://gallery.live.com, which enables users to browse through the huge number of existing ready-to-use gadgets. The Gallery at Live.com not only hosts all kinds of gadget but also provides dedicated forums for each kind of gadgets, with thousands of users from all over the world. These forums prove to be very useful for interacting with other gadget developers and sharing ideas, problems, and solutions.
Gallery.Live.com also hosts a Developer Center, which provides a Software Development Kit for almost all kinds of gadgets.
Other Desktop Gadget/Widget Platforms
Apart from Microsoft, all the popular internet vendors have their own versions of desktop gadgets. Although the terms gadgets and widgets are interchangeable and in a broad sense both are used for a small, lightweight applications for accessing remote data, there is a classification based on the environment where they are hosted.
- Desktop gadgets reside on a computer desktop.
- Web gadgets are hosted on a web page.
All major software vendors have their own versions of gadgets. Some of them are called gadgets, some widgets. A number of gadgets work on different versions of Windows.
Figure 1.17 shows the gadgets that work on Windows XP and Windows Vista. Note that AveDesk and DesktopX gadgets work only in Windows XP. On the other hand, Adobe AIR, Yahoo! Widgets, Google desktop, KlipFolio, Opera, and Samurize gadgets work on both Windows XP and Windows Vista. Sidebar Gadget, the topic for this book, works only on Windows Vista.
FIGURE 1.17. There are many competing technologies for desktop gadgets.
All desktop gadgets have a common goal: information at the fingertips. The following sections detail a wide range of desktop gadgets/widgets.
Yahoo! Widgets—Konfabulator
Konfabulator is a popular desktop gadget platform from Yahoo!, Inc. Like the Windows Vista Sidebar, Yahoo! widgets also use a pane that can be moved in the desktop and can be used to host number of widgets. More information can be found at http://widgets.yahoo.com/.
- Among the first widget platforms, which makes it very popular
- More than 4,000 widgets and a big online community and user base
- Supports both Windows and Mac OS X
- Uses a proprietary XML format for development
- Steep learning curve is required to design and develop a widget
- Requires run-times installed in the computer
Apple Dashboard Widgets
Apple's Dashboard is an application that runs on the Mac OS operating system. It hosts a number of widgets that use standard web technologies such as HTML, CSS, XML, and JavaScript for development. As a platform, it is quite popular. More information can be found at http://www.apple.com/downloads/dashboard/.
Pros:
- Based on standard web technologies, JavaScript, HTML, and CSS for development
- Uses existing Ajax libraries and DashCode IDE for writing Dashboard widgets
- Big user base and online community and support
Cons:
- Each widget is a web page, and can take a significant amount of system resources
- Apple's widgets run only on the Mac OS operating system
Google Desktop
Google Desktop started with a desktop search and extended its feature for a Sidebar pane and hosting gadgets. More information can be found at http://desktop.google.com/.
Pros:
- Easy to understand if you know HTML and JavaScript.
- Better platform ties, drag/drop support, and so on.
- Google Gadget Designer, a development tool to write your gadget.
- Not very resource intensive.
Cons:
- Uses its own proprietary XML file, not based on W3C standards.
- Requires download of Google Desktop package.
- Not a great platform for developers.
- No Mac OS X support.
DesktopX Widgets
DesktopX is a widget engine for Windows that was created by Stardock in 2000. It is a desktop enhancement application that helps users add small applications. More information can be found at http://www.stardock.com/products/desktopx/.
Pros:
- Oldest of the group (around 7 years), which makes it a stable, mature platform.
- Integrated COM/ActiveX support.
- Unique animation engine.
- It can export its content as executables.
Cons:
- DesktopX has a run-time version for $14.95.
- You need to download and install the run-time.
- Steep learning curve to create widgets.
- Not a vast developer community.
Samurize Widgets
Samurize is a desktop enhancement engine for Microsoft Windows and is primarily used for tools for system monitoring. More information can be found at http://www.samurize.com.
Pros:
- Easier to create widgets.
- Large library of widgets.
- Lots of easy built in system/network monitoring features.
Cons:
- User interface is more concentrated on features.
- VBScript run-time engine.
KlipFolio Widgets
KlipFolio is a small, personal Dashboard and Sidebar available for Windows XP as well as Windows Vista. More information can be found at http://www.klipfolio.com/.
Pros:
- KlipFolio makes use of files called Klips to deliver rich functionality.
- Easily read or parse any XML on the Internet.
- Works on both XP and Windows Vista.
- Great community support, forums, and cookbooks available.
Cons:
- Windows operating system–specific.
- Uses proprietary KlipScript and built-in data structures.
- Steep learning curve for development.
- Need to download and install the engine.
Adobe AIR/Apollo Widgets
Adobe AIR, formerly Apollo, is a cross-platform engine for creating widgets. With AIR, developers can use HTML, Ajax, Flash, and Flex to build and deploy rich Internet applications to the desktop. More information can be found at http://labs.adobe.com/technologies/air/.
Pros:
- Cross platform
- Tight integration with Adobe products Flash and Flex
- Simple development with HTML, JavaScript, and related technologies
Cons:
- Steep learning curve for Flex and Flash
- Primarily meant for creating web applications in the desktop
- Packages whole applications instead of just the widget
AveDesk Widgets
AveDesk is a free widget engine for Windows XP. It's a desktop enhancement application that runs widgets that are called desklets. More information can be found at http://www.avedesk.org/.
- Community driven.
- AveDesk desklets are powerful plug-ins developed in Visual C++ rather than script.
Cons:
- Users cannot easily create custom-made desklets for AveDesk.
- Supports only Windows XP.
Opera Widgets
Opera is a cross-platform widget technology that works on all popular operating systems and devices. It is developed by Opera Software, based in Oslo, Norway. More information can be found at http://widgets.opera.com/.
Pros:
- Supports many versions of Microsoft Windows, Mac OS X, Linux, FreeBSD, and Solaris.
- Used in mobile devices, game consoles, and interactive televisions.
- Technology from Opera is also licensed by other big software and service vendors.
Cons:
- Opera is proprietary software.
- Development is complex.
Gadget Comparison Chart
With so many different technologies for gadgets and widgets, users have multiple options, without respect to the operating system used. Figure 1.18 shows a world of popular gadgets for different operating systems.
FIGURE 1.18. A lot of different gadget technologies are available for Windows, Mac OS, and Linux.
The most important factor that separates Vista gadgets from the herd is that they are based on standard web technologies (that is, HTML, CSS and JavaScript) and do not require a run-time application to be installed. Table 1.3 compares the various gadget/widget platforms (sorted alphabetically).
