Interfaz de Usuario Tema

Programacin avanzada en .NET con C#Servicio de Informtica

INTERFAZ DE USUARIO

INTERFAZ DE USUARIOPlantilla de trabajoUno de los problemas que nos encontramos a la hora de comenzar una aplicacin es el formato con el que vamos a realizar una aplicacin, si es de Campus Virtual, si es una aplicacin aislada o recientemente si debe estar integrada en Vual. Esto lo soluciona de una forma muy sencilla las plantillas creadas y la clase UAPage (que veremos posteriormente), que sin modificar una lnea de cdigo, podemos visualizar la aplicacin con los diferentes entornos.

Aplicacin integrada en el marco de Campus Virtual

Aplicacin independiente

Aplicacin integrada en una pgina de Vual

1


INTERFAZ DE USUARIO

Control versiones idiomticaDesde el entorno de Visual Studio, tenemos controlados con los ficheros de recursos todo el tema de la traduccin de los contenidos de nuestra aplicacin. En las plantillas y en la clase UAPage hemos homogeneizado la deteccin y gestin de las versiones idiomticas, permitiendo pasar de una versin a otra con un solo clic (en las aplicaciones independientes en la barra inferior, y en Vual en la barra superior). El programador slo debe controlar las versiones idiomticas en la pgina de acceso, en el resto de pginas la propia plantilla se encarga de su gestin.

Aplicacin independiente en castellano

Aplicacin independiente en valenciano

Aplicacin integrada en Vual en castellano

Aplicacin integrada en Vual en valenciano

2


INTERFAZ DE USUARIO

Estilos personalizadosEs muy importante que el usuario identifique la informacin de un primer vistazo y sobre todo que pueda corregir los errores.

Si nos fijamos en la siguiente ventana identificamos algunos de los elementos.

Resaltado de los campos que dan problema

Ayuda en cada campo

3


INTERFAZ DE USUARIO

Personalizacin de los avisos (dependiendo de la gravedad)

Sumario de los errores

Personalizacin de los botones

Personalizacin de los fieldset

4


INTERFAZ DE USUARIO

Trabajo con layouts o columnasConsigue que el resultado final sea igual independiente de la resolucin con la que estemos trabajando. En un futuro muy cercano se ajustar para que se pueda ver igualmente en los mviles. Igualmente unifica que el resultado sea el mismo independiente del navegador.

1024x768

1280x1024

1920x1024

5


INTERFAZ DE USUARIO

UsoLos requisitos mnimos para trabajar con las plantillas son las siguientes: Plantilla o plantillas con las que queremos trabajar. Disponemos actualmente de 3 aunque una de ellas realmente la forman 3 (la de Vual necesita una por cada idioma) En http://desarrollocpd.campus.ua.es/Plantillas/material/masterpages.zip podemos encontrarlas o o o MasterPage.master MasterPageCV.master MasterPageUA.es.master - MasterPageUA.ca.master y MasterPageUA.en.master

En el caso de MasterPage.master debemos copiar tambin la carpeta/guiaestilo/masterpages /App_LocalResources para que los textos aparezcan en el idioma seleccionado.

Para seleccionar la plantilla al crear la pgina, marcamos seleccionar la pgina principal

Y dentro de la carpeta masterpages, seleccionamos la que nos interese.

6


INTERFAZ DE USUARIO

Clase para la gestin automtica de los idioma/guiaestilo/App_Code/UAPage.cs Todas nuestras pginas deben heredar de sta. El proceso es muy sencillo, cuando creamos una pgina, por defecto, nos genera un cdigo como el siguiente:

Reemplazamos System.Web.UI.Page por ua.UAPage. Desde ese momento en la carga de la pgina determina el idioma y configura la pgina a dicho idioma.

7


INTERFAZ DE USUARIO

Importante: la variable que almacena el idioma del usuario es Session["idioma"]. Todos usaremos la misma para unificar criterios. En el momento que se defina, ser ese el idioma por defecto hasta que lo cambie el usuario. Los valores posibles son es, ca y en. Se ha tomado ca y no va, para unificar con el estndar internacional.

La primera vez que accede, si no hemos definido ningn idioma por defecto, tomar por defecto el idioma que tenga configurado el navegador y en que caso de que no sea detectable, coger castellano.

Por ltimo hay que definir una variable en web.config para indicar de dnde se obtienen los CSS, las llamadas Javascript bsicas para el funcionamiento de las plantillas. Buscamos appSettings

Y le aadimos nuestra variable

En desarrollo

En produccin

8


INTERFAZ DE USUARIO

Maquetando Como se ha comentado anteriormente todo debe estar integrado en columnas (layout). Esto nos facilita que el contenido se ajuste a cualquier pantalla, aunque es posible que hasta que nos amoldemos a crear paneles para cada lnea, se nos haga algo tedioso. Trabajando con un formulario bsicos de una sola columna. Si nos fijamos en el siguiente formulario

