cutting@microsoft.com        Download the code (41KB)

he Active Desktop™ is the umpteenth step toward an operating system that really blurs the distinctions between working on a local hard drive and a remote URL. True Web integration is, after all, a sort of software layer that brings the browser metaphor to the level of your desktop. Navigating your disk partitions feels the same as exploring the Internet, especially when invoking the Windows® Explorer brings up the same interface you use with Microsoft® Internet Explorer. No more static wallpapers or flat folder backgrounds. Now HTML can appear just about anywhere—and so can Dynamic HTML (DHTML), with its comprehensive object model, scriptlets, channels, desktop items, and other features.
      Up to now, the term "active" has applied only to software components and documents. With the Active Desktop, a component of Internet Explorer 4.0, "active" also describes a shell update that heavily modifies the graphical aspect of the desktop.
      Let's discuss the new architecture of the Windows desktop, the objects involved, and the interfaces that allow you to interact with it. I'll introduce you to the new desktop components (like desktop items), then talk about folders and how their customization really works. In this month's code sample, you'll find a bunch of HTML files and templates that can transform an ordinary, lifeless directory into a DHTML-based active application (see Figure 1).

Figure 1: DHTML in a Folder

What's New with Active Desktop
      The Active Desktop is a layer of shell code that sits on top of the existing Windows 95 and Windows NT® 4.0 shell. Active Desktop allows you to use HTML-based solutions to both enrich the Windows desktop and make it more interactive. Until now, the only way you've had to customize the desktop has been to add personalized wallpaper and fill the screen with shortcuts to frequently used applications and documents.
      With Active Desktop, you can replace a static bitmap with a live HTML document. And that's not all. You could add ActiveX® controls, Java applets, frames, hyperlinks, and multiple images to the desktop, tailoring it to your needs.
      Another level of changes also affects the Active Desktop. If you haven't tried out channels and desktop items, you might want to take a look at the first two installments of Cutting Edge (MIND, November and December 1997). Aside from the common objects you can insert in any HTML page, Active Desktop lets you define special components called desktop items. They look like floating toolbars (for example, the Channel bar) on the screen, but actually represent shortcuts to remote URLs. Whether or not you have a full-time Internet connection, desktop items can keep you up to date on real-time content changes to a site. They can also establish a temporary channel and connect and download any changes that you want. You're free to decide the scheduling: the times, the frequency, and the data to download and display.
      A variety of other visual changes have been integrated into the shell to make it more ergonomically friendly. Some minor changes were made to the Start menu, and there are a couple of judicious updates to the system's taskbar. As shown in Figure 2, the taskbar now has a different layout. It is formed by a collection of different toolbars, only one of which is displayed by default. The Quick Launch toolbar includes the applications that you might want to call more frequently, such as Internet Explorer 4.0, the channels view, Outlook™ Express, and Show Desktop, which doesn't start an executable module at all, but minimizes all the currently running applications and instantaneously clears the desktop. It's a useful feature that saves you from creating lots of icons to access a given desktop shortcut (although this same functionality is already available on enhanced keyboards by hitting the Windows key + M).

Figure 2: The New Shell Taskbar

      The system supports the creation of new custom toolbars. Figure 3 shows how Active Desktop has changed the taskbar's structure. The taskbar window consists of the Start button, the tray notification area,

Figure 3: Taskbar Structure

a global coolbar component that encompasses the task switcher window, and all the custom toolbars, like Quick Launch. In the original Windows 95 taskbar, the task switcher was a top-level object with no child components.

Figure 4: Low-level Taskbar Structure

The SysPager Control
Figure 4 illustrates a low-level view of the same stuff. Spy++ (a tool that comes with Visual C++®) shows the complete window hierarchy. Notice the use of the SysPager window, based on one of the new Internet Explorer 4.0 common controls. Basically, it's a container window with the ability to scroll its content. Pagers are transparent windows that are assigned a child control, like a toolbar. They figure out the ideal size of the contained window according to the space available, and scroll horizontally or vertically. Figure 5 shows pagers in action over the system's taskbar. Red circles identify the scroll buttons, while a gray rectangle surrounds the actual child control (in this case, a toolbar).

Figure 5: Using the Pager Control

