【原创】SharePoint2010 ASPX页面设置自定义功能区（Ribbon）

SharePoint2010 ASPX页面设置自定义功能区（Ribbon）

SharePoint2010的页面风格发生了很大的改变，其页面风格类似于Office的视图，这种视图被称为功能区（Ribbon）视图。

一、服务器功能区的体系结构

SharePoint 2010

Microsoft SharePoint Foundation 2010 中的服务器功能区可创建一致的用户界面来处理 SharePoint 对象。您可以使用服务器功能区 XML 和简单的 ECMAScript（JavaScript、JScript）以声明方式扩展功能区，也可以针对更高级的情形使用功能区 XML 和页面组件。

服务器功能区中的基本对象

---

功能区中的首要元素就是选项卡。选项卡显示在 SharePoint 网站页面的顶部。每个选项卡都包含多个组。这些组又包含多组控件。每个组可以包含多个控件，并具有一个标签来标识该组。组内的控件包括按钮、下拉菜单、复选框、组合框、拆分按钮和库。其中每个控件都绑定到一个唯一的命令。

服务器功能区是使用服务器功能区 XML 在功能清单文件或用户自定义操作中定义的。功能区 XML 用于定义各个选项卡、组和控件。Tab 元素包含一个Groups 元素。每个 Groups 元素又有多个 Group 元素。Group 元素内是一个 Controls 元素，该元素又包含多种类型的控件。服务器功能区中的控件部分列出了可用的控件类型。有关功能区 XML 的详细说明，请参阅服务器功能区 XML。

服务器功能区通信

---

功能区使用多个对象与页面的其余部分进行交互。它必须知道启用了哪些控件、控件的状态以及何时进行刷新。服务器功能区使用CommandDispatcher、PageManager、PageComponent 等对象进行通信。其中每个对象在与功能区的交互中都扮演着重要角色。

PageManager 可初始化所有控件并向功能区注册 PageComponent 对象。PageManager 的一个实例位于该页面上。

CommandDispatcher 负责处理所有 PageComponent 对象以及这些对象可以处理的命令。在页面上收到命令后，CommandDispatcher 会接收该命令并将其传递给正确的 PageComponent。

PageComponent 在 ECMAScript（JavaScript、JScript）中创建并处理由 CommandDispatcher 传递的命令。将 PageComponent 添加到页面中后，您可以使用 JavaScript 创建 PageComponent 的实例，并将其注册到 PageManager 中。然后，PageComponent 即可响应您在功能区 XML 中定义的命令。

服务器功能区中的控件

---

服务器功能区包含许多类型的控件。其中包括复选框、按钮和组合框等简单控件，还包括拆分按钮或飞出位置等更高级的控件。

二、  SharePoint 2010 Server 功能区组件

图中的标注号指向以下特定组件：

1. 选项卡 
   
   
2. 组
   
   
3. 控件 
   
   
4. 上下文选项卡组 

三、使用页面组件实现服务器功能区命令 

除了使用命令 UI 处理程序外，还可以使用页面组件。页面组件是一个在外部脚本库 (.js) 文件中定义的 JavaScript 对象。该对象实现了几个属性和方法，它们将告知服务器功能区命令基础结构如何初始化该对象、该对象可处理哪些命令以及某个特定命令是否可用，并可在页面组件接收焦点或失去焦点时做出响应。

必须将此脚本文件添加到显示功能区自定义项的同一页面中。可通过多种方法来实现这一点。第一种方法是，使用 SharePoint 2010 中的新 <CustomAction ScriptSrc="" /> 功能，根据功能的范围将库添加到网站、网站集、Web 应用程序或服务器场中的所有页面。另一种方法是，从自定义应用程序或网站页面 (.aspx)、自定义用户控件 (.ascx) 或自定义服务器控件内的托管代码添加脚本。以下代码示例将向 Web 部件内的页面添加页面组件文件。

本例在自定义ASPX页面中实现：

 ASPX

注意：1、继承母版：DynamicMasterPageFile="~masterurl/default.master"

           2、如果没有继承母版页，需自定义Sharepoint Ribbon控件

 1 <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
 2 <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
 3 <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
 4 <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
 5 <%@ Import Namespace="Microsoft.SharePoint" %>
 6 <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
 7 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ApplicationPage1.aspx.cs" Inherits="SpRibbon2.ApplicationPage1" DynamicMasterPageFile="~masterurl/default.master" %>
 8 
 9 <asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
