|
|
|
|
|
|
|
|
|
|
- Leçon 3 - Gérer l'orientation des fenêtres avec les agencements
- Présentation
- Utilisation des ancrages
- Utilisation des agencements
- Création des agencements
- Modification des agencements
- Tester l'application
- En résumé
Tuto - Développement d'une application Android et iOS
Leçon 3 - Gérer l'orientation des fenêtres avec les agencements Ce que vous allez apprendre : - L'intérêt des ancrages.
- Créer un agencement.
- Utiliser un agencement.
 15 mn Une application pour mobile peut le plus souvent être utilisée aussi bien en mode portrait qu'en mode paysage. L'interface d'une fenêtre utilisée en mode portrait peut varier pour être utilisée en mode paysage. Par défaut, WINDEV Mobile permet de gérer le changement d'orientation de l'appareil grâce aux ancrages. La plupart du temps, les ancrages suffisent à adapter l'affichage aux différentes orientations. Mais si l'interface doit changer selon l'orientation (positionnement des champs différent en mode portrait et paysage par exemple), les ancrages ne suffisent plus. Pour gérer une interface différente entre le mode portrait et le mode paysage, WINDEV Mobile propose la technique des agencements.
 Avertissement
Cette leçon est basée sur l'exemple WM Gestion Produits, manipulé dans la leçon 1. Pour suivre cette leçon, vous devez avoir effectué les manipulations des leçons précédentes.
Nous avons déjà utilisé les ancrages dans la fenêtre "FEN_Fiche_du_produit". En mode test, nous obtenons les interfaces suivantes : En mode paysage, nous retrouvons tous les champs affichés en mode portrait, cependant beaucoup d'espace est perdu et il est nécessaire de faire défiler la fenêtre pour accéder à tous les champs. Nous allons améliorer l'affichage en mode paysage grâce aux agencements. Utilisation des agencements Un agencement permet de définir plusieurs vues d'une fenêtre dans un même projet sans dupliquer cette fenêtre. Il est ainsi par exemple possible de définir : - une vue spécifique pour le mode portrait,
- une vue spécifique pour le mode paysage,
- une vue spécifique au téléphone,
- une vue spécifique à la tablette,
- etc.
Création des agencements Nous allons utiliser un assistant pour créer un agencement dans notre fenêtre : - Ouvrez si nécessaire la fenêtre "FEN_Fiche_du_produit" sous l'éditeur.
- Sous le volet "Fenêtre", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez l'option "Ajouter des agencements". L'assistant de création d'un agencement se lance.
- Passez à l'étape suivante de l'assistant.
- L'assistant propose de gérer les différences entre le téléphone et la tablette. Dans notre exemple, nous ne gérons pas les tablettes. Conservez l'option "Cette fenêtre s'affichera uniquement sur téléphone".
- Passez à l'étape suivante de l'assistant.
- L'assistant propose de gérer l'orientation Portrait/Paysage de l'application. C'est ce que nous allons faire dans cet exemple : cochez l'option "Créer des agencements".
- Passez à l'étape suivante de l'assistant.
- L'assistant propose d'utiliser une présentation différente pour chaque plateforme utilisée. Dans cet exemple, nous utiliserons la même présentation pour la plateforme Android et iOS. Sélectionnez l'option "Pas d'agencements spécifiques par OS".
- Terminez l'assistant.
Dans notre exemple, deux agencements sont créés. Ces agencements sont affichés sous forme de vignettes, à droite de la fenêtre "FEN_Fiche_du_produit".
Modification des agencements Nous allons modifier l'agencement du mode paysage : - Double-cliquez sur la vignette de l'agencement paysage "Paysage - MultiOS Téléphone" : la fenêtre correspondant à cet agencement s'affiche au centre de l'éditeur.
- L'option
 (en haut à droite de la fenêtre principale, dans la barre de titre) permet de savoir si le mode "Dissociation automatique" est activé.
 Si ce mode est activé, toute modification de position ou de taille effectuée sur un champ d'une des fenêtres spécifiques de l'agencement ne sera pas reportée sur les autres. - Nous allons modifier la position des champs dans l'agencement :
- Sélectionnez le champ Image correspondant à la photo du produit ainsi que les deux champs Bouton et déplacez-les vers la gauche de la fenêtre. Placez les deux champs Bouton sous le champ Image.
- Sélectionnez les champs "Libellé" et "Description" et placez-les à droite du champ Image. Modifiez la taille des champs si nécessaire.
- Sélectionnez les champs "Prix" et "Quantité" et déplacez-les sous le champ Image à gauche.
- Sélectionnez le champ "Code-barres" et le champ Bouton associé et placez-les sous la description.
- Sélectionnez :
- le champ "Référence" et placez-le à droite du libellé.
- le champ "Réappro" et placez-le à droite de "Quantité".
- Diminuez la hauteur des champs si nécessaire.
Cas du champ Image
Sélectionnez le champ Image. Le champ Image ainsi que les deux champs Bouton sont entourés d'un trait rouge. En effet, il y a un conflit d'ancrage avec le champ Libellé. Nous allons donc modifier l'ancrage de ces champs : - Sélectionnez le champ Image et les deux champs Bouton.
- Affichez le menu contextuel et sélectionnez l'option "Agencements .. Dissocier l'ancrage".
- Définissez le nouvel ancrage des champs :
- Affichez le menu contextuel des champs et sélectionnez l'option "Ancrage".
- Dans la fenêtre qui s'affiche, sélectionnez
 .
Vous obtenez l'interface suivante :
Pour lancer le test du projet : - Cliquez sur
 parmi les boutons d'accès rapide. - Votre projet démarre par la fenêtre de menu.
- Cliquez sur la liste des produits.
- Cliquez sur un produit. La fiche produit apparaît en mode portrait.
- Changez l'orientation de la fenêtre en cliquant sur l'icône
 du menu du simulateur. - L'agencement que nous avons défini pour le mode paysage est automatiquement affiché :
- Fermez la fenêtre de test de l'application.
Projet corrigé
Vous voulez vérifier le résultat de vos manipulations ?
Un projet corrigé est disponible. Ce projet contient les différentes fenêtres créées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Développement d'une application Android/iOS", double-cliquez sur "Gestion de produits Android/iOS - Corrigé". Cette leçon nous a permis de découvrir l'intérêt des agencements par rapport aux simples ancrages, et comment les mettre en place. La prochaine leçon va nous permettre d'aborder une fonctionnalité courante des applications mobiles, en proposant une recherche dans l'Action bar de l'application. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|