Custom Control III

Para acabar con esta serie de artículos sobre como crear un control compuesto, veremos como personalizar el renderizado y poder comprobar en tiempo de diseño como quedara realmente nuestro control en la Página.


En los artículos anteriores vimos:



  1. Custom Control I : Como crear los controles secundarios y sus eventos.

  2. Custom Control II: Las Propiedades necesarias para personalizar nuestro control.

Ya tenemos nuestro control terminado y funcionando, pero personalmente me da mucha rabia esos controles que los arrastramos a nuestro formulario y solo te muestran el nombre y no te puedes hacer a la idea de como quedará ralmente en la página.


 


Me parece que el control desluce mucho y no nos ayuda a la hora de diseñar nuestra página.


Como podemos solucionar esto???


Muy sencillo, controlando el renderizado del control y sabiendo en cada momento lo que tenemos que pintar en la pantalla.

protected override void Render(HtmlTextWriter writer)
{
EnsureChildControls();

#region Titulo

writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, “0”, false);
writer.AddAttribute(HtmlTextWriterAttribute.Cellspacing, “0”, false);
writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssClass, false);
writer.RenderBeginTag(HtmlTextWriterTag.Table);
writer.RenderBeginTag(HtmlTextWriterTag.Tr);

writer.AddAttribute(HtmlTextWriterAttribute.Align, “Left”, false);
writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssAnterior, false);
writer.RenderBeginTag(HtmlTextWriterTag.Td);

if (string.IsNullOrEmpty(this.ImgAnterior))
lAnterior.RenderControl(writer);
else
ImAnterior.RenderControl(writer);

writer.RenderEndTag();

writer.AddAttribute(HtmlTextWriterAttribute.Align, “Center”, false);
writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssTitulo, false);
writer.RenderBeginTag(HtmlTextWriterTag.Td);
lTitulo.RenderControl(writer);
writer.RenderEndTag();

writer.AddAttribute(HtmlTextWriterAttribute.Align, “Right”, false);
writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssSiguiente, false);
writer.RenderBeginTag(HtmlTextWriterTag.Td);

if (string.IsNullOrEmpty(this.ImgAnterior))
lSiguiente.RenderControl(writer);
else
ImSiguiente.RenderControl(writer);

writer.RenderEndTag();
writer.RenderEndTag();

writer.RenderBeginTag(HtmlTextWriterTag.Tr);

#endregion Titulo

#region Calendario

writer.AddAttribute(HtmlTextWriterAttribute.Colspan, “3”, false);
writer.RenderBeginTag(HtmlTextWriterTag.Td);

writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssCeldaCalendario, false);
writer.RenderBeginTag(HtmlTextWriterTag.Table);
int col = this.Calendarios / this.Filas;
int mes = 0;
int posCal = 0;

for (int y = 0; y < this.Filas; y++)
{
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
for (int x = 0; x < col; x++, mes++, posCal++)
{
writer.RenderBeginTag(HtmlTextWriterTag.Td);
LCalendarios[posCal].RenderControl(writer);
writer.RenderEndTag();
}
writer.RenderEndTag();
}

writer.RenderEndTag();
writer.RenderEndTag();

#endregion Calendario

#region Pie

writer.RenderBeginTag(HtmlTextWriterTag.Tr);
writer.AddAttribute(HtmlTextWriterAttribute.Colspan, “3”, false);
writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssPie, false);
writer.RenderBeginTag(HtmlTextWriterTag.Td);
writer.RenderEndTag();
writer.RenderEndTag();

writer.RenderEndTag();
writer.RenderEndTag();

#endregion Pie

}


Estudiaremos es te código por partes.




  • Lo primero que tenemos que hacer es asegurarnos que los controles secundarios se han creado para poder utilizarlos.



    EnsureChildControls();


  • Utilizaremos el HtmlTextWriter para crear la estructura del control ( Una tabla, filas y celdas para poder colocar los calendarios en su sitio)


    writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, “0”, false);
    writer.AddAttribute(HtmlTextWriterAttribute.Cellspacing, “0”, false);
    writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssClass, false);
    writer.RenderBeginTag(HtmlTextWriterTag.Table);
    writer.RenderBeginTag(HtmlTextWriterTag.Tr);

    writer.AddAttribute(HtmlTextWriterAttribute.Align, “Left”, false);
    writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssAnterior, false);
    writer.RenderBeginTag(HtmlTextWriterTag.Td);




  • Pintaremos los calendarios dependiendo de la cantidad de filas que tengamos configurado


    #region Calendario

    writer.AddAttribute(HtmlTextWriterAttribute.Colspan, “3”, false);
    writer.RenderBeginTag(HtmlTextWriterTag.Td);

    writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssCeldaCalendario, false);
    writer.RenderBeginTag(HtmlTextWriterTag.Table);
    int col = this.Calendarios / this.Filas;
    int mes = 0;
    int posCal = 0;

    for (int y = 0; y < this.Filas; y++)
    {
        writer.RenderBeginTag(HtmlTextWriterTag.Tr);
        for (int x = 0; x < col; x++, mes++, posCal++)
        {
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            LCalendarios[posCal].RenderControl(writer);
            writer.RenderEndTag();
        }
        writer.RenderEndTag();
    }

    writer.RenderEndTag();
    writer.RenderEndTag();

    #endregion Calendario


Después de controlar el renderizado de nuestro control podremos disfrutar de todo su potencial en tiempo de diseño y todas las modificaciones que hagamos en sus propiedades se reflejarán automáticamente en la pantalla.


 


 


Bueno yo creo que ya tenemos el control bastante decente no?, se que podría tener más funcionalidades y muchísimo más vistoso, pero como ejemplo de como crear un control compuesto me parece suficiente ;-).


Si queréis Trastear el proyecto os lo podéis bajar gratuitamente y si tenéis dudas me lo podéis comentar sin problemas.


Espero veros por estos barrios.


  Proyecto CustomCalendar.


User Control I    –    User Control II  –  User Control III


** CrossPosting Desde http://www.lonetcamp.com ***

4 comentarios en “Custom Control III”

  1. Eich Marc!, muy buena la tutorial para crear Web Custom Controls!!!. Ahora mismo estoy en un proyecto Web y me ha ido de perlas para un control concreto que estoy desarrollando.

    Saludos! y gracias 1.000.

  2. Hey Sifri,
    Me alegro verte por estos barrios ^^ y que mi pequeña aportación te haya servido.

    Me lo pasé muy bien en la cena del otro día de los compañeros que pasamos y de los que seguís en Avanade.

    Espero que nos podamos ver en otra ocasión.

    Nos Vemos.

  3. Hola preguntoncojonero,

    la idea de este blog es realizar entradas técnicas, las de opinión las dejaré para otros ;p

    Pero todo es cuestión del tiempo que dispongo y de las ideas que surjan, si tienes algún tema que creas que puede ser interesante me lo puedes decir y veré que puedo hacer.

    Saludos y gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *