Tablas desplazables para aplicaciones móviles basadas en datos

Los usuarios de dispositivos móviles siempre exigen la máxima información en el formato más conveniente, pero los tamaños de pantalla reducidos pueden obligar a realizar concesiones. Los desarrolladores de aplicaciones móviles se enfrentan al desafío de integrar datos, controles de navegación e información de ayuda en un diseño atractivo, o corren el riesgo de frustrar a los usuarios finales, que podrían ser clientes, colegas o ejecutivos de alto nivel. MobileTogether 2.1 introduce tablas con desplazamiento y otras novedades interesantes para ayudar a los desarrolladores a crear aplicaciones que presenten los datos de forma elegante y que funcionen de la misma manera en todos los dispositivos.

Tablas con desplazamiento

MobileTogether 2.1 permite a los desarrolladores definir tablas que pueden desplazarse horizontalmente o verticalmente, con una cabecera y un pie de página que permanecen en posiciones fijas. El desplazamiento horizontal permite a los desarrolladores mostrar más columnas de una tabla amplia sin reducir el tamaño del texto a un punto ilegible. El desplazamiento vertical puede permitir que información importante y relevante permanezca visible en la pantalla en todo momento, mejorando la claridad.

La función de desplazamiento vertical es especialmente útil para tablas con filas repetidas, ya que el desarrollador no sabe, en el momento del diseño, cuántas filas de datos se podrán mostrar finalmente en la pantalla de cada usuario. A continuación, se muestra una tabla sencilla de 4 columnas con filas repetidas, creada en el entorno de diseño MobileTogether:

En el cuadro de diálogo "Nueva tabla", definimos el número de columnas, el número de filas (que puede variar), y las filas de encabezado y pie de página. Luego, agregamos etiquetas a la columna de encabezado, controles al pie de página, y especificamos propiedades para el tamaño y los colores del texto.

Podemos implementar el desplazamiento vertical definiendo la altura máxima de la tabla en la ventana de ayuda "Estilos y propiedades", y luego eligiendo si toda la tabla se desplaza, o solo las filas internas entre el encabezado y el pie de página. La altura máxima puede ser un porcentaje, un número específico de píxeles, o puede optar por que se ajuste automáticamente al resto de la pantalla.

Para los desarrolladores que desean maximizar el área visible de la pantalla para mostrar datos, MobileTogether 2.1 incluye una nueva propiedad llamada "Página" que permite ocultar la barra de título de la página:

La línea azul claro en la parte inferior de nuestra tabla contiene elementos de navegación que permiten al usuario seleccionar un mes o año diferente. La columna del año, ubicada en el centro de la parte inferior, se creó utilizando el botón "Unir" en la barra de herramientas de MobileTogether para combinar las columnas 2 y 3 en un control más amplio. Puede unir columnas horizontal o verticalmente, o dividirlas nuevamente más adelante si cambia de opinión. Incluso puede incrustar una tabla completamente nueva dentro de una celda existente para crear una tabla jerárquica y diseñar el diseño perfecto para datos complejos.

Líneas verticales

MobileTogether 2.1 también introduce un nuevo control de línea vertical. Si desea agregar una línea vertical entre las columnas de cualquier tabla, simplemente tome una de la ventana de ayuda de "Controles" y arrástrela a la posición deseada, como se muestra en la vista del diseñador a continuación. La línea vertical se inserta en una nueva columna de la tabla, y puede establecer la propiedad de ancho de la columna en "wrap_content" para que ocupe el espacio mínimo.

Las propiedades de las líneas verticales se pueden ajustar de la misma manera que las líneas horizontales. La ventana de "Estilos y propiedades" para cada línea vertical le permite especificar el grosor de la línea, el estilo, el color, y los márgenes izquierdo y derecho en píxeles.

MobileTogether le permite definir la visibilidad de cualquier componente en función de la orientación. La tabla de 6 columnas que se muestra arriba es una versión alternativa que se mostrará únicamente en orientación horizontal, como indica el icono de paisaje en el lado izquierdo. Nuestra tabla original de 4 columnas se puede configurar para que se muestre solo en modo vertical.

La captura de pantalla que se muestra a continuación ilustra la aplicación final de tablas con desplazamiento, ejecutándose en un teléfono Android en orientación horizontal. El usuario puede desplazarse verticalmente a través de las filas de datos dentro de la tabla, mientras que los demás elementos permanecen en su lugar. Los controles "-" y "+" que se encuentran en la parte inferior son herramientas de navegación para seleccionar el mes anterior o el siguiente.

Un dispositivo con un tamaño de pantalla diferente puede mostrar más o menos filas de datos, pero la tabla seguirá ocupando la altura máxima que definimos en porcentaje

El programa MobileTogether Designer es gratuito, así que descargue una copia hoy mismo y comience a utilizar tablas desplazables para crear su propia aplicación móvil multiplataforma basada en datos.