Windows Layers Over the Desktop
      While you might think the Active Desktop introduces radical changes in the Windows shell structure, these changes are actually significantly less than expected from a developer's standpoint. The original layout has simply been enhanced, not revolutionized. Let's see what's really new in the desk- top organization.
      Logically, the Windows desktop is the root of the shell's object model. It is implemented as a special window that contains all the others created during the system's activity. What the user perceives as the actual shell is a pile of windows. The first one in the z-order belongs to the Progman class, which has been maintained for compatibility purposes. This window includes the actual shell view object. All these windows have the same dimensions as the screen.
      The shell view object creates a window of class SHELLDLL_DefView. The view object is used to handle the folder's content, and presents it through a listview control. All the shortcuts on the desktop are rendered through a special, transparent listview with a style setting of LVS_ICON | LVS_ SHAREIMAGELISTS|LVS_EDITLABELS| LVS_ALIGNLEFT | LVS_NOSCROLL.

Figure 6: Overlapping Desktop Layers

      New with Active Desktop is a layer of windows that exists parallel to the listview. Specifically, the new window pile is underneath the listview with shortcuts, as shown in Figure 6. In practice, the listview with the shortcuts—the standard Windows 95 shell representation—lies over a WebBrowser window that hosts the wallpaper as a DHTML file. Anything that belongs to this window is drawn at a different level than the desktop icons. For instance, the Channel bar is always moved below the shortcuts.

Figure 7: Custom HTML-based Desktop

      The wallpaper is now treated as an HTML document, not a plain bitmap file, so it needs a specialized component to be displayed. Figure 7 illustrates a completely custom-style desktop. To select a personal background for the desktop, you can right-click on the shell, choose the Properties dialog, go to the Background tab, and pick your favorite HTML file. When you set HTML-based wallpaper, the system creates a hidden desktop.htt (hypertext template) file in the Windows path:

Application Data\Microsoft\Internet Explorer\

The Desktop Components
      Desktop items and the Channel bar are the main players in the Active Desktop. Desktop items complement the Webcasting technology that underlies the channels. They provide an immediate view of the content of a given Web site. Of course, it helps when Web developers provide support for this. Even though a user can connect to and explore a site through a desktop item, this is not always an optimal arrangement, especially with a complex site.
      Look at the Microsoft site as an example. Suppose you're interested in developer's information about scripting. Previously, you had to access the site periodically to keep abreast of content changes. Instead, a desktop item would link you somewhere in that area, and let you know when new content is available. This is slightly different from subscriptions or channels because you're already exploring the site directly. What you're actually browsing is not the real content of the site, but an index of what's new and cool for you. The full site is still just a click away.
      There are many potential applications for desktop items. Most relate to an information-providing activity (like sports, news, corporate announcements, or discussion forums). If you're interested in finding ready-to-use components, visit http://www.microsoft.com/windows/ie/default.htm. The Internet Client SDK provides a wealth of documentation about desktop components and the Active Desktop.

A Deeper Look at Desktop Items
      As mentioned earlier, the Active Desktop is made up of two transparent layers. The uppermost layer, called the icon layer, already exists in previous versions of Windows 95 and Windows NT 4.0. The other is called the HTML layer and is hosted through a WebBrowser control. It is represented by the hidden desktop.htt file. This file is managed directly by Internet Explorer 4.0, and gets updated each time you customize the desktop background. Now when you browse from the Background tab in the display's properties dialog (see Figure 8), you can search for HTML files as well as graphics.

Figure 8: Background Settings

The wallpaper contains all the DHTML elements you might want to include in any Web page, and all the references you saved to some desktop items (see Figure 9). To include desktop items the most commonly used tag is <IFRAME>, but <IMG> also works. In essence, a desktop item is just a floating and borderless frame that displays some HTML content; you can resize and move it in any way.

Figure 9: Icons and Desktop Items

It helps to keep in mind some guidelines when writing desktop components. They must work well online or offline, and appear live and attractive. Since not all users have a full-time connection, a good desktop item shows a screen saver when not connected, or caches the minimum amount of data required. For the sake of clarity, an item should avoid popup messages and favor HTML text with links to sites with additional information.       Developing a desktop item is similar to setting up a channel. Basically, it requires that you design the HTML or DHTML content, then create and publish the CDF file that will guide it.       The file desktop.htt also includes a hidden ActiveX control called ActiveDesktopMover. This control helps to resize and move the various items. Figure 10 shows sample code for the wallpaper file.       There are a handful of new COM interfaces you must use to handle the latest features of the Windows shell properly. In particular, the IActiveDesktop interface is used to manipulate any desktop items from within a program.

IActiveDesktop *pAD; COMPONENT comp; CoCreateInstance( CLSID_ActiveDesktop, NULL, CLSCTX_INPROC_SERVER, IID_IActiveDesktop (LPVOID*)&pAD ); comp.dwSize = sizeof(COMPONENT); comp.iComponentType = COMP_TYPE_HTMLDOC; comp.wszSource = TEXT("http://www.server.com/doc.htm"); pAD->AddDesktopItem( &comp, 0 ); pAD->ApplyChanges(AD_APPLY_ALL); pAD->Release();

This code snippet outlines what's needed to add a desktop item programmatically. Check out the Internet Client SDK documentation for further details on these topics. How the Explorer Changed       The Windows Explorer itself has also changed quite a bit. It now integrates seamlessly with Internet Explorer 4.0, and a few new features have been added, such as the one shown in Figure 11.

figure 11: New Explorer Features

As you can see, typing a URL on the address bar causes the specified site to be displayed in the right panel. The left treeview, under the Internet Explorer node, shows the hierarchy of the remote documents you're viewing. In effect, the entire Web has become an extension of your local drives. If you type the name of an Active Document (like a Word file) on the address bar, then right panel of the Explorer will display it in situ, as Microsoft Binder or the WebBrowser control would. Folders       Another great Active Desktop feature is the ability to customize the appearance of file folders. You can define an HTML template for the desktop. The Explorer View menu has a new entry, Web Page (see Figure 12), that lets you view the page following an HTML-based template. This setting applies to the view of any folder.

figure 12: Web Page Folder View

When you choose this view, the Explorer looks for a folder.htt file in the selected folder. If the file isn't found, the standard HTML view is used, where the file list appears in the right-hand side of the panel. The directory's name is displayed in the upper part of the panel. The file list doesn't cover the entire width of the area. About 30% of it remains free and is used to display additional info on the currently selected file. Most of the data displayed is also visible through the Details view. Customize this Folder       In addition to setting the Web Page view, you can further customize folders. For instance, by right-clicking the folder's area, the context menu lets you run a customization wizard (see Figure 13). The wizard offers three options: set up a different template for the view, use a background image, or remove any existing customization. The latter two are self-explanatory, so let's concentrate on the first option.

figure 13: Folder Wizard

The wizard creates a file named folder.htt, then opens it up in Notepad. Despite the .htt extension, it is a fully qualified HTML file. Figure 14 shows its default content. If you accept this standard template, then just save and exit Notepad. After finishing the wizard, the settings are applied to the folder immediately. If you don't like the default HTML template, you're free to modify it. Just consider that what you write will become the actual content of the folder as long as the Web Page view is turned on.       The wizard isn't much help when you attempt to customize the folder structure. It requires you to edit the HTML file as text, outside a visual editor. If you have experienced this, you'll agree it's not a pleasant task for major efforts.       Apart from the wizard itself, you might wonder how the HTML template keeps track of the files the folder lists, and how you can take advantage of it. In the remainder of this article, I'll provide answers to these questions and illustrate the explanations with an example that transforms an otherwise static folder into a dynamic application. The Folder Template        Figure 14 shows a great deal of script code and the presence of a couple of mysterious ActiveX controls. When you're customizing a folder, its default template is automatically generated by Internet Explorer 4.0 based on the content of the folder.htt file found in the Windows\Web subdirectory. Windows\Web is actually the template directory. folder.htt refers to it through an environment variable called %TEMPLATEDIR%. When browsing this template directory, you'll find a lot of .htt files that define the standard look for the Control Panel, the Active Desktop's Safe Mode Screen, and the Printers.       The folder's default template includes JScript™ code for handling a couple of fundamental events like OnSelectionChanged and OnThumbnailReady. In addition, there's a function called fixSize that's bound to the window.resize event. The elements of the template include the following: An ActiveX control (named FileList) that displays the list of the files contained in the folder. An ActiveX control used to provide a preview for graphic files. A heading panel containing an icon and the name of the folder. An informational panel intended to furnish file details.       The first two elements are <OBJECT> tags, while the latter two are implemented as <DIV>s. The name of the current folder is retrieved through another environmental variable called %THISDIRNAME%. OnSelectionChanged is an event fired by the FileList control when the user modifies the item selection. OnThumbnailReady is raised by the preview control when it is about to display a small copy of the original HTML, JPEG, BMP, or GIF file. The event is necessary since the thumbnail is generated asynchronously (see Figure 15).

figure 15: Viewing Thumbnails

Unless you change it completely, the folder template includes the list of the files through an ActiveX control.

<object id="FileList" border=0 tabindex=1 classid="clsid:1820FED0-473E-11D0-A96C-00C04FD705A2" style="position: absolute; left: 30%; top: 88px; width: 70%; height: 100%"> </object>

