Presentación Automática Mediante CSS

La tarea más ardua de la programación es el diseño de la aplicación, cuando se trata de una web esto es primordial ya que en web prima el diseño y el atractivo a la vista, las CSS por suerte reducen mucho el trabajo de la presentación.

El método que les muestro a continuación es una forma de simplificar aún más la presentación de la Web.

Se trata de crear una clase a la que llamaremos Presentación, con un constructor que le pase la página con la que interactuar. De esta página obtenemos un objeto HtmlForm donde se encuentran los controles de la página.

Una vez tenemos el HtmlForm empezamos a recorrer sus controles y a ponerle la CSS apropiada según el tipo de control, si no encontramos con un label miramos el ID del label para determinar que tipo de CSS aplicar.

• lbl_      para controles label de texto normal
• t1lbl_   para controles label de título grande
• t2lbl_   para controles label de título mediano
• t3lbl_   para controles label de título pequeño

A continuación sigue código en Visual Basic:

Imports System
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls


Public Class Presentacion

   Private Pag As Page

   Public Sub New(ByRef Pagina As Page)
      Pag = Pagina
      Me.Obtener_CSS_Pagina()
   End Sub

   ' Función para leer los controles de una página, establecer la presentacion mediante CSS
   '
   Private Sub Obtener_CSS_Pagina()

      For i As Integer = 0 To Pag.Controls.Count - 1

         ' Recuperar el HtmlForm de la página 
         ' para ello leemos la lista de objetos Html de la página, se separan en tres partes 
         ' desde la declaracion Html hasta el body
         ' el formulario Html
         ' y el fin de la pagina Html con la etiqueta de cierre del body.
         Dim ctrl As System.Web.UI.Control = Pag.Controls.Item(i)

         If TypeOf ctrl Is System.Web.UI.HtmlControls.HtmlForm Then

            Dim Form As System.Web.UI.HtmlControls.HtmlForm = ctrl
            For Each cnt As Control In Form.Controls
               If TypeOf cnt Is Panel Or TypeOf cnt Is UserControl Then
                  ObtenerCSS_Profundizar(cnt)
               Else
                  Obtener_CSS(cnt)
               End If
            Next

         End If
      Next

   End Sub

   ' Profundizar en los controles del tipo Panel y UserControl.
   Private Sub ObtenerCSS_Profundizar(ByRef c As Control)

      Dim i As Integer
      Dim cnt As Control
      For i = 0 To c.Controls.Count - 1
         cnt = c.Controls(i)
         If TypeOf cnt Is Panel Then
            Dim pnl As Panel = cnt
            ObtenerCSS_Profundizar(pnl)
         ElseIf TypeOf cnt Is UserControl Then
            Dim user As UserControl = cnt
            ObtenerCSS_Profundizar(user)
         Else
            Obtener_CSS(cnt)
         End If
      Next

   End Sub


   ' Función que se encarga de establecer la presentación del ControlWeb mediante CSS
   ' Como entrada Recibe un control. Selecciona el tipo de control y establece la 
   ' clase de CSS Adecuada(Esta Función esta sujeta a unas Reglas de nomenglatura 
   ' de los controles para los Label).
   '
   Private Sub Obtener_CSS(ByRef c As Control) As Control

      If TypeOf c Is Label Then

         'Si el control pasado es un Label
         If Left(c.ID, 4) = "lbl_" Then
            CType(c, Label).CssClass = "Text"
         End If

         'Si el control es un Titulo
         If Left(c.ID, 6) = "t1lbl_" Then
            CType(c, Label).CssClass = "Titulo-01"
         End If

         'Si el control es un SubTitulo
         If Left(c.ID, 6) = "t2lbl_" Then
            CType(c, Label).CssClass = "Titulo-02"
         End If

         'Si el control es un Sub-SubTitulo 
         If Left(c.ID, 6) = "t3lbl_" Then
            CType(c, Label).CssClass = "Titulo-03"
         End If
      End If

      'Si el control es un Textbox
      If TypeOf c Is TextBox Then
         CType(c, TextBox).CssClass = "Input"
      End If

      'Si el control es un Button
      If TypeOf c Is Button Then
         CType(c, Button).CssClass = "Button"
      End If

      'Si el control es un LinkButton
      If TypeOf c Is LinkButton Then
         CType(c, LinkButton).CssClass = "Text"
      End If

      'Si el control es un Hyperlink
      If TypeOf c Is HyperLink Then
         CType(c, HyperLink).CssClass = "Text"
      End If

      'Si el control es un DropDownList
      If TypeOf c Is DropDownList Then
         CType(c, DropDownList).CssClass = "Input"
      End If

      'Si el control es un ListBox
      If TypeOf c Is ListBox Then
         CType(c, ListBox).CssClass = "Input"
      End If

      'Si el control es un Panel
      If TypeOf c Is Panel Then
         CType(c, Panel).CssClass = "Panel"
      End If

      'Si el control es un CheckBox
      If TypeOf c Is CheckBox Then
         CType(c, CheckBox).CssClass = "Text"
      End If

      'Si el control es un CheckBoxList
      If TypeOf c Is CheckBoxList Then
         CType(c, CheckBoxList).CssClass = "Text"
      End If

      'Si el control es un RadioButton
      If TypeOf c Is RadioButton Then
         CType(c, RadioButton).CssClass = "Text"
      End If

      'Si el control es un RadioButtonList
      If TypeOf c Is RadioButtonList Then
         CType(c, RadioButtonList).CssClass = "Text"
      End If

    End Function

End Class

 

Para usar esta clase tan solo tenemos que crear una instancia de la misma en el evento Load de la página y agregar la referencia al la hoja de CSS en el head del código Html de la siguiente forma.

<LINK rel="stylesheet" type="text/css" href="estilos01.css">

La hoja de estilos CSS podría ser algo así.

/* Hoja de estilos CSS predeterminada para un nuevo proyecto de aplicación Web*/ .Button
{
font-family:Verdana;
font-size:10px;
color:navy;
text-align:center;
}

.Text
{
font-family:Verdana;
font-size:10px;
color:Black;
text-align:left;
}

a.Text:link
{
font-family:Verdana;
font-size:10px;
color:Black;
text-align:left;

}

a.Text:visited
{
font-family:Verdana;
font-size:10px;
color:Black;
text-align:left;

}

a.Text:active
{
font-family:Verdana;
font-size:10px;
color:Gray;
text-align:left;

}

a.Text:Hover
{
font-family:Verdana;
font-size:10px;
color:gray;
text-align:left;

}

.Titulo-01
{
font-family:Verdana;
font-size:14px;
font-weight:bold;
color:navy;
text-align:left;

}

.Titulo-02
{
font-family:Verdana;
font-size:12px;
font-weight:bold;
color:navy;
text-align:left;

}

.Titulo-03
{
font-family:Verdana;
font-size:10px;
font-weight:bold;
color:white; /* #D3E0F1 */
text-align:left;

}

.Input
{
background:#FFFFFF;
border:1px;
border-color:black;
border-style:solid;
font-family:Verdana;
font-size:10px;
font-weight:normal;
color:Black;
}

Tan solo nos queda poner controles en una web e instanciar la clase en el evento Load.

Dim Pres As New Presentacion(Me.Page)

---

Espacios de nombres usados en el código de este artículo:

System
System.Web
System.Web.UI
System.Web.UI.WebControls