自定义文件夹的 Web 视图

[此功能仅在 Windows XP 或更早版本中受支持。 ]

Web 视图是使用 Windows 资源管理器显示 Shell 文件夹内容信息的一种强大而灵活的方法。

简介

Windows为用户提供两种查看和导航 Shell 命名空间的主要方法。 其中最熟悉的经典样式类似于熟悉的Windows文件管理器。 右窗格按五种格式之一列出当前所选文件夹的内容:大图标、小图标、列表、详细信息和缩略图。 Windows文件管理器的主要区别在于左窗格,该窗格看起来与 Windows Internet Explorer 的资源管理器栏非常相似。 它可以调整大小或删除,并且除了熟悉的文件系统树(如搜索窗格)外,还可以显示多个窗格。

注意

本文档中的信息不适用于 Windows XP,讨论的技术仅适用于早期版本的Windows。

 

下图显示了经典样式中的“打印机”文件夹。

classic style of the printers folder.

经典样式适用于普通文件系统文件夹和文件。 但是,随着Windows 95 的引入,文件系统已演变为命名空间。 命名空间允许创建 虚拟文件夹(如打印机或网络邻里),这些文件夹可以表示与普通文件系统文件夹非常不同的信息类型。

Web 样式(也称为 Web 视图)提供比经典样式更灵活、更强大的呈现信息方式。 在 Web 视图中,用户基本上使用 Internet Explorer 查看和导航命名空间。 Web 视图的基本布局类似于经典样式。 资源管理器栏不变。 但是,文件列表占用的区域将成为实际上是网页的常规用途显示区域。 Web 视图仍用于显示有关文件夹内容的信息,但对显示哪些信息或显示方式几乎没有约束。 每个文件夹可以具有自己的 Web 视图,自定义为适合其特定功能。

