Compartir a través de


Tutorial: Crear un elemento web personalizado con una pestaña contextual

Última modificación: viernes, 04 de febrero de 2011

Hace referencia a: SharePoint Foundation 2010

En este artículo
Creación de un proyecto de SharePoint
Implementación del elemento web
Creación del componente de página
Implementación de la personalización

En este tema se muestra cómo crear un elemento web personalizado que abre una pestaña contextual en la Cinta de Server en Microsoft SharePoint Foundation.

Requisitos previos

Microsoft SharePoint Foundation 2010

Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010

Creación de un proyecto de SharePoint

Para crear la personalización de elementos web y la cinta de opciones, primero debe crear un proyecto de SharePoint vacío.

Para crear un proyecto de SharePoint

  1. Inicie Visual Studio 2010.

  2. En el menú Archivo, elija Nuevo y, a continuación, haga clic en Proyecto.

  3. En Tipos de proyecto, en C#, seleccione Proyecto de SharePoint vacío.

  4. Escriba ContextualTabWebPart como nombre del proyecto y, a continuación, haga clic en Aceptar.

  5. En el Asistente para la personalización de SharePoint, seleccione Implementar como solución de granja de servidores y, a continuación, haga clic en Finalizar.

Implementación del elemento web

Ahora, implemente el elemento web.

