SharePoint 2010 Ribbon的实现

转：http://blog.csdn.net/wang4237/article/details/5306335

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

其中SharePoint里面对应得控件为SPRibbon控件。在Master page里面是这么添加这个控件的：
<SharePoint:SPRibbon runat="server" PlaceholderElementId="RibbonContainer" CssFile="">.......</SharePoint:SPRibbon>

在使用之前必须将Ribbon的XML结构定义好，XML路径为/TEMPLATE/GLOBAL/XML/CMDUI.XML。这个XML的具体结构，如何定义还在研究当中，会在之后发布。

然而这些并不够，在SharePoint2010里面，不同的页面有不同ribbon，如何去为页面设置它的ribbon，并设置Ribbon中的Button的页面弹出框的URL。

经过查看SharePoint源代码，在页面的后台代码中发现这么一段代码：

SPRibbon current =
SPRibbon.GetCurrent(this);
if (current !=
null)

{

current.CommandUIVisible
= true;

current.MakeTabAvailable("Ribbon.Read");

current.MakeTabAvailable("Ribbon.WebApp");

current.InitialTabId
= "Ribbon.WebApp";

current.Minimized
= false;

SPRibbonScriptManager manager = new

SPRibbonScriptManager();

List<IRibbonCommand>
commands = new
List<IRibbonCommand>();

bool admin = base.GlobalAdmin.IsCurrentUserMachineAdmin();

commands.Add(new

SPRibbonCommand("WebAppTab"));

......
}

在之前给大家介绍了Ribbon的主体结构。在这次主要为大家介绍如何实现页面的定制，即在页面中如何控制ribbon中这些Button是如何Enable和Disable的和弹出页面，以及一些SharePoint的比较适用的JS方法。

首先现在TEMPLATE/GLOBAL/XML/CMDUI.XML中定义Tab结构。在这个XML中定义好在页面上Ribbon的Button，以及这些Button的Text,ToolTil, Image，以及排列方式。

之后要实现页面的Ribbon，需为这个页面定义一个JS对象，在这个对象中要声明一些方法：
仿照SharePoint，定义方式如下：
Type.registerNamespace("SP.UI.Admin");

SP.UI.Admin.TestPageComponent = function() {

ULSITv: ;

//SP.UI.Admin.ServiceApplicationPageComponent.initializeBase(this);

};
SP.UI.Admin.TestPageComponent.TestIsEnabled = function(a) {

return true;

};

SP.UI.Admin.TestPageComponent.TestNavigate = function(a, b, c) {

var b = SP.UI.$create_DialogOptions();

b.url = a; b.dialogReturnValueCallback = SP.UI.Admin.TestPageComponent.$5_1;

SP.UI.ModalDialog.showModalDialog(b)

};
SP.UI.Admin.TestPageComponent.prototype = {

getFocusedCommands: function() {

ULSITv: ; return []

},

getGlobalCommands: function() {

ULSITv: ;

return getGlobalCommands()

},

isFocusable: function() {

ULSITv: ;

return true

},

receiveFocus: function() {

ULSITv: ;

return true

},

yieldFocus: function() {

ULSITv: ;

return true

},

canHandleCommand: function(a) {

ULSITv: ;

return commandEnabled(a)

},

handleCommand: function(b, a, c) {

ULSITv: ;

return handleCommand(b, a, c)

},

getId: function() {

ULSITv: ;

return "TestPageComponent"

},

init: function() {

ULSITv: ;

},

};
prototype的getId和init方法，在SharePoint的其他JS并没有定义，但是在DEBUG代码时却发现SharePoint的JS类有这个两个方法，目前没找到他们是在哪定义，我在这直接定义，不定义就会异常。

SP.UI.Admin.TestPageComponent.registerClass("SP.UI.Admin.TestPageComponent", CUI.Page.PageComponent);
1.点击Ribbon的Button是触发的方法：TestNavigate
2.决定Ribbon的Button是否Enable的方法：TestIsEnabled
写完JS之后，需要在代码声明一个继承 SPRibbonCommand的类TestCommand ,
在这个类实现如下
internal sealed class TestCommand : SPRibbonCommand

{

public TestCommand(string commandId, string target, TestNavigateOptions options, bool admin)

: base(commandId, null, null)

{

base.HandlerStatement = string.Format(CultureInfo.InvariantCulture, "SP.UI.Admin.TestPageComponent.TestNavigate('{0}', {1}, {2})", new object[] { SPHttpUtility.EcmaScriptStringLiteralEncode(target), "true", "true");

base.EnabledStatement = "SP.UI.Admin.TestPageComponent.TestIsEnabled(0)";

}

}

然后在页面的后台类中写入如下代码：
protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);
SPRibbon current = SPRibbon.GetCurrent(this);

if (current != null)

