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

Estilos del Lado de Servidor Utilizando Temas

Un Tema está destinado a ser aplicado a una aplicación después de haberla creado, incluso después de que el sitio ya esté hospedado en un servidor. La persona que aplica el tema a la aplicación no tiene porque ser la misma que la desarrolló. Por ejemplo, es común tener desarrolladores de aplicación y diseñadores del web site trabajando en diferentes aspectos del sitio. Cuando se aplica un Tema a una aplicación, las propiedade de estilo que se encuentran en la definición del Tema sobreescriben los valores de los controles de destino en las páginas de aplicación.

Por otro lado, es algo común entre los desarrolladores factorizar información estilística y el comportamiento de servidor por separado. Un ejemplo de esto es la utilización de CSS para definir los estilos de control y de marcado en un fichero separado. También podemos utilizar Temas para este propósito, aplicando el Tema como una especie de hoja de estilos del lado de servidor. Cuando lo aplicamos de esta forma, las propiedades de estilo en la definición del Tema establecen el valor por defecto para los controles de la aplicación, pero estas propiedades pueden establecerse también en la página de control para sobreescribir la definición del Tema.

Estilos Declarativos del Lado del Servidor

Cuando aplicamos un tema estableciendo el atributo Theme de la directiva @Page o de la sección <pages/> de configuración, las propiedades de skins del tema sobreescriben las del mismo nombre de los controles destino de la página. El siguiente ejemplo muestra un "Label" con su propiedad ForeColor fijada a azul. En el tema aplicado, el skin de "Label" define la propiedad ForeColor a naranja. Observad al ejecutar la página que la definición del Tema gana sobre la propiedad local del control, y todos los Labels se representan naranjas.

C# Los Temas Sobreescriben las Porpiedades de la Página




Una definición de Tema se puede aplicar como un estilo del lado de servidor estableciendo el atributo StyleSheetTheme de la directiva @Page o de la sección <pages/> de la configuración al nombre del Tema. Cuando se aplica mediante un StyleSheetTheme, las propiedades del Tema pueden ser sobreescritas por los controles de la Página. El siguente ejemplo muestra el Tema del ejemplo anterior aplicado como un StyleSheetTheme. Observad que la propiedad ForeColor definida en la página gana frente la definición del Tema, de forma que ahora el control "Label" se representa azul.

C# Las Propiedades de la Página Sobreescriben los StylesheetThemes


Prioridad de Tema y StyleSheetTheme

Un StyleSheetTheme se supone que está hecho para ser aplicado durante el desarrollo de la aplicación, como medio para factorizar nuestra información de estilo en las páginas y así mantener el comportamiento de la aplicación separado del aspecto de la aplicación. Podemos querer aplicar Temas a una aplicación a la que ya hemos aplicado un StyleSheetTheme. Si aplicamos tanto un Tema como un StyleSheetTheme a un aplicación, las propiedades de los controles se aplican en el siguiente orden:
  • Las propiedades StyleSheetTheme se aplican primero
  • Las propiedades del Control en la página se aplican (sobreescriben StyleSheetTheme)
  • Las propiedades de Tema se aplican en último lugar (sobreescribiendo tanto las propiedades de control como StyleSheetTheme)
El siguiente ejemplo muestra el orden de prioridad descrito arriba.

C# Prioridad de Temas y StylesheetThemes


Soporte de Visual Web Developer

Visual Web Developer incluye soporte en tiempo de diseño para StyleSheetThemes. Cuando se aplica un StyleSheetTheme a una página, la Vista de Diseño en Visual Studio refleja la aplicación del StyleSheetTheme en la previsualización de la representación de los controles. También podemos elegir en la lista de valores disponibles de SkinID para un control mediante la elección de la opción -- en el panel inteligente de tareas del control (sólo soportado para ciertos controles). El diálogo de Auto Formato muestra la lista de valores permitidos de SkinID en el StyleSheetTheme con una previsualización del control con el skin que hemos elegido. Cuando elegimos aplicar uno de estos valores, el diseñador mantiene la propiedad SkinID del control.


Upload/figure8.gif