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

Última modificación: jueves, 01 de septiembre de 2011

Hace referencia a: SharePoint Foundation 2010

En este artículo
Crear un elemento web
Agregar una propiedad del elemento web
Invalidar el método Render
Implementar y probar el elemento web

En este tutorial se proporcionan los pasos para crear un elemento web personalizado básico que se puede agregar a las páginas de sitios. Es un elemento web sencillo que permite al usuario definir un mensaje personalizado que se mostrará en el elemento web. Este elemento web se derivará de la clase de elementos web de Microsoft ASP.NET, que es la práctica recomendada para SharePoint Foundation.

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

Requisitos previos

ASP.NET

Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010

Crear un elemento web

Para crear un elemento web

1. Inicie Herramientas de desarrollo de SharePoint en Visual Studio 2010.

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 Proyecto de SharePoint vacío.

4. Escriba Sample.DisplayMessage como nombre del proyecto. Haga clic en Aceptar.

5. En el Asistente para personalizar SharePoint, elija Implementar como solución en espacio aislado. Haga clic en Finalizar.

6. En el Explorador de soluciones, haga clic en el proyecto Sample.DisplayMessage y seleccione Agregar, Nuevo elemento.

7. En el cuadro de diálogo Agregar nuevo elemento, seleccione la categoría Elemento web y escriba DisplayMessageWebPart como el Nombre. Haga clic en Agregar.

Agregar una propiedad del elemento web

Una vez agregado el elemento web nuevo, agregue una propiedad que se pueda personalizar para el elemento web. La propiedad del elemento web determina el texto que se representa en el elemento web. Esto lo personaliza cada usuario concreto.

Para los elementos web basados en la clase base de 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 WebPart. En la lista siguiente se describen estas propiedades:

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

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

• El atributo 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 creó una propiedad del elemento web personalizable.

Invalidar el método Render

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 invalidar el método Render

• En el archivo DisplayMessageWebPart, copie y pegue el código siguiente para invalidar 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
  

Implementar y probar el elemento web

Para implementar y probar el elemento web

1. Presione F5 para implementar el elemento web.

2. Con la página abierta en el explorador, haga clic en el botón Editar en la ficha Página para que la página pase el modo de edición.

3. En la ficha Insertar dentro del grupo contextual Herramientas de edición, haga clic en el botón Elemento web.

4. En la lista Categorías, elija Personalizar y, a continuación, elija DisplayMessageWebPart en la lista de elementos web. Haga clic en Agregar. El elemento web aparecerá en la página y mostrará el texto Hola a todos.

5. Para modificar el texto que se muestra en el elemento web, seleccione el elemento web en la página, abra la ficha Opciones en el grupo contextual Herramientas de elementos web y haga clic en el botón Propiedades de elementos web.

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.