ASP. NET. programación avanzada

Interfaz de Usuario

Interfaz de Usuario

● Unificar formato. Imagen corporativa● Campus Virtual● Aplicación independiente● Web

● No preocuparnos del formato● Gestión global del aspecto● Idioma automático● Diferentes dispositivos

Campus Virtual

Aplicación independiente

Web (Vualà)

1. Crear carpeta virtual

Solicitud:https://aplicacionesua.cpd.ua.es/proyectos/formulario/generaParte.asp?id=22&idioma=C

/nombreAplicacion/plantillas

/Plantillas (desarrollo)

2. Páginas maestras

Disponibles en: http://desarrollocpd.campus.ua.es/Plantillas/material/masterpages.zip

● Aplicación: MasterPage.master ● Campus Virtual: MasterPageCV.master● Web:

MasterPageUA.es.master MasterPageUA.ca.master MasterPageUA.en.master

/guiaestilo/masterpages/App_LocalResources

3. Clase UAPage

/Plantillas/material/App_Code.zip

public partial class _Default : System.Web.UI.Page

por public partial class _Default : UAPage

En el web.config: <pages pageBaseType="ua.UAPage"> <namespaces> <add namespace="ua"/> </namespaces> </pages>

4. Web.Config

<appSettings> <add key="servidorscripts_masterpage" value="http://dessarrollocpd.campus.ua.es/guiaestilo"/></appSettings>

En producción:

<add key="servidorscripts_masterpage" value="http://cvnet.campus.ua.es/guiaestilo"/>

4. Web Config

Para web (Vualà)

<appSettings> <add key="pagina-vuala" value="http://ssyf.ua.es/es/acceso/acceso.html"/> <add key="todo-vuala" value="S"/></appSettings>

4. Web.ConfigAplicaciones independientes<add key="titulo-es" value="Plantillas para el curso"/><add key="link-titulo-es" value="http://si.ua.es/es"/><add key="subtitulo-es" value="Universidad de Alicante" />

<add key="titulo-ca" value="Plantillas para el curso (ca)"/><add key="link-titulo-ca" value="http://si.ua.es/va"/><add key="subtitulo-ca" value="Universitat d'Alacant" />

<add key="titulo-en" value="Plantillas para el curso (en)"/><add key="link-titulo-en" value="http://si.ua.es/en"/><add key="subtitulo-en" value="University of Alicante" />

Una columna

<asp:Panel ID="Panel1" runat="server" CssClass="columnas_1" > <asp:Label ID="LabelNombre" runat="server" Text="Nombre" AssociatedControlID="TextBoxNombre"></asp:Label> <asp:TextBox ID="TextBoxNombre" runat="server"></asp:TextBox></asp:Panel> <asp:Panel ID="Panel2" runat="server" CssClass="columnas_1" > <asp:Label ID="LabelApellidos" runat="server" Text="Apellidos" AssociatedControlID="TextBoxApellidos"></asp:Label> <asp:TextBox ID="TextBoxApellidos" runat="server"></asp:TextBox></asp:Panel>

Dos columnas<asp:Panel ID="Panel1" runat="server" CssClass="columnas_2" > <asp:Label ID="LabelNombre" runat="server" Text="Nombre" AssociatedControlID="TextBoxNombre"></asp:Label> <asp:TextBox ID="TextBoxNombre" runat="server"></asp:TextBox></asp:Panel> <asp:Panel ID="Panel2" runat="server" CssClass="columnas_2" > <asp:Label ID="LabelApellidos" runat="server" Text="Apellidos" AssociatedControlID="TextBoxApellidos"></asp:Label> <asp:TextBox ID="TextBoxApellidos" runat="server"></asp:TextBox></asp:Panel>

Dos columnas de diferente tamaño

<asp:Panel ID="Panel1" runat="server" CssClass="columnas_1_3" > <asp:Label ID="LabelNombre" runat="server" Text="Nombre" AssociatedControlID="TextBoxNombre"></asp:Label> <asp:TextBox ID="TextBoxNombre" runat="server"></asp:TextBox></asp:Panel> <asp:Panel ID="Panel2" runat="server" CssClass="columnas_2_3" > <asp:Label ID="LabelApellidos" runat="server" Text="Apellidos" AssociatedControlID="TextBoxApellidos"></asp:Label> <asp:TextBox ID="TextBoxApellidos" runat="server"></asp:TextBox></asp:Panel>

Agrupaciones de campos<asp:Panel ID="Panel1" runat="server" CssClass="" GroupingText="Datos Personales">Contenido</asp:Panel>

Por defectoCssClass=""

RedondeadoCssClass="redondeado"

SimpleCssClass="simple"

EtiquetasAsociar siempre<asp:Label ID="LabelNombre" runat="server" Text="Nombre" AssociatedControlID="TextBoxNombre"></asp:Label>

<asp:Label ID="LabelNombre" CssClass="pequeno" Text="Nombre" ...

Campos de texto

<asp:Panel ID="Panel13" CssClass="columnas_1" runat="server"> <asp:Label ID="Label8" runat="server" CssClass="medio" AssociatedControlID="TextBox8" Text="Label">medio</asp:Label> <asp:TextBox ID="TextBox8" CssClass="medio" runat="server"> </asp:TextBox></asp:Panel>

Texto de ayuda

<asp:Panel ID="Panel15" CssClass="columnas_1" runat="server"> <asp:Label ID="Label10" runat="server" CssClass="medio" AssociatedControlID="TextBox10" Text="Label">grande</asp:Label> <asp:TextBox CssClass="grande" ID="TextBox10" ToolTip="Ejemplo de un mensaje de ayuda asociado al campo" runat="server"></asp:TextBox></asp:Panel>

Radiobuttons y checkbox

<asp:CheckBoxList ID="CheckBoxList2" runat="server" RepeatLayout="Flow" CssClass="checkbox mediano" RepeatDirection="Vertical" > <asp:ListItem>Moda</asp:ListItem> <asp:ListItem>Televisión</asp:ListItem></asp:CheckBoxList>

Campos obligatorios

<asp:Panel ID="Panel22" CssClass="columnas_1" runat="server"> <asp:Label ID="Label15" runat="server" CssClass="medio" AssociatedControlID="TextBox7" Text="Label">pequeno</asp:Label> <asp:TextBox ID="TextBox7" CssClass="pequeno required" runat="server"></asp:TextBox></asp:Panel>

Validación de campos● Siempre con ValidationSumary● Display=none● Estilos: (msg) msg-error, msg-ok, msg-warn y msg-info● HeaderText=<h3>Datos incorrectos</h3>● Dentro de un panel

Campos con errores