Qué es ASP .NET Control Extenders?

febrero 11, 2009 06:29 by Admin
Aqui dejamos un aporte de la comunidad enviado a través de la seccion de Foro (foro.barreteros.net), este fue enviado por nuestro amigo Johnatan Flores Carmona [johnatan.jfk@gmail.com], el es un Desarrollador .NET de la ciudad de León Guanajuato, aquí dejo el aporte:
------------------------------------------------------------------------------------------
Saludos a todos de nuevo, espero que tengan un bonito día festivo. Y ya que yo tuve que venir a trabajar a pesar de que toda la empresa descansó, estoy aquí para compartir con ustedes otro tema que tuve que investigar hace un tiempo, espero les sea de utilidad. 

  

Qué es ASP .NET Control Extenders?

ASP .NET Control Extenders son controles que derivan de la clase base ExtenderControl (System.Web.UI) la cual puede ser usada para agregar funcionalidad adicional (usualmente soporte AJAX o JavaScript) a controles declarados dentro de una pagina. Esto habilita a los desarrolladores el encapsulamiento de comportamientos IU, y hacer muy fácil agregar funcionalidad a una aplicación web. Un ejemplo de esto es el ASP .NET AJAX Control Toolkit (1)

Según MSDN Library: "La clase ExtenderControl permite mediante programación agregar funcionalidad AJAX a un control de servidor ASP .NET. El ExtenderControl hereda desde la clase Control e implementa la interfaz IExtenderControl. La clase Control define las propiedades, métodos y eventos que son compartidos por todos los controles de servidor ASP .NET. La interfaz IExtenderControl es una clase abstracta la cual no puede ser instanciada directamente. En su lugar debes crear un tipo derivado." (2)

  

Pasos para crear un control extendido

  1. Crear clase abstracta base que hereda ExtenderControl
  2. Crear el archivo .js que implementará el comportamiento de IU (ECMAScript)
  3. Crear una clase que herede de la clase creada en 1 la cual será el extensor del control.
  4. Utilizar el control en una pagina .aspx

En las siguientes secciones se explicarán los pasos necesarios para crear un extensor de control que permite cambiar el estilo al control cuando el mouse pase encima de el.

  

Crear clase base que hereda de ExtenderControl

Cuando se crea una clase que herede de ExtenderControl se requiere que se implementen los métodos abstractos GetScriptDescriptor y GetScriptReferences.

public abstract class ExtenderControlBase : ExtenderControl
{
   protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
   {
      throw new NotImplementedException();
   }
   protected override IEnumerable<ScriptReference> GetScriptReferences()
   {
   throw new NotImplementedException();
   }
}
  • GetScriptDescriptor: Método usado para obtener una colección de descriptores script que representan los componentes cliente ECMAScript (JavaScript).
  • GetScriptReferences: Método usado para obtener una colección de objetos ScriptReference que definen los recursos script que el control requiere.

  

GetScriptDescriptors

Este método debe regresar una colección de objetos ScriptDescriptor que definen que propiedades serán pasadas a la representación del control en el lado del cliente.

protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)
{
   ScriptControlDescriptor descriptor = new ScriptControlDescriptor(this.GetType     
                                          ().FullName, targetControl.ClientID);
   descriptor.AddProperty("id", this.ClientID);
   PropertyDescriptorCollection properties = TypeDescriptor.GetProperties(this);
   foreach (PropertyDescriptor property in properties)
   {
      ExtenderControlPropertyAttribute propertyAttribute =
            property.Attributes[typeof(ExtenderControlPropertyAttribute)] as
            ExtenderControlPropertyAttribute;
      if (propertyAttribute != null)
      {
          object value = property.GetValue(this);
          string name = (propertyAttribute.Name != null) ?
                            propertyAttribute.Name : property.Name;
      if (value != null)
             descriptor.AddProperty(name, value);
   }
   }
   yield return descriptor;
}

En el código anterior se crea el objeto que contendrá todas las propiedades que contendrá nuestro control; para ello se obtiene la colección de propiedades que contiene nuestra clase (la clase hija que se creará en el paso 2). Una vez obtenida la colección se recorrerán cada uno de los objetos contenidos y se agregan al descriptor con el método .AddProperty

  

GetScriptReferences

Este método regresará una colección de objetos ScriptReference para incluirlos en la pagina del lado del cliente.

protected override IEnumerable<ScriptReference> GetScriptReferences()
{
   object[] scriptReferences = Attribute.GetCustomAttribute(
   this.GetType(), typeof(ScriptReferenceAttribute), false);
   foreach (ScriptReferenceAttribute sra in scriptReferences)
       yield return sra.GetScriptReference();
}

  

Crear el archivo ECMAScript

Este archivo es el que contiene todo el código (JavaScript) que controla los comportamientos que tendrá el control extendido. A continuación se presenta el bloque de código base que debe tener este archivo.

