Indigo blog

Un tema (theme) es una colección de propiedades que permite definir la apariencia de la página y los controles, y aplicarlo a través de todas la páginas de nuestra aplicación web. Para entender un poco más los temas o ver una comparación con los css podemos ir a esta dirección http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx

Para agregar un tema iremos a nuestro sitio web, haremos click con el botón derecho y agregaremos una carpeta ASP.NET y ahí un tema.

Con esto ya tendríamos creado nuestro primer tema con el nombre “Default”

Para usar el tema en nuestras páginas asp.net tan sólo debemos añadir el atributo theme a la directiva @Page.

<%@ Page Language="C#" AutoEventWireup="true" ... Theme="Default"%>

Con esto se aplicará nuestro tema a esta página, pero ¿qué pasa si tenemos varios temas y queremos que nuestros usuarios seleccionen el que más les guste? Pues que esta solución no nos sirve. Para esto tendremos que asignar el tema a la página dinámicamente. Si leemos el ciclo de vida de las páginas aspx (http://msdn.microsoft.com/en-us/library/ms178472.aspx) vemos que el momento de asignar los temas dinámicamente es en el evento PreInit, por lo que haremos los siguiente en nuestra página

public string GetTheme()
{
    // Obtener tema del usuario (base de datos, cookie, ...)
    // ...
    // Si este es nulo se devuelve el tema por defecto
    return "Default";
}

public string GetTheme()
{
    // Obtener tema del usuario (base de datos, cookie, ...)
    // ...
    // Si este es nulo se devuelve el tema por defecto
    return ConfigurationManager.AppSettings["DefaultTheme"].ToString();
}

Con esto ya tendremos asignado el tema a nuestra paginas dinámicamente, pero esta solución tiene un defecto, y es que, en cada página hay que escribir código para el evento PreInit. Por lo que la solución óptima sería escribir esto en una página base. Para esto creamos una clase de la siguiente manera

public class BasePage : Page 
{
    public string GetTheme()
    {
        // Obtener tema del usuario (base de datos, cookie, ...)
        // ...
        // Si este es nulo se devuelve el tema por defecto
        return "Default";
    }

    protected override void OnPreInit(EventArgs e)
    {
        base.OnPreInit(e);

        Theme = GetTheme();
    }

    public BasePage()
	{
		//
		// TODO: Agregar aquí la lógica del constructor
		//
	}
}

Y hacemos que todas nuestras páginas hereden de esta. Así tendremos el código una sola vez y si alguna vez tenemos que hacer un cambio sólo lo haremos en un punto.

public partial class Default: BasePage
{
	//...
}

Para mejorar un poco más todo, podemos hacer que nuestro tema por defecto esté en el web.config, y recuperarlo de ahí en la función GetTheme().

public string GetTheme()
{
    // Obtener tema del usuario (base de datos, cookie, ...)
    // ...
    // Si este es nulo se devuelve el tema por defecto
    return ConfigurationManager.AppSettings["DefaultTheme"].ToString();
}

<appSettings>
  <add key="DefaultTheme" value="Default"/>
</appSettings>

Como hemos visto es realmente fácil usar los temas en ASP.NET y las ventajas que obtenemos son enormes.