10 
11 </asp:Content>
12 
13 
14 <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
15  asdhkasjhfsadf sdfsdalfjaklsjdfklasjdfklasjdfo; 
16     <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
17 </asp:Content>
18 
19 <asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
20 应用程序页sdfsaf
21 </asp:Content>
22 
23 <asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
24 我的应用程序页asdfasd asdf
25 </asp:Content>
26 
27 
28 
29 <asp:Content ContentPlaceHolderID="PlaceHolderPageImage" runat="server">
30 </asp:Content>
31 
32 <asp:Content  runat="server" ContentPlaceHolderID="PlaceHolderPageDescription">
33 </asp:Content>
34 
35 
36 <asp:Content ContentPlaceHolderID="PlaceHolderLeftNavBar" runat="server">
37  xvzxcv asdfasdf asdfa dfasfdsadfsadfsafas

38 </asp:Content>

sharePoint Ribbon控件代码（本例未使用，可参考MSDN）

<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">

  <div id="s4-ribboncont">
    <SharePoint:SPRibbon ID="SPRibbon1"
     runat="server"
     PlaceholderElementId="RibbonContainer"
     CssFile="">
      <SharePoint:SPRibbonPeripheralContent ID="SPRibbonPeripheralContent1"
  runat="server"
  Location="TabRowLeft"
  CssClass="ms-siteactionscontainer s4-notdlg">
     <%-- Insert the Site Actions Menu Here --%>
     </SharePoint:SPRibbonPeripheralContent>

     <%-- Insert the Global Navigation Here --%>
     <SharePoint:SPRibbonPeripheralContent
       runat="server"
       Location="TabRowRight"
       ID="RibbonTabRowRight"
       CssClass="s4-trc-container s4-notdlg">
     <%-- Insert the Top-Right Corner Controls Here --%>
     </SharePoint:SPRibbonPeripheralContent>

    </SharePoint:SPRibbon>
  </div>
  <div id="notificationArea" class="s4-noti">
    <%-- Notifications will appear in this div element. --%> 
  </div>


</div>

C# 

1、继承：LayoutsPageBase

2、重写： 

override void  OnPreRender(EventArgs e)

 1 using System;

 2 using System.ComponentModel;
 3 using System.Web;
 4 using System.Web.UI;
 5 using System.Web.UI.WebControls;
 6 using System.Web.UI.WebControls.WebParts;
 7 using Microsoft.SharePoint;
 8 using Microsoft.SharePoint.WebControls;
 9 
10 namespace SpRibbon2
11 {
12     public partial class ApplicationPage1 : LayoutsPageBase
13     {
14         protected void Page_Load(object sender, EventArgs e)
15         {
16         }
17 
18         protected override void  OnPreRender(EventArgs e)
19         {
20             try
21             {
22                 SPRibbon ribbon = SPRibbon.GetCurrent(this);
23                 if (ribbon != null)
24                 {
25                     ScriptLink.RegisterScriptAfterUI(this, "SP.Ribbon.js", false, true);
26                     ribbon.CommandUIVisible = true;
27                     ribbon.MakeTabAvailable("Ribbon.Read");
28                     //加载及激活自定义上下文Tab页。
29                     ribbon.MakeTabAvailable("Ribbon.PropertyChangerTab");
30                     ribbon.MakeContextualGroupInitiallyVisible("Ribbon.WebPartContextualTabGroup", string.Empty);
31                 }
32                 base.OnPreLoad(e);
33             }
34             catch (Exception ex)
35             {
36                 throw ex;
37             }
38         }
39     }
40 }

四、创建服务器功能区组件自定义项

创建一个上下文选项卡组，一个带两个组的选项卡和几个控件。详细结构可参考：Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML\CMDUI.XML。

feature.xml

 1 <?xml version="1.0" encoding="utf-8" ?>

 <Feature Title="SPRibbon2 Feature"
3          Scope ="Web"
4          Id="94269D73-8DF2-4515-B501-4C2111FF9DAF"
5          xmlns="http://schemas.microsoft.com/sharepoint/">
6   <ElementManifests>
7     <ElementManifest Location="element.xml"/>
8   </ElementManifests>
9 </Feature>

Element.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
 3   <CustomAction Id="WebPartContextualTabs"
 4                 Location="CommandUI.Ribbon">
 5     <CommandUIExtension>
 6       <CommandUIDefinitions>
 7         <CommandUIDefinition Location="Ribbon.ContextualTabs._children">
 8           <ContextualGroup Id="Ribbon.WebPartContextualTabGroup"
 9                            ContextualGroupId="WebPartContextualTab"
10                            Title="Ribbonized Web Part Tools"
11                            Sequence="150"
12                            Color="Green"
13                            Command="WebPartContextualTab.OnEnableContextualTab">
14             <Tab Id="Ribbon.PropertyChangerTab"
15                 Title="Tools"
16                 Sequence="501">
17               <Scaling Id="Ribbon.PropertyChangerTab.Scaling">
18                 <MaxSize Id="Ribbon.PropertyChangerTab.MaxSize"
19                           GroupId="Ribbon.PropertyChangerTab.PropertyGroup"
20                           Size="LargeLarge" />
21                 <MaxSize Id="Ribbon.PropertyChangerTab.MaxSize"
22                           GroupId="Ribbon.PropertyChangerTab.PostBackGroup"
23                           Size="LargeLarge" />
24               </Scaling>
25               <Groups Id="Ribbon.PropertyChangerTab.Groups">
26                 <Group Id="Ribbon.PropertyChangerTab.PropertyGroup"
27                        Title="Edit"
28                        Description="General Web Part properties."
29                        Sequence="15"
30                        Template="Ribbon.Templates.Flexible2">
31                   <Controls Id="Ribbon.PropertyChangerTab.PropertyGroup.Controls">
32                     <Button Id="Ribbon.PropertyChangerTab.PropertyGroup.GeneralDialogButton"
33                             LabelText="General Properties"
34                             TemplateAlias="o1"
35                             Sequence="15"
36                             Image16by16="/_layouts/Images/WebPartRibbonContextualTab/16x16Placeholder.png"
37                             Image32by32="/_layouts/Images/WebPartRibbonContextualTab/32x32Placeholder.png" />
38                     <Button Id="Ribbon.PropertyChangerTab.PropertyGroup.UXDialogButton"
39                             LabelText="Display Properties"
40                             TemplateAlias="o2"
41                             Sequence="17"
42                             Image16by16="/_layouts/Images/WebPartRibbonContextualTab/16x16Placeholder.png"
43                             Image32by32="/_layouts/Images/WebPartRibbonContextualTab/32x32Placeholder.png" />
44                   </Controls>
45                 </Group>
46                 <Group Id="Ribbon.PropertyChangerTab.PostBackGroup"
47                        Title="PostBack"
48                        Sequence="25"
49                        Template="Ribbon.Templates.Flexible2">
50                   <Controls Id="Ribbon.PropertyChangerTab.PropertyGroup.Controls">
51                     <Button Id="Ribbon.PropertyChangerTab.PropertyGroup.GeneralDialogButton"
52                             LabelText="Write to Web Part"
53                             Command="WebPartContextualTabs.OnPostback"
54                             TemplateAlias="o1"
55                             Sequence="15"
56                             Image16by16="/_layouts/Images/WebPartRibbonContextualTab/16x16Placeholder.png"
57                             Image32by32="/_layouts/Images/WebPartRibbonContextualTab/32x32Placeholder.png" />
58                   </Controls>
59                 </Group>
60               </Groups>
61             </Tab>
62           </ContextualGroup>
63         </CommandUIDefinition>
64       </CommandUIDefinitions>
65 
66       <CommandUIHandlers>
67         <CommandUIHandler Command="WebPartContextualTab.OnEnableContextualTab"
68                           CommandAction=""
69                           EnabledScript="return true;" />
70         <CommandUIHandler Command="WebPartContextualTabs.OnPostback"
71                           CommandAction="javascript:__doPostBack('RibbonizedWebPartPostback','');" />
72       </CommandUIHandlers>
73 
74     </CommandUIExtension>
75   </CustomAction>

76 </Elements> 

五、部署

feature部署：拷贝feature.xml和Element.xml文件到SharePoint目录下：

xcopy ..\Features\*.xml "X:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\FEATURES\SpRibbon2\" /y

ASPX文件部署：

xcopy ..\ApplicationPage1.*  "X:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\SpRibbon2\" /y

DLL文件部署：

xcopy SpRibbon2.dll "C:\inetpub\wwwroot\wss\VirtualDirectories\80\bin\" /y 

六、Feature功能安装和激活   【2011-12-15补充】

打开"Visual Studio 命令提示(2010)"工具，定位到“C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\BIN”。

1、安装功能：

stsadm -o installfeature -name SpRibbon2 -url http://localhost:80

2、激活功能

stsadm -o activatefeature -name SpRibbon2 -url http://localhost/

 

七、Sharepoint测试

 添加链接

 

 

 更详细的操作详见microsoft MSDN