修改 Web 部件和 Web 部件页的用户界面

项目
10/31/2007

Nilly Banerjee

Microsoft Corporation

2003 年 5 月

适用于：
Microsoft Windows SharePoint Services
Microsoft Office SharePoint Portal Server 2003
Microsoft Visual Studio.NET

Web 部件基础结构

摘要：了解如何自定义 Web 部件和 Web 部件页的用户界面 (UI)。本文回顾了可用于修改 Microsoft Windows SharePoint Services 及相关产品的 UI 的不同方法。（13 页打印页）

注本文中的信息还适用于在 Windows SharePoint Services 平台上构建的 Microsoft Office SharePoint Portal Server 2003。

本页内容

简介
使用 UI 进行自定义
通过嵌入代码进行自定义
使用主题来自定义站点
自定义任务窗格
替代和自定义 Web 部件菜单
自定义任务窗格视图
小结

简介

当您创建 Web 部件页或者为 Microsoft Windows SharePoint Services 或 Microsoft Office SharePoint Portal Server 2003 开发 Web 部件时，可能希望自定义用户界面 (UI)。Windows SharePoint Services 可通过多种方法让作者和开发人员更简单地执行此任务。您可以轻松地自定义 Web 部件页的标题栏，使用完整的对象模型来操纵 Web 部件菜单，以及使用样式类来创建与任意给定主题的配色方案相匹配的 UI 元素。另外，开发人员和作者还可以编写代码，来选择和控制任务窗格中显示的视图。

使用 UI 进行自定义

本部分回顾了几种方法，通过这些方法，您可以使用 Web 部件页上默认提供的 UI 来轻松地自定义站点。例如，如果您是页面的页面作者或投稿人，则可能希望自定义标题栏 Web 部件，以满足您页面的需要。

提示所有 SharePoint 站点的主页都是自定义的 Web 部件页，其中包含经过修改的标头 Web 部件、标题和图像属性。要自定义主页的这些部分，您可以使用兼容的网页编辑器（如 Microsoft Office FrontPage 2003）。

更改标题栏

在 Web 部件页的标题栏中单击“修改共享网页”，指向“修改共享 Web 部件”，然后单击“Web 部件页标题栏”。
在相应的框中，键入要使用的标题、题注、说明和图像链接，然后单击“应用”或“确定”。

更改默认徽标图像

删除或重命名以下文件夹中的 WPIcon.gif 文件：

本地驱动器:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\Template\Images

注此文件夹的 HTTP 路径是 http://server_name/layouts/images/
将要使用的新图形交换格式 (GIF) 文件复制到此文件夹中，然后将这个新的 GIF 文件重命名为 WPIcon.gif。

通过嵌入代码进行自定义

可用于自定义 Web 部件页的另一种方法是嵌入代码，以便向页面中添加其他 ASP .NET 服务器控件。以下过程是您可以向 Web 部件页中添加的控件类型的示例。

在 Web 部件页上呈现设置菜单链接

要将页面级菜单（例如，“修改共享网页”菜单）添加到您的 Web 部件页中，请将以下控件嵌入页面中。

<WebPartPages:SettingsLink runat="server"/>

您也可以创建一个 Web 部件，以执行下列任一行代码，然后呈现 myLink 控件。

myLink = new Microsoft.SharePoint.WebPartPages.SettingsLink("Link Text");

- 或者 -

myLink = new Microsoft.SharePoint.WebPartPages.SettingsLink();

当您在服务器上执行构造函数时，可以将自己的文本插入页面菜单中。

注当您嵌入 SettingsLink 控件或执行服务器端代码时，除了创建链接以外，不会创建任何 HTML。您必须手动添加要在自定义文本中使用的任何格式标记。

呈现“登录”按钮

要向页面中添加“登录”按钮，请将以下控件嵌入 Web 部件页中：

<WebPartPages:AuthenticationButton runat="server"/>

或者，您可以创建一个 Web 部件，以执行以下代码行，然后呈现 myButton 控件：

myButton = new Microsoft.SharePoint.WebPartPages.AuthenticationButton();

使用主题来自定义站点

当您自定义 Web 部件页时，可能希望确保由您的 Web 部件创建的 UI 支持主题，以便它能够采用您站点所应用的任一主题的配色方案。不支持主题的用户界面可能会在为站点应用主题时变得不可读。以下各图显示了一个以不同主题呈现的 Web 部件。