Type.registerNamespace("CustomAjaxControlKit");
CustomAjaxControlKit.MouseOverExtender = function(element){
   CustomAjaxControlKit.MouseOverExtender.initializeBase(this,[element]);
};
CustomAjaxControlKit.MouseOverExtender.prototype = {
   initialize: function(){
      CustomAjaxControlKit.MouseOverExtender.callBaseMethod(this, "initialize");
   },
   dispose: function(){
      CustomAjaxControlKit.MouseOverExtender.callBaseMethod(this, "dispose");
   }
};
CustomAjaxControlKit.MouseOverExtender.registerClass  
      ("CustomAjaxControlKit.MouseOverExtender", Sys.UI.Behavior);
Sys.Application.notifyScriptLoaded();

El código anterior debe modificarse para que se vea cómo el código siguiente:

Type.registerNamespace("CustomAjaxControlKit");
CustomAjaxControlKit.MouseOverExtender = function(element){
   CustomAjaxControlKit.MouseOverExtender.initializeBase(this, [element]);
   this._MouseOverCssClass = null;
   this._MouseOutCssClass = null;
   this._mouseOverHandler = Function.createDelegate(this, this._onMouseOver);
   this._mouseOutHandler = Function.createDelegate(this, this._onMouseOut);
};
CustomAjaxControlKit.MouseOverExtender.prototype = {
   initialize: function(){
      CustomAjaxControlKit.MouseOverExtender.callBaseMethod(this, "initialize");
      var targetElement = this.get_element();
      $addHandler(targetElement, "mouseover", this._mouseOverHandler);
      $addHandler(targetElement, "mouseout", this._mouseOutHandler);
},
   dispose: function(){
      var targetElement = this.get_element();
      $removeHandler(targetElement, "mouseover", this._mouseOverHandler);
      $removeHandler(targetElement, "mouseout", this._mouseOutHandler);
      CustomAjaxControlKit.MouseOverExtender.callBaseMethod(this, "dispose");
   },
   get_MouseOverCssClass: function(){
      return this._MouseOverCssClass;
   },
   set_MouseOverCssClass: function(value){
      this._MouseOverCssClass = value;
   },
   get_MouseOutCssClass: function(){
      return this._MouseOutCssClass;
   },
   set_MouseOutCssClass: function(value){
      this._MouseOutCssClass = value;
   },
   _onMouseOver: function(eventArgs){
      var targetElement = this.get_element();
      if(targetElement != null)
         targetElement.className = this.get_MouseOverCssClass();
   },
   _onMouseOut: function(eventArgs){
      var targetElement = this.get_element();
      if(targetElement != null)
         targetElement.className = this.get_MouseOutCssClass();
   }
};
CustomAjaxControlKit.MouseOverExtender.registerClass     
                     ("CustomAjaxControlKit.MouseOverExtender", Sys.UI.Behavior);
Sys.Application.notifyScriptLoaded();

  

Crear la clase que será el extensor del control

Debido a que se creó una clase abstracta base que hereda de la clase ExtenderControl (véase el paso 1), la creación de nuestra clase que será el extensor de control simplemente debe agregar la WebReference del archivo ECMAScript, heredar la clase ExtenderControlBase y agregar las declaraciones de las propiedades que tendrá nuestro extensor de control.

A continuación se muestra el código de nuestra clase:

[assembly: WebResource("CustomAjaxControlKit.MouseOver.MouseOverBehavior.js",
                                                         "text/javascript")]
namespace CustomAjaxControlKit
{
   [TargetControlType(typeof(Control)), ScriptReference(
        "CustomAjaxControlKit.MouseOver.MouseOverBehavior.js", CustomAjaxControlKit")]
   public class MouseOverExtender : ExtenderControlBase
   {
      [ExtenderControlProperty]
      public string MouseOverCssClass { get; set; }
      [ExtenderControlProperty]
      public string MouseOutCssClass { get; set; }
   }
}

  

Utilizar el extensor de control en una pagina .aspx

Para poder utilizar nuestro extensor de control en una pagina .aspx tenemos que primero agregar la referencia al dll que contiene el código de nuestro extensor. Una vez realizado esto se debe incluir la directiva @Register para poder incluir en la pagina los tags de nuestro control: 

<%@ Register Assembly="CustomAjaxControlKit" Namespace="CustomAjaxControlKit" TagPrefix="cack" %>
Por último debemos agregar el control que sufrirá los efectos de nuestro extensor y a continuación declarar nuestro control:
<asp:Label runat="server" ID="Label1" Text="Texto prueba" />
<cack:MouseOverExtender ID="MouseOverExtender1" runat="server" TargetControlID="Label1"  MouseOutCssClass="MouseOutStyle"
                       MouseOverCssClass="MouseOverStyle" />

  

Ejemplo: Codigo Fuente

Si deseas ver el código fuente completo de este control puedes descrgarlo en el siguiente link:

  

Referencias

  1. ScottGu; Using ASP .NET AJAX Control Extenders in VS 2008; http://weblogs.asp.net/scottgu/archive/2007/08/19/using-asp-net-ajax-control-extenders-in-vs-2008.aspx
  2. MSDN Library; About ExtenderControl Class; http://msdn.microsoft.com/en-us/library/system.web.ui.extendercontrol.aspx

Sea el primero en calificar este post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: , , , ,
Categories: Articulos | Barreteros.Net | Aportes
Actions: E-mail | Permalink | Comentarios (0) | Comment RSSRSS comment feed

Publicaciones relacionadas