Tableaux défilants pour applications mobiles basées sur les données

Les utilisateurs d'appareils mobiles exigent toujours un maximum d'informations, présentées de la manière la plus pratique possible, mais les petites tailles d'écran peuvent parfois entraîner des compromis. Les développeurs d'applications mobiles sont confrontés au défi d'intégrer des données, des éléments de navigation et des informations d'aide dans une interface agréable, au risque de frustrer les utilisateurs finaux, qui pourraient être des clients, des collègues ou des cadres dirigeants. MobileTogether 2.1 introduit des tableaux défilants et d'autres nouvelles fonctionnalités intéressantes pour aider les développeurs à créer des applications qui présentent les données de manière élégante et qui fonctionnent de la même manière sur tous les appareils.

Tableaux défilants

MobileTogether 2.1 permet aux développeurs de définir des tableaux qui peuvent être défilés horizontalement ou verticalement, avec un en-tête et un pied de page qui restent fixes. Le défilement horizontal permet aux développeurs d'afficher davantage de colonnes dans un tableau large sans réduire la taille du texte au point de le rendre illisible. Le défilement vertical peut permettre d'afficher en permanence des informations importantes à l'écran, améliorant ainsi la clarté.

Le défilement vertical est particulièrement utile pour les tableaux comportant des lignes répétitives, car le développeur ne sait pas, lors de la conception, combien de lignes de données peuvent finalement être affichées sur l'écran de chaque utilisateur. Ci-dessous, vous trouverez un exemple simple d'un tableau à 4 colonnes avec des lignes répétitives, créé dans l'outil MobileTogether Designer :

Dans la fenêtre de dialogue "Nouvelle table", nous avons défini le nombre de colonnes, le nombre de lignes dynamiques, ainsi que les lignes d'en-tête et de pied de page. Ensuite, nous avons ajouté des étiquettes à la colonne d'en-tête, des éléments de contrôle au pied de page, et nous avons spécifié les propriétés relatives aux tailles et aux couleurs du texte.

Nous pouvons implémenter le défilement vertical en définissant la hauteur maximale du tableau dans la fenêtre d'aide "Styles et propriétés", puis en choisissant si l'ensemble du tableau doit être défilant, ou seulement les lignes situées entre l'en-tête et le pied de page. La hauteur maximale peut être exprimée en pourcentage, en nombre de pixels, ou vous pouvez choisir de remplir automatiquement le reste de l'écran.

Pour les développeurs qui souhaitent maximiser la surface d'affichage de l'écran pour présenter des données, la version 2.1 de MobileTogether inclut une nouvelle propriété "Page" qui permet de masquer la barre de titre de la page :

La barre inférieure de notre tableau, de couleur bleu clair, contient des éléments de navigation qui permettent à l'utilisateur de sélectionner un mois ou une année différents. La colonne "année", située au centre de la barre inférieure, a été créée en utilisant le bouton "Joindre" de la barre d'outils MobileTogether, afin de combiner les colonnes 2 et 3 en un contrôle plus large. Vous pouvez joindre des colonnes horizontalement ou verticalement, ou les séparer à nouveau plus tard si vous changez d'avis. Vous pouvez même intégrer un tableau entier à l'intérieur d'une cellule existante pour créer un tableau hiérarchique et concevoir la mise en page idéale pour des données complexes.

Lignes verticales

MobileTogether 2.1 introduit également un nouveau contrôle de ligne verticale. Si vous souhaitez ajouter une ligne verticale entre les colonnes de n'importe quel tableau, sélectionnez simplement une ligne dans la fenêtre d'aide des contrôles et faites-la glisser à l'endroit souhaité, comme illustré dans la vue concepteur ci-dessous. La ligne verticale est insérée dans une nouvelle colonne du tableau, et vous pouvez définir la propriété de largeur de la colonne sur "wrap_content" pour qu'elle occupe le minimum d'espace.

Les propriétés des lignes verticales peuvent être ajustées de la même manière que celles des lignes horizontales. La fenêtre "Styles et propriétés" de chaque ligne verticale vous permet de spécifier l'épaisseur, le style, la couleur, ainsi que les marges gauche et droite en pixels.

MobileTogether vous permet de définir la visibilité de n'importe quel composant en fonction de l'orientation. Le tableau à 6 colonnes présenté ci-dessus est une version alternative qui ne sera affichée que lorsque l'appareil est en mode paysage, comme l'indique l'icône paysage située sur le côté gauche. Notre tableau original à 4 colonnes peut être configuré pour ne s'afficher que en mode portrait.

La capture d'écran ci-dessous montre l'application finale de tableaux défilants, exécutée sur un téléphone Android en mode paysage. L'utilisateur peut faire défiler les lignes de données en effectuant des mouvements verticaux à l'intérieur du tableau, et les autres éléments restent en place. Les commandes "+" et "-" situées dans le pied de page sont des outils de navigation permettant de sélectionner le mois précédent ou le mois suivant.

Un appareil doté d'une taille d'écran différente peut afficher plus ou moins de lignes de données, mais le tableau occupera toujours la hauteur maximale que nous avons définie en pourcentage

Le logiciel MobileTogether Designer est gratuit, alors téléchargez une copie dès aujourd'hui et commencez à utiliser les tableaux interactifs pour créer votre propre application mobile multiplateforme basée sur des données !