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>
Aplicaciones independientes 4. Web.Config <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 defecto CssClass="" Redondeado CssClass="redondeado" Simple CssClass="simple"
Asociar siempre Etiquetas <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