Para implementar el elemento web

  1. En el Explorador de soluciones, haga clic con el botón secundario en References y, a continuación, seleccione Agregar referencia.

  2. En el cuadro de diálogo Agregar referencia, seleccione la pestaña .NET y, a continuación, elija Microsoft.Web.CommandUI.dll. Haga clic en Aceptar.

  3. En el Explorador de soluciones, haga clic con el botón secundario en el proyecto ContextualTabWebPart, elija Agregar y, a continuación, seleccione Nuevo elemento.

  4. En el cuadro de diálogo Agregar nuevo elemento, seleccione Elemento web. Escriba ContextualTabWebPart como el nombre.

  5. Una vez que se agrega el elemento web y se muestra el archivo ContextualTabWebPart.cs, agregue las siguientes instrucciones.

    using System.Xml;
    using Microsoft.Web.CommandUI;
    
  6. A continuación, implemente la interfaz de IWebPartPageComponentProvider como se muestra en el siguiente código. Realizará este paso más adelante.

    public class ContextualTabWebPart : WebPart, IWebPartPageComponentProvider
    

    A continuación, cree dos variables de cadena global para el XML de la cinta de opciones. Estas dos variables definen la pestaña contextual y las plantillas de grupo. Para obtener más información sobre el XML de la cinta de opciones, vea XML de la cinta de Server.

  7. En la cadena contextualTab, observe el elemento ContextualGroup. Este elemento define el siguiente elemento Tab como una pestaña contextual. El atributo Color define el color de la pestaña cuando se representa. Id y ContextualGroupId son identificadores únicos para el grupo. El atributo Sequence define dónde se representará la pestaña contextual. El siguiente código implementa las dos variables de cadena global.

    private string contextualTab = @"
       <ContextualGroup Color=""Magenta"" 
         Command=""CustomContextualTab.EnableContextualGroup"" 
         Id=""Ribbon.CustomContextualTabGroup"" 
         Title=""Custom Contextual Tab Group"" 
         Sequence=""502"" 
         ContextualGroupId=""CustomContextualTabGroup"">
              <Tab 
                  Id=""Ribbon.CustomTabExample"" 
                  Title=""My Custom Tab"" 
                  Description=""This holds my custom commands!"" 
                  Command=""CustomContextualTab.EnableCustomTab"" 
                  Sequence=""501"">
                <Scaling
                  Id=""Ribbon.CustomTabExample.Scaling"">
                  <MaxSize
                    Id=""Ribbon.CustomTabExample.MaxSize"" 
                    GroupId=""Ribbon.CustomTabExample.CustomGroupExample"" 
                    Size=""OneLargeTwoMedium""/>
                  <Scale 
                    Id=""Ribbon.CustomTabExample.Scaling.CustomTabScaling""
                    GroupId=""Ribbon.CustomTabExample.CustomGroupExample"" 
                    Size=""OneLargeTwoMedium"" />
                </Scaling>
                <Groups Id=""Ribbon.CustomTabExample.Groups"">
                  <Group 
                    Id=""Ribbon.CustomTabExample.CustomGroupExample"" 
                    Description=""This is a custom group!"" 
                    Title=""Custom Group"" 
                    Command=""CustomContextualTab.EnableCustomGroup"" 
                    Sequence=""52"" 
                    Template=""Ribbon.Templates.CustomTemplateExample"">
                    <Controls 
                      Id=""Ribbon.CustomTabExample.CustomGroupExample.Controls"">
                      <Button 
                        Id=""Ribbon.CustomTabExample.CustomGroupExample.HelloWorld"" 
                        Command=""CustomContextualTab.HelloWorldCommand"" 
                        Sequence=""15"" 
                        Description=""Says hello to the World!"" 
                        LabelText=""Hello, World!"" 
                        TemplateAlias=""cust1""/>
                      <Button 
                        Id=""Ribbon.CustomTabExample.CustomGroupExample.GoodbyeWorld"" 
                        Command=""CustomContextualTab.GoodbyeWorldCommand"" 
                        Sequence=""17"" 
                        Description=""Says good-bye to the World!"" 
                        LabelText=""Good-bye, World!"" 
                        TemplateAlias=""cust2""/>
                    </Controls>
                  </Group>
                </Groups>
              </Tab>
       </ContextualGroup>";
     
            private string contextualTabTemplate = @"
              <GroupTemplate Id=""Ribbon.Templates.CustomTemplateExample"">
                <Layout 
                  Title=""OneLargeTwoMedium"" LayoutTitle=""OneLargeTwoMedium"">
                  <Section Alignment=""Top"" Type=""OneRow"">
                    <Row>
                      <ControlRef DisplayMode=""Large"" TemplateAlias=""cust1"" />
                    </Row>
                  </Section>
                  <Section Alignment=""Top"" Type=""TwoRow"">
                    <Row>
                      <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust2"" />
                    </Row>
                    <Row>
                      <ControlRef DisplayMode=""Medium"" TemplateAlias=""cust3"" />
                    </Row>
                  </Section>
                </Layout>
              </GroupTemplate>";
    
  8. Cree una nueva propiedad de cadena denominada DelayScript. DelayScript contiene ECMAScript (JavaScript, JScript), que agrega y registra el componente de página personalizado. Más adelante en este tema se creará el componente de página personalizado. El método _addCustomPageComponent crea el componente de página personalizado y lo agrega al administrador de páginas. Cada elemento web tiene un componente de página y se usará el identificador del componente de página del elemento web para crear un objeto de componente de página personalizado. Esto es necesario para asociar el elemento web con el componente de página a fin de permitir cambiar contextualmente a la ficha de la cinta de opciones personalizada. El método _registerCustomPageComponent registra el archivo JavaScript cuando se carga la página.

    El siguiente código implementa DelayScript.

            public string DelayScript 
            {
                get
                {
                    string webPartPageComponentId = SPRibbon.GetWebPartPageComponentId(this);
                    return @"
    <script type=""text/javascript"">
    //<![CDATA[
     
                function _addCustomPageComponent()
                {
                    var _customPageComponent = new ContextualTabWebPart.CustomPageComponent('" + webPartPageComponentId + @"');
                    SP.Ribbon.PageManager.get_instance().addPageComponent(_customPageComponent);
                }
     
                function _registerCustomPageComponent()
                {
                    SP.SOD.registerSod(""CustomContextualTabPageComponent.js"", ""\/_layouts\/CustomContextualTabPageComponent.js"");
                    SP.SOD.executeFunc(""CustomContextualTabPageComponent.js"", ""ContextualWebPart.CustomPageComponent"", _addCustomPageComponent);
                }
                SP.SOD.executeOrDelayUntilScriptLoaded(_registerCustomPageComponent, ""sp.ribbon.js"");
    //]]>
    </script>";
                }
            }
    
  9. Cree una nueva función denominada AddContextualTab. En el método AddContextualTab, se insertará el código para registrar la pestaña contextual y las plantillas personalizadas con la cinta de opciones. El método RegisterDataExtension(XmlNode, String) se usa para registrar las extensiones de la cinta de opciones. RegisterDataExtension(XmlNode, String) indica a la cinta de opciones dónde cargar el XML pasado. Usaremos los identificadores de los elementos ContextualTabs y Templates en CMDUI.xml.

    El siguiente código implementa el método AddContextualTab.

            private void AddContextualTab()
            {
     
                // Get the current instance of the ribbon on the page.
                Microsoft.Web.CommandUI.Ribbon ribbon = SPRibbon.GetCurrent(this.Page);
     
                // Prepare an XmlDocument object used to load the ribbon extensions.
                XmlDocument ribbonExtensions = new XmlDocument();
     
                // Load the contextual tab XML and register the ribbon extension.
                ribbonExtensions.LoadXml(this.contextualTab);
                ribbon.RegisterDataExtension(ribbonExtensions.FirstChild, "Ribbon.ContextualTabs._children");
     
                // Load the custom templates and register the ribbon extension.
                ribbonExtensions.LoadXml(this.contextualTabTemplate);
                ribbon.RegisterDataExtension(ribbonExtensions.FirstChild, "Ribbon.Templates._children");
            }
    
  10. Ahora, debe implementar la propiedad WebPartContextualInfo de la interfaz de IWebPartPageComponentProvider. Para implementar la interfaz, haga clic con el botón secundario en IWebPartPageComponentProvider, elija Implementar interfaz y, a continuación, seleccione Implementar interfaz explícitamente.

    Esta interfaz indica a la cinta de opciones cuándo se ha seleccionado un elemento web y qué grupo contextual y ficha se deben mostrar. Cuando se agrega el grupo contextual, se envía el identificador del grupo contextual, VisibilityContext y Command. El identificador se asigna a la propiedad Id del elemento ContextualGroup en el XML de la cinta de opciones. VisibilityContext se usa para agrupar controles a fin de mostrarlos u ocultarlos. El parámetro Command se asigna al Command del elemento ContextualGroup del XML de la cinta de opciones. También se debe agregar la ficha que se definió en el XML de la cinta de opciones. Solo debe pasar Id y los parámetros VisibilityContext de la ficha. Inserte el siguiente código para WebPartContextualInfo.

            public WebPartContextualInfo WebPartContextualInfo
            {
                get 
                {
                    WebPartContextualInfo info = new WebPartContextualInfo();
                    WebPartRibbonContextualGroup contextualGroup = new WebPartRibbonContextualGroup();
                    WebPartRibbonTab ribbonTab = new WebPartRibbonTab();
     
                    // Create the contextual group object and initialize its values.
                    contextualGroup.Id = "Ribbon.CustomContextualTabGroup";
                    contextualGroup.Command = "CustomContextualTab.EnableContextualGroup";
                    contextualGroup.VisibilityContext = "CustomContextualTab.CustomVisibilityContext";
     
                    // Create the tab object and initialize its values.
                    ribbonTab.Id = "Ribbon.CustomTabExample";
                    ribbonTab.VisibilityContext = "CustomContextualTab.CustomVisibilityContext";
     
                    // Add the contextual group and tab to the WebPartContextualInfo.
                    info.ContextualGroups.Add(contextualGroup);
                    info.Tabs.Add(ribbonTab);
                    info.PageComponentId = SPRibbon.GetWebPartPageComponentId(this);
     
                    return info;
                }
            }
    
  11. A continuación, implemente el método OnPreRender. Esto permite agregar elementos a la cinta de opciones antes de que se represente en la página. En OnPreRender debe llamar al método AddContextualTab y registrar DelayScript en ClientScriptManager.

    El siguiente código implementa el método OnPreRender.

            protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
     
                this.AddContextualTab();
     
                ClientScriptManager clientScript = this.Page.ClientScript;
                clientScript.RegisterClientScriptBlock(this.GetType(), "ContextualTabWebPart", this.DelayScript);
     
            }
    

    El elemento web está terminado. A continuación, cree el componente de página.

Creación del componente de página

Un componente de página es un objeto JavaScript que se usa para interactuar con la Cinta de Server. Para ver un tutorial detallado sobre el componente de página, vea Desarrollo de componentes de página para la cinta de Server. Para que el componente de página funcione correctamente, debe implementarlo mediante un módulo en el directorio %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\\TEMPLATES\LAYOUTS. Habilita los comandos de la cinta de opciones y responde a los comandos que se definen en el XML de la cinta de opciones.

Para agregar y definir el componente de página

  1. En el Explorador de soluciones, haga clic con el botón secundario en el proyecto ContextualTabWebPart, elija Agregar y, a continuación, seleccione Nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, seleccione la plantilla Módulo y escriba CustomContextualTabPageComponent como el nombre. Haga clic en Agregar.

  3. No necesita los archivos predeterminados que se agregan. En el Explorador de soluciones, elimine Elements.xml y Sample.txt.

  4. A continuación debe agregar el archivo JavaScript. Haga clic con el botón secundario en CustomContextualTabPageComponent, elija Agregar y, a continuación, seleccione Nuevo elemento.

  5. En la lista Plantillas instaladas, en Visual C#, seleccione Web. Elija el tipo Archivo de JScript y, como nombre, escriba CustomContextualTabPageComponent.

  6. Debe establecer la ubicación de implementación para asegurarse de que el archivo se coloque en el directorio _layouts. Para ello, en el Explorador de soluciones, seleccione CustomContextualTabPageComponent.js. En la ventana Propiedades, establezca el Tipo de implementación como Archivo raíz. Abra la propiedad Ubicación de implementación y escriba TEMPLATE\LAYOUTS en la propiedad Path.

    Agregue el siguiente código en el archivo CustomContextualTabPageComponent.js para implementar el componente de página personalizado.

    Type.registerNamespace('ContextualTabWebPart');
     
    var _webPartPageComponentId;
    ContextualTabWebPart.CustomPageComponent = function ContextualTabWebPart_CustomPageComponent(webPartPcId) {
        this._webPartPageComponentId = webPartPcId;
        ContextualTabWebPart.CustomPageComponent.initializeBase(this);
    }
    ContextualTabWebPart.CustomPageComponent.prototype = {
     
        init: function ContextualTabWebPart_CustomPageComponent$init() {  },
     
        getFocusedCommands: function ContextualTabWebPart_CustomPageComponent$getFocusedCommands() {
            return ['CustomContextualTab.EnableCustomTab', 'CustomContextualTab.EnableCustomGroup', 'CustomContextualTab.HelloWorldCommand', 'CustomContextualTab.GoodbyeWorldCommand'];
        },
     
        getGlobalCommands: function ContextualTabWebPart_CustomPageComponent$getGlobalCommands() {
            return [];
        },
     
        isFocusable: function ContextualTabWebPart_CustomPageComponent$isFocusable() {
            return true;
        },
        
        canHandleCommand: function ContextualTabWebPart_CustomPageComponent$canHandleCommand(commandId) {
            // Contextual Tab commands
            if ((commandId === 'CustomContextualTab.EnableCustomTab') || (commandId === 'CustomContextualTab.EnableCustomGroup') || (commandId === 'CustomContextualTab.HelloWorldCommand') || (commandId === 'CustomContextualTab.GoodbyeWorldCommand')) {
                return true;
            }
        },
     
        handleCommand: function ContextualTabWebPart_CustomPageComponent$handleCommand(commandId, properties, sequence) {
     
            if (commandId === 'CustomContextualTab.HelloWorldCommand') {
                alert('Hello, world!');
            }
            if (commandId === 'CustomContextualTab.GoodbyeWorldCommand') {
                alert('Good-bye, world!');
            }
        },
     
        getId: function ContextualTabWebPart_CustomPageComponent$getId() {
            return this._webPartPageComponentId;
        }
    }
     
     
    ContextualTabWebPart.CustomPageComponent.registerClass('ContextualTabWebPart.CustomPageComponent', CUI.Page.PageComponent);
    SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("CustomContextualTabPageComponent.js");
    

Implementación de la personalización

Las Herramientas de desarrollo de SharePoint en Visual Studio 2010 implementan el proyecto automáticamente. El grupo de aplicaciones se restablece automáticamente como parte del proceso de implementación.

Para implementar el elemento web

  1. Presione F5. Las Herramientas de desarrollo de SharePoint en Visual Studio 2010 crean e implementan automáticamente el elemento web y el archivo JavaScript.

  2. Navegue al sitio.

  3. Haga clic en el botón Edición.

  4. En la ficha Insertar, haga clic en el botón Elemento web.

  5. En el Agregador de elementos web, seleccione la categoría Personalizado.

  6. En la lista de elementos web, seleccione ContextualTabWebPart y, a continuación, haga clic en Agregar.

  7. Una vez que el elemento web se agregue a la página, haga clic en el elemento web ContextualTabWebPart.

  8. Observe que aparece la ficha Grupo Ficha contextual personalizada.

Vea también

Conceptos

XML de la cinta de Server

Desarrollo de componentes de página para la cinta de Server

Personalización imperativa de la cinta de opciones del servidor

Personalización declarativa de la cinta de Server