图 1. 以默认主题呈现的示例 Web 部件

因为这个示例 Web 部件使用了正确的样式类，所以它还可以用“涟漪”主题和“彩虹”主题正确地呈现 HTML，如以下示例所示。

图 2. 以“涟漪”主题呈现的示例 Web 部件

图 3. 以“彩虹”主题呈现的示例 Web 部件

在 Web 部件的顶端呈现工具栏

使用以下 HTML 代码：

<table class="ms-toolbar" border="0" cellspacing="0" cellpadding="2">
   <tr>
      <td class="ms-toolbar">
      </td>
      <td class="ms-toolbar">
         <table cellpadding="1" cellspacing="0" border="0">
            <tr>
               <td class="ms-toolbar" nowrap="true">
                  <a tabindex="0" style="cursor:hand;">Command 1</a>
               </td>
            </tr>
         </table>
      </td>
      <td class="ms-separator">|</td>
      <td class="ms-toolbar">
         <table cellpadding="1" cellspacing="0" border="0">
            <tr>
               <td class="ms-toolbar" nowrap="true">
                  <a tabindex="0" style="cursor:hand;">Command 2</a>
               </td>
            </tr>
         </table>
      </td>
      <td class="ms-separator">|</td>
      <td class="ms-toolbar">
         <table cellpadding="1" cellspacing="0" border="0" ID="Table4">
            <tr>
               <td class="ms-toolbar" nowrap="true">
                  <a tabindex="0" style="cursor:hand;">Command 3</a>
               </td>
            </tr>
         </table>
      </td>
      <td width="100%" class="ms-toolbar" nowrap="true"></td>
      <td align="right" nowrap="true" valign="center" style="Display:inline;">
         <label>DropDown:</label>
      </td>
      <td nowrap="true" valign="center" style="Display:inline;">
         <select>
            <option selected >First Option</option>
            <option>Second Option</option>
            <option>Third Option</option>
         </select>
      </td>
      <td width="99%" class="ms-toolbar" nowrap="true">
      </td>
   </tr>
</table>

该 Web 部件使用 ms-toolbar 类来呈现给定主题的正确渐变图像和字体。

呈现 Web 部件的音乐排行榜部分

使用以下 HTML 代码：

<table cellSpacing=0 width="100%" class="UserGeneric">
<tr>
   <td class="ms-smallsectionline, ms-smallheader">
            Artist</td>
        <td class="ms-smallsectionline, ms-smallheader">
            Album</td>
        <td class="ms-smallsectionline, ms-smallheader">
            Genre</td>
        <td class="ms-smallsectionline, ms-smallheader">
            Year</td>
</tr>
<tr onmouseover="this.className = 'ms-HoverCellActive';" 
   onmousedown="this.className = 'ms-HoverCellActiveDark';" 
   onmouseout="this.className = 'ms-HoverCellInActive';"    
        cellpadding=0   
   class="ms-HoverCellInActive" 
   style="cursor: hand">
   <td class="ms-smallsectionline">
            U2</td>
        <td class="ms-smallsectionline">
            The Joshua Tree</td>
        <td class="ms-smallsectionline">
            Rock</td>
        <td class="ms-smallsectionline">
            1987</td>
</tr>
<tr onmouseover="this.className = 'ms-HoverCellActive';" 
   onmousedown="this.className = 'ms-HoverCellActiveDark';" 
   onmouseout="this.className = 'ms-HoverCellInActive';"    
   class="ms-HoverCellInActive" 
   style="cursor: hand">
   <td class="ms-smallsectionline">
            Cult</td>
        <td class="ms-smallsectionline">
            Love</td>
        <td class="ms-smallsectionline">
            Hard Rock</td>
        <td class="ms-smallsectionline">
            1986</td>
</tr>
<tr 
   class="ms-selectednav" 
   style="cursor: hand">
   <td>Cult</td><td>Love</td><td>Hard Rock</td><td>1986</td>
</tr>
</table>

该 Web 部件使用 ms-smallsectionline 类来绘制网格线，使用 ms-smallheader 类来处理页眉，使用 UserGeneric 类来呈现边距。另外，该 Web 部件还使用 ms-HoverCellInactive、ms-HoverCellActive 和 ms-HoverCellActiveDark 类来呈现悬停行为，并使用 ms-selectednav 类来显示当前选择。