下图显示了之前在经典样式) 中显示的打印机文件夹的 Web 视图 (。

default web view of the printers folder.

与常规网页类似,Web 视图由基于 HTML 的模板控制。 创作 Web 视图模板与创作网页几乎完全相同,在内容和信息布局方面提供了相同的灵活性。 Web 视图模板可以使用动态 HTML (DHTML) 和脚本来响应事件,例如用户单击某个项。 它们还可以托管允许它们从文件夹或其内容获取和显示信息的对象。

用户可以通过开始Windows资源管理器、单击“视图”菜单上的文件夹选项并选择此选项来选择 Web 视图:在文件夹中启用 Web 内容。 但是,用户还可以启动 Internet Explorer,并通过单击 “视图 ”菜单、指向 资源管理器栏并单击 “文件夹”,在文件系统中指向浏览器。 在 Web 视图中,Internet Explorer 和 Windows Explorer 之间几乎没有区别。

在右窗格左侧,“打印机”Web 视图显示带有文件夹名称和图标的横幅,后跟有关文件夹的信息块。 通常的文件列表占据页面的右侧。

当用户单击某个项目时,有关该项目的详细信息会显示在信息块中。 打印机 Web 视图实际上显示与经典样式中可用的信息大致相同,但它以更可用的格式执行此操作。 但是,Web 视图不仅仅是显示经典样式信息的不同方法。 例如,指向有用网站的链接可以显示在信息块下方,这是经典样式中不可用的功能。 如果用户单击链接,将显示该网站。

上图中显示的打印机 Web 视图类似于经典样式,因为基础 Web 视图模板 (以这种方式编写 .htt 文件) 。 例如,Web 视图模板不会直接生成文件列表。 它由 Web 视图模板托管的 WebViewFolderContents 对象创建和显示。 对象的方法和属性允许 Web 视图控制其布局并获取有关特定项的信息。 横幅和信息块的内容和布局在 Web 视图模板中指定。

由于 Web 视图支持 DHTML,因此模板还可用于处理用户交互。 例如,当用户单击其中一个打印机图标时, WebViewFolderIcon 对象将触发 SelectionChanged 事件。 该模板使用以脚本编写的 DHTML 事件处理程序来检索请求的信息并将其显示在信息块中。

“打印机”文件夹的简单示例绝不是使用 Web 视图的唯一方法。 通过编写自己的模板和对象(如有必要),可以使用 Web 视图以最有效的方式显示信息并与用户交互。 请注意,目前,Web 视图模板仅显示系统定义的虚拟文件夹。 尽管开发人员可以通过实现命名空间扩展来创建虚拟文件夹,但它们必须使用 命名空间扩展 中所述的技术来显示它。

使用 Web 视图模板

可以通过修改文件夹的Desktop.ini文件,以有限的方式自定义 Web 视图中显示数据的方式。 有关详细信息 ,请参阅使用Desktop.ini自定义文件夹 。 自定义 Web 视图的更灵活且更强大的方法是创建自定义 Web 视图模板。

Web 视图模板控制 Web 视图中显示的内容以及操作方法。 它使用标准 HTML、DHTML 和脚本技术来获取和显示信息并与用户交互。 本部分讨论如何通过检查简单的模板(Generic.htt)创建 Web 视图。

<html>
    <style>
    <!-- This section defines a variety of styles that can be used
     when displaying the document -->
        body        {font: 8pt/10pt verdana; margin: 0}
        #Banner     {position: absolute; width: 100%; height: 88px; background: URL(res://webvw.dll/folder.gif) no-repeat top left}
        #MiniBanner {position: absolute; width: 100%; height: 32px; background: window}
        #Icon       {position: absolute; left: 11px; top: 12px; width: 64px; height: 64px}
        #FileList   {position: absolute; left: 30%; top: 88px; width: 1px; height: 1px}
        #Info       {position: absolute; top: 88px; width: 30%; background: window; overflow: auto}
        p       {margin-left: 20px; margin-right: 8px}
        p.Title     {font: 16pt/16pt verdana; font-weight: bold; color: #0099FF}
        a:link      {color: #FF6633}
        a:visited   {color: #0099FF}
        a:active    {color: black}
    </style>

    <head>
        <!-- allow references to any resources you might add to the
         folder -->
        <base href="%THISDIRPATH%\">

        <script language="JavaScript">
        
        <!-- This section defines a number of JavaScript utilities -->
            var L_Intro_Text    = "This folder contains a variety of interesting stuff.<br><br>To get information about any of them, click the items icon.<br><br>";
            var L_Multiple_Text = " objects selected.";

            function FixSize() {
            // this function handles layout issues not covered by the style sheet

                var hideTop = 200;
                var hideLeft    = 400;
                var miniHeight  = 32;

                if (200 > document.body.clientHeight) {
                //A short window. Use the minibanner
                    document.all.Banner.style.visibility = "hidden";
                    document.all.MiniBanner.style.visibility = "visible";
                    document.all.FileList.style.top = 32;
                    document.all.Info.style.top = 32;
                }

                else {
                //A normal window. Use the normal banner
                    document.all.Banner.style.visibility = "visible";
                    document.all.MiniBanner.style.visibility = "hidden";
                    document.all.FileList.style.top = (document.all.Banner.offsetHeight - 32) + "px";
                    document.all.Info.style.top = (document.all.Banner.offsetHeight) + "px";
                    document.all.Rule.style.width = (document.body.clientWidth > 84 ? document.body.clientWidth - 84 : 0) + "px";     
                }
                if (400 > document.body.clientWidth) {
                //A narrow window. Hide the Info region and expand the file list region
                    document.all.Info.style.visibility = "hidden";
                    document.all.FileList.style.pixelLeft = 0;
                    document.all.FileList.style.pixelTop = document.all.Info.style.pixelTop;
                }

                else {
                //Normal width
                    document.all.Info.style.visibility = "visible";
                    document.all.FileList.style.pixelLeft = document.all.Info.style.pixelWidth;
                }
                document.all.FileList.style.pixelWidth = document.body.clientWidth - document.all.FileList.style.pixelLeft;
                document.all.FileList.style.pixelHeight = document.body.clientHeight - document.all.FileList.style.pixelTop;
                document.all.Info.style.pixelHeight = document.body.clientHeight - document.all.Info.style.pixelTop;
            }

            function Init() {
                /* Set the initial layout and have FixSize() called whenever the window is resized*/
                window.onresize = FixSize;
                FixSize();
                TextBlock.innerHTML = L_Intro_Text;
            }
        </script>

        <script language="JavaScript" for="FileList" event="SelectionChanged">
            // Updates the TextBlock region when an item is selected
            var data;
            var text;

            // name
            text = "<b>" + FileList.FocusedItem.Name + "</b>";

            // comment
            data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 3);
            if (data)
                text += "<br>" + data;

            // documents
            data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 1);
            if (data)
                text += "<br><br>" + FileList.Folder.GetDetailsOf(null, 1) + ": " + data;

            // status
            data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 2);
            if (data)
                text += "<br><br><b><font color=red>" + data + "</font></b>";

            // tip?
            data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, -1);
            if (data != "" && data != FileList.FocusedItem.Name)
                text += "<br><br>" + data;

            TextBlock.innerHTML = text;
        </script>
    </head>
