lunes, 30 de enero de 2012

ASP.NET – Como establecer un tema (theme) en tu proyecto y hacer uso con máscaras y hojas de estilos

Para empezar si no estamos al tanto para que sirve un tema en asp.net, se puede decir que los temas son una colección de estilos y propiedades que definen la apariencia de las páginas y controles de tu sitio web. Pueden incluir archivos de máscaras (skins) los cuales definen los valores de las propiedades para los controles ASP.NET. También pueden incluir archivos de hojas de estilos (CSS) que van a definir colores, gráficos, tamaños y posicionamiento de los controles y por sobre todo la apariencia del sitio. Son útiles además, debido a que es posible teniendo un tema ya aplicado, poder cambiar el aspecto de todo el sitio de forma muy sencilla.
¿Cómo crear un tema?
Para poder crear un tema es necesario agregar la carpeta app_themes a nuestro sitio web. Para esto haremos click derecho sobre el nombre de nuestro sitio y seleccionamos “agregar”, “agregar carpeta ASP.NET” y luego “Tema” como se muestra en la imagen de abajo.Source file

Agregar carpate de temas














Una vez realizado esto aparecerá la carpeta App_Themes sobre nuestro proyecto y nos pedirá que le asignemos un nombre a nuestro tema. En este caso yo le puse de nombre general. Es posible crear varios temas para cambiar por dar un ejemplo el color del sitio para una estación del año en particular. Entonces teniendo 2 temas, con diferentes colores simplemente para realizar esto hay que indicarle al sitio que utilice el otro tema.

¿Cómo agregar las máscaras (skins) y las hojas de estilos (CSS) al tema?
Hacemos click derecho sobre el nombre del tema (General) y seleccionamos la opción “agregar”, “nuevo elemento” y sobre la lista de elementos seleccionamos archivo de máscara. Le podemos dar de nombre General.skin para continuar con la misma línea de nombres originales. Va a aparecer una pantalla como la siguiente:

Agregar máscaras















En esa pantalla se muestra un ejemplo de cómo crear una máscara para un control por medio del SkinId y sin el SkinId o como también se llama, máscaras por defecto y máscaras con nombre.

Luego vamos a crear un estilo y para esto al igual que para agregar la máscara, hacemos click derecho sobre el tema (General) y seleccionamos la opción “agregar”, “nuevo elemento” y esta vez de la lista de elementos seleccionamos hoja de estilos y le ponemos el nombre que queramos.
Vamos a crear en el sitio un skin para los controles TextBox y Label. Para esto escribiremos lo siguiente dentro de la máscara:
Source file
<asp:Label runat="server" skinid="lblGeneral" cssclass="Label" />
<asp:TextBox runat="server" skinid="txtGeneral" cssclass="TextBox"/>

Luego en la hoja de estilos vamos a crear los estilos para las CssClass que definimos para los controles Label y TextBox:
Source file
.Label
{
 font-size: 11px;
 font-family: Tahoma;
 color: Red;
}

.TextBox
{
 font-size: 11px;
 font-family: Tahoma;
 color: Red;
 background-color:Black;
 border: 1px solid white;
}

Para finalizar y poder hacer que nuestra página reconozca las máscaras del tema, deberemos agregar Theme="General" en la directiva de la página . De esa forma todos los SkinId que agreguemos a los controles de tipo Label y TextBox  con el nombre lblGeneral y txtGeneral respectivamente tomarán el estilo agregado en el tema.
Voy a pegar el html de la página que cree con estos 2 controles para que se vea un poco mejor:
Source file
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1"
    Theme="General" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body style="background-color:Black">
    <form id="form1" runat="server">
    <h2 style="color:White"> Ejemplo de uso de temas en el sitio</h2>
    <hr />
    <div>
        <asp:Label ID="Label1" runat="server" Text="Ejemplo de skin a Label" SkinID="lblGeneral"></asp:Label>
        <asp:TextBox ID="TextBox1" runat="server" Text="Ejemplo de skin a Textbox" SkinID="txtGeneral"></asp:TextBox>
    </div>
    </form>
</body>
</html>

Ahora voy a poner una imagen de cómo se ve la página creada con ese código:







¿Cómo indicarle al sitio que el tema creado será utilizado en todo el proyecto?

En el ejemplo anterior el tema solo funcionaba si agregábamos en la directiva de la página Theme="General".  Ahora veremos como hacer para que el tema pueda aplicarse en todo el sitio. Para esto hay que abrir el archivo web.config e indicar dentro del tag Source file<system.web></system.web>
lo siguiente:

Source file
<pages theme="General">
</pages>

Si el tag ya existe entonces bastará con agregarle theme=”General”. De esta forma solo modificando el archivo web.config se podrá hacer uso de los SkinId en todo el sitio sin necesidad de indicar en la directiva de cada página el tema que va a utilizar.

Fin de la entrada.

Dejo el código para que descarguen el ejemplo.




Saludos.

2 comentarios:

  1. tengo un control "<asp:ButtonField ...." con la propiedad SkinID="botonazulfield" y me sale el mensaje:

    El tipo 'System.Web.UI.WebControls.ButtonField' no tiene ninguna propiedad pública cuyo nombre sea 'SkinID'.
    No entiendo por que no aplica el estilo, ya que hecho todo lo que se requiere (que es lo mismo que mencionas aquí), si me puedieras hechar una mano, gracias.

    ResponderEliminar
  2. Hola Gabo. Perdón la demora en responder. Pudiste resolver el inconveniente? Creaste el archivo nombre.skin? Sino puede que no hayas agregado el nombre del tema (theme) a utilizar dentro del web.config o en la página que te está saliendo el error. Si lo agregás en el web.config no hace falta que también lo cargues en la página, salvo que quieras indicar que esa página utiliza otro tema.
    Avisame como te fue por favor.

    Saludos!

    ResponderEliminar