Se necesitan 4 paneles con el estilo columnas_1, uno por cada fila que vamos a gestionar.

Y dentro el label y el textbox / DropDownList / etc. Correspondiente

9


INTERFAZ DE USUARIO

Trabajando con dos columnas Lo primero es crear dos paneles, para posteriormente asignarles el estilo indicando el tipo de columna. Si queremos que sean dos columnas de igual tamao, seleccionaremos el estilo, columnas_2. Columna de la izquierda Columna de la derecha

El resultado es el siguiente.

Si queremos trabajar con una columna de menos tamao (1/3) y otra de mayor tamao (2/3), seleccionaremos dos estilos. Columna de la izquierda Columna de la derecha

El resultado es el siguiente.

10


INTERFAZ DE USUARIO

Se puede cambiar el orden, para que la primera sea ms grande (columnas_2_3) y la otra ms pequea (columnas_1_3). No mezclar columnas_2 con columnas_1_3 o columnas_2_3.

11


INTERFAZ DE USUARIO

Trabajando con Fieldsets o agrupacin de campos En el cumplimiento de la Ley de Accesibilidad, debemos agrupar los campos del mismo estilo o de la misma temtica (por ejemplo datos personales) dentro de un fieldset. La utilidad es clara, una persona que no quiera rellenar los datos personales (porque por ejemplo ya los tenga rellenados), puede saltarse la seccin completa, sin tener que ir campo por campo esperando a llegar al que le interese. Para insertar un fieldset en .NET, el proceso es muy sencillo, aadimos un panel, en ese momento le podemos aplicar el layout o columnado (lo deben tener todas las filas), y por ltimo para indicar que es un fieldset, debemos acudir a la propiedad GroupingText y ponerle la descripcin (o legend) del fieldset). Si queremos un fieldset que ocupe una nica columna. Contenido

Resultado.

Hay 3 diseos para los fieldsets: 1. El que viene por defecto y que muestra un simple lnea horizontal

12


INTERFAZ DE USUARIO

2. Aplicando CssClass=redondeado obtendremos un borde redondeado alrededor de todos los elementos.

3. Aplicando CssClass=simple, hace un borde simple cuadrado alrededor de todos los elementos.

Trabajando con Label asociados a campos del formulario Al igual que se ha comentado anteriormente, y cumplimiento de la Ley de Accesibilidad, debe gestionarse todos los campos del formulario para que haya un Label asociado a cada campo. Para ello usaremos la propiedad AssociatedControlID que nos proporciona el componente Label. Si queremos generar un campo que solicita el nombre y otro los apellidos

Nombre Apellidos

13


INTERFAZ DE USUARIO

Como se coment anteriormente, es necesario agrupar todos los elementos en Panels (indicando el nmero de columnas). Esa es la razn de que cada label / TextBox est dentro de un panel. De esa manera nos aseguramos que se ve bien en cualquier dispositivo y resolucin. En caso de no hacerlo es posible que en determinadas resoluciones, un label se ponga detrs de un TextBox o que el TextBox baje abajo, etc. Ya hay unos tamaos predefinidos para los Label que permiten unificar el aspecto con el que se vern en diferentes dispositivos (pequeno, medio-s, medio, medio-x y grande).

Hay que indicarlo en CssClass del Label pequeno

Trabajando con campos del formulario Se han definido tamao para los campos TextBox. En este caso disponemos de 4 tamaos (pequeno, medio, medio-x y grande).

medio

14


INTERFAZ DE USUARIO

Si deseamos incorporar una ayuda al campo que se active al pulsar en ste usaremos la propiedad ToolTip de cualquiera de los elementos de un formulario. grande

Caso particular de los radiobuttons y checkbox Visual Studio de dos elementos muy tiles para trabajar con radio y checks que son RadioButtonList y CheckBoxList. El problema es que este elemento, por defecto se comporta como una tabla. Esto se configura con la propiedad RepeatLayout, que por defecto tiene el valor de Table. Siempre debe tener el valor a Flow. No es un elemento tabular, y por tanto no debemos usarlo si no es para ese propsito.

Adems nos da dos posibilidades, o mostrarlo en horizontal o en vertical. En el ejemplo siguiente vemos los checks y los radio en ambos formatos.

Como el cdigo que genera, siendo accesible, no es muy ortodoxo, hay que indicar al RadioButtonList o al CheckBoxList el tipo que es. Eso lo indicamos en el CssClass con radio o checkbox. 15


INTERFAZ DE USUARIO

Moda Televisin

Tambin es posible gestionar el tamao de los labels en cada uno de los casos. En el horizontal es importante para no separar mucho una opcin de otra. Para ello usaremos los tamaos de los labels como antes (pequeno, medio-s, medio, medio-x y grande). Moda Televisin