<!-- The body of the document controls the actual data display.
 It uses several scripting objects to communicate with the
 namespace folder, and calls on the JavaScript objects defined
 in the header to handle much of the processing -->
    <body scroll=no onload="Init()">

        <!-- The normal banner. This banner displays the folder
         name and icon at the top of the WebView pane. This banner
         is used if the WebView pane is sufficiently large to
         display the icon and still have room for some information -->
        <div id="Banner" style="visibility: hidden">
            <!-- Display the folder name using a table with nowrap
             to prevent word wrapping. Explorer will replace
              %THISDIRNAME% with the current folder name -->
            <table class="clsStd"><tr><td nowrap>
                <p class=Title style="margin-left: 104px; margin-top: 16px">
                %THISDIRNAME% 
            </td></tr></table>
            <!-- this is more efficient than a long graphic, but it has to be adjusted in FixSize() -->
            <hr id="Rule" size=1px color=black style="position: absolute; top: 44px; left: 84px">
            <!-- Load the WebViewFolderIcon object, which extracts the folder's icon -->
            <object id=Icon classid="clsid:e5df9d10-3b52-11d1-83e8-00a0c90dc849">
                <param name="scale" value=200>
            </object>
        </div>

        <!-- The mini banner. This banner is used when the
         WebView pane is too short to display the icon. Instead,
          it displays only the folder name -->
        <div id="MiniBanner" style="visibility: hidden">
            <!-- use a table with nowrap to prevent word wrapping -->
            <table class="clsStd"><tr><td nowrap>
                <p class=Title style="margin-left: 16px; margin-top: 4px">
                %THISDIRNAME%
            </td></tr></table>
        </div>

        <!-- The Info region. This displays the information
         associated with a folder or file. Javascript in the header
         is used to generate the regions contents by by assigning
         a text block to TextBlock.innerHTML -->
        <div id="Info">
            <p style="margin-top: 16px");
            <span id="TextBlock">
            </span>
        </div>
        <!-- end left info panel -->

        <!-- Load the WebViewFolderContents object. This object
         returns information on the contents of the folder that
          can be used in the information display.  -->
        <object id="FileList" border=0 tabindex=1 classid="clsid:1820FED0-473E-11D0-A96C-00C04FD705A2"
        </object>

    </body>
</html>
            

创建自己的 Web 视图模板的一种简单方法是采用 Generic.htt 并对其进行修改。 由于它相当有限,你还应查看其他更复杂的其他想法示例。 可以通过搜索系统查找所有 Web 视图模板使用的 .htt 扩展来查找它们。 如果要为文件夹创建自定义模板,应从默认 Folder.htt 模板开始,该模板通常存储在 C:\Winnt\Web 或 C:\Windows\Web 中。 请注意,这些文件定义为隐藏文件,因此可能需要修改Windows资源管理器设置才能查看它们。 创建 .htt 文件后,应将其标记为只读且隐藏。

