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