Compartir a través de

Tutorial: Creación de un elemento web básico

  • Artículo

Este tutorial proporciona los pasos para crear un elemento web personalizado básico que se puede agregar a las páginas de elementos web. Es un elemento web sencillo que permite al usuario definir un mensaje personalizado que se mostrará dentro del elemento web. Este elemento web se derivará de la clase de elementos web de ASP.NET 2.0, que es la práctica recomendada para Windows SharePoint Services. Tenga en cuenta que este tutorial describe cómo crear un elemento web sin las extensiones de Visual Studio para Windows SharePoint Services.

Para obtener más información acerca de los elementos web de ASP.NET, consulte la documentación de ASP.NET siguiente: Tutoriales rápidos de ASP.NET y Controles de elementos web de ASP.NET.

Nota

También puede desarrollar elementos web mediante las extensiones de Visual Studio para Windows SharePoint Services. Mediante estas extensiones, puede reducir en gran medida el trabajo que implica la creación y distribución de los elementos web. Las extensiones requieren el desarrollo en un entorno de servidor y ofrecen las siguientes ventajas:

  • Generación automática del paquete de solución

  • Generación automática del archivo XML de elemento web

  • Capacidad para implementar elementos web directamente desde dentro de Visual Studio en el sitio web

Para obtener instrucciones sobre cómo utilizar las extensiones o descargar las extensiones para Visual Studio 2005 o Visual Studio 2008, consulte

Requisitos previos

Windows SharePoint Services 3.0

Visual Studio 2005

Paso 1: Crear un ensamblado de elementos web de ASP.NET

Para crear un elemento web, empiece por crear un proyecto de biblioteca de clases que se derive de la clase base System.Web.UI.WebControls.WebParts.WebPart.

Para crear un ensamblado de elementos web de ASP.NET

  1. Inicie Visual Studio 2005.

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

  3. En Tipos de proyecto, en Visual Basic o C#, seleccione Windows.

  4. En el panel Plantillas, seleccione Biblioteca de clases.

  5. Escriba Sample.DisplayMessage como nombre del proyecto.

Paso 2: cambio de nombre de la clase base y adición de los espacios de nombres necesarios

Después de crear el proyecto, se muestra un archivo de clases en blanco. Puede cambiar el nombre de clase predeterminado de Class1 para identificar con facilidad el nuevo elemento web. En una biblioteca de clases, sólo se incluyen unos cuantos espacios de nombres. Debe agregar dos espacios de nombres obligatorios y hacer referencia a sus ensamblados. También debe derivar la clase base de System.Web.UI.WebControls.WebParts.WebPart.

Para agregar referencias de espacios de nombres y cambiar de lugar el elemento web

  1. Para cambiar el nombre de clase predeterminado, seleccione Class1 en el Explorador de soluciones, haga clic con el botón secundario, haga clic en Cambiar nombre y escriba DisplayMessageWebPart como nombre de archivo.

  2. En el menú Proyecto, haga clic en Agregar referencia.

  3. En el cuadro de diálogo Agregar referencia en la ficha .NET, seleccione System.Web y haga clic en Aceptar.

  4. En el área de referencia del archivo de clases, agregue una referencia a System.Web.UI.WebControls.WebParts y cambie la clase para que herede de WebPart, como se muestra en el ejemplo de código siguiente.

    using System;
using System.Collections.Generic;
using System.Text;
using System.Web;
using System.Web.UI.WebControls.WebParts;

namespace Sample.DisplayMessage
{
    public class DisplayMessageWebPart : WebPart
    {
    }
}

    Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Web
Imports System.Web.UI.WebControls.WebParts

Public Class DisplayMessage
    Inherits WebPart

End Class

  5. Ahora ha creado una estructura básica para el elemento web.

Paso 3: Agregar una propiedad de elemento web personalizable por el usuario

Después de configurar la clase nueva para que actúe como un elemento web, agréguele una propiedad personalizable para el elemento web.

La propiedad del elemento web determina el texto que se representa en el interior del elemento web. Esto lo personaliza cada usuario concreto.

