miércoles, 30 de noviembre de 2011

ASP.NET - Multiples skins y una sola hoja de estilos

Vamos a mostrar una alternativa a la creación de aplicaciones web que necesitan tener múltiples skins, pero que al mismo tiempo eviten mantener múltiples hojas de estilos CSS, a la cual sólo le cambien el color o las imágenes, lo cual parece inapropiado.
Ojo que esta forma que propongo no contradice con lo que son los Themes en ASP.NET, al contrario, si se le usa convenientemente, lograrán un mejor aprovechamiento de los Themes.
Al final de este post estoy adjuntando tres imágenes para que tengan una idea de cómo va cambiando el skin.
Ahora sí, les explico cómo funciona el cambio de skin. La idea central consiste en dividir los estilos css del aplicativo web en dos archivos css:
  1. Una hoja de estilos base… llamada base.css, esta hoja de estilos tendría todos los estilos que no necesitan cambiar y son los estilos generales.
  2. Otra hoja de estilos, la cual realmente será una página .aspx, yo la llamo DinamitaCSS.css… esta segunda hoja de estilos será la encargada de generar los estilos que diferencian a los skins( colores, imágenes, etc)… a veces esta hoja de estilos generará estilos css con el mismo nombre de los ya existentes en el archivo base.css, pero no sobreescribirá esos estilos, sino que más bien: los completará. Osea, si tienes estilos que para el primer skin debe mostrar un color celeste y letras en negrilla, y luego tienes otro estilo para un segundo skin que debe mostrar un color amarillo y letras en negrilla… entonces crearás en base.css dicho estilo… pero no incluirás el color… sí la negrilla. El cambio de color debes programarlo en la segunda hoja de estilos llamada DinamitaCSS.css, espero haberme hecho entender.
  3. Para cambiar entre skins, he puesto un dropdownList en la cabecera de la página… al cambiar de opción en el dropdownlist, cambia el skin.
Les muestro el código que va en DinamitaCSS.css para que tengan una idea de cómo voy generando una parte del css.
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        Dim url As String = Utils.GetApplicationPath()

        Dim css As New StringBuilder
        css.Append("a {color: @header_color; }")
        css.Append("fieldset  {border: 1px solid @tableheader_color;}")
        css.Append("th{    background-color: @tableheader_color;    border: solid 1px @tableheader_color;}")
        css.Append(".head{    background-color: @header_color; }")
        css.Append(".headLine{    background-color: @tableheader_color; }")
        css.Append("hr{    border: solid 2px @header_color;}")
        css.Append(".tableForm{    background-color: @background_color;}")
        css.Append(".tdTitle{    background-color: @header_color;     border: solid 1px @header_color;}")

        css.Append(".button")
        css.Append("{")
        css.AppendFormat("background: url({0}images/overlay.png) repeat-x center @tableheader_color;", url)
        css.Append("border: 1px solid @background_color;")
        css.Append("}")
        css.Append(".button:hover { background-color: @background_color; border: solid 1px @header_color; }")

        css.Replace("@background_color", cCurrentSession.BackgroundColor)
        css.Replace("@header_color", cCurrentSession.HeaderColor)
        css.Replace("@tableheader_color", cCurrentSession.TableHeaderColor)

        Response.Clear()
        Response.ContentType = "text/css"
        Response.Write(css.ToString)
        Response.End()

    End Sub

Analicen el código, verán que es muy simple, para ello estoy adjuntando también el proyecto completo para que lo descargues y lo examines con calma.

Imágenes:
skin01

skin02

skin03
Espero que les sea de utilidad Guiño

No hay comentarios.: