tema 3: aspecto de la aplicación
Anuncio
Gestión de una aplicación completa con .NET
Servicio de Informática
TEMA 3: ASPECTO DE LA APLICACIÓN
1.
MASTER PAGES Y CONTENT PAGES
(Viene del tema
http://www.ua.es/es/servicios/si/documentacion/net_c/intro_master_pages.html)
Para insertar una Master Page acudir a WebSite >> Insertar nuevo elemento >> Elegir
Master Page, dar un nombre y añadir.
Una Master Page puede contener, además de los controles de una página aspx, un
tipo especial de control llamado ContentPlaceHolder: una región que puede
substituirse por el contenido de una página asociada a la maestra. También
puede contener contenido por defecto
La sintaxis:
MASTER PAGE
<%@ Master Language=”C#” AutoEventWireup=”true” CodeFile=”MasterPage2.master.cs”
Inherits=”MasterPage2” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Página sin título</title>
<asp:ContentPlaceHolder id=”head” runat=”server”>
</asp:ContentPlaceHolder>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:ContentPlaceHolder id=”ContentPlaceHolder1” runat=”server”>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
CONTENT PAGE
<%@ Page Language=”C#”
MasterPageFile=”~/MasterPage.master”
AutoEventWireup=”true”
CodeFile=”Default__.aspx.cs”
Inherits=”Default__”
Title=”Página sin título” %>
<asp:Content ID=”Content1” ContentPlaceHolderID=”head” Runat=”Server”>
</asp:Content>
Tema 3 / Página 1
Gestión de una aplicación completa con .NET
Servicio de Informática
<asp:Content ID=”Content2” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”Server”>
</asp:Content>
“URL Rebasing” en Master Pages
Una cosa a observar sobre los ejemplos anteriores es que hay varias páginas en una
Master Page que hacen referencia a recursos URL, como imágenes, hojas de estilo o
referencias a páginas, mediante la sintaxis de rutas relativas. Esto funciona cuando la
Master Page y la Content Page se encuentran en el mismo directorio, pero cuanto la
Content Page se encuentra en una ubicación distinta, la ruta relativa no será correcta.
Para solucionar este problema, podemos escoger una de las siguientes propuestas:
•
Utilizar rutas URL absolutas en la Master Page, por ejemplo <img
src=”/myapplication/images/banner.gif” />
•
Utilizar URLS relativas o URLs relativas de aplicación en los controles de
servidor en lugar de marcas estáticas, por ejemplo <asp:Image
ImageUrl=”~/images/banner.gif” runat=”server” />
Problemas con las Master Pages
El problema viene porque las MasterPages alteran el ID y los nombres de los controles
de formulario del tipo runat server.
Así:
<asp:Label
ID="LabelFiltroLocalidad" runat="server"
Text="Filtrar por localización"
AssociatedControlID="DropDownListFiltroLocalidad" >
</asp:Label>
<asp:DropDownList
ID="DropDownListFiltroLocalidad" runat="server"
onload="DropDownListFiltroLocalidad_Load">
</asp:DropDownList>
Se renderizará en este HTML:
Otro problema que nos podemos encontrar es querer modificar un control del
Master.Page.
No debemos dejar que esto ocurra ¿Por qué debe cambiar ese control?
Tema 3 / Página 2
Gestión de una aplicación completa con .NET
Servicio de Informática
¿por algo referente a un dato del sistema, como la fecha? Entonces podemos recurrir
al cs asociado a Master.Page.
¿por algo referente a la ejecución del código, como por ejemplo el nombre del usuario
identificado? Entonces estamos hablando de un “content page”.
Si aún así insistimos, desde cualquier sitio podemos hacer esa modificación.
Suponiendo este Master.Page
Podemos usar este código:
Label label = (Label)Master.FindControl("labelPie");
label.Text = "zzzz";
Tema 3 / Página 3
Gestión de una aplicación completa con .NET
Servicio de Informática
2. ¿CSS O SKINS/TEMAS?
(Viene del tema http://www.ua.es/es/servicios/si/documentacion/net_c/skins.html)
¡¡Ambos!!
Un skin es un conjunto de ficheros que nos permite factorizar la información de estilo y
diseño en un grupo separado de ficheros. Al conjunto le llamamos "Tema".
•
En un tipo de ficheros podremos personalizar la apariencia de los controles
modificando los atributos de los controles de servidor (extensión .SKIN). Se
crean automáticamente al crear un elemento del tipo “máscara”.
•
En otro tipo de ficheros podremos poner nuestros CSS. Una Hoja de Estilos
en Cascada (CSS) puede ser añadido a un Tema colocándolo el
subdirectorio del Tema (directorio App_Themes que se crea
automáticamente al poner un elemento máscara).
Ventajas:
•
Un Tema se puede aplicar a cualquier sitio de forma que afecte a la
apariencia y entorno de las páginas y controles del sitio.
•
Los cambios en el Estilo de un sitio pueden administrarse realizando
cambios al Tema.
•
Se pueden compartir con otros desarrolladores.
PONGAMOS UN EJEMPLO
Sobre sitio Web botón derecho >> Agregar nuevo elemento (Add new ítem) >> Árchivo
de máscara (skin file).
Los temas residen en la carpeta especial App_Themes. Un tema consiste en un
subdirectorio bajo esta carpeta que contiene un grupo de uno o más ficheros Skin, con
extensión .skin. Un tema puede contener también un fichero CSS y/o subdirectorio
para ficheros estáticos, por ejemplo imágenes.
Un fichero skin son simplemente definiciones de los atributos de
control, tal y como deben aparecer en la página.
Un fichero de skin puede contener varias definiciones de control,
por ejemplo una definición por cada tipo de control.
Por ejemplo podemos definir lo que está en negrita de TODOS los controles LABEL
del sitio:
<asp:Label runat="server" CssClass="ClaseLabel" ForeColor="green">
</asp:Label>
“ClaseLabel” sera una clase CSS que afectará a la etiqueta label.
Y podemos definer en otro tema:
Tema 3 / Página 4
Gestión de una aplicación completa con .NET
Servicio de Informática
<asp:Label runat="server" CssClass="ClaseLabel2" BackColor="#d5f8cc">
</asp:Label>
El atributo SkinId permite definir varios tipos de estilo dentro del mismo .skin.
<asp:Label ID="Label1" runat="server" Text="Hello1" /><br />
<asp:Label ID="Label2" runat="server" Text="Hello2" SkinID="Blue" /><br>
<asp:Label ID="Label3" runat="server" Text="Hello3" /><br />
Asignando un Tema a una Página
<%@ Page Theme="..." %>
Una página puede tener sólo un tema aplicado, pero en dicho tema pueden haber
varios ficheros skin para aplicar configuraciones de estilo a los controles de la página.
Una master page no puede tener un tema aplicado.
Deshabilitando Temas para un Control
Un control específico puede ser excluido de tener que sobreescribir sus propiedades
mediante el establecimiento de la propiedad EnableTheming a false.
Estilos del Lado de Servidor Utilizando Temas
Cuando se aplica un Tema a una aplicación, las propiedades de estilo que se
encuentran en la definición del Tema sobrescriben los valores de los controles de
destino en las páginas de aplicación.
Un Tema puede contener múltiples ficheros CSS. Cuando la página contiene
referencias a los ficheros CSS (mediante una etiqueta <link rel="stylesheet" href="..."/>
en el elemento <head/>), cualquier fichero CSS del Tema se aplicara después de las
hojas de estilo de la página.
Utilizando Imágenes en Temas
Un tema también puede contener imágenes que se referencian en la definición del
control en el fichero de skin. Las referencias a las imágenes en skins deben utilizar
rutas relativas a la carpeta de las imágenes dentro del directorio Theme, de forma
que las imágenes y el fichero skin se pueden mover juntas a otras aplicaciones de
forma sencilla. En tiempo de ejecución, las rutas a las imágenes se revisan, de forma
que las referencias son relativas al control dentro de la página objetivo, en lugar de
al fichero skin.
Asignando un Tema Mediante Código
Un tema debe ser aplicado a la página muy pronto en el ciclo de vida de una petición,
en el evento PreInit (ver tema de flujo en una página aspx).
Protected void Page_PreInit(){
Page.Theme = Server.HtmlEncode(Request.QueryString("Theme"))
}
Tema 3 / Página 5
Gestión de una aplicación completa con .NET
Servicio de Informática
3. EJERCICIO 03.
Partimos del ejercicio 2.
Se proporcionan 2 carpetas con los mismos ficheros: Azul y Rojo
Además se proporciona plantilla.html
MASTER PAGE
Creamos 1 master page a partir de “plantilla.html” e insertamos dentro el content page
que es el fichero aspx que arrastramos del ejercicio 02.
Necesitamos 3 “ContentHolderPlace”, el de la cabecera, el
ContentPlaceHolderNoticias
y ContentPlaceHolderContenido
Las vistas se quedarían:
Tema 3 / Página 6
Gestión de una aplicación completa con .NET
Servicio de Informática
En esta segunda pantalla se puede observar cómo se ha aprovechado el
ContentPlaceHolderNovedades para indicar un resumen de los campos que se han
rellenado incorrectamente.
Preguntas:
Si quisiéramos recoger los valores por post, sería lógico pensar que poniendo:
Response.Write("ID" + Request.Form[TextBoxApellidos.ID]);
Obtendríamos el valor enviado en los apellidos ¿es así? ¿por qué?
¿Y si ponemos?
Response.Write("ID Cliente" +
Request.Form[TextBoxApellidos.ClientID.Replace("_","$")]);
SKIN / TEMAS / CSS
A partir de los ficheros que se han entregado y siguiendo la lógica del ejercicio genera
2 skins: Azul y Rojo.
Tema 3 / Página 7
Gestión de una aplicación completa con .NET
Servicio de Informática
SKIN AZUL (Para la administración)
1.- El dibujo que hace de cabecera (marcado con el círculo) se ha pasado al skin.
2.- El GridView:
• Se ha pasado al skin. Se han separado los atributos según son de
presentación o de programación. Es decir, se dejan los eventos, el id y las
columnas (entre <columns></columns>).
•
La tabla mide un 100% de ancho. Se muestran las rayas de la cuadrícula. Los
colores de fondo de la cabecera y del pie son #30424A.
3.- Los Labels asociados a controles obligatorios llevan un * delante. Esto se hace con
CSS.
.LabelObligatorio:before {
content:"*
"; }
4.- Los controles que son obligatorios se han puesto con un fondo de color
.TextoObligatorio { background: #99DDFF; }
Tema 3 / Página 8
Gestión de una aplicación completa con .NET
Servicio de Informática
SKIN ROJO (Para el super administrador)
5.- El GridView:
• La tabla mide un 100% de ancho. Se muestran las rayas de la cuadrícula. Los
colores de fondo de la cabecera y del pie son #E65231.
6.- Los Labels asociados a controles obligatorios llevan un * delante. Esto se hace con
CSS.
.LabelObligatorio:before {
content:"*
"; }
7.- Los controles que son obligatorios se han puesto con un fondo de color
.TextoObligatorio { background: #FFBB77; }
Tema 3 / Página 9
