[转帖]修改 Web 部件和 Web 部件页的用户界面

zhuyiwen

<转自: http://www.microsoft.com/china/MSDN/library/Office/sharepoint/SPmodifyingui.mspx>

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

发布日期： 6/1/2004 | 更新日期： 6/1/2004

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 的不同方法。

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

简介



当您创建 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）。

更改标题栏





1.在 Web 部件页的标题栏中单击“修改共享网页”，指向“修改共享 Web 部件”，然后单击“Web 部件页标题栏”。

2.在相应的框中，键入要使用的标题、题注、说明和图像链接，然后单击“应用”或“确定”。





更改默认徽标图像





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

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

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

[此贴子已经被作者于2004-7-9 20:48:20编辑过]

zhuyiwen

通过嵌入代码进行自定义

可用于自定义 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();

zhuyiwen

使用主题来自定义站点

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





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



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





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







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

zhuyiwen

<H3><FONT face=Verdana size=2>在 Web 部件的顶端呈现工具栏</FONT></H3>
<><FONT face=Verdana>使用以下 HTML 代码：</FONT></P><RE ><FONT face=Verdana>&lt;table class="ms-toolbar" border="0" cellspacing="0" cellpadding="2"&gt;
   &lt;tr&gt;
      &lt;td class="ms-toolbar"&gt;
      &lt;/td&gt;
      &lt;td class="ms-toolbar"&gt;
         &lt;table cellpadding="1" cellspacing="0" border="0"&gt;
            &lt;tr&gt;
               &lt;td class="ms-toolbar" nowrap="true"&gt;
                  &lt;a tabindex="0" style="cursor:hand;"&gt;Command 1&lt;/a&gt;
               &lt;/td&gt;
            &lt;/tr&gt;
         &lt;/table&gt;
      &lt;/td&gt;
      &lt;td class="ms-separator"&gt;|&lt;/td&gt;
      &lt;td class="ms-toolbar"&gt;
         &lt;table cellpadding="1" cellspacing="0" border="0"&gt;
            &lt;tr&gt;
               &lt;td class="ms-toolbar" nowrap="true"&gt;
                  &lt;a tabindex="0" style="cursor:hand;"&gt;Command 2&lt;/a&gt;
               &lt;/td&gt;
            &lt;/tr&gt;
         &lt;/table&gt;
      &lt;/td&gt;
      &lt;td class="ms-separator"&gt;|&lt;/td&gt;
      &lt;td class="ms-toolbar"&gt;
         &lt;table cellpadding="1" cellspacing="0" border="0" ID="Table4"&gt;
            &lt;tr&gt;
               &lt;td class="ms-toolbar" nowrap="true"&gt;
                  &lt;a tabindex="0" style="cursor:hand;"&gt;Command 3&lt;/a&gt;
               &lt;/td&gt;
            &lt;/tr&gt;
         &lt;/table&gt;
      &lt;/td&gt;
      &lt;td width="100%" class="ms-toolbar" nowrap="true"&gt;&lt;/td&gt;
      &lt;td align="right" nowrap="true" valign="center" style="Display:inline;"&gt;
         &lt;label&gt;DropDown:&lt;/label&gt;
      &lt;/td&gt;
      &lt;td nowrap="true" valign="center" style="Display:inline;"&gt;
         &lt;select&gt;
            &lt;option selected &gt;First Option&lt;/option&gt;
            &lt;option&gt;Second Option&lt;/option&gt;
            &lt;option&gt;Third Option&lt;/option&gt;
         &lt;/select&gt;
      &lt;/td&gt;
      &lt;td width="99%" class="ms-toolbar" nowrap="true"&gt;
      &lt;/td&gt;
   &lt;/tr&gt;
&lt;/table&gt;
</FONT></PRE>
<><FONT face=Verdana>该 Web 部件使用 <B>ms-toolbar</B> 类来呈现给定主题的正确渐变图像和字体。</FONT></P>
<H3><FONT face=Verdana size=2>呈现 Web 部件的音乐排行榜部分</FONT></H3>
<P><FONT face=Verdana>使用以下 HTML 代码：</FONT></P><PRE ><FONT face=Verdana>&lt;table cellSpacing=0 width="100%" class="UserGeneric"&gt;
&lt;tr&gt;
   &lt;td class="ms-smallsectionline, ms-smallheader"&gt;
            Artist&lt;/td&gt;
        &lt;td class="ms-smallsectionline, ms-smallheader"&gt;
            Album&lt;/td&gt;
        &lt;td class="ms-smallsectionline, ms-smallheader"&gt;
            Genre&lt;/td&gt;
        &lt;td class="ms-smallsectionline, ms-smallheader"&gt;
            Year&lt;/td&gt;
&lt;/tr&gt;
&lt;tr onmouseover="this.className = 'ms-HoverCellActive';"
   onmousedown="this.className = 'ms-HoverCellActiveDark';"
   onmouseout="this.className = 'ms-HoverCellInActive';"   
        cellpadding=0   
   class="ms-HoverCellInActive"
   style="cursor: hand"&gt;
   &lt;td class="ms-smallsectionline"&gt;
            U2&lt;/td&gt;
        &lt;td class="ms-smallsectionline"&gt;
            The Joshua Tree&lt;/td&gt;
        &lt;td class="ms-smallsectionline"&gt;
            Rock&lt;/td&gt;
        &lt;td class="ms-smallsectionline"&gt;
            1987&lt;/td&gt;
&lt;/tr&gt;
&lt;tr onmouseover="this.className = 'ms-HoverCellActive';"
   onmousedown="this.className = 'ms-HoverCellActiveDark';"
   onmouseout="this.className = 'ms-HoverCellInActive';"   
   class="ms-HoverCellInActive"
   style="cursor: hand"&gt;
   &lt;td class="ms-smallsectionline"&gt;
            Cult&lt;/td&gt;
        &lt;td class="ms-smallsectionline"&gt;
            Love&lt;/td&gt;
        &lt;td class="ms-smallsectionline"&gt;
            Hard Rock&lt;/td&gt;
        &lt;td class="ms-smallsectionline"&gt;
            1986&lt;/td&gt;
&lt;/tr&gt;
&lt;tr
   class="ms-se

zhuyiwen

自定义任务窗格

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





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

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

使用类似于以下的代码，将 PartImageLarge 属性设置为指向要使用的图像文件：this.PartImageLarge = "_WPR_/image.gif";



您也可以添加类似于以下的代码行，在 .dwp 文件中为该 Web 部件指定 PartImageLarge 属性：<artImageLarge>_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("arentItem", "", "arentItemID");

//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;

}

}

zhuyiwen

自定义任务窗格视图



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



虚拟服务器库

例如，要打开联机库，请使用以下代码行：<FONT face=Verdana>MSOGallery_SelectedLibrary=2;

MSOTlPn_ShowToolPane(2);

zhuyiwen

<全文完>

zhuyiwen

以下是引用ganrong在2004-7-8 9:56:19的发言：

2003版本才有这些功能吧?

不错. 这是WINDOWS 2003上Microsoft Windows SharePoint Services的功能

[此贴子已经被作者于2005-1-11 21:25:49编辑过]

ocean

zhuyiwen老兄才是真正的SPs高手呀