{

current.CommandUIVisible = true;

current.MakeTabAvailable("Ribbon.Read");

current.MakeTabAvailable("Ribbon.Test");

current.InitialTabId = "Ribbon.Test";

current.Minimized = false;

SPRibbonScriptManager manager = new SPRibbonScriptManager();

List<IRibbonCommand> commands = new List<IRibbonCommand>();

bool admin = base.GlobalAdmin.IsCurrentUserMachineAdmin();
commands.Add(new SPRibbonCommand("TestTab"));

commands.Add(new SPRibbonCommand("TestG1Group"));

commands.Add(new TestCommand("Test_New", "test.aspx", TestNavigateOptions.AppendSelectionIdParameter, admin));

commands.Add(new TestCommand("Test_Extend", "extendwebfarm.aspx?WebApplicationId=", TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));

commands.Add(new TestCommand("Test_DeleteTop", "DeleteWebApplication.aspx?WebApplicationId=", TestNavigateOptions.DisableForCentralAdmin | TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));

commands.Add(new TestCommand("Test_Delete", "DeleteWebApplication.aspx?WebApplicationId=", TestNavigateOptions.DisableForCentralAdmin | TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog | TestNavigateOptions.Privileged,
admin));

commands.Add(new TestCommand("Test_DeleteIIS", "unextendvs.aspx?WebApplicationId=", TestNavigateOptions.DisableForCentralAdmin | TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog | TestNavigateOptions.Privileged,
admin));

commands.Add(new SPRibbonCommand("TestG2Group"));

commands.Add(new TestCommand("Test_SettingsTop", "vsgeneralsettings.aspx?type=gen&WebApplicationId=", TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));

commands.Add(new TestCommand("Test_Settings", "vsgeneralsettings.aspx?type=gen&WebApplicationId=", TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));

commands.Add(new TestCommand("Test_ResourceThrottling", "vsgeneralsettings.aspx?type=res&WebApplicationId=", TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));

commands.Add(new TestCommand("Test_Workflow", "workflowAdmin.aspx?WebApplicationId=", TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));

commands.Add(new TestCommand("Test_Outgoing", "VSEmail.aspx?WebApplicationId=", TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));

commands.Add(new TestCommand("Test_OutgoingXms", "VSXms.aspx?WebApplicationId=", TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));

commands.Add(new TestCommand("Test_Features", "ManageWebAppFeatures.aspx?WebApplicationId=", TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));

commands.Add(new TestCommand("Test_Paths", "scprefix.aspx?WebApplicationId=", TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));

commands.Add(new TestCommand("Test_Connections", "ApplicationAssociationsDialog.aspx?Editable=false&ApplicationId=", TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));

commands.Add(new TestCommand("Test_SharePointDesigner", "SharePointDesignerAdmin.aspx?WebApplicationId=", TestNavigateOptions.AppendSelectionIdParameter | TestNavigateOptions.ModalDialog, admin));
manager.RegisterGetCommandsFunction(this, "getGlobalCommands", commands);

manager.RegisterCommandEnabledFunction(this, "commandEnabled", commands);

manager.RegisterHandleCommandFunction(this, "handleCommand", commands);

Type type = manager.GetType();

MethodInfo mi = type.GetMethod("RegisterPageComponent", BindingFlags.Instance | BindingFlags.NonPublic);

mi.Invoke(manager, new object[] { this, "SP.UI.Admin.js", "/_layouts/SP.UI.Admin.js", "SP.UI.Admin.TestPageComponent" });

}

}

由于上面的JS代码我是直接写在SP.UI.Admin.js中的，如果是自己单独写的JS文件，将这个文件名换掉即可。

之前并不清楚Ribbon的Tab可以在Feature中添加，不需要修改SharePoint的TEMPLATE/GLOBAL/XML/CMDUI.XML文件

在Feature中定义：
<?xml version="1.0" encoding="utf-8"
?>

-
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

-
<CustomAction Id="TestRibbon"
Location="CommandUI.Ribbon" Sequence="100"
Title="Test">

-
<CommandUIExtension>

-
<CommandUIDefinitions>

-
<CommandUIDefinition Location="Ribbon.Tabs._children">

-
<Tab Id="Ribbon.Test"
Sequence="1300" Command="TestTab"
Title="Test" Description="First
Ribbon Test">

- ......
)
</Tab>

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIExtension>

</CustomAction>

</Elements>

安装Feature后即可像之前一样使用。

另外Ribbon对应的JS方法可以直接写在页面上，然后将代码改成：
mi.Invoke(manager, new object[] { this, "SP.UI.Admin.js", "/_layouts/SP.UI.Admin.js", "SP.UI.Admin.WebApplicationPageComponent" });

也就不用重新写那些JS方法，只需将下面两个方法加入ASPX页面中。
function TestIsEnabled(a) {

return true;

}

function TestNavigate(a, b, c) {

var b = SP.UI.$create_DialogOptions();

b.url = a;

SP.UI.ModalDialog.showModalDialog(b)

}
熟悉SharePoint2010的人都知道，SharePoint会弹出一个窗体来单独显示一个页面， SP.UI.ModalDialog.showModalDialog就是这个功能的实现的JS代码。想更详细了解，可以访问：http://blogs.msdn.com/jfrost/default.aspx
这样的好处是可以少写一些JS代码。而核心部分PageComponent还是直接使用SharePoint的JS类。