Créez un tableau de bord mobile qui impressionnera n'importe quel dirigeant

Dans un article précédent intitulé Créer des applications mobiles élégantes, nous avons présenté des exemples d'une application simple et d'un tableau de bord mobile complet fonctionnant sur plusieurs appareils mobiles. Les développeurs mobiles peuvent également satisfaire les utilisateurs finaux en leur permettant de personnaliser l'expérience de l'application. MobileTogether permet aux développeurs d'adapter les applications multiplateformes à chaque plateforme mobile et de donner aux utilisateurs la possibilité de personnaliser la taille du texte grâce à une interface simple et intuitive.

Permettre à chaque utilisateur de définir la taille de police préférée en fonction de ses conditions de visualisation permet de faire preuve de courtoisie envers les utilisateurs et soulage les développeurs de la tâche consistant à déterminer la taille de police appropriée pour tous les appareils.

Permettez aux utilisateurs de choisir la taille du texte

Vous pouvez utiliser soit deux boutons distincts, soit un curseur, pour permettre aux utilisateurs de régler la taille du texte affiché dans une application mobile.

Deux boutons pour modifier la taille du texte

L'application de rapport de ventes de l'entreprise, dont nous avons parlé précédemment, utilise la technique des deux boutons.

La rangée inférieure de commandes comprend deux boutons de modification de la taille du texte, dotés d'étiquettes claires et intuitives :

Ces boutons permettent d'augmenter ou de diminuer la valeur d'un élément de données persistant appelé "textSize", dans une plage de valeurs allant de 10 à 50.

Voici l'action de contrôle qui est attribuée au bouton de diminution :

Et voici l'action associée au bouton d'augmentation :

L'élément textSize est utilisé dans une fonction simple de MobileTogether pour créer une chaîne de caractères valide qui sera utilisée pour définir la taille du texte :

Enfin, la taille du texte pour chaque élément textuel de l'application est définie par une expression XPath, plutôt que par le menu déroulant de tailles présent dans la fenêtre des propriétés

Étant donné que l'élément "textSize" est défini dans l'arborescence de données persistantes, la sélection de la taille de texte effectuée par l'utilisateur est conservée pour la prochaine fois que l'application sera exécutée sur cet appareil.

Cette méthode à deux boutons est efficace pour une application comportant seulement quelques pages principales, comme le rapport des ventes de l'entreprise, car l'utilisateur voit immédiatement le résultat et peut ajuster la taille selon ses préférences. Voici des exemples du rapport des ventes de l'entreprise avec une police de caractères petite et une police de caractères grande :

Notez que le titre principal est plus grand que le corps du texte. Ceci est réalisé grâce à une deuxième fonction utilisateur pour le texte des titres, qui établit une relation entre la taille du corps du texte et celle du titre :

Curseur de taille du texte

Une autre façon de permettre à l'utilisateur de contrôler la taille du texte consiste à utiliser un curseur. Les développeurs devront toujours créer un élément de données persistant pour la taille du texte, créer des fonctions utilisateur pour construire la chaîne de caractères représentant la taille, et attribuer la propriété de la taille du texte sous forme d'expression XPath, comme décrit précédemment.

Mais parfois, l'espace disponible à l'écran est insuffisant pour afficher deux boutons permettant de modifier la taille du texte. Dans ce cas, vous pouvez utiliser un seul bouton pour accéder à un curseur de contrôle.

L'application mobile de tableau de bord des ventes, présentée ci-dessous, affiche les données de ventes pour n'importe quelle date, sous différentes formes graphiques. La barre de commandes située en haut offre plusieurs options de sélection de dates, mais ne dispose que de suffisamment d'espace pour un bouton supplémentaire permettant de modifier la taille du texte.

Dans cette application, le bouton A± ouvre une sous-page qui contient un curseur permettant aux utilisateurs de régler la valeur de l'élément textSize

Le texte d'exemple affiché sur la première ligne est redimensionné en temps réel lorsque l'utilisateur ajuste le curseur. Lorsque l'utilisateur clique sur le bouton "retour", la page principale est réaffichée avec les éléments de texte redimensionnés. Comme pour la méthode utilisant deux boutons, l'élément "textSize" est stocké en tant que données persistantes, et le choix de l'utilisateur sera restauré la prochaine fois que l'application sera lancée.

Certaines applications peuvent comporter plusieurs éléments qui sont appropriés pour être enregistrés en tant que paramètres utilisateur, tels que les unités de mesure (pouces par rapport aux centimètres), les devises (dollars par rapport aux euros), ou une adresse par défaut ou un nom de fichier d'image. Dans ce cas, les développeurs peuvent créer une seule page de préférences permettant à l'utilisateur de visualiser et de modifier tous les paramètres utilisateur persistants en un seul endroit.

MobileTogether Designer est un outil gratuit qui permet de mettre en œuvre rapidement toutes ces fonctionnalités avancées pour les applications multiplateformes, compatibles avec Android, iOS, Windows 8, Windows 10, Windows Phone 8, ainsi que pour une interface utilisateur basée sur un navigateur HTML-5. Téléchargez une copie et commencez dès aujourd'hui !