Custom Folders with Active Desktop Templates

Starting with the Shell Update Release (SUR) that shipped with Internet Explorer 4.0 more than three years ago, Microsoft introduced the concept of a unified view to blur the distinction between local and Web content. By activating the Active Desktop (AD) mode, you enable some Web content to appear on your desktop as well as in any of the folder views.

Switching on the AD mode is only the recipe for the new user interface; ingredients and, above all, amounts are up to you. It’s up to you, for example, to decide how much Dynamic HTML you want, how many ActiveX controls to embed, what combination of formatting styles, fonts, and color you need. In order to support all this plenty of components, when working in AD mode, the Windows shell makes extensive use of the WebBrowser control. It can be found on the desktop window and is the underlying container of all the folder views. The list of files and folders, for example, is the output of an ActiveX control that occupies two-thirds of the available area and is anchored at its location through DHTML absolute positioning.

The software mechanism that allows you to give a HTML-based look-and-feel to all of your folders is called Active Desktop. You can turn AD on and off through the radio buttons in the Web View frame of the Folder Options dialog box’s General tab.

When turned on, Explorer utilizes an HTML template file to populate the user interface of the folder view. All the predefined templates – HTML files with an extension of .htt – are located in the WINNT\Web folder and are hidden files. The default template that Explorer loads when there’s no folder-specific customization file is called folder.htt. This file is responsible for the typical user interface of Windows 2000 folder views.


Having a HTML template at your disposal gives you unprecedented power when it comes to decide the structure you want your folders representation to have. You can place the component that provides the directory content in any angle of the view or hide it completely as some system folders do. For example, Program Files or Windows have a special template that doesn’t show the file list until you explicitly confirm to show the content. It is an attempt to protect the content of crucial system folders but just for this reason this is something you might want to implement for your own folders.

Modifying the way in which Explorer displays the content of a folder is as easy as modifying the content of an HTT (HyperText Template) file – just a little more work than changing a plain old HTML page.

The Customization Wizard

You probably know about the Customize This Folder… menu item that shows up in any folder context menu. It starts a procedure that allows you to pick a user interface style for your folder from a limited number of choices. During the wizard, you’re given the opportunity to edit the source code of the HTT being generated. It is a great chance to customize beyond imagination the contents of your folder and the style of its view. The wizard can be run only on a folder basis, but there’s really nothing it does that you cannot mimic programmatically, through a script, or even manually.

To force Explorer to look for a custom template as well as for extra information regarding the current folder you should create a file called desktop.ini in the folder and mark the folder itself as read-only. The desktop.ini file is the repository of folder-specific information while the read-only setting tells Explorer to assign a special meaning to it.
By the means of such a file you can associate a description and/or a custom icon to a folder. The following snippet demonstrates just how to accomplish this:

[.ShellClassInfo]
IconFile=C:\My Icons\Icon1.ico
IconIndex=0
Infotip=Enter a description.

Desktop.ini is also deputed to contain folder settings information. If you want to associate a custom template, add the following extra lines:

[ExtShellFolderViews]
{5984FFE0-28D4-11CF-AE66-08002B2E1262}=
{5984FFE0-28D4-11CF-AE66-08002B2E1262}

[{5984FFE0-28D4-11CF-AE66-08002B2E1262}]
PersistMoniker=file://yourTemplate.htt

The real meaning of the former section is quite unintelligible and left completely undocumented by Microsoft. You’ll find that GUID associated with folder and namespace extensions throughout the registry. It presumably has to do with the object providing the view. In the registry, under the Folder object you’ll find the following subtree:

Shellex
 \ExtShellFolderViews
  \{5984FFE0-28D4-11CF-AE66-08002B2E1262}

The final node contains an entry called PersistMoniker that points to a HTT file. This means that all the folders will use that HTT when the Active Desktop mode is on and no local HTT is specified through customization. The content of the desktop.ini file somewhat mimics the structure of this registry subtree and specified local information for the current folder.

