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 oCalendar. 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 runat="server" 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 runat="server" 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 runat="server" ImageUrl="~/AppSubfolder/filename.ext" />
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.
No hay comentarios:
Publicar un comentario