Información general sobre temas y máscaras de ASP.NET
Actualización: noviembre 2007
Un tema es un conjunto de valores de propiedad que permiten definir la apariencia de las páginas y de los controles y, a continuación, aplicar esa apariencia de manera coherente a las páginas de una aplicación Web, en toda una aplicación Web o en todas las aplicaciones Web de un servidor.
Máscaras de temas y control
Los temas están formados por un conjunto de elementos: máscaras, hojas de estilos en cascada (CSS), imágenes y otros recursos. Como mínimo, un tema contendrá máscaras. Los temas se definen en directorios especiales en un sitio Web o un servidor Web.
Máscaras
Un archivo de máscara tiene la extensión de nombre de archivo .skin y contiene los valores de propiedades para los controles individuales como Button, Label, TextBox o Calendar. La configuración de las máscaras de control se parece al propio marcado del control, pero sólo contiene las propiedades que se desee establecer como parte del tema. Por ejemplo, lo siguiente es una máscara de control Button:
<asp:button BackColor="lightblue" ForeColor="black" />
Los archivos .skin se crean en la carpeta Theme. Un archivo .skin puede contener una o más máscaras de control para uno o más tipos de control. Es posible definir un archivo de máscaras independiente para cada control o definir todas las máscaras para un tema en un archivo único.
Hay dos tipos de máscaras de control, máscaras predeterminadas y máscaras con nombre:
Una máscara predeterminada se aplica automáticamente a todos los controles del mismo tipo cuando un tema se aplica a una página. Una máscara de control es predeterminada si no tiene un atributo SkinID. Por ejemplo, si se crea una máscara predeterminada para un control Calendar, la máscara de control se aplicará a todos los controles Calendar de las páginas en las que se utilice el tema. (Las máscaras predeterminadas coinciden exactamente atendiendo al tipo de control, de modo que una máscara de control Button se aplica a todos los controles Button pero no a los controles LinkButton ni a los derivados del objeto Button).
Una máscara con nombre es una máscara de controles con un conjunto de propiedades SkinID. Las máscaras con nombre no se aplican automáticamente a todos los controles según el tipo. En su lugar, una máscara con nombre se aplica explícitamente a un control estableciendo la propiedad SkinID del control. Al crear máscaras con nombre, se pueden configurar diferentes máscaras para distintas instancias del mismo control en una aplicación.
Hojas de estilos en cascada
Un tema también puede incluir una hoja de estilos en cascada (archivo .css). Cuando coloca un archivo .css en la carpeta de temas, la hoja de estilos se aplica automáticamente como parte del tema. La hoja de estilos se define utilizando la extensión de nombre de archivo .css en la carpeta de tema.
Gráficos del tema y otros recursos
Los temas también pueden incluir gráficos y otros recursos, como archivos de script o archivos de sonido. Por ejemplo, la parte de un tema de página podría incluir una máscara para un control TreeView. Como parte del tema, se pueden incluir los gráficos utilizados con el fin de representar los botones para expandir y contraer.
Normalmente, los archivos de recursos del tema están en la misma carpeta que los archivos de máscara de dicho tema, pero pueden estar en cualquier parte de la aplicación Web, por ejemplo, en una subcarpeta de la carpeta de temas. Para hacer referencia a un archivo de recursos en una subcarpeta de la carpeta de temas, utilice una ruta de acceso como la que se muestra en esta máscara de control Image:
<asp:Image ImageUrl="ThemeSubfolder/filename.ext" />
También puede almacenar sus archivos de recursos fuera de la carpeta de temas. Si utiliza la sintaxis de la tilde (~) para hacer referencia a los archivos de recursos, la aplicación Web encontrará automáticamente las imágenes. Por ejemplo, si coloca los recursos de un tema en una subcarpeta de la aplicación, puede utilizar rutas de acceso como ~/Subcarpeta/nombreArchivo.ext para hacer referencia a los archivos de recursos, como en el siguiente ejemplo.
<asp:Image ImageUrl="~/AppSubfolder/filename.ext" />
Ámbito de los temas
Puede definir temas para una aplicación Web única o como temas globales que pueden utilizar todas las aplicaciones en un servidor Web. Una vez definido un tema, se puede colocar en páginas individuales utilizando el atributo Theme o StyleSheetTheme de la directiva @ Page, o se puede aplicar a todas las páginas de una aplicación configurando el elemento <pages> en el archivo de configuración de la aplicación. Si el elemento <pages> se define en el archivo Machine.config, el tema se aplicará a todas las páginas de las aplicaciones web en el servidor.
Temas de página
Un tema de página corresponde a una carpeta de temas con máscaras de control, hojas de estilos, archivos de gráficos 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. En el siguiente ejemplo de código se muestra un tema de página típico que define dos temas denominados 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 página en que ambos tipos incluyen valores de propiedades, la configuración de las hojas de estilos y gráficos. Sin embargo, los temas globales se almacenan en una carpeta denominada Themes que es global al servidor Web. Cualquier sitio Web del servidor y cualquier página de cualquier sitio Web pueden hacer referencia a un tema global.
Prioridad en la configuración de temas
Se puede especificar la prioridad que tiene la configuración del tema sobre la configuración regional del control especificando cómo se aplica el tema.
Si establece la propiedad de una página Theme, los valores de control en el tema y la página se combinan para formar la configuración final para el control. Si la configuración del control se define tanto en el control como en el tema, la configuración del control del tema reemplaza cualquier configuración de la página en el control. Esta estrategia hace posible que el tema pueda crear una apariencia coherente a lo largo de las páginas, incluso si los controles de las páginas ya tuvieran valores de propiedades individuales. Por ejemplo, esto permite aplicar un tema a una página que se creó en una versión anterior de ASP.NET.
Asimismo, es posible aplicar un tema como tema de la hoja de estilos estableciendo la propiedad StyleSheetTheme de la página. En este caso, la configuración de la página local tiene prioridad sobre aquellos definidos en el tema cuando la configuración se define en ambos lugares. Éste es el modelo utilizado en las hojas de estilos en cascada. Se podría aplicar un tema como tema de la hoja de estilos si se desea poder establecer las propiedades de controles individuales en la página mientras se sigue aplicando un tema para lograr una apariencia de conjunto.
Los elementos de temas globales no pueden reemplazarse parcialmente por elementos de temas de nivel de aplicación. Si crea un tema de nivel de aplicación con el mismo nombre que un tema global, los elementos de tema de nivel de aplicación no reemplazarán los elementos del tema global.
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 página o de un control o el contenido estático. Sólo se pueden establecer esas propiedades que tienen un atributo ThemeableAttribute establecidas como true en la clase de control.
Las propiedades que especifican explícitamente 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.
Tenga en cuenta que no puede utilizar generadores de expresiones, que generan expresiones de código para asignarlas a una página en tiempo de compilación, en temas o máscaras.
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 página. 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 página, y no sólo las propiedades de un estilo. Por ejemplo, los temas permiten especificar los gráficos de un control TreeView, el diseño de plantilla de un control GridView, etcétera.
Los temas pueden incluir gráficos.
Los temas no se muestran en cascada del modo en que lo hacen las hojas de estilos. De forma predeterminada, cualquier valor de propiedad definido en un tema al que se haga referencia en la propiedad Theme de una página reemplazará los valores de las propiedades definidos mediante declaración, a menos que aplique explícitamente el tema mediante la propiedad StyleSheetTheme. Para obtener más información, consulte la sección anterior Prioridad en la configuración de temas.
Sólo se puede aplicar un tema a cada página. No puede aplicar varios temas a una página, a diferencia de las hojas de estilos que sí se pueden aplicar varias.
Consideraciones de seguridad
Los temas pueden causar problemas de seguridad cuando se utilizan en el sitio Web. Se pueden utilizar temas malintencionados para:
Modificar el comportamiento de un control de forma que no se comporte según lo previsto.
Insertar script de cliente, lo que puede suponer un riesgo de scripting entre sitios.
Modificar la validación.
Divulgar información confidencial.
Las formas de mitigar estas amenazas comunes son las siguientes:
Proteja los directorios de temas globales y de aplicación con una configuración de control de acceso apropiada. Sólo los usuarios de confianza deben poder escribir archivos en los directorios de temas.
No utilice temas de un origen que no sea de confianza. Examine todos los temas que no provengan de su organización por si contienen código malintencionado antes de utilizarlos en su sitio Web.
No exponga el nombre del tema en los datos de una consulta. Los usuarios malintencionados podrían utilizar esta información para usar temas que el programador no conoce y, de ese modo, divulgar información confidencial.