Once you’ve entered all that information in your desktop.ini file, the folder view is rendered according to the HTML content of the specified HTT template file. The structure of this template is completely up to you.

A Password-Protected Folder

Let’s start to put to all this into practice by creating a password-protected folder. All the users that want to view the content of that folder will need to know the password. This is an even more restrictive policy than the one Windows employs with WINNT and Program Files folders.

When it comes to customizing the behavior and possibly the look-and-feel of a folder, you’re always better off starting with the standard template. Such a standard template is the file folder.htt located in the WINNT\Web folder. The customization wizard automatically copies this file into a hidden subfolder called Folder Settings of the current folder. Actually, there’s no real need for a subfolder–the folder itself is fine.
Edit the content of the folder.htt file and make it call a piece of software that can verify a certain password. You might want to write a COM object to accomplish this task without embedding authentication code in the template itself. The point to intervene is the onload event of the page’s body.

<body scroll=no onload=Load()>

The Load function looks like this:

<script language="JavaScript">
 function Load() {
  window.onerror = errorHandler;
  Initialize("");
  Resize();
 }
</script>

You can just call your authentication method before doing anything else in the Load method. If the COM method invoked returns True let the function continue, otherwise you return causing the folder view to remain blank. Alternatively, you could display an error message to inform users of what happened. To write your custom code onto the page background, use the plain Dynamic HTML object model.

<script language="JavaScript">
 function Load() {
  // call your object here and return
  // in case of error on the pswd
  window.onerror = errorHandler;
  Initialize("");
  Resize();
 }
</script>

As a further note, consider that you need to mark safe any COM object you write to be used from within an Active Desktop template. Making it safe for scripting as well as initialization, otherwise your users might get a warning message depending on their security settings. Don’t forget, in fact, any code that goes through the HTT interface is considered running over the Web and is subject to any security policy you may have over the Internet. On the other hand, such a feature in many, if not all, cases would be accessible only through an intranet. So all the security concerns with marking COM object safe have no reason to exist. I can’t explain why, but several of my clients appear to be concerned about using a COM object they themselves wrote and marked safe on an intranet. If keeping it unsafe makes you feel more comfortable by all means do that, but be ready to click on a warning dialog box each time you use it.

Creating Custom Folders

A password-protected folder is far from giving you the level of protection you may need. The folder, in fact, will happily show its content to any software application thatgets in contact programmatically. Keep in mind the folder customization mechanism is something that acts only at the Explorer level. But this is often enough to prevent risky actions done by nonexpert users.

The folder.htt file can render any content you want. In other words, you can use it to give a completely custom look-and-feel to your application folders. For example, the following, extremely simple template produces the output shown in Figure 3.



Figure 3: xxx

<html>
<script language=VBScript>
  Function Toggle()
     If toggleView.innerText = "Show Files" Then
         toggleView.innerText = "Hide Files"
         employees.style.display = "none"
         FileList.style.display = ""
     Else
         toggleView.innerText = "Show Files"
         FileList.style.display = "none"
         employees.style.display = ""
     End If
  End Function
</script>

<body>
<b>%THISDIRNAME%</b>--------------
<a id=toggleView href=vbscript:Toggle>Show Files</a>
<hr>
<object id=FileList border=0
width=100% height=50% tabindex=1
     style=display:none
     classid="clsid:1820FED0-473E-11D0-A96C-00C04FD705A2">
</object>

<div id=employees>
Here goes the actual content of the folder...
</div>
</body>
</html>

You can toggle on and off the file list simply by clicking on the hyperlink on the top of the page. When the file list view is off, the content of the folder is totally owner drawn. Of course, this doesn’t mean that you cannot access the file list codewise. What you could do, for example, is accessing through Win32 API the file list, elaborate the list and present only a subset of the information or invent a new schema for listing the folder items. The Image Preview schema of the My Pictures folder has been obtained with a savvy usage of HTT templates.

