Tutorial de ASP.NET
Vista Previa de ASP.NET 2.0

Usar Temas para Personalizar un Sitio

Usar Temas para Personalizar un Sitio

En la sección anterior vimos varias formas de especificar estilos a los controles fijando las propiedades de los estilos en los propios controles. Por ejemplo, consideremos la siguiente página, qué tiene varios ajustes del estilo aplicados a los controles individuales de la página.

C# Página Sin Tema Aplicado



Además de especificar estilos en controles individuales, ASP.NET 2.0 introduce Temas, los cuales nos ofrecen una manera fácil de definir estilos para controles y páginas de nuestro sitio, de forma separada a las páginas de nuestra aplicación. El beneficio de los Temas es que puedes diseñar un sitio sin preocuparte por el estilo y aplicarlo más tarde sin tener que actualizar las páginas o el código de la aplicación. También puedes obtener temas personalizados de una fuente externa para aplicar ajustes estilísticos a tu aplicación. Otro beneficio es que los ajustes de estilo estan almacenados en una única ubicación y pueden ser mantenidos de forma independiente de la aplicación a la que se le aplica el Tema.

El siguiente ejemplo muestra la misma página con un tema aplicado para especificar los ajustes de estilo para el control. Observad que la página en sí mismo no necesita contener ninguna información de estilo. El tema aplica automáticamente las propiedades de estilo a los controles en la página en tiempo de ejecución.

C# Página con el Tema de Ejemplo Aplicado


La carpeta App_Themes

Los temas residen en la carpeta App_Themes, directamente bajo el directorio raíz. Un tema consiste en un subdirectorio bajo esta carpeta que contiene un grupo de uno o mas ficheros Skin, con extensión .skin. Un tema puede contener también un fichero CSS y/o subdirectorio para ficheros estáticos, por ejemplo imágenes. La siguiente figura muestra el directorio App_Themes con dos temas definidos, llamados "Default" y "White", cada uno de los cuales tiene un sólo fichero skin y uno CSS.

Upload/figure7.gif









Observad en el ejemplo previo que los contenidos de un fichero skin son simplemente definiciones de control, tal y como ellas deben aparecer en la página. Un fichero de skin puede contener varias definiciones de control, por ejemplo una definición por cada tipo de control. Las propiedades de controles definidas en el tema sobreescriben automáticamente los valores de la propiedad local de un control del mismo tipo en la página en la que aplicamos el tema. Por ejemplo, una definición de un control del tipo <asp:Calendar Font-Name="Verdana" runat="server"/> que se encuentre en un fichero skin causará que todos los controles Calendar en páginas con el Tema aplicado utilizarán la fuente Verdana. Un valor locar para dicha propiedad se sobreescribirá. Observad que es un error especificar un valor de ID de propiedad para una definición de control en un fichero de skin.

Temas Globales y de Aplicación

Un tema puede residir en un nivel de aplicación o en un nivel máquina (accesible de forma global para todas las aplicaciones). Los temas de nivel de aplicación se encuentran en el directorio App_Themes bajo el directorio raíz de la aplicación, como se ha descrito anteriormente. Los temas globales se colocan en el directorio "Themes", bajo una carpeta ASP.NETClientFiles, bajo el directorio de instalación de ASP.NET, por ejemplo %WINDIR%\Microsoft.NET\Framework\<version>\ASP.NETClientFiles\Themes. La ubicación de los temas globales para los sition web de IIS es Inetpub\wwwroot\aspnet_client\system_web\<version>\Themes.

Asignando un Tema a una Página

Se puede aignar un tema a una página individual estableciendo la directiva <%@ Page Theme="..." %> al nombre del Tema de nivel global o de aplicación (el nombre de la carpeta bajo el directorio Themes o App_Themes). Una página puede tener sólo un tema aplicado, pero en dicho tema pueden haber varios ficheros skin para aplicar configuraciones de estilo a los controles de la página.

Asignando un Tema en Config

También podemos definir el tema aplicado para todas las páginas de la aplicación especificandolo en la sección <pages theme="..."/> de Web-config. Para quitar este tema en una página particular podemos establecer el atributo Theme de la directiva de la página a un string vacío (""). Observad que una master page no puede tener un tema aplicado; tendremos que establecer el tema en páginas de contenido o en la configuración (descrito a continuación).


C# Asignando un Tema en Web.config


Deshabilitando Temas para un Control

Un control específico puede ser excluido de tener que sobreescribir sus propiedades mediante el establecimiento de la propiedad EnableTheming a false.

C# Deshabilitando Temas para un Control