Note that CSS syntax that lets you place a control anywhere in a HTML page. In this case, its width is set to 70 percent of the entire area, and the left side starts at 30 percent of the client width. The top border leaves exactly 88 pixels above itself.

figure 16: Opening folder.htt

I discovered that the specified CLSID is the same control used by the Open dialog and the traditional folder views in the Windows shell. I tried to reuse it in a Visual Basic form, as well as in another nearly identical HTML page. Nothing doing. The control—which is registered as Shell DefView and creates a window class SHELLDLL_DefView—seems to follow undocumented behavior, perhaps related to the environmental variables seen earlier. Moreover, if you attempt to open the original folder.htt file, you get something akin to Figure 16. Outside the folder customization process there's something that remains uninitialized and causes empty output. Using a Custom View       At this point, you might be wondering how you can take advantage of all these new features. At first glance, it seems that just having a different way to look at a folder's content is worth the change. That's true, but snooping through the actual files created in the directory after the customization wizard finished, I noticed a particular file, desktop.ini, that suggested a better way to exploit this feature (see Figure 17).       Desktop.ini represents a junction point between Explorer and a namespace extension. This means that Explorer handles the folders that hold such a file differently, and relies on special inproc servers to draw the content. While the syntax for a namespace's junction point seems slightly different than Figure 17, finding this file among the others led me to think that HTML templates are an alternative, easier, and inexpensive way to set up namespace extensions.       The idea is to create a directory, put the files you need there, and then build a custom view on top of them. This way, the directory is no longer a folder in the traditional sense, but evolves into a real application fused to the shell.       Suppose you create an HTML-based interface for working with your documents. Rename the main page as a hidden system file called folder.htt, then package all the files in a CAB folder or in a self-extracting executable and distribute it. It suffices that the package installs in a given directory, and the user turns on the Web view page to have an HTML-based application ready to use. If you want to create a shortcut, then just use the following as the command line:

explorer.exe /e /root, <folder_path>

where folder_path is the actual path to the directory. That's the way I obtained what you see in Figure 1. Putting Together DHTML and Folders       I created a fully customized version of folder.htt including a <FRAMESET> tag. I then wrote the specific pages that compose the hierarchy. I reused some scriptlets to gain various visual effects. (To learn more about scriptlets, check out the Cutting Edge column in the January 1998 issue of MIND.)       DHTML can help make Web pages more attractive and give them the feel of a real application. For example, you'll notice that a blue frame appears and then disappears around the Home bitmap in Figure 1 as you move the mouse over and out. This is an effect that can be obtained easily with a few DHTML lines like the following:

<script language="VBScript" for="home" event="onmouseover"> window.event.srcElement.border = "2" </script> <script language="VBScript" for="home" event="onmouseout"> window.event.srcElement.border = "0" </script> ••• <img id="home" src="Home1.gif" border=0>

The border attribute is initially set to 0 and becomes visible when you move the mouse over the given image element. A similar effect can be encapsulated within a scriptlet that can be reused wherever you need it.       The most interesting part of the example is still to come. Suppose you have a Microsoft Access database in a folder. With pure DHTML language and some script code, you can easily create a user interface around that MDB file, then present its content directly to the users. When someone accesses that directory—even across an intranet—they will see the files in the folder as your template decides to show them. At this point, you can choose to completely hide the file names and present only the data.       I selected references to some of the articles published in MIND and made them available to the other programmers in my company. I created a simple Microsoft Access table, and put it in a shared folder. I also customized the folder using frames. (To be honest, I simply renamed an existing series of HTML pages, but it worked well without any other changes!)       When employees connect to the folder, they see a frame-based page. They choose the article references they want, and guess what? A table with the records magically appears (see Figure 1). The table exploits dynamic data binding, which is another cool feature of Internet Explorer 4.0. For more information, see "Data Binding in Dynamic HTML," by Rich Rollman (MIND, July 1997). People looking at the folder don't need to know that it's created from a Microsoft Access file. They see exactly what they need—the content of the database. By adding a few lines of script code it can even be made sortable.       Folder customization allows you to achieve results far superior to a simple custom view of the files. By using HTML templates and DHTML you can write small and useful applications that work through Explorer. Summary       Active Desktop straightens out the road to advanced customization of the Windows shell. You can add everything you need to both the desktop and individual folders. By combining the various technologies like desktop items, channels, ActiveX, DHTML, scriptlets, and Active Server Pages, you can tailor the Windows shell to your own needs.