Controles de navegación

  • Artículo

Última modificación: lunes, 01 de noviembre de 2010

Hace referencia a: SharePoint Foundation 2010

En este artículo
Ruta de navegación
Barra de vínculos superior
Inicio rápido
Vista de árbol

El cromo de un sitio web de Microsoft SharePoint Foundation incluye un conjunto de controles cuyo propósito es ayudar a los usuarios a navegar por el sitio, lo que hace más fácil encontrar contenido importante, conocer su posición actual en el sitio y retroceder rápidamente a una ubicación anterior.

Puede encontrar el marcado de estos controles en la página maestra de la página principal del sitio web. En SharePoint Foundation 2010, la página maestra principal para el contenido y las páginas de aplicación es v4.master.

Nota

Para obtener más información acerca de las páginas maestras predeterminadas, vea Páginas maestras predeterminadas en SharePoint Foundation.

Hay cuatro ayudas principales para la navegación definidas en v4.master:

  • Ruta de navegación

  • Barra de vínculos superior

  • Inicio rápido

  • Vista de árbol

Ruta de navegación

La ruta de navegación es un elemento de navegación que aparece en la parte superior de las páginas de contenido en un sitio web de SharePoint Foundation, en la cinta de opciones, justo a la derecha de Acciones del sitio. Se marca con un icono que parece una carpeta con una flecha hacia arriba que se superponen. Cuando el puntero del mouse se mantiene sobre el icono, una información sobre herramientas muestra "Subir". Al hacer clic en el icono, aparece un menú emergente. Este menú muestra la posición actual en la jerarquía del sitio. Al hacer clic en cualquiera de los vínculos que preceden a la posición actual, se abre esa ubicación, lo que proporciona una ruta de acceso rápido a su punto de partida.

En v4.master, la ruta de navegación se define mediante el siguiente marcado:

Nota

Para facilitar la lectura, las expresiones de recursos ("$Resources:wss,resource_id") se reemplazan por sus valores de cadena localizadas.

<asp:contentplaceholder id="PlaceHolderGlobalNavigation" runat="server">
    <SharePoint:PopoutMenu
        runat="server"
        ID="GlobalBreadCrumbNavPopout"
        IconUrl="/_layouts/images/fgimg.png"
        IconAlt="Navigate Up"
        IconOffsetX=0
        IconOffsetY=112
        IconWidth=16
        IconHeight=16
        AnchorCss="s4-breadcrumb-anchor"
        AnchorOpenCss="s4-breadcrumb-anchor-open"
        MenuCss="s4-breadcrumb-menu">
        <div class="s4-breadcrumb-top">
            <asp:Label 
                runat="server" 
                CssClass="s4-breadcrumb-header" 
                Text="This page location is:" />
        </div>
        <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
            <SharePoint:ListSiteMapPath
                runat="server"
                SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
                RenderCurrentNodeAsLink="false"
                PathSeparator=""
                CssClass="s4-breadcrumb"
                NodeStyle-CssClass="s4-breadcrumbNode"
                CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode"
                RootNodeStyle-CssClass="s4-breadcrumbRootNode"
                NodeImageOffsetX=0
                NodeImageOffsetY=353
                NodeImageWidth=16
                NodeImageHeight=16
                NodeImageUrl="/_layouts/images/fgimg.png"
                RTLNodeImageOffsetX=0
                RTLNodeImageOffsetY=376
                RTLNodeImageWidth=16
                RTLNodeImageHeight=16
                RTLNodeImageUrl="/_layouts/images/fgimg.png"
                HideInteriorRootNodes="true"
                SkipLinkText="" />
            </asp:ContentPlaceHolder>
    </SharePoint:PopoutMenu>
    <div class="s4-die">
        <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server" Visible="false">
        </asp:ContentPlaceHolder>
    </div>
</asp:contentplaceholder>

Lo primero que debe observar con respecto a este marcado es que la ruta de navegación completa se incluye en un control ContentPlaceHolder (ID="PlaceHolderGlobalNavigation"). Esto significa que tiene la opción de crear una página de contenido y agregar un control Content que invalida el contenido predeterminado definido en la página maestra.