Web 视图模板使用 .htt 扩展,因为它们与传统的.htm文档略有不同。 主要区别是 .htt 文件中的几个特殊变量,系统将其替换为当前命名空间值。 %THISDIR% 和 %THISDIRPATH% 变量表示当前所选文件夹的名称和路径。 %TEMPLATEDIR% 变量表示存储 Web 视图样式表的文件夹。

与大多数 HTML 模板一样,.htt 文件有两个基本部分:正文和头。 模板正文控制 Web 视图的基本布局,并加载用于与命名空间通信的对象并显示信息。 头包含执行任务(例如处理大小调整和从文件夹中获取信息)的脚本和函数。 大多数模板(包括 Generic.htt)还包括样式表。 一般情况下,最好在模板中包含样式表信息。 当 Web 视图与远程命名空间一起使用时,单独的样式表可能无法正常工作。

模板正文

模板的正文指定 Web 视图将呈现的内容。 它还加载用于显示信息和与命名空间文件夹通信的对象。 Generic.htt 定义的布局类似于上一部分中的图中所示的布局。 有三个显示区域:视图左侧的横幅和信息块以及右侧的文件列表。

区域都是样式表和 DHTML 要使用的分配标识符。 如下一部分所述,有两个可能的横幅,标识符为“横幅”和“MiniBanner”。 信息块区域的标识符为“Info”。 文件列表对象的标识符为“FileList”。 区域布局的详细信息由样式表和 Microsoft JScript 函数 FixSize 处理,该函数将在章节后面部分讨论。

横幅区域

横幅位于显示顶部,位于 Web 视图左上角。 普通横幅显示右侧文件列表中显示其内容的文件夹的名称和图标。 但是,如果窗口太短,则图标下方可能没有显示信息的空间。 因此,Generic.htt 还定义了一个仅显示文件夹名称的微型板。 这两个横幅最初定义为隐藏。 FixSize 选择要显示的,并将其设置为“可见”。

Generic.htt 的普通横幅由以下方法定义:

<div id="Banner" style="visibility: hidden">
    <table class="clsStd"><tr><td nowrap>
    <p class=Title style="margin-left: 104px; margin-top: 16px">
        %THISDIRNAME% 
    </td></tr></table>
    <hr id="Rule" size=1px color=black style="position: absolute; top: 44px; left: 84px">
    <object id=Icon classid="clsid:e5df9d10-3b52-11d1-83e8-00a0c90dc849">
        <param name="scale" value=200>
    </object>
</div>
                    

横幅部分的第一部分显示标题,其下方有水平规则。 表标记用于控制其位置。 nowrap 属性已为 用于防止换行的标记。 系统将 %THISDIRNAME% 替换为当前文件夹的名称。 然后加载一个标识符为“Icon”的 WebViewFolderIcon 对象,以便提取和显示文件夹的图标。

迷你版块类似于普通横幅。 标题的格式略高,没有规则。 由于没有图标,因此不会加载 WebViewFolderIcon 对象。

<div id="MiniBanner" style="visibility: hidden">
    <table class="clsStd"><tr><td nowrap>
        <p class=Title style="margin-left: 16px; margin-top: 4px">
        %THISDIRNAME%
    </td></tr></table>
</div>
                    

信息区域

横幅下方的 Web 视图部分用于显示有关所选项目的详细信息。 如果未选择任何项目,将显示默认消息。 由于 Generic.htt 仅显示单个文本块,因此此部分非常简单。

<div id="Info">
    <p style="margin-top: 16px");
        <span id="TextBlock">
        </span>
</div>
                    

收集信息的大多数工作由一个 文件夹信息脚本 处理,该脚本稍后将在章节中讨论。 它通过将文本分配给 TextBlock.innerHTML 来显示信息。

