Este Articulo fue el primero que publique, el cual me toco hacerlo con el fin de ganarme la 4a Estrella cuando existía el Programa de Desarrollador 5 Estrellas para la versión 2003, por cierto ahora existe la versión DCE2005 inscribete para aprender .Net
En este artículo se muestra brevemente cómo podemos heredar Web User Controls en .NET. Fue escrito gracias a la colaboración de un compañero y amigo: Mario Rene Mayén, Consultor en Informática.
Introducción
Si alguna vez te has hecho la siguiente pregunta: "Si .NET es orientado a objetos ¿Por qué no me permite realizar herencia visual de páginas (ASPX) y/o controles de usuario (ASCX) de manera automática, al igual que los Windows Forms?", no puedes dejar de leer este artículo.
Debido a esa inquietud es que surgió la idea de hacer este artículo, ya que existe una forma de habilitar la herencia visual de páginas en .NET, pero se requiere de una serie de pasos para poder lograrlo. Para este artículo se utiliza como ejemplo la creación de un control de usuario que simula una barra de herramientas. Lo que se indica en este artículo y el ejemplo aplican lo mismo para una página Web. El ejemplo que aquí se detalla está hecho con Visual Basic, pero en los archivos de ejemplo de este artículo encontrarás código en C#.
Definiendo el Control Padre
Para este ejemplo crearemos una barra de herramientas inicial, que incluya las opciones: "Inicio" y "Ayuda", tal como se muestra en la figura:
Figura 1.
Para esto se utiliza una tabla HTML y dos controles ImageButton, a los cuales llamaremos ibtnInicio y ibtnAyuda, respectivamente. Agregamos un nuevo Web User Control con el nombre barraPrincipal.ascx y le damos "Aceptar" (ver Figura):
Figura 2.
Le agregamos los dos botones que necesitamos. El código Visual Basic respectivo es el siguiente:
Public Class barraPrincipal
Inherits System.Web.UI.UserControl
#Region " Web Form Designer Generated Code "
‘This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Protected WithEvents ibtnInicio As System.Web.UI.WebControls.ImageButton
Protected WithEvents ibtnAyuda As System.Web.UI.WebControls.ImageButton
‘NOTE: The following placeholder declaration is required by the Web Form Designer.
‘Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
‘CODEGEN: This method call is required by the Web Form Designer
‘Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
‘Put user code to initialize the page here
End Sub
End Class
Definiendo el Control Hijo
Para definir el Control Hijo es necesario crear un nuevo Control de Usuario al cual le incluiremos 4 botones adicionales: "Agregar", "Editar/Cancelar", "Almacenar" y "Eliminar", y se verá como se muestra :
Figura 3.
Agregamos el Control de Usuario con el nombre barraMantenimiento.ascx y le damos OK :
Figura 4.
Inicialmente debemos decirle al Control de Usuario barraMantenimiento que herede de la clase barraPrincipal, lo que se hace de la siguiente manera:
Public Class barraMantenimiento
Inherits barraPrincipal
Se ha cambiado la herencia sobre System.Web.UI.UserControl y se le ha colocado la herencia hacia barraPrincipal, que es la clase del control de usuario que creamos inicialmente.
Posteriormente, para hacer la herencia del HTML no es automático, ya que con el cambio de objeto Padre cambiamos la clase a la cual hace referencia pero no el HTML generado del mismo; esta tarea se debe realizar manualmente copiando todo el HTML que contiene el objeto, para esto abrimos el control barraPrincipal en modo diseño y vemos el HTML, lo copiamos y pegamos en el HTML del objeto que estamos heredando.
El HTML que se verá al copiar será el siguiente:
< TABLE id ="TableBarra" class ="EstiloBarra">
< TR height ="40">
< TD >
< asp:ImageButton id ="ibtnInicio" CssClass ="outButton" runat ="server" ImageUrl ="imagenes/Inicio.gif"
ToolTip ="Ir al Inicio"></ asp:ImageButton >
< asp:ImageButton id ="ibtnAyuda" runat ="server" ImageUrl ="imagenes/Ayuda.gif" ToolTip ="Ayuda"></ asp:ImageButton >
</ TD >
</ TR >
</ TABLE >
Ahora bien, el truco es copiar solamente el HTML, no el encabezado del Control, y además guardar la página estando en Vista HTML; más adelante explicare porqué es necesario esto.
Si ingresamos al código del control barraMantenimiento, notaremos que ya tenemos acceso a los botones de la siguiente manera (Ver Figura):
Figura 5.
Lo que muestra la Figura anterior se puede realizar incluso antes de copiar el HTML, esto sucede porque como hemos heredado todos los controles ya creados en el control barraPrincipal, tenemos acceso a ellos.
Después agregamos los controles que necesitamos e incluso podríamos dar nuevas ubicaciones a los controles que heredamos; en el ejemplo agregaremos 4 controles ImageButton pero los colocaremos entre los dos botones que heredamos. Agregamos 4 botones: "Agregar", "Editar/Cancelar", "Almacenar" y "Eliminar"; con los nombres ibtnAgregar, ibtnEditarCancelar, ibtnAlmacenar, ibtnEliminar, respectivamente.
Al final veremos en la Vista Diseño lo que se muestra a continuación:
Figura 6.
Ahora, al guardar los cambios al HTML, si compilamos el proyecto el mismo nos dará dos advertencias:
—— Rebuild All started: Project: herenciaVisualVB, Configuration: Debug .NET ——
Preparing resources…
Updating references…
Performing main compilation…
c:\inetpub\wwwroot\herenciaVisual\barraMantenimiento.ascx.vb(15) : warning BC40004: WithEvents ‘ibtnInicio’ conflicts with WithEvents ‘ibtnInicio’ in the base class ‘barraPrincipal’ and so should be declared ‘Shadows’.
c:\inetpub\wwwroot\herenciaVisual\barraMantenimiento.ascx.vb(16) : warning BC40004: WithEvents ‘ibtnAyuda’ conflicts with WithEvents ‘ibtnAyuda’ in the base class ‘barraPrincipal’ and so should be declared ‘Shadows’.
Building satellite assemblies…
———————- Done ———————-
Rebuild All: 1 succeeded, 0 failed, 0 skipped
Esto es porque al crear los nuevos botones en el control de mantenimiento y darle guardar el editor de .NET nos crea en el código una referencia a los botones que copiamos desde HTML, esto crea un conflicto con las definiciones ya existentes en la clase padre.
Pero como son advertencias y corremos la aplicación, obtendremos el siguiente error:
Object reference not set to an instance of an object
Esto significa que aunque haya creado el assembly, no podemos ejecutar satisfactoriamente nuestra página; para ello debemos ingresar al código de nuestro control barraMantenimiento y notaremos lo siguiente en la región de código generado por el editor (Ver la Figura 7):
Figura 7.
En la figura anterior observamos que el editor de .NET nos subraya los controles que son de la clase padre, y el error que da es que hay conflicto con objetos de la clase padre.
Esto se resuelve simplemente eliminando la declaración de estos objetos de la clase hijo. Guardamos nuestro proyecto y compilamos. Al compilar .NET no genera ningún error y podemos ejecutar satisfactoriamente nuestra página utilizando el control hijo.
Conclusión
Es necesario tener en cuenta las siguientes recomendaciones:
- Si un control de usuario se puede abstraer y crear uno que sea mas genérico, eso nos indica que podemos hacer una clase padre.
- Si modificamos únicamente el código de la clase padre, ésta se propagará a los hijos.
- Si modificamos el HTML de la clase padre agregando objetos, es necesario actualizar manualmente el HTML en todos los controles hijos.
- Si queremos acceder a los eventos de los controles de la clase hijo y utilizamos el editor de Visual Studio .NET, es necesario tener cuidado porque al abrir la Vista de Diseño, el editor crea automáticamente una declaración de los objetos de la clase padre. Es recomendable abrir directamente la Vista de Código directamente para no tener este inconveniente.
Elmer Carias's Weblog 