In This Chapter

Understanding Web View

Custom Web View Samples

Web View Architecture

Customizing Web View

Customizing a Folder with the Web View Wizard Customizing the Default Folder.htt File Customizing the Default Left Pane Adding Links to the Default Left Pane Customizing the Default Header Graphic Replacing the Default Folder.htt with a Custom HTML Page Customizing Printers.htt and Safemode.htt Customizing Web View for My Computer and Control Panel

Selecting Thumbnail View in a Folder

Understanding Web View

Web View folders use Hypertext Markup Language (HTML) to display information in Windows Explorer. (Remember, Windows Desktop Update must be installed in order for Web View to work.) You can accept the Internet Explorer 4 default Web View, or system administrators can customize their own Web Views for the folders they choose. Standard HTML, Dynamic HTML, graphics, ActiveX objects, JavaScript, and VBScript can all be used to customize Web View folders, allowing you to leverage existing development resources.

A customized Web View can be used to give users a richer, more intuitive experience. Navigation can be vastly improved, and greater graphic consistency can be achieved. For example:

• A software download site on a network server can be simplified using Web View. Instead of being confronted with a confusing assortment of different files, users will see only links to things they can use. 

• Crucial information can be prominently displayed in a folder, so it can't be missed by users. 

• The appearance and functionality of Web View folders can be redesigned to match online resources, so users will have a consistent experience whether using file folders, Web pages on an intranet, or Web pages on the Internet. 

For information about troubleshooting the Web View, see Appendix D.

Custom Web View Samples

The following samples illustrate some useful applications of Web View. The samples include solutions for three hypothetical scenarios and one stand-alone example. All samples can be run directly from the Internet Explorer 4 Resource Kit Compact Disc. To view the samples, simply click Start, then Run, and enter D:\Samples (substituting the letter of your CD-ROM drive if it is different than D). On the View menu, select View as Web Page.

• Scenario #1: Arcadia Bay Travel Resources 

  Location: D:\Samples\travelpublic 

  Many useful features of Web View have been incorporated into a special business-travel folder for this fictitious company. This example illustrates the potential for presenting information and resources in an intuitive manner while still retaining traditional Windows functionality. The FileList control has been used to make a file folder available to users in a familiar way. 

• Scenario #2: Acme Software Driver Floppy Disk 

  Location: D:\Samples\driverfloppy 

  This example shows how Web View can transform an ordinary (and potentially confusing) floppy disk into an attractive one-click solution for a hardware driver installation. Try switching between Web View and the normal file views. Which view would you rather use? 

• Scenario #3: Software Installation Folder 

  Location: D:\Samples\products1 

  This company has a potentially bewildering array of software available for its employees to install. In the days before Internet Explorer 4, users would have to hunt through a maze of cryptically named folders and then guess which installation option was the right one. Here, Web View and Dynamic HTML have been applied to help users find the software they want and get the information they need to know before installing it. 

• Media Preview Folder 

  Location: D:\Samples\preview 

  This folder uses the ActiveMovie™ control to give a preview of sound and video files stored inside it. 

Note The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted.

Web View Architecture

To create the new, Internet Explorer 4 Web View, an extended view was added to the Windows Explorer default implementation of the IShellView interface (the shell code responsible for displaying files and folders in the shell's name space — the Large Icons, Small Icons, List, and Details views that you are already familiar with in Windows 95). To view a folder in the default Web View, all you have to do is select the View as Web Page option in the View menu. The default Web View for all folders is defined by the HTML in folder.htt. (.htt is the file name extension for HTML Template files.)

All Web content for Web View and Web/shell integration is stored in the C:\Windows\Web folder. These files are used to create the appearance and functionality of the Web/shell integration and maintain the user's desktop. The files that provide the main functionality are:

Customizing Web View

Folders can be individually customized by opening the folder and selecting the Customize This Folder option in the View menu. When this option is selected, the Web View Wizard is launched. After the wizard is completed, two new files are created in the target folder: Desktop.ini and Folder.htt.

Desktop.ini 

The Desktop.ini file is a standard .ini file, used to tell Internet Explorer that a folder has a customized Web View. Each customized folder has one Desktop.ini file. The shell reads the Desktop.ini, which directs the shell to host the MSHTML.dll component of Internet Explorer 4 and points it to the appropriate .htt file.

This is a sample Desktop.ini file:

[ExtShellFolderViews]
Default={5984FFE0-28D4-11CF-AE66-08002B2E1262}
{5984FFE0-28D4-11CF-AE66-08002B2E1262}={5984FFE0-28D4-11CF-
AE66-08002B2E1262}
[{5984FFE0-28D4-11CF-AE66-08002B2E1262}]
PersistMoniker=file://folder.htt
[.ShellClassInfo]
ConfirmFileOp=0

Folder.htt 

The Folder.htt file is a template that contains customized HTML content and an ActiveX control to display the normal directory listing. Each customized folder has one Folder.htt file. It is the same file referenced in the PersistMoniker=file://folder.htt desktop.ini setting earlier on this page. To create Folder.htt, the Web View Wizard launches your HTML editor with the <windir>\Web\Folder.htt template. If you save the default HTML provided by the wizard, the folder will appear the same as it did before you ran the wizard. The Folder.htt template file can be edited at any time, and it is liberally commented so you can find your way around in the file. A sample of an uncustomized Folder.htt file can be found in the <windir>\Web\directory.

The default Folder.htt page is a robust example of what can be done with Web View. Most of the functionality is provided by JavaScript and ActiveX controls. We recommend that you make changes to this file carefully and incrementally. Be sure to make a backup of the file before you begin editing.

Customizing a Folder with the Web View Wizard

When initially customizing Web View, we recommend that you use the Web View Wizard, since it automatically creates the Folder.htt and Desktop.ini files that will reside in the customized folder. After that, you can open and edit Folder.htt with the editor of your choice.

To customize a folder using the Web View Wizard

1. Open the folder you want to customize. 

2. On the View menu, select Customize this Folder. 

3. Select Create or Edit an HTML Document, and then click Next. 

   Your default HTML editor will start with the Folder.htt file open. 

4. Insert the code for your custom HTML page. 

5. Save and close the file. 

6. Click Finish. 

   The Folder.htt and Desktop.ini files will appear in the folder. 

7. On the View menu, choose View as Web Page to test the new page. 

Now, each time you run the wizard for that folder, it will automatically open that folder's Folder.htt file.

To remove customization from a folder

After editing Folder.htt, you can remove customization to return the folder to its unedited state.

1. Open the folder you want to edit. 

2. On the View menu, select Customize this Folder. 

3. Select Remove customization, and then click Next. 

4. Click Next again to proceed. 

   The Folder.htt and Desktop.ini files will be removed from the folder. 

Note To change the default Web View for all file folders, open the \Windows\Web folder and customize the master Folder.htt file. Afterwards, if you want to undo your customization of this master file, open the Windows\Web folder, and go through the standard process for removing customization from a folder; Folder.htt will be replaced by a backup file tucked away inside Webvw.dll.

Customizing the Default Folder.htt File

Folder.htt files may be edited in order to accomplish a variety of customization goals. For example, you may want to:

• Customize the file information that will be displayed in the folder's left pane when a file is selected. 

• Add links to other files or URLs. 

• Customize the header graphic. 

To undo any edits you make to a Folder.htt file, follow the steps for removing customization from a folder, detailed in the previous section.

Customizing the Default Left Pane

The file information that is displayed in the left pane is controlled by a JavaScript function at the top of the Folder.htt file. The first few lines look like this:

// name
text = "<b>" + fldr.GetDetailsOf(items, 0) + "</b>";
// type
data = fldr.GetDetailsOf(items, 2);
if (data != "")
text += "<br>" + data;

This part of the JavaScript function is responsible for displaying the name and type of the file in the left pane. Notice the <b> tag that makes the name appear in bold, and the "if" statement that inserts a line break if the file property is null. If your files have additional properties, you can display these by adding new statements to this function, substituting the appropriate number for the property after "items" (items, x). File properties start at "0" (name) and increase by one for each column to the right. If you wish to prevent a property from being displayed, simply remove its section from the function.

Adding Links to the Default Left Pane

To add hyperlinks to the left pane, open Folder.htt, and search for the word "here." The following lines of text will be displayed:

<a href="http://www.mylink1.com/">Custom Link 1</a>
<br>
<a href="http://www.mylink2.com/">Custom Link 2</a>
<br><br>
-->

Remove the comment, tags and replace the dummy link information with your own links.

Customizing the Default Header Graphic

The default header graphic is read from the Webvw.dll file. You can substitute it with a graphic of your choice by replacing this line in Folder.htt:

background: URL(res://Webvw.dll/folder.gif)

with something like this:

background: URL(%THISDIRPATH%\mylogo.gif)

Replace "mylogo.gif" with the name of your graphic. In this example, the graphic is in the same path as Folder.htt. You may need to modify some of the HTML code to adjust the positioning of the graphic.

You can point to a graphic stored in the template directory (C:\Windows\Web) by using %TEMPLATEDIR% in place of %THISDIRPATH%.

Replacing the Default Folder.htt with a Custom HTML Page

Rather than editing the default Folder.htt file, as explained above, you may prefer to replace it entirely with a new, custom HTML page. When you replace Folder.htt with a custom HTML page, you have the choice of reusing some of the code from the Folder.htt file or completely throwing it away and starting from scratch.

Note We do not recommend that you replace the My Documents folder with a custom Web page, due to the way this folder has been designed to interact with Windows. It is still possible, however, to customize the default Folder.htt file to add links and background graphics and to edit the information displayed in the folder's left pane.

The contents of Folder.htt can be replaced by any HTML code, scripts, or ActiveX objects. Although you will use the same tools and techniques as those used to develop traditional Web pages, keep in mind that Web View can incorporate functionality that is not used in the Internet environment. The following guidelines can help you make the most of Web View:

• When creating hyperlinks to files and subfolders, use the HREF tag, but omit the file-name extension for subfolders: 

  For files: <A HREF="filename.ext"> 

  For subfolders: <A HREF="foldername"> 

• To display the contents of a folder, insert the FileList object: 

  
  <OBJECT ID="filelist" classid="clsid:EAB22AC3-30C1-11CF-A7EB-0000C05BAE0B" width=150 height=470>
  <PARAM NAME="Location" value="%THISDIRPATH%\folder">
  <PARAM NAME="AlignLeft" value=1>
  <PARAM NAME="AutoSize" value=7>
  <PARAM NAME="AutoSizePercentage" value=100>
  <PARAM NAME="AutoArrange" value=1>
  <PARAM NAME="NoClientEdge" value=true>
  <PARAM NAME="ViewMode" value=3>
  </OBJECT>
  

The parameter values of the FileList control affect the following settings:

• Location defines the path to the folder to be displayed. 

• AlignLeft/AlignRight defines the alignment of the items when displayed. 

• AutoSize. Leave this value set to 7. 

• AutoSizePercentage. Leave this value set to 100. 

• AutoArrange. A value of 0 allows items displayed in Large Icon or Small Icon views to be moved, while a value of 1 enforces autoarrange at all times. 

• NoClientEdge defines whether or not the control will have a visible border. 

• ViewMode defines the view in which the contents of the folder will be displayed (1=Large Icons, 2=Small Icons, 3=List, 4=Details). 

Caution When using this control, NEVER set the Location parameter value to the same folder that is hosting the control, as this could cause a looping VBScript error. Another important thing to keep in mind when using the FileList control is that whatever folder is referenced in the Location parameter will appear in Web View. Pointing the FileList control to uncustomized folders is the safest approach.

Customizing Printers.htt and Safemode.htt

You can customize the Web View of the Printers folder by modifying the Printers.htt file in the C:\Windows\Web directory. A nice addition to this folder might be contact information for technical assistance with printers and a link to an alias to report problems. The Printers.htt folder is set up similarly to Folder.htt, with a few minor differences.

The Safemode.htt HTML template file is displayed only when Explorer.exe is shut down and restarted by the system for any reason. It has a special control that is used to reset Active Desktop settings, along with instructions for what to do in this situation. This page could be modified to include additional support information for users. It is recommended that the reset object not be tampered with, to retain the functionality of this page. The reset object is identified by the following code:

<OBJECT ID="suih" width=0 height=0 classid="clsid:64AB4BB7-111E-
11d1-8F79-00C04FC2FBE1">

Use caution when editing either of these folders, as they provide vital functionality to users.

Customizing Web View for My Computer and Control Panel

The My Computer and Control Panel folders must be edited differently than other folders. Since they are virtual folders, Desktop.ini and Folder.htt files cannot be created for them. The Web versions of these folders are controlled by registry entries that point to HTML files located in the Web folder (<windir>\Web\). They are called Controlp.htt and Mycomp.htt, respectively.

The registry settings for Control Panel are:

HKEY_LOCAL_MACHINE \Software \Classes \Clsid{21EC2020-3AEA-1069-A2DD-08002B30309D}\shellex\ExtShellFolderViews\{5984FFE0-28D4-11CF-AE66-08002B2E1262} 

Default value (Win95): "\Web\controlp.htt"</li>
Default value (WinNT): "%systemRoot%\Web\controlp.htt"</lt> 

The registry settings for My Computer are:

HKEY_LOCAL_MACHINE \Software \Classes \Clsid{20D04FE0-3AEA-1069-A2D8-08002B30309D}\shellex\ExtShellFolderViews\{5984FFE0-28D4-11CF-AE66-08002B2E1262} 

Default value (Win95): "\Web\mycomp.htt"</li>
Default value (WinNT): "%systemRoot%\Web\mycomp.htt"</lt> 

Selecting Thumbnail View in a Folder

With Internet Explorer 4, it is possible to create a thumbnail view of the content within any given directory. Thumbnails are a good way to get a quick snapshot of multiple Web sites or graphics files at the same time. When Thumbnail view is selected, the contents of graphics files, HTML files, and Office Documents are displayed in a 2 by 2-inch window. An icon is displayed for files that cannot display their contents in a thumbnail. A file called Thumbvw.dll controls the Thumbnail view. This feature is turned on in the Properties dialog box of each folder.

To enable Thumbnail view

1. Right-click the folder for which you would like to enable Thumbnail view, and then select Properties on the shortcut menu. 

2. On the General tab, select Enable thumbnail view. 

    

3. Click OK to add Thumbnails to the folder's view options. 

4. Open the folder and, on the View menu, select Thumbnails. 

   The contents of the folder will be displayed in Thumbnail view. 

Note You cannot combine Thumbnail view and Web View for the same folder. Due to the complexity of each of these display options, they are mutually exclusive. If Thumbnail view is selected for a folder, Web View will automatically be turned off for that folder (although subfolders may still use Web View, as long as they don't also use Thumbnail view).