从 Web 控件生成 XP 风格的 WebPart
4.67/5 (46投票s)
2003 年 6 月 14 日
9分钟阅读
398601
5010
从 Web 控件生成 XP 风格的 WebPart
引言
互联网在专业和私人使用方面都是一个极其重要的资源，但对常用网站的访问组织却留给了“收藏夹”菜单。出于某些原因，“收藏夹”对我来说不起作用。它非常适合归档和整理感兴趣页面的书签，但对我来说，它不够显眼。“链接”工具栏可以容纳少量项目，但与许多用户一样，我访问大约 30 个核心网站，这对于“链接”工具栏来说太多了。因此，为了尝试满足我自己的需求，我创建了我自己的主页，这也许也适用于您。该页面使用一个 Web 控件，作为 ASP.NET 控件运行的示例，您可能在其他地方也能找到它的用途。
从图表中可以看出，该控件包含在一个 ASP.NET（.aspx）页面中，并包含一个或多个分组框。在本例中，该 Web 部件是 Microsoft 以前在其 MSDN 站点上用于按主题分组显示当前信息的 Web 部件 - 正如我希望的那样。分组框是可展开的，它们会记住其折叠/展开状态（甚至在连续的 IE 会话之间），因此可以限制显示的信息，但始终显示标题，因此我知道有哪些内容可用，并且可以四处移动。到目前为止一切顺利，但使用 HTML 创建 Web 部件虽然不具挑战性，但却很繁琐，因为必须精确地布局表格并使用 Web 部件识别的特定样式类。此外，将 Web 部件实现为 HTML 意味着更改并不直接，因为没有代码和内容的明显分离。这听起来很适合由 Web 控件进行渲染。
网页
自动生成 Web 部件可以简化页面创建过程，并允许数据源为数据库或 XML 文件。在本例中，我选择使用 XML 文件，稍后会详细介绍。以下是上面显示的网页的 HTML：
<%@ Page Language="vb" AutoEventWireup="false"
Inherits="System.Web.UI.Page" %>
<%@ Register TagPrefix="Links"
Namespace="Lyquidity.UtilityLibrary.WebControls"
Assembly = "Lyquidity.UtilityLibrary.WebControls" %>
<HTML>
<HEAD>
<style> BODY { font-family:verdana,arial,helvetica; margin:0; }</style>
</HEAD>
<body onload="preloadImages();">
<table cellpadding="0" cellspacing="0" width="100%" height="100%"
border="0">
<tr>
<!-- Column for web gadgets/parts -->
<td width="150" valign="top">
<Links:WebPartsControl id="LinksWebParts"
LinkFrameName="LinkPage"
DefaultPage="http://www.my_fave_page.com" runat="server" />
</td>
<td width="20"> </td>
<!-- Column to display default or frame link page -->
<td width="100%">
<iframe id="LinkFrame" name="LinkPage" width="100%" height="100%"
frameborder="0" scrolling="auto"
src="<%=LinksWebParts.DefaultPage%>">
</iframe>
</td>
</tr>
</table>
</body>
</HTML>
没什么特别的。关键行是包含 <Links:WebPartsControl> 标签的那一行。该标签按要求注册，并且该标签引用（<Links:WebPartsControl ... >）初始化了 WebPartControl 类，该类进而显示了所需的组框。请注意，该页面直接继承自 System.Web.UI.Page，并且不使用代码隐藏实现。这只是为了消除示例中的所有混淆。以目前形式呈现的该页面的缺点是它不能在设计器中使用。
Web 部件位于一个包含 3 列的表格中。Web 部件的位置完全由这个“外部”HTML 控制。在本例中，它位于左列。中间列用于在它和右侧显示的默认页面之间提供一个间隙。右侧列包含一个框架，其源是一个默认页面。您可以直接输入页面名称，但 WebPartsControl 提供了一个默认项。该默认项在控件内初始化为 http://www.google.com（当然，您可以更改它）。但是，您可以通过在标签定义中指定一个（参见 HTML）或使用页面引用上的参数（参见下文）来覆盖此默认值。
XML 文件
Web 部件的数量以及任何给定 Web 部件托管的链接由关联的 XML 文件定义。以下是一个示例：
<?xml version="1.0" encoding="utf-8" ?>
<links>
<framelinks title="Code Pages" id="BE96D11D-326D-4910-A837-84D658DDF024">
<link name="Code Project"
page="<A href="https://codeproject.org.cn/">
https://codeproject.org.cn</A>" alttext="Code Project" />
<link name="Programmers Heaven"
page="<A href="http://www.programmersheaven.com/">
http://www.programmersheaven.com</A>"
alttext="Programmers Heaven" />
<link name="Planet Source Code"
page="<A href="http://www.planetsourcecode.com/">
http://www.planetsourcecode.com</A>"
alttext="Planet Source Code" />
<link name="Got Dot Net"
page="<A href="http://www.gotdotnet.com/">
http://www.gotdotnet.com</A>" alttext="Got Dot Net" />
<link name="MSDN" page="<A href="http://msdn.microsoft.com/">
http://msdn.microsoft.com</A>"
alttext="Microsoft Developer Network" />
<link name="24 / 7" page="<A href="http://www.net247.com/">
http://www.net247.com</A>"
alttext="Microsoft Developer Network" />
</framelinks>
<popuplinks title="Links" id="E812F25B-3099-412e-A7E2-EA8FC397D169">
<group name="Search Engines">
<link name="Google" url="<A href="http://www.google.co.uk/">
http://www.google.co.uk/</A>" alttext="UK Google" />
<link name="Yahoo" url="<A href="http://www.yahoo.co.uk/">
http://www.yahoo.co.uk/</A>" />
</group>
<group name="Legal">
<link name="Inland Revenue FAQ"
url="<A href="http://www.inlandrevenue.gov.uk/">
http://www.inlandrevenue.gov.uk</A>" />
<link name="VAT"
url="<A href="http://www.hmce.gov.uk/business/vat/vat.htm">
http://www.hmce.gov.uk/business/vat/vat.htm</A>" />
<link name="Companies House"
url="<A href="http://www.companies-house.co.uk/">
http://www.companies-house.co.uk</A>" />
</group>
</popuplinks>
<popuplinks title="Other" id="E912F25B-3099-412e-A7E2-EA8FC397D169">
<group name="Map Info">
<link name="Street Map"
url="<A href="http://www.streetmap.co.uk/">
http://www.streetmap.co.uk</A>" />
</group>
<group name="ISP">
<link name="BlueYonder Status"
url="<A href="http://status.blueyonder.co.uk:888/">
http://status.blueyonder.co.uk:888/</A>" />
<link name="BlueYonder Selfcare"
url="<A href="http://selfcare.blueyonder.co.uk/">
http://selfcare.blueyonder.co.uk/</A>" />
</group>
</popuplinks>
</links>
有两种链接类型：“frame”和“popup”。Frame 链接将导致在命名框架（默认为 _Parent）中显示引用的页面，而 popup 则始终在父框架中显示页面。上面给出的 Web 控件的示例使用指定使用名为 LinkPage 的框架。Frame 和 popup 链接类型之间还有另外两个重要区别：只能有一个 FrameLink 条目；popup 链接可以有组。所示的 XML 样本说明了 Web 控件识别的所有标签和属性，因此稍作回顾即可获得所需的大部分信息。值得对 ID 属性进行额外说明。Web 部件将存储其展开/折叠状态和顺序，以便下次使用 IE 时可以检索。但是，只有当使用的部件具有唯一 ID 时，它才能恢复顺序。我使用了 GUID，但任何其他唯一 ID 都可以。例如，“A”、“B”、“C”...
Web 部件
Web 部件控件基于 Web 部件实现，类似于以前在 MSDN 站点上使用的实现。Web 部件是包含一些 HTML 和 JavaScript 的组件。与 .NET 中的组件不同，表示（HTML）与代码不在同一位置。但与 .NET 组件一样，Web 部件代码封装了组件的功能。HTML 和代码之间的链接是样式类。在 IE 中，样式类可以将其 behavior 属性设置为引用包含代码的文件和一个 <component> 标签。下图试图描绘这些关系：
<element
class="MyComponentStyle">
|
V
MyComponentStyle
{ behaviour:url(MyComponentCode.xxx); }
|
V
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="fnInit()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="fnGrab()" />
<PUBLIC:ATTACH EVENT="ondragstart" ONEVENT="fnCancel()" />
<SCRIPT LANGUAGE="JavaScript">
function fnInit()
{
....
}
function fnGrab()
{
....
}
function fnCancel()
{
....
}
</SCRIPT>
</PUBLIC:COMPONENT>
此控件中使用的 Web 部件组件的代码可以在 webparts 文件夹的 webparts.htc 文件中找到。Web 部件使用的样式（包括将 Web 部件 HTML 链接到 Web 部件代码的样式）可以在 webparts 文件夹的 ie.css 文件中找到。
用于 Web 部件的 HTML 可以在 Web 控件的 Render() 方法以及 HTML 文件夹中的文件中找到。该文件夹包含四个文件。每个文件都包含用于显示可折叠分组框的 HTML 片段。HTML 被分成片段，以便 Web 控件可以轻松重用它们。它们保存在文件中，以便在需要时可以进行修改，而无需重新编译 Web 控件。
首先要审查的文件是 webpart.txt，其内容在此处复制：
<!-- Web part Start -->
<table cellpadding="0" cellspacing="0" class="clsPart"
width="150" border="0" id="%id">
<tr>
<td class="clsPartHead" valign="top" align="left" height="19" width="15">
<img class="clsPartHead" src="webparts/images/gripblue.gif"
height="19" width="15">
</td>
<td class="clsPartHead" valign="middle" align="left" width="150">
<b class="clsPartHead">%WebPartTitle</b>
</td>
<td class="clsPartRight" valign="top" align="right"
height="19" width="25">
<img class="clsMinimize" src="webparts/images/downlevel.gif"
height="19" width="25">
</td>
</tr>
<tr>
<td colspan="3">
<table bgcolor="#ffffff" width="100%" cellpadding="0"
cellspacing="0" border="0">
<tr>
<td bgcolor="#6699cc" colspan="1" width="1px"
valign="top"><div
style="margin:1px;padding:0px;"></div>
</td>
<td width="150" colspan="2" bgcolor="#f1f1f1" valign="top">
<table width="150" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2" height="10"></td>
</tr>
%Elements
</table>
</td>
<td bgcolor="#6699cc" colspan="1" width="1px"
valign="top"><div
style="margin:1px;padding:0px;"></div>
</td>
</tr>
<tr>
<td bgcolor="#6699cc" colspan="3" height="1"
valign="top"><div
style="margin:1px;padding:0px;"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Web part end -->
此 HTML 定义了控制分组框布局的表格、按钮和抓手柄的位置、其标题以及内容将位于何处。此片段包含标识符 %WebPartTitle 和 %Elements。Web 控件将使用 HTML（基于其他文件的 HTML 片段）替换这些标识符，以创建完整的组框并将其返回给用户的浏览器。
您会看到此片段的主表被分配了一个样式类。除了提供格式样式外，使用此类还允许驻留在 .htc 文件中的关联组件代码识别属于组件的 HTML 元素。在这种情况下，该类称为 clsPart。
WebParts 控件
整个 Web 部件是任意数量分组框的集合。这些分组框列表又包含在一个容器表格中。该表格的 HTML 可以在 Web 控件的 Render() 方法中找到。
<table cellpadding='0' cellspacing='0'
width='150' id='topTable' class='clsPartContainer'
style='MARGIN-LEFT:10px; MARGIN-RIGHT:10px' border='0'>
对于 Web 部件至关重要的是使用样式类 clsPartContainer。正是这个类（在 webparts/ie.css 中定义）将其行为绑定到 webparts.htc 中的代码。
该控件还链接了所需的样式表，但其主要任务是生成 HTML，以便向用户呈现 XML 文件中定义的链接。
属性
该控件提供四个属性：
LinkFrameName
在显示 <framelink> 链接引用的页面时使用的框架名称。默认情况下是 _Parent，在这种情况下，popup 链接和 frame 链接类型的行为是相同的。
HTML
包含 Web 部件片段的 Web 文件夹的名称。默认情况下是 HTML，一个位于包含页面下方的文件夹，例如：
<A href="http://www.mysite.com/linkpages/html">
http://www.mysite.com/linkpages/html</A>
DefaultPage
这定义了（如果需要）将默认显示的页面，并且默认为：
<A href="http://www.google.com">http://www.google.com</A>
可以通过以下两种方式修改 DefaultPage 属性的值（而不更改 Web 控件代码）：
- 在包含 Web 页上的控件定义时，包含
DefaultPage属性的值。<Links:WebPartsControl id="LinksWebParts" LinkFrameName="LinkPage" DefaultPage="<A href="http://www.my_fave_page.com/"> http://www.my_fave_page.com</A>" runat="server" />在此示例中，<IFrame> 中显示的默认页面将是：
<A href="http://www.my_fave_page.com">http://www.my_fave_page.com</A>
- 通过在地址中包含参数。
<A href="https:///links.aspx?DefaultPage= http://www.my_fave_page.com"> https:///links.aspx?DefaultPage= http://www.my_fave_page.com</A>
XMLFile
这定义了用于包含链接信息的 XML 文件的名称。默认值为 links.xml。与 DefaultPage 一样，可以通过在包含 Web 页上的控件定义时包含值来修改此属性。
<Links:WebPartsControl id="LinksWebParts"
LinkFrameName="LinkPage"
XMLFile="BMSLinks.xml" runat="server" />
或通过在地址中包含参数。
<A href="https:///links.aspx?XMLFile=BMSLinks.xml">
https:///links.aspx?XMLFile=BMSLinks.xml</A>
可以改进该控件的内容
- 添加包含链接图标的选项。
- 提供隐藏控件的功能（例如工具箱）。
- 添加设置宽度属性的能力（这很困难，因为一些宽度决定因素在样式类和 .htc 文件中）。
- 添加颜色属性（这并非不可能，但更困难，因为颜色是所用图像的固有属性）。
限制
除了“待办事项”列表中暗示的限制之外，生成的 HTML 仅在 IE 4.01 或更高版本的浏览器中显示时才能正常工作。这是因为 Web 部件使用了行为，这是一个 IE 特有的功能。
更新
- 2003-06-14 - 修复了拖动窗口不消失的问题。
- 2003-07-10 - 添加了对页面上多个控件的支持。从未测试过一个页面上有两个控件的条件。结果发现这不起作用。现在，任何页面中都可以存在任意数量的所需控件，并且每个控件都独立存储其数据。
- 2003-07-10 - 添加了对在没有 HTML 或 Webparts 文件夹的页面上使用该控件的支持。用于控件的 HTML 片段所在的子文件夹可以通过相对路径引用，因此只需要一个 HTML 文件夹的副本（而不是每个页面一个）。可以在控件上设置一个名为 HTMLSubFolder 的属性来指定 HTML 文件夹和相应 Web Parts 文件夹的相对位置。
- 2003-07-14 - 包含 .cmd 文件来编译源文件（适用于没有 VB.NET 的用户）。