Temas y skins

Como hemos visto la página principal afecta a la estructura general de una serie de páginas dentro de una aplicación (o sitio) web. Sin embargo, casi siempre en la implementación de un sitio que necesita para manejar otros elementos que pueden cambiar de una página a otra, pero debe permanecer estable dentro de la misma página (como la fuente del texto). En tales escenarios son una herramienta muy útil denominada Temas.

Si está familiarizado con Hojas de Estilo en Cascada (CSS) no será difícil comprender el funcionamiento de los temas. Las dos técnicas son similares porque ambos, de hecho, se puede definir el estilo visual de nuestras páginas web. Es posible utilizar temas para especificar estilos, gráficos y otros elementos en las páginas de nuestro sitio.

Los temas son básicamente archivos de texto que especifican las características que los elementos de una página ASP.NET debe asumir y que incluye por defecto varios, aunque por supuesto puede definir el suyo propio.

Proceder con un ejemplo. Crear un nuevo formulario Web (yo lo llamo EsempioTemi.aspx) y luego haga clic en el botón derecho del ratón sobre nuestro proyecto y elegir la opción Agregar carpeta ASP.NET y elegir el tipo de carpeta como tema

Esto lleva a la creación de la carpeta dentro de App_Themes con una carpeta por defecto (llamado Theme1)

Cambiar el nombre de la carpeta en la Theme1 predeterminado y haga clic en él con el botón derecho del ratón, añadiendo un nuevo elemento de tipo de hoja de estilos (hoja de estilo). Llamamos a la misma default.css

En este punto tenemos que establecer las características de nuestra hoja de estilo. Si hacemos doble clic sobre ella veremos que sólo contiene una etiqueta de cuerpo

Para añadir nuevos elementos, haga clic en el menú de estilos Agregar Regla

Esto abre la siguiente ventana

Supongamos que desea agregar un elemento de H1 a nuestra hoja de estilo. Elemento de selección en el menú desplegable y haga clic en el elemento h1> para colocarlo en la lista de reglas de jerarquía de estilos

Haga clic en Aceptar una vez que veamos que la hoja de estilo se cambia de la siguiente manera

Para editar el elemento que acaba de insertar, haga clic con el botón derecho del ratón en su etiqueta y elija Generar opción de estilo. Se abrirá el cuadro de diálogo Modificar estilo, donde vamos a establecer algunas propiedades a voluntad

Después de hacer clic en Aceptar vemos nuestras opciones incluidas en la hoja de estilo

Probamos nuestro tema ahora, añadiendo que el formulario web creado a principios de la Directiva Tema lección y escribir algo en las etiquetas h1

El texto que entré me estaba poniendo a prueba el estilo de la aplicación y se mostrará en el navegador de acuerdo a nuestra hoja de estilo IPOST

Lo mismo sucederá con todos los elementos de nuestra encerrados en etiquetas H1. Es evidente que hemos utilizado esta etiqueta a modo de ejemplo, pero, en principio, de una manera similar se pueden personalizar todos los elementos de un formulario web.

Por último voy a referirme brevemente a la piel llamada. Estos elementos son una manera de configurar algunas propiedades de un grupo de controles. Por ejemplo, puede definir diferentes esquemas de color para un tipo particular de control (como el cuadro de texto) que se caracteriza por varias propiedades personalizables.

Mediante la definición de la piel adecuada puede poner a disposición una serie de opciones de visualización de un grupo de controles sin la necesidad de establecer las propiedades de cada instancia de cada uno. Por ejemplo, si un TextBox formulario web contiene diez y quiero darles algo de formato sólo definir la piel apropiada y asignar a cada uno de los cuadros de texto. Para que los archivos en una piel que define un tipo específico de control y los atributos que se aplican a todas las instancias de la misma.

He aquí un ejemplo. Crear una nueva carpeta dentro de la carpeta por defecto llamada Skins visto anteriormente y agregar un nuevo elemento al tipo de piel en el interior llama TestSkinFile

Insertar en las personalizaciones del archivo generado para algunos controles tales como las siguientes

De esta manera, cuando se añade un formulario Web componentes de la piel, que se llevará el conjunto de características. Obviamente, esto se hace para que la piel debe ser declarado en la página, similar a lo que se hizo anteriormente para el tema.

• <<Lección anterior
• Índice de la ayuda
• Lección siguiente>>