6.crear Pagina Con Opciones Avanzadas

CREAR PAGINAS
CON OPCIONES
AVANZADAS
Páginas principales MasterPage
 Similar a una página ASP.Net excepto por la directiva
@Master y por la presencia de uno o mas controles de
servidor ContentPlaceHolder.
 Objetivo: ser una superplantilla de varias páginas
similares.
 Una página unida a una página principal hereda todos
los contenidos de la principal (el encabezado y el pie
en el ejemplo) y une en cada posición definida por
ContentPlaceHolder sus propios controles y
marcados.
Página maestra
Directiva @Master
 Un archivo de pagina principal se compila en una
clase que deriva de la clase MasterPage.
 Atributos:
 ClassName: Especifica el nombre de la clase que va a
crearse para mostrar la página maestra.De forma
predeterminada para simple.master es
ASP.simple_master.
 CodeFile: Url al archivo que contiene el código fuente
de la maestra.
 Inherits: código subyacente para la maestra.
 MasterPageFile: nombre del archivo de la maestra.
 El código asociado a una maestra tiene el siguiente
aspecto:
El control contenedor: ContentPlaceHolder
 Actúa como contenedor colocado en una página
principal.
 Marca las posiciones en las que las páginas asociadas
insertarán su contenido.
 Está identificado por su ID, que marca el vínculo entre
la maestra y su asociada.
 La asociada es una página ASP que contiene sólo
etiquetas de servidor <asp:content>
 En la principal se definen tantos ContentPlaceHolder
como regiones que se puedan personalizar haya en
la página.
 La asociada no tiene porqué rellenar todos los
definidos en la principal.
 Se puede especificar un contenido predeterminado
que se mostrará cuando la página no tenga contenido
especifico para una región y se ignorará si lo tiene.
Creación de una página de contenido
 Página Principal: define las partes comunes.
 Página de Contenido : define cual es el contenido de
cada región en una página particular.
 Control Content : la pieza clave de una página de
contenido.
Unir páginas de contenido a páginas maestras
 Usamos el atributo MasterPageFile de la directiva
@Page. Contiene la ruta a la Página Maestra.
 También se puede realizar a nivel de aplicación para
todas las páginas a la misma página principal.
Configurar el atributo masterPageFile en el elemento
<pages> del archivo web.config,
Ejemplo: Creación de una Aplicación con Página Maestra
Ejemplo 6.1
 1. Creación del proyecto:

 2. Confeccionar la estructura de la Master.
 2.1 Etiqueta <head> de la Master:
Hoja de estilos asociada a la

Maestra. Define el estilo
para todas las páginas
enlazadas a la Master.
 2.2. Etiqueta <body> de la Master:
Contenido
para la
Cabecera de la
Aplicación
Contenido
para cada una
de las
asociadas
Contenido
asociado al pie
de la
Aplicación
 3. Agregar una página asociada:
 3.1 Confeccionar el contenido de la página asociada
Resultado final
 Ejemplo 6.1:
 Crear una Aplicación con una página maestra y dos
páginas asociadas. La primera página asociada manda
un dato a la segunda, y la segunda lo recibe y lo
muestra en una caja de texto.
 Ejercicios Propuestos (6.1):
 Crear una Aplicación Web que trabaje con una Página Maestra y dos
Páginas de Detalle.
 La Maestra definirá tres regiones :
 Cabecera : Con Anagrama y nombre de la empresa.
 Cuerpo : Región para que la Asociada inserte contenido.
 Pie : Con fecha de realización y Copyrigth().
 La Primera Asociada insertará los siguientes elementos:
 Dos label, dos cajas de texto y dos botones: Nombre , Apellido,
Aceptar y Cancelar.
 La segunda Asociada insertará una label y una caja de texto.
 La primera enviará el nombre y el apellido a la segunda que lo mostrará
concatenado en la segunda caja de texto
Páginas principales anidadas
 Una página principal puede vincularse a otra página
principal y formar una estructura anidada jerárquica.
 Una página principal secundaria tiene una