可以通过修改这些元素或包括其他元素轻松自定义信息显示。 可以使用可以放入网页的任何内容。 例如,若要显示指向网站的链接,可以在 Generic.htt 中的文本块后面添加定位点元素。

<div id="Info">
    <p style="margin-top: 16px");
        <span id="TextBlock">
        </span>
        <span>
        <p> Click on <a href="https://your.address"></a>
        </span>
</div>
                    

FileList 区域

最后,Generic.htt 为 FileList 区域加载 WebViewFolderContents 对象。 由于它的标识符设置为“FileList”,因此从现在起将它称为 FileList 对象。

<object id="FileList" border=0 tabindex=1 classid="clsid:1820FED0-473E-11D0-A96C-00C04FD705A2"
        </object>
                    

FileList 对象在大多数 Web 视图中找到,并有多种用途。 FileList 显示所选文件夹包含的项目列表,其选项和外观与经典样式中的文件列表相同。 选择某个项时,FileList 通过触发 SelectionChanged 事件通知 Web 视图。 FileList 还公开可用于检索有关各个项的信息的方法和属性,并控制其显示区域的位置和大小。

尽管 FileList 对象非常有用,但它只返回标准文件系统信息,例如文件大小或属性。 若要从 Shell 文件夹中检索其他类型的信息,必须加载和处理其他对象。 网页可承载的任何对象都可以与 Web 视图一起使用。

模板头

Web 视图模板的头包含执行大部分实际工作的脚本和函数。 需要处理两个基本任务。 一个是 Web 视图显示的布局,需要进行调整以适应不同的显示区域。 另一种是在选定项目时从文件夹中检索和显示信息。 与样式表一样,最好在模板中包含所有脚本和函数,而不是将它们引用为单独的文件。

控制 Web 视图布局

Web 视图可用的区域取决于 Web 视图窗口的大小以及Windows资源管理器栏占用多少。 每当调整窗口或Windows资源管理器栏的大小时,此区域都会更改。 因此,当加载 Web 视图时,布局需要与可用区域匹配,并在调整其大小时适当更改。 样式表中指定了大部分布局。 例如,“信息”区域定义为占用 Web 视图最左侧的 30%。

#Info       {position: absolute; top: 88px; width: 30%; background: window;
    overflow: auto}
                    

调整 Web 视图的大小后,信息区域的宽度将更改为保持该百分比。 FixSize 管理样式表无法处理的布局问题。

加载和初始化 Web 视图

加载 Web 视图时,需要调整布局以适应可用的显示区域。 由于尚未选择任何项目,Web 视图通常会显示应用于整个文件夹的一些默认信息。 若要处理初始化, <Generic.htt 的 BODY> 标记将检测 onload 事件并调用 Init 函数。

<body scroll=no onload="Init">
                    

Init 是一个简单的JScript函数。

function Init() {
    window.onresize = FixSize;
    FixSize();
    TextBlock.innerHTML = L_Intro_Text;
}
                    

InitFixSize 绑定到 window.onresize 事件,以便在 Web 视图显示区域发生更改时调用它。 然后,它运行 FixSize 设置初始布局,并将L_Intro_Text分配给 Info 区域。 L_Intro_Text是样式表部分中定义的介绍性文本块。

var L_Intro_Text    = "This folder contains a variety of interesting stuff.<br>
<br>To get information about any of them, click the items icon.<br><br>";
                    

使用 FixSize 函数调整布局

FixSize 函数用于指定无法由样式表处理的布局的几个方面。

可以使用两个可能横幅,具体取决于 Web 视图的高度。

if (200 > document.body.clientHeight) {
    //A short window. Use the minibanner.
    document.all.Banner.style.visibility = "hidden";
    document.all.MiniBanner.style.visibility = "visible";
    document.all.FileList.style.top = 32;
    document.all.Info.style.top = 32;
}
else {
    //A normal window. Use the normal banner.
    document.all.Banner.style.visibility = "visible";
    document.all.MiniBanner.style.visibility = "hidden";
    document.all.FileList.style.top = (document.all.Banner.offsetHeight - 32) + "px";
    document.all.Info.style.top = (document.all.Banner.offsetHeight) + "px";
    document.all.Rule.style.width = (document.body.clientWidth > 84 ?                                    document.body.clientWidth - 84 : 0) + "px";      
}
                    

