ASP .

NET 2 Temas y Mascaras

Informacin general sobre temas y mscaras de ASP.NET

Un tema es un conjunto de valores de propiedad que permiten definir la apariencia de las pginas y de los controles y, a continuacin, aplicar esa apariencia de manera coherente a las pginas de una aplicacin Web, en toda una aplicacin Web o en todas las aplicaciones Web de un servidor.

Mscaras de temas y control

Los temas estn formados por un conjunto de elementos: mscaras, hojas de estilos en cascada (CSS), imgenes y otros recursos. Como mnimo, un tema contendr mscaras. Los temas se definen en directorios especiales en un sitio Web o un servidor Web. Mscaras Un archivo de mscara tiene la extensin de nombre de archivo .skin y contiene los valores de propiedades para los controles individuales como Button, Label, TextBox o Calendar. La configuracin de las mscaras de control se parece al propio marcado del control, pero slo contiene las propiedades que se desee establecer como parte del tema. Por ejemplo, lo siguiente es una mscara de control Button:

<asp:button runat="server" BackColor="lightblue" ForeColor="black" />

Los archivos .skin se crean en la carpeta de tema. Un archivo .skin puede contener una o ms mscaras de control para uno o ms tipos de control. Es posible definir un archivo de mscaras independiente para cada control o definir todas las mscaras para un tema en un archivo nico. Hay dos tipos de mscaras de control, mscaras predeterminadas y mscaras con nombre:

Una mscara predeterminada se aplica automticamente a todos los controles del

mismo tipo cuando un tema se aplica a una pgina. Una mscara de control es predeterminada si no tiene un atributo SkinID. Por ejemplo, si se crea una mscara predeterminada para un control Calendar, la mscara de control se aplicar a todos los controles Calendar de las pginas en las que se utilice el tema. (Las mscaras predeterminadas coinciden exactamente atendiendo al tipo de control, de modo que una mscara de control Button se aplica a todos los controles Button pero no a los controles LinkButton ni a los derivados del objeto Button).

Una mscara con nombre es una mscara de controles con un conjunto de propiedades

SkinID. Las mscaras con nombre no se aplican automticamente a todos los controles segn el tipo. En su lugar, una mscara con nombre se aplica explcitamente a un control estableciendo la propiedad SkinID del control. Al crear mscaras con nombre, se pueden configurar diferentes mscaras para distintas instancias del mismo control en una aplicacin. Hojas de estilos en cascada Un tema tambin puede incluir una hoja de estilos en cascada (archivo .css). Cuando coloca un archivo .css en el directorio de tema, la hoja de estilos se aplica automticamente como parte del tema. La hoja de estilos se define utilizando la extensin de nombre de archivo .css en la carpeta de tema. Grficos del tema y otros recursos Los temas tambin pueden incluir grficos y otros recursos, como archivos de secuencias de comandos o archivos de sonido. Por ejemplo, la parte de un tema de pgina podra incluir una

MCT: Luis Dueas

Pag 1 de 8

ASP .NET 2 Temas y Mascaras

mscara para un control TreeView. Como parte del tema, se pueden incluir los grficos utilizados con el fin de representar los botones para expandir y contraer. Normalmente los archivos de recursos para el tema estn en la misma carpeta que los archivos de mscara de dicho tema, pero pueden estar en cualquier parte de la aplicacin Web, en una subcarpeta del directorio del tema por ejemplo. Para hacer referencia a un archivo de recursos en una subcarpeta del directorio de temas, utilice una ruta de acceso como la que se muestra en esta mscara de control Image:

<asp:Image runat="server" ImageUrl="ThemeSubfolder/fi lename.ext" />

Tambin puede almacenar sus archivos de recursos fuera del directorio de temas. Si utiliza la sintaxis de la tilde (~) para hacer referencia a los archivos de recursos, la aplicacin Web encontrar automticamente las imgenes. Por ejemplo, si coloca los recursos para un tema en un subdirectorio de su aplicacin, puede utilizar rutas de acceso como ~/SubFolder/filename.ext para hacer referencia a los archivos de recursos, como en el siguiente ejemplo de cdigo.

<asp:Image runat="server" ImageUrl="~/AppSubfolder/fi lename.ext" />

mbito de los temas
Puede definir temas para una aplicacin Web nica o como temas globales que pueden utilizar todas las aplicaciones en un servidor Web. Una vez que un tema se ha definido, se puede colocar en pginas individuales utilizando el atributo Theme o StyleSheetTheme de la directiva @ Page, o se puede aplicar a todas las pginas de una aplicacin configurando el elemento <pginas> en el archivo de configuracin de la aplicacin. Si el elemento <pginas> se define en el archivo Machine.config, el tema se aplicar a todas las pginas en aplicaciones Web en el servidor. Temas de pgina Un tema de pgina corresponde a una carpeta de temas con mscaras de control, hojas de estilos, archivos de grficos y otros recursos creados como una subcarpeta de la carpeta \App_Themes en su sitio Web. Cada tema constituye una subcarpeta diferente con respecto a la carpeta \App_Themes. El siguiente ejemplo de cdigo muestra un tema de pgina tpico que define, a su vez, dos temas llamados BlueTheme y PinkTheme.