Nota

Para obtener más información acerca de la personalización, consulte Personalización de elementos Web.

Para los elementos web basados en la clase base Páginas de elementos Web ASP.NET, las etiquetas que se usan para las propiedades personalizables se denominan de forma distinta que los elementos web basados en la clase base Microsoft.SharePoint.WebPartPages.WebPart. En la lista siguiente se describen estas propiedades:

  • El atributo de clase WebBrowsableAttribute asegura que la propiedad personalizada se represente en el panel de herramientas de edición de Windows SharePoint Services.

  • El atributo de la clase WebDescriptionAttribute muestra información sobre herramientas para ayudar a los usuarios a la hora de editar la propiedad personalizada.

  • El atributo de clase WebDisplayNameAttribute muestra un nombre para mostrar de la propiedad personalizada.

  • El atributo de clase PersonalizableAttribute determina si los cambios realizados en la propiedad personalizada afectan a todos los usuarios o a usuarios individuales.

Para crear la propiedad del elemento web

  1. En el archivo DisplayMessageWebPart, copie y pegue el código siguiente para crear una propiedad personalizable básica.

    private string customMessage = “Hello, world!”;

public string DisplayMessage
{
    get { return customMessage; }
    set { customMessage = value; }
}

    Private customMessage As String = “Hello, world!”

Public Property DisplayMessage() as String
    Get
        Return customMessage
    End Get
    Set(ByVal value as String)
        customMessage = value
    End Set
End Property

  2. A continuación, agregue las siguientes etiquetas sobre la declaración pública para permitir los cambios en función de cada usuario:

    [WebBrowsable(true),
WebDescription("Displays a custom message"),
WebDisplayName("Display Message"),
Personalizable(PersonalizationScope.User)]

    <WebBrowsable(True), _
WebDescription("Displays a custom message"), _
WebDisplayName("Display Message"), _
Personalizable(PersonalizationScope.User)> _

  3. Ya ha creado una propiedad de elemento web personalizable.

Paso 4: Reemplazar el método Render y crear el elemento web

Ahora debe agregar funcionalidad al elemento web. Al reemplazar el método Control.Render, puede indicar al elemento web las operaciones que tiene que efectuar cuando se visita la página. En este ejemplo, el elemento web representará el texto definido por el usuario.

Para reemplazar el método de representación (Render) y compilar el ensamblado

  1. En el archivo DisplayMessageWebPart, copie y pegue el código siguiente para reemplazar el método Render.

    protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
    writer.Write(DisplayMessage);
}

    Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
    writer.Write(DisplayMessage)
End Sub

  2. Compile la solución. Ahora tiene un ensamblado que contiene el elemento web DisplayMessageWebPart.

Paso 5: Colocar el ensamblado en el directorio bin o en la memoria caché de ensamblados global

Dentro de un sitio de SharePoint, puede implementar un ensamblado de elementos web en una de las dos ubicaciones que se enumeran a continuación. Tenga en cuenta que la práctica recomendada es implementar ensamblados en el directorio bin.

  • bin directory: el directorio bin es una carpeta almacenada en el directorio raíz de la aplicación web. En la mayoría de instalaciones, se encuentra en el directorio %SYSTEMDRIVE%\inetpub\wwwroot\wss\VirtualDirectories\<port number>\bin , pero si necesita más información, consulte Cómo: Buscar la raíz de aplicación Web.

  • Memoria caché de ensamblados global (GAC): la GAC permite compartir los ensamblados entre varias aplicaciones. La GAC se instala automáticamente con el tiempo de ejecución de .NET Framework. Los componentes se instalan normalmente en el directorio %SYSTEMDRIVE%\WINDOWS\Assembly.

Para obtener más información acerca de cómo elegir la ubicación de implementación correcta, consulte Implementación de elementos web en Windows SharePoint Services.

En el ejemplo siguiente, coloque el ensamblado en el directorio bin.

Paso 6: Agregar el elemento web a la lista SafeControls