在 Web 部件的底部呈现选项卡和文本区域

使用以下 HTML 代码：

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="UserSectionTitle"> 
   <tr>
      <td valign="top">
         <div width="100%" class="ms-WPBody"  >
            <span class="ms-tabselected" style="width:5px;height:5px;">
               <nobr>Active Tab</nobr>
            </span>
            <span style="width:3px;height:5px;"> </span>
            <span style="width:5px;height:25px;padding-top:2px;">
               <span class="ms-tabinactive" style="width:5px;height:5px;">
                  <nobr>Inactive Tab</nobr>
               </span>
            </span>
         </div>
      </td>
   </tr>
</table>
<div class="UserBackground UserGeneric">
   A basic panel with padding.
</div>
<div class="UserSectionFooter">
   Footer with top border.
</div>

该 Web 部件使用 ms-WPBody 类来呈现基本文本，使用 UserSectionTitle 类来呈现带有下边框的页眉，使用 UserSectionFooter 类来呈现带有上边框的页脚，使用 UserBackground 类和 UserGeneric 类来提供通用背景和间距。另外，该 Web 部件还使用 ms-tabselected 类和 ms-tabinactive 类在示例页上呈现对选项卡的处理。

自定义任务窗格

您还可以修改默认的任务窗格，以显示其他链接、图像或任务。以下示例显示了如何显示“添加 Web 部件”任务窗格中 Web 部件旁边的图标，如下图所示：

图 4.“添加 Web 部件”任务窗格中显示的 Web 部件图标

显示“添加 Web 部件”任务窗格中 Web 部件旁边的图标

使用类似于以下的代码，将 PartImageLarge 属性设置为指向要使用的图像文件：

this.PartImageLarge = "_WPR_/image.gif";

您也可以添加类似于以下的代码行，在 .dwp 文件中为该 Web 部件指定 PartImageLarge 属性：

<PartImageLarge>_WPR_/image.gif</PartImageLarge>

在本例中，Image.gif 文件位于该 Web 部件的类资源目录中。有关 Web 部件类资源或如何部署 Web 部件的详细信息，请参阅 Microsoft SharePoint 产品和技术软件开发工具包 (SDK) 或打包和部署 Microsoft Windows SharePoint Services 的 Web 部件。

替代和自定义 Web 部件菜单

如果您是 Web 部件的作者，则可能需要替代或自定义默认的 Web 部件菜单。本文使用一个基于 C# 且涉及多个属性检查的假想方案，简要概述了此过程。有关 Web 部件菜单的对象模型的详细信息，请参阅 Microsoft SharePoint 产品和技术软件开发工具包 (SDK)。

替代 Web 部件菜单

以下示例代码可替代 CreateWebPartMenu() 函数，以便自定义菜单。

public override void CreateWebPartMenu()
{
MenuItem ParentItem, Item1, Item2;
//first we create three menu items
//one as a parent item, and two submenu items
//create the parent item
ParentItem = new MenuItem("ParentItem", "", "ParentItemID");
//create a submenu item with a server event on click
Item1 = new MenuItem("Item1", "Item1ID", new EventHandler(EventHandlerForItem1));
//create a submenu item with a client event on click 
Item2 = new MenuItem("Item2", "javascript:alert('Item2 was clicked');", "Item2ID");
// We then add the submenu items to the parent item.
ParentItem.MenuItems.Add(Item1);
ParentItem.MenuItems.Add(Item2);
// We then decide that we'd like to add the parent item after the 
// "Edit Web Part Properties" item in the menu. 
// First we find the index of the "Edit" item
int EditIndex = 
   this.WebPartMenu.MenuItems.IndexOf(this.WebPartMenu.MenuItems.ItemFromID("MSOMenu_Edit"));
// Then we insert the parent item after the "Edit" item
this.WebPartMenu.MenuItems.Insert(EditIndex + 1, ParentItem); 
// Make sure the parent item has a separator above it
ParentItem.BeginSection = true;
// Check a custom property to decide whether to display the parent menu
if (this.CustomProperty1 == true)
{
ParentItem.Visible = true;
}
else
{
ParentItem.Visible = false;
}
// Check another custom property to decide which menu item to enable 
// within the parent item
if (this.CustomProperty2 == true)
{
Item1.Enabled=true;
Item2.Enabled=false;
}
else
{
Item1.Enabled=false;
Item2.Enabled=true;
}
}