MyWebSite App_Themes BlueTheme Controls.skin BlueTheme.css PinkTheme Controls.skin PinkTheme.css

Temas globales Un tema global es un tema que puede aplicar a todos los sitios Web en un servidor. Los temas globales permiten definir una apariencia de conjunto para un dominio cuando se mantienen varios sitios Web en el mismo servidor. Los temas globales se parecen a los de pgina en que ambos tipos incluyen valores de propiedades, la configuracin de las hojas de estilos y grficos. Sin embargo, los temas globales se almacenan en una carpeta llamada \Themes que es global al servidor Web. Cualquier sitio Web del servidor y cualquier pgina de cualquier sitio Web pueden hacer referencia a un tema global. Para obtener ms informacin sobre cmo crear una carpeta de temas globales, vea Cmo: Definir temas de ASP.NET.

Prioridad en la configuracin de temas

MCT: Luis Dueas

Pag 2 de 8

ASP .NET 2 Temas y Mascaras

Se puede especificar la prioridad que tiene la configuracin del tema sobre la configuracin regional del control especificando cmo se aplica el tema. Si establece la propiedad de una pgina Theme, los valores de control en el tema y la pgina se combinan para formar la configuracin final para el control. Si la configuracin del control se define tanto en el control como en el tema, la configuracin del control del tema reemplaza cualquier configuracin de la pgina en el control. Esta estrategia hace posible que el tema pueda crear una apariencia coherente a lo largo de las pginas, incluso si los controles de las pginas ya tuvieran valores de propiedades individuales. Por ejemplo, esto permite aplicar un tema a una pgina que se cre en una versin anterior de ASP.NET. Asimismo, es posible aplicar un tema como tema de la hoja de estilos estableciendo la propiedad StyleSheetTheme de la pgina. En este caso, la configuracin de la pgina local tiene prioridad sobre aquellos definidos en el tema cuando la configuracin se define en ambos lugares. ste es el modelo utilizado en las hojas de estilos en cascada. Se podra aplicar un tema como tema de la hoja de estilos si se desea poder establecer las propiedades de controles individuales en la pgina mientras se sigue aplicando un tema para lograr una apariencia de conjunto.

Propiedades que se pueden definir mediante temas

Como regla general, se pueden usar los temas para definir las propiedades relacionadas con la apariencia de una pgina o de un control o el contenido esttico. Slo se pueden establecer esas propiedades que tienen un atributo ThemeableAttribute establecidas como true en la clase de control. Las propiedades que especifican explcitamente el comportamiento de los controles en lugar de su apariencia no aceptan valores de tema. Por ejemplo, no se puede configurar la propiedad CommandName de un control Button mediante un tema. De manera similar, no se puede utilizar un tema para configurar la propiedad AllowPaging o DataSource de un control GridView.

Temas frente a hojas de estilos en cascada

Los temas son similares a las hojas de estilos en cascada en cuanto a que tanto los temas como las hojas de estilos definen una serie de atributos comunes que se pueden aplicar a cualquier pgina. Sin embargo, los temas se diferencian de las hojas de estilos en los siguientes puntos:

Los temas pueden definir muchas propiedades de un control o de una pgina, y no slo

las propiedades de un estilo. Por ejemplo, los temas permiten especificar los grficos de un control TreeView, el diseo de plantilla de un control GridView, etctera.

Los temas pueden incluir grficos. Los temas no tienen la misma prioridad que las hojas de estilos. Por ejemplo, de

manera predeterminada, los valores de las propiedades reemplazan a los valores regionales de las propiedades a menos que se aplique el tema explcitamente como un tema de hoja de estilos.

Slo se puede aplicar un tema a cada pgina. No puede aplicar varios temas a una

pgina, a diferencia de las hojas de estilos que s se pueden aplicar varias.

MCT: Luis Dueas

Pag 3 de 8

ASP .NET 2 Temas y Mascaras

Cmo: Definir temas de ASP.NET

Es posible definir temas de pgina o globales propios. Los temas se componen de varios archivos de base (por ejemplo, hojas de estilos para el aspecto de las pginas, mscaras de control para representar los controles de servidor), as como de otras imgenes y archivos.

Para crear un tema de pgina

1. Nota Cree una nueva carpeta denominada App_Themes en su sitio Web.

La carpeta debe denominarse App_Themes. 2. Cree una nueva subcarpeta de la carpeta App_Themes para que contenga los archivos de tema. El nombre de la subcarpeta coincide con el nombre del tema. Por ejemplo, para crear un tema denominado BlueTheme, cree una carpeta denominada \App_Themes\BlueTheme. 3. Agregue archivos a la carpeta para incorporar las mscaras, hojas de estilos e imgenes que compondrn el tema.

Para crear un tema global

1. Cree una carpeta Themes utilizando esta ruta de acceso:

iisdefaultroot\aspnet_client\system_web\version\Themes
Por ejemplo, si la carpeta raz de Web predeterminada est en C:\Inetpub\wwwroot en el servidor Web, la nueva carpeta Themes podra ser:

C:\Inetpub\wwwroot\aspnet_client\system_web\version\Themes
Nota

El nombre de la carpeta para los temas globales es Themes, no App_Themes, como es para los temas de pgina. 2. Cree una carpeta de tema como una subcarpeta de la carpeta Themes. El nombre de la subcarpeta es el nombre del tema. Por ejemplo, para crear un tema global denominado BlueTheme, cree una carpeta denominada... \Themes\BlueTheme. 3. Agregue archivos a la carpeta para incorporar las mscaras, hojas de estilos e imgenes que compondrn el tema.

Para crear una mscara

1. Cree un archivo de texto nuevo en la subcarpeta de tema con la extensin .skin.

La convencin que se suele seguir es crear un archivo .skin por control, como Button.skin o Calendar.skin. No obstante, se pueden crear tantos archivos .skin como se necesiten; los archivos .skin pueden contener varias definiciones de mscaras.

2.

En el archivo .skin, agregue una definicin normal de control (con sintaxis

declarativa), pero incluyendo nicamente las propiedades que vaya a establecer para el tema y sin incluir el atributo ID. La definicin del control debe incluir el atributo . runat="server"

MCT: Luis Dueas

Pag 4 de 8

ASP .NET 2 Temas y Mascaras

En el ejemplo siguiente se muestra una mscara de control predeterminada para un control Button en la que se define el color y la fuente de todos los controles Button del tema:

<asp:Button runat="server" BackColor="Red" ForeColor="White" Font- Na me ="Arial" Font- Size="9px" />

Nota

Una forma cmoda de crear una mscara consiste en agregar el control a una pgina y configurarlo hasta conseguir el aspecto deseado. Por ejemplo, podra agregar un control Calendar a una pgina y establecer su encabezado de das, de fecha seleccionada y otras propiedades. A continuacin, puede copiar la definicin del control de la pgina a un archivo de mscara y quitar luego el atributo ID. 3. Nota Repita los pasos 2 y 3 para cada mscara de controles que desee crear.

Slo podr definir una mscara predeterminada por control. Utilice el atributo SkinID en la declaracin del control de la mscara para crear una mscara con nombre que pueda aplicar a las instancias concretas de un control.

MCT: Luis Dueas

Pag 5 de 8

ASP .NET 2 Temas y Mascaras

Cmo: Aplicar temas de ASP.NET

Puede aplicar los temas a una pgina, un sitio Web, o globalmente. Al establecer un tema en el nivel del sito Web los estilos y mscaras se aplican a todas las pginas y controles del sitio, a no ser que reemplace un tema para una pgina individual. Al establecer un tema en el nivel de la pgina, los estilos y mscaras se aplican a esa pgina y a todos sus controles. De manera predeterminada, los temas reemplazan la configuracin local del control. Como alternativa, tambin se puede establecer un tema como tema de la hoja de estilos, de forma que dicho tema se aplique slo a la configuracin del control que no est especficamente establecida en el mismo.

Para aplicar un tema a un sitio Web

1.

En el archivo Web.config de la aplicacin, establezca el elemento <pages> en el

nombre del tema, ya sea ste global o de pgina, como se muestra en el siguiente ejemplo:

<configuration> <system.web> <pages theme="The me Na m e" /> </system.web> </configuration>

Nota

Cuando un tema de aplicacin tiene el mismo nombre que otro global, la prioridad recae en el tema de pgina.

2.

Para establecer un tema como tema de la hoja de estilos de forma que se

subordine a la configuracin local del control, establezca en su lugar el atributo StyleSheetTheme:

<configuration> <system.web> <pages StyleSheetTheme ="The mena m e" /> </system.web> </configuration>
Los temas que se establecen en el archivo Web.config se aplican a todas las pginas Web ASP.NET de esa aplicacin. La configuracin del tema en el archivo Web.config sigue las convenciones normales de jerarqua. Por ejemplo, para aplicar un tema nicamente a un subconjunto de pginas, puede colocar estas pginas en una carpeta con su propio archivo Web.config o bien crear un elemento <location> en el archivo Web.config raz para especificar una carpeta. Para obtener informacin detallada, vea Configurar archivos y subdirectorios especficos. Para aplicar un tema a una pgina individual

Establezca el atributo Theme o StyleSheetTheme de la directiva @ Page en el

nombre del tema que se va a utilizar, como se muestra en el siguiente ejemplo:

< % @ Page Theme ="The me Na m e" % >< % @ % >

Page StyleSheetTheme ="The meNa m e"

Tras ello, el tema, con sus estilos y mscaras correspondientes, slo se aplicar a la pgina que lo declara.

Aplicar mscaras a los controles

Las mscaras definidas en el tema se aplicarn en todas las instancias de controles de la aplicacin o en las pginas a las que se aplique el tema. En algunos casos, es posible que desee

MCT: Luis Dueas

Pag 6 de 8

ASP .NET 2 Temas y Mascaras

aplicar un conjunto concreto de propiedades a un control individual. Puede hacerse creando una mscara con nombre (entrada en un archivo .skin que tiene establecida la propiedad SkinID) y aplicndola a continuacin mediante el identificador a controles individuales. Para obtener informacin detallada sobre la creacin de mscaras con nombre, vea Cmo: Definir temas de ASP.NET. Para aplicar una mscara con nombre a un control

Establezca la propiedad SkinID del control, como se muestra en el ejemplo siguiente:

<asp:Calendar runat="server" ID="DatePicker" SkinID="SmallCalendar" />

Si el tema de la pgina no incluyera ninguna mscara de controles coincidente con la propiedad SkinID, el control utilizar la mscara predeterminada para ese tipo de control.

Cmo: Deshabilitar temas de ASP.NET

Puede configurar una pgina o un control para omitir los temas. De forma predeterminada, los temas reemplazan la configuracin regional del aspecto de pginas y controles. Conviene deshabilitar este comportamiento cuando no se desee que un tema reemplace el aspecto predefinido de una pgina o control.

Nota

Puede dar prioridad a la configuracin de controles en la pgina actual aplicando un tema como un tema de la hoja de estilos. En ese caso, el tema se utiliza para establecer propiedades que no tienen ninguna configuracin regional pero la configuracin regional explcita es prioritaria. Para obtener informacin detallada, vea Cmo: Aplicar temas de ASP.NET.

Para deshabilitar temas en una pgina

Establezca el atributo EnableTheming de la directiva @ Page en false, como en este

ejemplo:

< % @ Page EnableTheming="false" % >

Para deshabilitar temas en un control

Establezca la propiedad EnableTheming del control en false, como en este ejemplo:

<asp:Calendar id="Calendar1" runat="server" EnableTheming="false" />

MCT: Luis Dueas

Pag 7 de 8

ASP .NET 2 Temas y Mascaras

Cmo: Aplicar temas de ASP.NET mediante programacin

Aparte de especificar las preferencias de mscaras y temas en las declaraciones de pgina y los archivos de configuracin, puede aplicar temas mediante programacin. Puede establecer mediante programacin temas de pginas y temas de hojas de estilos; sin embargo, el procedimiento para aplicar cada tipo de tema es diferente.

Para aplicar mediante programacin un tema de una pgina

En un controlador para el mtodo PreInit de la pgina, establezca la propiedad Theme

de la pgina. El ejemplo de cdigo siguiente muestra cmo establecer el tema de una pgina basndose condicionalmente en un valor pasado a la cadena de consulta.

ProtectedSub Page_PreInit(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Me.PreInit Select Case Request.QueryString("theme") Case "Blue" Page.Theme = "BlueTheme" Case "Theme2" Page.Pink = "PinkTheme" End Select End Sub
Para aplicar mediante programacin un tema de una hoja de estilos

En el cdigo de la pgina, reemplace la propiedad StyleSheetTheme y en el descriptor

de acceso get, devuelva el nombre del tema de una hoja de estilos. El ejemplo de cdigo siguiente muestra cmo establecer un tema denominado BlueTheme como tema de hoja de estilos para una pgina:

Public Overrides Property StyleSheetTheme() As String Get Return "BlueTheme " End Get Set(ByVal value As String) End Set End Property
Para aplicar mscaras de control mediante programacin

En un controlador para el mtodo PreInit de la pgina, establezca la propiedad SkinID

del control. En el ejemplo de cdigo siguiente se muestra cmo se establece la propiedad SkinID de un control Calendar.

Sub Page_PreInit(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Me.PreInit Calendar1.SkinID = "BlueTheme" End Sub

MCT: Luis Dueas

Pag 8 de 8