combinación de elementos <asp:Content> y
<asp:ContentPlaceHolder>
Trabajar con Temas
 Proporcionan, mediante la creación de un archivo adicional
en el proyecto, la posibilidad de generar atributos
visuales para cada tipo de control.
 Residen en la carpeta App_Themes.
 Pueden incluir una mezcla de los siguientes recursos:
 Archivos CSS (hojas de estilo) : se aplican a los
elementos HTML.
 Archivos de mascara (.skin): contiene un marcado
especifico del tema para un determinado conjunto de
controles.
 Archivos de imágenes: directorio Images bajo la carpeta
de temas.
 El primer archivo de máscara que agreguemos definirá
automáticamente una carpeta de tema con su mismo
nombre para contenerlo. Podemos definir
manualmente tantas carpetas de tema como queramos
usando el menú de agregar nuevas carpetas. Dentro de
cada una de esas carpetas puede haber tantos archivos
de máscara, hojas de estilo y gráficos como
necesitemos.
Estructura de un archivo .skin
 Las páginas que lo apliquen dispondrán de controles

TextBox con el fondo gris claro y el borde punteado de 1
pixel de ancho. Las rejillas que se utilicen automáticamente
tendrán el fondo blanco y las líneas pares azules.
 TRUCO: utilizar una página ASPX vacía para arrastrar y
configurar controles con los aspectos deseados. Luego sólo
hay que copiar su definición al archivo .skin eliminando
todos los atributos ID.
Aplicar temas
 1. A nivel de página:
<% @Page Language= C# Theme= Core35-Basic %>
 2. A nivel de aplicación. En el fichero web.config.
<system.web>
<pages theme= Core35-Basic />
</system.web>
 NOTA: Los temas se diferencian de las hojas de estilo CSS

en que trabajan sobre propiedades del control mientas que
las hojas de estilo lo hacen sobre los estilos de los
elementos HTML.
Para hojas de estilo
1. A nivel de página:
<%@ Page StyleSheetTheme= SytleName" %>
1. A nivel de aplicación. En el fichero web.config.
<configuration>
<system.web>
<pages styleSheetTheme="Themename" />
</system.web>
</configuration>
 Aplicar una máscara con nombre a un control
individual:
<asp:Calendar runat="server" ID="DatePicker"
SkinID="SmallCalendar" />
 Deshabilitar Tema para un control determinado:
Control.EnableTheming = false;
(por defecto es true)
Ejemplo: Creación Temas
 1. Crear la carpeta de Temas:
 2. Añadir Elementos CSS y Máscara al Tema
 Ejercicios Propuestos (6.2):
 Crear una máscara con una configuración personalizada
para cada uno de los siguientes elementos:
 Label
 TextBox.
 Button(2 tip0s diferentes)
Utilizar SkinID
 Calendar(2 tipos diferentes)
 Crear un formulario Web que use la mascara
creada(repetir algún elemento).
 Utilizar las dos formas(nivel de página y nivel de
aplicación).
 Probar la propiedad EnableTheming
Ejercicios Propuestos (6.3):
 Dada la siguiente fuente de datos :
Barcos.txt
Crear una aplicación Master Page con dos páginas
asociadas.
• Primera :
• Una combo con los barcos (BarcoId, NombreBarco)
• Segunda:
• Dos cajas de texto con el nombre del barco y el año de
construcción.
• Una <Table> con todos los datos de los tripulantes del
barco seleccionado
 Definir la master con logotipo de una empresa naviera,
nombre de la empresa y pie de página con la fecha y
hora del sistema.
 Definir algún tipo de mascara para los controles
usados en la aplicación

6.crear Pagina Con Opciones Avanzadas

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

6.crear Pagina Con Opciones Avanzadas

Cargado por

Copyright:

Formatos disponibles

CREAR PAGINAS

 1. Creación del proyecto:

Hoja de estilos asociada a la

 Las páginas que lo apliquen dispondrán de controles

 NOTA: Los temas se diferencian de las hojas de estilo CSS

También podría gustarte