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.

User Control I    –    User Control II  –  User Control III