Generic.htt 使用高度为 200 像素,作为普通和迷你板之间的分隔线。 它将所选横幅的样式设置为可见,另一个设置为隐藏。 它还为 Info 和 FileList 区域设置多个布局属性,使其适合所选横幅。

如果 Web 视图太窄, FixSize 将使用 FileList 显示显示区域的完整宽度。

if (400 > document.body.clientWidth) {
    //A narrow window. Hide the Info region, and expand the file list region.
    document.all.Info.style.visibility = "hidden";
    document.all.FileList.style.pixelLeft = 0;
    document.all.FileList.style.pixelTop = document.all.Info.style.pixelTop;
}

else {
    //Normal width.
    document.all.Info.style.visibility = "visible";
    document.all.FileList.style.pixelLeft = document.all.Info.style.pixelWidth;
}
                    

Generic.htt 使用 400 像素作为窄和宽显示器之间的分隔线。 如果 Web 视图太窄, FixSize 将隐藏 Info 区域并修改 FileList pixelLeft 属性,使其填充横幅下方的整个区域。

FixSize 的最后几行根据上述代码的结果调整多个布局属性。 调整 FileList 区域的宽度,以便它完全填充信息区域未占用的 Web 视图部分。 信息区域的高度调整为适合横幅和 Web 视图底部。

document.all.FileList.style.pixelWidth = document.body.clientWidth
    document.all.FileList.style.pixelLeft;
document.all.FileList.style.pixelHeight = document.body.clientHeight
    document.all.FileList.style.pixelTop;
document.all.Info.style.pixelHeight = document.body.clientHeight
    document.all.Info.style.pixelTop;
                    

检索和显示文件夹信息

当用户选择某个项时,FileList 对象将触发 SelectionChanged 事件。 此事件由JScript脚本处理。 为简单起见,Generic.htt 中找到的脚本假定一次只能选择一个项目。

<script language="JavaScript" for="FileList" event="SelectionChanged">
    // Updates the TextBlock region when an item is selected.
    var data;
    var text;

    // Name
    text = "<b>" + FileList.FocusedItem.Name + "</b>";

    // Comment
    data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 3);
    if (data)
        text += "<br>" + data;

    // Documents
    data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 1);
    if (data)
        text += "<br><br>" + FileList.Folder.GetDetailsOf(null, 1) + ": " + data;

    // Status
    data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 2);
    if (data)
        text += "<br><br><b><font color=red>" + data + "</font></b>";

    // Tip 
    data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, -1);
    if (data != "" && data != FileList.FocusedItem.Name)
        text += "<br><br>" + data;

    TextBlock.innerHTML = text;
</script>
                    

该脚本使用两个 FileList 属性 FileList.FocusedItemandFileList.Folder 获取有关该项目的信息。 FileList.FocusedItem 使用 FileList.FocusedItem.Name 给定的项名称标识所选项。 FileList.Folder 实际上是指向 Folder 对象的指针。 Folder 对象的 GetDetailsOf 方法用于检索有关该项的剩余信息。

所有信息都连接在一个文本字符串中,用分隔符
用于可读性的标记。 然后,通过将文本分配给 TextBlock.innerHTML 来显示文本。

摘要

本章概述了可用于自定义Windows资源管理器显示 Shell 文件夹信息的一些技术。 通过创建Desktop.ini文件,可以执行一些简单的自定义,例如显示自定义图标代替标准文件夹图标。 当文件夹出现在 Web 视图中时,其布局和显示由基于 HTML 的模板控制,用于确定显示哪些信息以及如何显示。 可以使用标准 HTML、DHTML 和脚本技术创建自定义模板,对文件夹的 Web 视图进行高度控制。