ASP. NET. programación avanzada Interfaz de Usuario · Interfaz de Usuario Unificar formato....
Transcript of ASP. NET. programación avanzada Interfaz de Usuario · Interfaz de Usuario Unificar formato....
![Page 1: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/1.jpg)
ASP. NET. programación avanzada
Interfaz de Usuario
![Page 2: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/3.jpg)
Campus Virtual
![Page 4: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/4.jpg)
Aplicación independiente
![Page 5: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/5.jpg)
Web (Vualà)
![Page 6: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/6.jpg)
1. Crear carpeta virtual
Solicitud:https://aplicacionesua.cpd.ua.es/proyectos/formulario/generaParte.asp?id=22&idioma=C
/nombreAplicacion/plantillas
/Plantillas (desarrollo)
![Page 7: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/8.jpg)
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>
![Page 9: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/9.jpg)
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"/>
![Page 10: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/10.jpg)
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>
![Page 11: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/11.jpg)
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" />
![Page 12: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/12.jpg)
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>
![Page 13: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/13.jpg)
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>
![Page 14: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/14.jpg)
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>
![Page 15: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/15.jpg)
Agrupaciones de campos<asp:Panel ID="Panel1" runat="server" CssClass="" GroupingText="Datos Personales">Contenido</asp:Panel>
Por defectoCssClass=""
RedondeadoCssClass="redondeado"
SimpleCssClass="simple"
![Page 16: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/16.jpg)
EtiquetasAsociar siempre<asp:Label ID="LabelNombre" runat="server" Text="Nombre" AssociatedControlID="TextBoxNombre"></asp:Label>
<asp:Label ID="LabelNombre" CssClass="pequeno" Text="Nombre" ...
![Page 17: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/17.jpg)
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>
![Page 18: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/18.jpg)
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>
![Page 19: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/19.jpg)
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>
![Page 20: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/20.jpg)
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>
![Page 21: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/21.jpg)
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
![Page 22: 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](https://reader030.fdocuments.ec/reader030/viewer/2022040409/5ec0f3398fe22977d83b569d/html5/thumbnails/22.jpg)
Campos con errores