La mayor parte del marcado está relacionado con la definición del menú emergente. Como puede ver en el marcado, el menú se presenta con un control PopoutMenu. Este control contiene un control Label para el encabezado del menú y un control ListSiteMapPath para los hipervínculos que permiten que los usuarios naveguen por el sitio web. El control ListSiteMapPath está anidado dentro de otro control ContentPlaceholder (ID="PlaceHolderTitleBreadcrumb"), de modo que también se puede invalidar en una página de contenido.

El control ListSiteMapPath obtiene sus datos de navegación de dos proveedores, SPSiteMapProvider y SPContentMapProvider. El primero proporciona datos sobre los sitios web en la jerarquía del sitio; el segundo proporciona datos sobre el contenido del sitio, como listas, bibliotecas, carpetas y páginas del sitio. Ambos proveedores de navegación derivan de la clase SiteMapProvider que es el origen de los datos de mapa del sitio en los sitios de ASP.NET estándar.

Nota

Los proveedores de navegación se declaran en la sección <system.web> del archivo web.config en el directorio raíz de la aplicación web en la ruta Unidad:\inetpub\wwwroot\wss\VirtualDirectories\ númeroDePuerto\web.config.

Barra de vínculos superior

La barra de vínculos superior es una barra de fichas que aparece justo debajo del título y la descripción del sitio web. El primer vínculo en la barra de vínculos superior es la posición "Inicio". A menudo, este vínculo señala al sitio web donde se define la barra y, a continuación, los vínculos restantes apuntan a los sitios web inferiores de la jerarquía del sitio. Sin embargo, este estándar no es obligatorio. Se puede usar cualquier dirección URL válida para un vínculo y los vínculos se pueden organizar en cualquier orden.

Un subsitio puede heredar la barra de vínculos superior de su sitio web primario. Al hacerlo, la barra de vínculos superior puede proporcionar una experiencia de navegación uniforme en varios sitios web. Para obtener más información, vea Procedimiento para compartir la barra de vínculos superior entre sitios.

En v4.master, la barra de vínculos superior se define mediante el siguiente marcado:

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
    <SharePoint:AspMenu
      ID="TopNavigationMenuV4"
      Runat="server"
      EnableViewState="false"
      DataSourceID="topSiteMap"
      AccessKey="1"
      UseSimpleRendering="true"
      UseSeparateCss="false"
      Orientation="Horizontal"
      StaticDisplayLevels="2"
      MaximumDynamicDisplayLevels="1"
      SkipLinkText=""
      CssClass="s4-tn"/>
    <SharePoint:DelegateControl 
        runat="server" 
        ControlId="TopNavigationDataSource" 
        Id="topNavigationDelegate">
        <Template_Controls>
            <asp:SiteMapDataSource
              ShowStartingNode="False"
              SiteMapProvider="SPNavigationProvider"
              id="topSiteMap"
              runat="server"
              StartingNodeUrl="sid:1002"/>
        </Template_Controls>
    </SharePoint:DelegateControl>
</asp:ContentPlaceHolder>

Al igual que el marcado de la ruta de navegación, el marcado que define la barra de vínculos superior se incluye dentro de un control ContentPlaceHolder, que ofrece a los diseñadores de páginas de contenido la opción invalidar el contenido predeterminado con su propio contenido.

La barra de vínculos superior se presenta con un control AspMenu. El menú se presenta horizontalmente, una dirección que el marcado para el control especifica mediante la configuración de la propiedad Orientation en "Horizontal". La configuración de la propiedad StaticDisplayLevels es "2". Normalmente esta opción significaría que, si un nodo en el menú tiene un nodo secundario, aparece una fila debajo del nodo primario. Sin embargo, en la práctica los nodos secundarios aparecen a la derecha del nodo primario, en el mismo nivel. Este efecto se debe a la clase de hoja de estilos en cascada (CSS) adjuntada al menú por la configuración de la propiedad CssClass. Para facilitar el control de los elementos del menú con CSS, el marcado para el control establece la propiedad UseSimpleRendering en "true".

Si la estructura de menú tiene más de dos niveles, los elementos en el tercer nivel se muestran en un menú flotante, un efecto que se controla mediante la configuración de la propiedad MaximumDynamicDisplayLevels. Dado que esta configuración es "1", los menús flotantes muestran sólo un nivel debajo de los dos que aparecen en el menú estático. Todos los demás niveles se descartan.

El origen de datos detrás del menú es un control SiteMapDataSource. Como puede ver en el marcado, la propiedad SiteMapProvider enlaza el control del origen de datos a una instancia de la clase SPNavigationProvider, que deriva de la clase SiteMapProvider.

También puede observar que el valor de la propiedad ShowStartingNode es False. Esto se debe a que el nodo de inicio real es la raíz del árbol de nodos que forma la barra de vínculos superior; sirve una función interna y no está diseñado para presentarse en la página. El valor de la propiedad StartingNodeUrl, "sid:1002", no es una dirección URL correcta sino que es una expresión que señala al identificador de SharePoint para el nodo raíz de la barra de vínculos superior.

Puede recuperar el nodo raíz si usa la siguiente línea de código:

SPNavigationNode toplinkbar = web.Navigation.GetNodeById(1002);

Dim toplinkbar as SPNavigationNode = web.Navigation.GetNodeById(1002)

Al examinar este objeto, observará que su propiedad Title devuelve "Barra de navegación superior de SharePoint" y su propiedad Url devuelve "/".

SugerenciaSugerencia

Puede obtener resultados similares si abre v4.master en SharePoint Designer 2010 y cambia el valor de ShowStartingNode a True. Al guardar el cambio y mostrar la página principal del sitio web en el explorador, verá que el primer nodo en la barra de vínculos superior contiene el texto de presentación Barra de navegación superior de SharePoint.

El objeto SPNavigationNode que representa la raíz del árbol de nodos de la barra de vínculos superior tiene una propiedad Children que devuelve una colección de objetos SPNavigationNode. Los objetos de esta colección representan los nodos visibles en la barra de vínculos superior. La colección es enumerable, por lo que se puede iterar fácilmente como se muestra en la siguiente aplicación de consola breve:

using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Navigation;

namespace ConsoleApp
{
    class Program
    {
        static void Main(string[] args)
        {
            using (SPSite site = new SPSite("https://localhost"))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPNavigationNode toplinkbar = web.Navigation.GetNodeById(1002);
                    if (toplinkbar != null)
                    {
                        foreach (SPNavigationNode node in toplinkbar.Children)
                        {
                            Console.Write("| {0} ", node.Title);
                        }
                        Console.WriteLine("|");
                    }
                }
            }
            Console.Write("\nPress ENTER to continue....");
            Console.ReadLine();
        }
    }
}

Imports System
Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.Navigation

Module ConsoleApp

    Sub Main()

        Using site As New SPSite("https://localhost")

            Using web As SPWeb = site.OpenWeb()

                Dim toplinkbar As SPNavigationNode = web.Navigation.GetNodeById(1002)

                If toplinkbar IsNot Nothing Then

                    For Each node As SPNavigationNode In toplinkbar.Children
                        Console.Write("| {0} ", node.Title)
                    Next
                    Console.WriteLine("|")

                End If

            End Using

        End Using

        Console.Write(vbCrLf & "Press ENTER to continue....")
        Console.Read()
    End Sub

End Module

Inicio rápido

Inicio rápido es un menú de vínculos que puede aparecer en el lado izquierdo de las páginas de un sitio web. El menú está pensado para la navegación dentro de un sitio y generalmente tiene vínculos a listas, bibliotecas de documentos y otro contenido del sitio. También puede incluir vínculos a contenido externo.

Los propietarios de sitios pueden habilitar u ocultar el menú Inicio rápido mediante el acceso a la interfaz de usuario administrativa en el menú Acciones del sitio . Los programadores pueden hacer lo mismo mediante la escritura de código. Para obtener más información, vea Procedimiento para mostrar u ocultar el Inicio rápido.

En v4.master, el marcado que define el menú Inicio rápido está anidado dentro de un control ContentPlaceHolder (ID="PlaceHolderLeftNavBar") que también contiene marcado para el control de vista de árbol. Como resultado, los diseñadores de páginas tienen la opción de reemplazar ambos controles de navegación con su propio contenido. Las páginas de contenido que están asociadas con algunas plantillas web integradas reemplazan otro tipo de contenido. La plantilla Áreas de reuniones es un ejemplo.

El marcado del menú Inicio rápido define dos versiones, cada una dentro de un control UIVersionedContent. Para un control UIVersionedContent, el valor del atributo UIVersion es "3"; para el otro, el valor es "4". La versión que se presenta en la página depende de si los administradores de la colección de sitios aplicaron la interfaz de usuario más reciente a los sitios web de la colección. Para obtener más información, vea Actualización visual.