Campos obligatorios Para resaltar aquellos campos que son obligatorios usaremos un sencillo * en color rojo.

Para llevarlo a cabo se debe marcar el campo TextBox, DropDownList, etc, con la clase required. Adems tiene que estar el Label asociado al campo con la propiedad AssociatedControlID apuntando al campo, en caso contrario, no incluir la marca al Label. pequeno

Validacin de campos y agrupacin de mensajes en Summary La validacin de los campos tambin se va a hacer de una forma homognea. Para ello se crean los validadores y se marca la propiedad Display a none. Es recomendable que no aparezca el mensaje al lado del campo, porque como ya hemos comentado anteriormente, se puede descuadrar dependiendo del dispositivo con el que accedamos. Por eso usaremos ValidationSummary para recoger todos los mensajes de error.

16


INTERFAZ DE USUARIO

Se dispone de varios estilos para aplicar a los sumarios (msg-error, msg-ok, msg-warn y msg-info) cada uno con un color. El ms comn es msg-error que muestra el aviso en rojo.

Adems se puede personalizar el ttulo del sumario con la propiedad HeaderText. Si queremos que tenga el formato que se ve en la imagen, negrita, letra ms grande y un pequeo borde en la parte inferior, debemos incluirlo dentro de la etiqueta

El resultado con los otros formatos sera el siguiente msg-warn

msg-ok

msg-info

17


INTERFAZ DE USUARIO

Importante Como el resto de los elementos, el sumario debe estar dentro de un panel y adems con un estilo columnas_x (en este ejemplo columnas_1). En caso de no ponerlo, es posible que el estilo se aplique al Panel anterior, el que tiene todos los campos.

Resaltado de los campos que contienen errores Por defecto, el sistema resalta de forma automtica, todos aquellos campos que provocan el error. Adems se sita sobre el primer campo que contenga un error. Si tiene definida la ayuda o ToolTip, se activar.

En campo de tipo RadioButtonList o CheckBoxList el proceso es el mismo, incluir en CssClass required. Hombre Mujer

El resultado es el siguiente

18


INTERFAZ DE USUARIO

19


INTERFAZ DE USUARIO

INTEGRACIN CON VUALConsideraciones previasCada vez se hacen ms peticiones de que las aplicaciones que desarrollamos estn integradas dentro de las pginas de Vual. El usuario que navega no debe notar que ha cambiado de un entorno a otro, como ocurre actualmente, aunque la direccin cambie de un servidor a otro. Se ofrecen dos posibilidades, que todo vuestro entorno est en Vual, o que puedas personalizar una pgina concreta, o incluso bajo unas determinadas condiciones tenga un entono u otro (mirar anexos) Accesibilidad Las plantillas de Vual, cumplen la normativa de accesibilidad que deberamos cumplir en todas nuestras aplicaciones. Con un poco de cuidado y con algunos consejos que os daremos ms tarde, podis hacer vuestra aplicacin sea accesible y est preparado para diferentes entornos (diferentes resoluciones, tablets, mviles, etc.) Espacio para acceder a las plantillas Por medidas de seguridad las aplicaciones .NET no pueden acceder a las plantillas que hay en otras aplicaciones, para solucionar esta limitacin hay que solicitar al rea Windows, por medio de los partes: https://aplicacionesua.cpd.ua.es/proyectos/formulario/generaParte.asp?id=22&idioma=C, que nos cree una carpeta virtual /nombrenuestraaplicacion/plantillas a las plantillas de desarrollo. Es conveniente pedirlo para nuestra mquina de desarrollo como para preproduccin (si ya est creado el espacio en preproduccin).

InstalacinWeb.Config Si deseamos que TODAS nuestras pginas tengan el estilo de una pgina de Vual, slo hay que aadir dos entradas en appSetting. La primera es la pgina de Vual que se usara como plantilla (pagina-vuala) y otra que indicamos si queremos que sea aplique a todas las pginas (todo-vuala). La pgina que seleccionemos es independiente del idioma por lo que podemos coger cualquiera de las 3 versiones de la pgina que queremos que sea la plantilla y ya el sistema se encargar de obtener sus equivalencias.

20


INTERFAZ DE USUARIO

IMPORTANTE! No se puede coger una pgina raz de un sitio, como por ejemplo http:/si.ua.es/. Al menos se tiene que seleccionar la carpeta del idioma http:/si.ua.es/es/ o lo ms sencillo, navegar a la pgina pulsar otro idioma, volver a pulsar el idioma inicial, y copiar toda la direccin (en el caso del SI, vers que realmente la pgina principal se llama http://si.ua.es/es/servicio-de-informatica.html)

Nueva Plantilla de Trabajo (Masterpageua.master)Se ha creado una pgina maestra muy sencilla, que muestra un esqueleto, sin nada, de la estructura de Vual (una zona superior para la cabecera, un espacio para los mens y la zona real de trabajo). El resto de elementos (cabecera, mens, pie, etc.) se mostrarn en el momento que ejecutemos la aplicacin. La plantilla la podemos descargar de: http://desarrollocpd.campus.ua.es/Plantillas/material/masterpages.zip

Ficheros de TrabajoHay dos ficheros que ayudan en el proceso de gestin de las plantillas. Para poder hacer uso de ellos, los descargamos y los copiamos en AppCode http://desarrollocpd.campus.ua.es/Plantillas/material/App_Code.zip

UAPage.cs Este fichero se encarga de detectar el idioma con el que estamos trabajando y de poner la plantilla que corresponda. Para poder hacer uso de esta clase debemos acceder a cada fichero .cs, asociado a nuestras pginas, y cambiar: System.Web.UI.Page

por 21


INTERFAZ DE USUARIO

: ua.UAPage

ServicioPlantillas.cs Es una clase que encapsula las llamadas al WebService que nos gestiona las plantillas. Se usa desde UAPage.cs y slo en caso de que necesitemos gestionar nosotros las plantillas, haremos uso de esta clase. NOTA: Si queremos que no nos olvidemos de poner ua.UAPage, se puede aadir una etiqueta en web.config para que nos obligue a hacerlo. En caso contrario nos dar un error de compilacin. Dentro de

AnexosGestionar el uso de plantillas En caso que nos interese decir cundo y cul ser la plantilla a mostrar, tenemos que tener en cuenta lo siguiente: Debemos modificar la plantilla o MasterPage en el evento OnPreInit de UAPage. En cualquier otro caso puede provocar que los datos de nuestro formulario se pierdan (incluso el PreInit de

22


INTERFAZ DE USUARIO

nuestra pgina). Os recomiendo repasar el documento Ciclo de Vida de una pgina ASP.NET (http://msdn.microsoft.com/es-es/library/ms178472.aspx) Se han normalizado ciertos elementos: Enlaces a idiomas para la plantilla de Vual y en las plantillas de Aplicaciones. Los Ids son LinkButtonValencia, LinkButtonEnglish y LinkButtonCastellano Variables session para la gestin de los idiomas y las plantillas. Session["Plantilla"] para almacenar la ubicacin fsica de la pgina master y Session["idioma"] para indicar el idioma actual de la aplicacin (es, en y ca)

Ejemplo para cambiar la plantilla desde un desplegable Un ejemplo muy sencillo para poder probar la potencia es hacer un formulario con un desplegable (DropDownListPlantilla), que nos permita seleccionar una plantilla determinada.

El desplegable para el ejemplo puede tomar 3 valores CV, AppUA o VUALA. En los dos primeros casos coge una plantilla local nuestra, mientras que en el 3 caso obtiene por medio de un WebService, la plantilla de Vual que le corresponde. Lo siguiente es modificar en UAPage.cs el evento OnPreInit para detectar la plantilla antes de que se comience a gestionar los componente, los viewstates, etc. Recordar lo comentado al principio en caso de que gestionemos la modificacin de la plantilla en cualquier otro evento podemos obtener dos resultados, o que se pierdan los valores de los campos que ya estuvieran rellenos o que se refresque la plantilla en el siguiente evento, y no en el actual, porque las plantillas slo se refrescan en un PreInit.

23


INTERFAZ DE USUARIO

if (Page.IsPostBack) { string controlID = Request.Params["__EVENTTARGET"]; switch (controlID) { case "ctl00$MainContent$DropDownListPlantilla": if (Request.Form["ctl00$MainContent$DropDownListPlantilla"] != null) { switch (Request.Form["ctl00$MainContent$DropDownListPlantilla"]) { case "CV": Session["Plantilla"] = "~/masterpages/MasterPageCV.master"; break; case "AppUA": Session["Plantilla"] = "~/masterpages/MasterPage.master"; break; case "VUALA": if (ConfigurationManager.AppSettings["pagina-vuala"] != null) { // Recuperamos la plantilla por medio del WebService var wsPlantillas = new WebServicePlantillas(); // Si la plantilla la recuperemos de las variables AppSetting var plantillaUrl = ConfigurationManager.AppSettings["pagina-vuala"] .ToString(); // Si la indicamos a mano // var plantillaURL = "http://si.ua.es/es/" Session["Plantilla"] = wsPlantillas.ObtenerMasterPage(plantillaUrl, Session["idioma"].ToString()); } break; default: Session["Plantilla"] = null; break; } } break; } } // Asignamos la plantilla if (Session["Plantilla"] != null) { MasterPageFile = Session["Plantilla"].ToString(); }

24

Interfaz de Usuario Tema

Documents

Transcript of Interfaz de Usuario Tema