Whatever your ultimate goal is, I always recommend that you embed in your HTT the following code snippet

<object id="FileList" style="display:none"
 classid="clsid:1820FED0-473E-11D0-A96C-00C04FD705A2">
</object>

It inserts the system component that provides the folder view. If you set its display attribute to none, it’ll be invisible but ready to show up just in case someone needs to manipulate the files directly. In the above demo, the display style of the component is toggled on and off through page-level script code.

HTT Programming Issues

An HTT template page has very few features that make it different from a plain HTML page. When Internet Explorer – the rendering engine behind Explorer – loads an HTT template, it does nothing different but define these three environment variables:

%THISDIRPATH%
%THISDIRNAME%
%TEMPLATEDIR%

The first returns you the full path name of the current folder. The second returns only the directory name. The last one, instead, lets you know about the system folder that contains all the standard templates. You can use these variables as macros in your code. For example, the following code:

<b>%THISDIRNAME%</b>

displays in bold the name of the folder.

The FileList component makes available a rich object model for you to work with the folder content. See the MSDN documentation for the scriptable shell objects to learn more on this point.

The third interesting point of HTT programming stands out when you start sharing your HTTs across an intranet. While this is a perfectly legal practice, a few caveats can only help. First off, try to keep everything that is logically part of the HTT page within the page. For example, avoid using external CSS or script files – they won’t be downloaded. Secondly, make sure you reference external paths in a network-safe manner. For example, when it comes to specify a custom icon for a folder, instead of :

IconFile=C:\My Icons\Icon1.ico

use something like the following:

IconFile=\\Server\DiskC\My Icons\Icon1.ico

This ensures that the icon will be correctly retrieved and displayed. If your HTT is going to use some COM objects, then make sure they’re accessible over DCOM or deploy them on any involved machine. If you don’t like this approach, then you can consider deploying the COM objects only on the server machine and access them over HTTP through Remote Data Services or ASP+ Web Services. This requires that you configure your server machine as a Web server machine, but I don’t think this is a big issue today.

The System Services Folder

As a wrap-up example, consider the following demo of a folder that shows all services running on the machine.

It gets the list of the services through WMI and walks through the list creating a HTML table. In this particular case, I’ve utilized a JScript procedure called enumservices.js run through Windows Script Host. The procedure formats and writes its output on the standard I/O console and this output is captured by one of the methods of the ShellUtils.Exec object.

var SEP = "'";

// Get the services through WMI
var wmi =
 GetObject("winmgmts:{impersonationLevel=impersonate}");

// get the stdout from WSH
ts = WScript.StdOut;

// get the enumerator object
e = new Enumerator(wmi.InstancesOf("win32_service"));

// Enumerate the services
for(; !e.atEnd(); e.moveNext()) {
  var s = e.item();
  ts.Write(s.Name + SEP +
s.Description + SEP +
s.State + "|");
}

Source Code

In the source code that accompanies this article, you’ll find all needed files to run the above demos. Unzip the files in separate folders, make those folders read-only through their Properties dialog boxes, and refresh Explorer. Don’t forget to register the shellutils.dll, as it contains the ShellUtils.Exec object used by the Services folder.

Further Readings

A fully customized folder looks like a namespace extension. Of course there are a number of things that a namespace extension can do and a HTT template cannot. In particular, templates cannot integrate with the Explorer’s menu and toolbar and cannot display a hierarchy of nodes in the left treeview pane. In addition, a namespace extension encapsulates the folder as a whole, while a HTT template is only a nice dressing on top of a regular folder.

However, for all those circumstances in which what you really need is just a customized way of displaying content, HTTs pay the bill pretty well and are much easier to write and test.

More details and additional demos on this topic are available through MSDN and in particular I recommend you to check out the following articles:

  • A Web look for your folders (MSDN News, May/June 1999)
  • More Windows 2000 UI Goodies (MSDN Magazine, June 2000)

Downloads

Download demo code – 15 Kb

 

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read