Nota

Puede obtener el número de versión de la interfaz de usuario mediante programación si obtiene acceso a la propiedad SPWeb.UIVersion.

La versión 4 del menú Inicio rápido se define mediante el siguiente marcado:

<SharePoint:AspMenu 
    id="V4QuickLaunchMenu" 
    runat="server" 
    EnableViewState="false" 
    DataSourceId="QuickLaunchSiteMap" 
    UseSimpleRendering="true" 
    UseSeparateCss="false" 
    Orientation="Vertical" 
    StaticDisplayLevels="2" 
    MaximumDynamicDisplayLevels="0" 
    SkipLinkText="" 
    CssClass="s4-ql" />

El menú Inicio rápido aparece como una serie de encabezados que pueden tener uno o varios niveles de elementos de menú por debajo de ellos. El número de niveles de menú que realmente se presentan en la página depende de la configuración del control AspMenu que presenta el menú.

En el ejemplo anterior, el valor de la propiedad StaticDisplayLevels es "2", lo que significa que se muestran dos niveles de menú: un encabezado más un nivel por debajo del encabezado. Los niveles adicionales debajo de estos dos encabezados pueden mostrarse en un menú flotante dinámico. La cantidad de niveles que se muestran en el menú flotante está determinada por la configuración de la propiedad MaximumDynamicDisplayLevels. En este caso, el valor de propiedad es "0", lo que significa que el menú flotante está deshabilitado. Por tanto, si Inicio rápido tiene más de dos niveles de menú, no se mostrarán.

La propiedad DataSourceID en el marcado del control AspMenu señala a un control SiteMapDataSource que se configura mediante el siguiente marcado:

<asp:SiteMapDataSource 
    SiteMapProvider="SPNavigationProvider" 
    ShowStartingNode="False" 
    id="QuickLaunchSiteMap" 
    StartingNodeUrl="sid:1025" 
    runat="server" />

Como sucede con el origen de datos para la barra de vínculos superior, el origen de datos para el menú Inicio rápido tiene la propiedad ShowStartingNode definida como False. El nodo raíz tiene información acerca del menú Inicio rápido en sí y no está pensado para su presentación. Todos los demás nodos (vínculos) del menú son secundarios a este nodo. El valor de la propiedad StartingNodeUrl, "sid: 10252", indica el identificador de SharePoint para el nodo raíz de Inicio rápido.

Puede recuperar el nodo raíz si usa la siguiente línea de código:

SPNavigationNode quicklaunch = web.Navigation.GetNodeById(1025);

Dim quicklaunch as SPNavigationNode = web.Navigation.GetNodeById(1025)

Al examinar este objeto, observará que su propiedad Title devuelve "Inicio rápido" y su propiedad Url devuelve "/".

El objeto SPNavigationNode en la raíz del árbol de nodos tiene una propiedad Children que devuelve una colección de objetos SPNavigationNode que representan el primer nivel de elementos de menú, los encabezados. Cada encabezado también puede tener nodos secundarios, que representan el segundo nivel de elementos de menú. Los nodos del segundo nivel pueden tener nodos secundarios también, y así sucesivamente hacia abajo en el árbol.

La siguiente aplicación de consola muestra cómo recorrer el menú Inicio rápido mediante la enumeración de los elementos. La aplicación imprime el texto de presentación de cada encabezado en el menú Inicio rápido y, a continuación, llama a un método recursivo para imprimir el texto de presentación para todos los niveles de menú debajo de cada encabezado.

using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Navigation;

namespace ConsoleApp
{
    class Program
    {
        static void Main(string[] args)
        {
            using (SPSite site = new SPSite("https://localhost"))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPNavigationNode quicklaunch = web.Navigation.GetNodeById(1025);
                    if (quicklaunch != null)
                    {
                        foreach (SPNavigationNode heading in quicklaunch.Children)
                        {
                            PrintNode(heading);
                            Console.WriteLine(new String('-', 10));
                        }
                    }
                }
            }
            Console.Write("\nPress ENTER to continue....");
            Console.ReadLine();
        }

        static void PrintNode(SPNavigationNode node)
        {
            Console.WriteLine(node.Title);
            foreach (SPNavigationNode item in node.Children)
                 PrintNode(item);
        }
    }
}

Imports System
Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.Navigation

Module ConsoleApp

    Sub Main()

        Using site As New SPSite("https://localhost")

            Using web As SPWeb = site.OpenWeb()

                Dim quicklaunch As SPNavigationNode = web.Navigation.GetNodeById(1025)

                If quicklaunch IsNot Nothing Then

                    For Each heading As SPNavigationNode In quicklaunch.Children

                        PrintNode(heading)
                        Console.WriteLine(New String("-", 10))

                    Next

                End If

            End Using

        End Using

        Console.Write(vbCrLf & "Press ENTER to continue....")
        Console.Read()
    End Sub

    Sub PrintNode(ByRef node As SPNavigationNode)

        Console.WriteLine(node.Title)
        For Each item As SPNavigationNode In node.Children
            PrintNode(item)
        Next

    End Sub

End Module

Vista de árbol

El elemento de navegación de la vista de árbol está destinado a mostrar una vista jerárquica de todo el contenido del sitio. De forma predeterminada, la vista de árbol está deshabilitada. Cuando está habilitada, aparecerá en el área de navegación izquierda de la página. Si Inicio rápido está habilitado, la vista de árbol aparece debajo de él.

Un administrador del sitio web puede habilitar la vista de árbol desde la página Tree View en la interfaz de usuario administrativa. Para ver la página Vista en árbol, haga clic en Acciones del sitio y, a continuación, en Configuración del sitio. En Aspecto , haga clic en Vista en árbol.

Puede habilitar la vista de árbol en el código si establece la configuración de la propiedad SPWeb.TreeViewEnabled en true.

Al igual que Inicio rápido, la vista de árbol tiene dos versiones. En v4.master, ambas versiones se presentan en un control SPTreeView anidado dentro de un control SPRememberScroll. El control SPTreeView obtiene los datos de una instancia de la clase SPHierarchyDataSourceControl.

En v4.master, la versión 4 se define mediante el siguiente marcado:

<SharePoint:DelegateControl runat="server" ControlId="TreeViewAndDataSource">
  <Template_Controls>
    <SharePoint:SPHierarchyDataSourceControl 
        runat="server" 
        id="TreeViewDataSourceV4" 
        RootContextObject="Web" 
        IncludeDiscussionFolders="true" />
    <SharePoint:SPRememberScroll 
        runat="server" 
        id="TreeViewRememberScrollV4" 
        onscroll="javascript:_spRecordScrollPositions(this);" 
        style="overflow: auto;height: 400px;width: 155px; ">
        <SharePoint:SPTreeView 
            id="WebTreeViewV4" 
            runat="server" 
            ShowLines="false" 
            DataSourceId="TreeViewDataSourceV4" 
            ExpandDepth="0" 
            SelectedNodeStyle-CssClass="ms-tvselected" 
            NodeStyle-CssClass="ms-navitem" 
            SkipLinkText="" 
            NodeIndent="12" 
            ExpandImageUrl="/_layouts/images/tvclosed.png" 
            ExpandImageUrlRtl="/_layouts/images/tvclosedrtl.png" 
            CollapseImageUrl="/_layouts/images/tvopen.png" 
            CollapseImageUrlRtl="/_layouts/images/tvopenrtl.png" 
            NoExpandImageUrl="/_layouts/images/tvblank.gif">
        </SharePoint:SPTreeView>
    </SharePoint:SPRememberScroll>
  </Template_Controls>
</SharePoint:DelegateControl>

Observe que el origen de datos para el control de vista de árbol es un objeto SPHierarchyDataSourceControl y que la propiedad RootContextObject del objeto está establecida en "Web". Esto establece el contexto en el que el árbol tiene su raíz. Como resultado, la vista de árbol presenta los vínculos a todos los subsitios del sitio actual, seguidos de las listas y bibliotecas de documentos.

Vea también

Tareas

Cómo agregar un subsitio a la barra de vínculos superior o al menú Inicio rápido

Procedimiento para personalizar la visualización de Inicio rápido

Conceptos

Procedimiento para compartir la barra de vínculos superior entre sitios

Procedimiento para personalizar la presentación de la barra de vínculos superior

Uso de un origen de datos personalizado para navegación