自定义任务窗格视图

Web 部件开发人员或 Web 部件页作者可以从多个视图中打开任务窗格。此外，这些视图还可以修改 Web 部件的属性，向页面中添加 Web 部件，以及打开可扩展视图等。要使用这些视图，请在 JScript 中调用 MSOTlPn_ShowToolPane( ViewID , WebPartID ) 函数。

MSOTlPn_ShowToolPane() 函数有一个必需参数和一个可选参数。必需参数是整数形式的 ViewID。下表显示任务窗格每个视图的 ViewID 值。

表 1. 任务窗格每个视图的 ViewID 值

ViewID	要显示的任务窗格视图
-1	可扩展视图
0	关闭任务窗格
1	Web 部件属性和自定义工具部件
2	添加 Web 部件 – 浏览
3	添加 Web 部件 – 搜索
4	导航（仅限下级）
5	添加 Web 部件 – 导入
6	Web 部件菜单（仅限下级）
7	错误

例如，以下示例 JScript 调用可在“导入”模式下打开“添加 Web 部件”任务窗格：

MSOTlPn_ShowToolPane(5);

可选参数是 WebPartID，它是 Web 部件在页面上的全局唯一标识符 (GUID)。当 ViewID 参数设置为 -1、1 或 6 时，您可以使用 WebPartID 参数。例如，以下示例 JScript 调用可打开 Web 部件的“属性表”任务窗格：

MSOTlPn_ShowToolPane(1, <GUID>);

除了将基本参数传递到 MSOTlPn_ShowToolPane() 函数中，您还可以使用 MSOGallery_SelectedLibrary 表单域让“添加 Web 部件 – 浏览”任务窗格指向特定的 Web 部件库。当您将此域设置为从 1 到 4 的整数值时，会在任务窗格打开时选择相应的库。下表显示与每个 MSOGallery_SelectedLibrary 域值相对应的库。

表 2. MSOGallery_SelectedLibrary 域值

MSOGallery_SelectedLibrary	选定的 Web 部件库
1	站点名库
2	联机库
3	Web 部件页库
4	虚拟服务器库

例如，要打开联机库，请使用以下代码行：

MSOGallery_SelectedLibrary=2;
MSOTlPn_ShowToolPane(2);

要进一步指定显示在“添加 Web 部件 – 浏览”任务窗格中的 Web 部件，请使用筛选字符串。当您将 MSOGallery_FilterString 域设置为特定字符串时，任务窗格将使用该字符串来筛选工作组网站库中的 Group 域。例如，要只显示工作组网站库中的“Finance Web Parts”（财务 Web 部件）组，请使用以下代码行：

MSOGallery_SelectedLibrary=1;
MSOGallery_FilterString="Finance Web Parts";
MSOTlPn_ShowToolPane(2);

注此功能仅适用于站点名 库。

小结

Web 部件页作者和 Web 部件开发人员有多种不同选择来自定义 Windows SharePoint Services 中的用户界面。尽管其中的许多选项都可以通过浏览器来使用，但是您必须能够访问服务器才能执行一些自定义任务，许多进一步的自定义任务需要在服务器上执行代码。利用各种 Windows SharePoint Services 中的 UI 自定义，Web 部件开发人员和解决方案开发人员可以轻松高效地设计自己的站点并获得他们所需的外观。

转到原英文页面

Share via

修改 Web 部件和 Web 部件页的用户界面

本页内容

简介

使用 UI 进行自定义

更改标题栏

更改默认徽标图像

通过嵌入代码进行自定义

在 Web 部件页上呈现设置菜单链接

呈现“登录”按钮

使用主题来自定义站点

在 Web 部件的顶端呈现工具栏

呈现 Web 部件的音乐排行榜部分

在 Web 部件的底部呈现选项卡和文本区域

自定义任务窗格

显示“添加 Web 部件”任务窗格中 Web 部件旁边的图标

替代和自定义 Web 部件菜单

替代 Web 部件菜单

自定义任务窗格视图

小结

其他资源