Ejemplo 1
Control Menú
MyMobileWeb ofrece diferentes esquemas de presenctación que dependen del contexto de entrega y las políticas (hints) definidas por el programador. En este ejemplo se muestra cómo el mismo menú (que se muestra en el gráfico a continuación) puede ser presentado de diferentes formas sólo cambiando las propiedades CSS. De hecho, la redefinición CSS depende del dispositivo, es un potente mecanismo para implementar el concepto de ‘adaptación flexible múltiple’.
Es de notar que MyMobileWeb podrían tomar decisiones en nombre de los desarrolladores y hacer que un control visual se presente de una determinada forma porque es la más apropiada y óptima para un determinado contexto de entrega. La figura a continuación representa la pagina XML que contiene la declaración del menú tomada como ejemplo. El menú tiene varias opciones, y cada opción tiene una imagen asociada (atributo resourceid) y descripciones cortas y largas. Durante el desarrollo del ejemplo (y en las subsiguientes figuras) se mostrará cómo se puede controlar la visualización de los diferentes elementos decorativos del menú (imagen, descripción corta, descripción larga, alternando colores), el diseño del menú (vertical, grid, etc) y el aspecto final del mismo.
La primera captura de pantalla corresponde a la versión más simple de un menú en el que figura como una lista de enlaces seleccionables por el usuario. Las diferentes opciones de menú tienen colores alternativos.
La figura a continuación representa el mismo menú con un número y de la descripción completa de cada opción. MyMobileWeb por defecto genera las teclas de acceso rápido para las opciones de menú. Los números son a veces útiles para recordar al usuario la disponibilidad de teclas de acceso rápido para seleccionar las opciones.
En el siguiente ejemplo el menú está decorado con una pequeña imagen. En este caso, la imagen corresponde a la bandera del país.
En el siguiente ejemplo se puede ver un elegante menú que aparece en un diseño de cuadrícula de dos columnas. Es importante señalar que, si un dispositivo no es capaz de mostrar un menú en modo cuadrícula (debido a las limitaciones del navegador, por ejemplo) MyMobileWeb lo presentará en disposición vertical.
El siguiente caso de uso (el gráfico a continuación) es un menú configurado como diseño en grid (3 columnas).
Puede haber casos donde sea necesario (debido a las limitaciones de espacio, por ejemplo) mostrar un menú como una lista emergente y un botón ‘aceptar’ (figura a continuación). También en dispositivo con capacidad de script el menú podría ser sensible al cambio evitando la necesidad de un botón ‘aceptar’.
Por último, debido a limitaciones de espacio no se ilustran dos características importantes del componente Menú de MyMobileWeb:
* Vinculación de Datos. El menú se puedan cumplimentar con datos almacenados en el modelo de aplicación utilizando el formalismos de vinculación de datos ( atributo optionsbind ).
* Paginación Automática. Si el atributo pagination esta a true, MyMobileWeb paginará automáticamente el número de opciones del menú, para reducir al mínimo el scroll y aumentar la usabilidad.
La vinculación de datos y las características de paginación se ilustran en el ejemplo del componente Tabla.
