【原创】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" ?>

2  < 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