Windows SharePoint Services ofrece una lista SafeControls para evitar que los usuarios agreguen código de servidor arbitrariamente en las páginas ASPX. La lista SafeControls es una lista de controles y elementos web aprobados específica para el sitio de SharePoint que ha designado como seguro para la invocación en las páginas ASPX dentro del sitio. Esta lista se encuentra en el archivo web.config en la raíz de la aplicación web. La ruta local contiene la ubicación física del archivo web.config.

Nota

El archivo web.config está en la carpeta en la que se encuentra el directorio virtual del sitio web. Éste suele ser c:\inetpub\wwwroot\wss\VirtualDirectories\<port number>\, pero el administrador puede haber configurado un directorio diferente y tal vez no se encuentre aquí.

Puede buscar la ubicación del archivo web.config con el complemento Internet Information Services (IIS). El complemento IIS es una herramienta de administración de IIS que se ha integrado con otras funciones administrativas. Para iniciar el complemento IIS y buscar el archivo web.config:

  1. Haga clic en Inicio, elija Programas, elija Herramientas administrativas y haga clic en Administrador de Internet Information Services (IIS).

  2. Expanda el nodo que es el nombre del equipo y expanda el elemento Sitios web del árbol.

  3. Busque el sitio web que ejecuta la instalación de Windows SharePoint Services (a menudo es Sitio web predeterminado).

  4. Haga clic con el botón secundario y seleccione Propiedades.

  5. Seleccione la ficha Directorio principal.

Para agregar el elemento web a la lista SafeControls

  1. Abra el archivo web.config en la raíz de la aplicación.

  2. En la sección SafeControls del archivo web.config, agregue una entrada SafeControls para el ensamblado personalizado en el archivo web.config del modo siguiente.

    <SafeControl Assembly="Sample.DisplayMessage, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" Namespace="Sample.DisplayMessage" TypeName="DisplayMessageWebPart" Safe="True" />

Paso 7: Agregar el elemento web a la galería de elementos web

Para agregar un elemento web a una página de elementos web, debe agregarlo a la galería.

Para agregar el elemento web a la galería de elementos web

  1. Desplácese a la página del sitio de SharePoint donde desea que el elemento web sea accesible.

  2. En la página de elementos web, haga clic en Acciones del sitio y seleccione Configuración del sitio.

  3. En la página Configuración del sitio, haga clic en Elementos web bajo el encabezado Galerías.

  4. En la barra de herramientas de la galería de elementos web, haga clic en Nuevo.

  5. En la lista Nuevos elementos web, active la casilla situada junto a Sample.DisplayMessage.DisplayMessageWebPart y haga clic en Rellenar galería.

  6. Ahora se puede agregar el elemento web a cualquier página de elementos web.

Paso 6: Agregar el elemento web a una página de elementos web

En este paso, importará el elemento web a una página en cualquier sitio de SharePoint y probará la propiedad personalizada agregada al elemento web. El procedimiento siguiente explica los pasos para agregar el elemento web a una página y cambiar la propiedad personalizada Display Message.

Para agregar y probar el elemento web

  1. Desplácese a la página de elementos web en el sitio de SharePoint donde desea agregar el elemento web.

  2. En la página de elementos web, haga clic en Acciones del sitio y seleccione Editar página.

  3. En la zona de elementos web donde desea agregar DisplayMessageWebPart, haga clic en Agregar elemento web.

  4. En el cuadro de diálogo Agregar elemento web, busque la categoría Varios bajo Todos los elementos web y active la casilla situada junto a DisplayMessageWebPart. Haga clic en Agregar.

  5. Para modificar el texto que se muestra en el elemento web, elija Modificar elemento web compartido de la lista desplegable del cromo.

  6. En el panel de propiedades de DisplayMessageWebPart, expanda la categoría Varios y cambie el valor de Mostrar mensaje. Haga clic en Aplicar.

  7. Ahora el elemento web muestra el valor definido por el usuario.

Vea también

Otros recursos

Tutorial: creación de un elemento web básico de SharePoint