- Ce que vous allez apprendre dans cette leçon ...
- Présentation
- Utilisation des ancrages
- Tester l'application
Leçon 4.3. Gérer l'orientation des fenêtres avec les agencements Ce que vous allez apprendre dans cette leçon ... - L'intérêt des ancrages.
- Créer un agencement.
- Utiliser un agencement.
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.
- Pour suivre cette leçon, ouvrez si nécessaire le projet "WM Gestion Produits" que vous avez manipulé dans la leçon précédente.
- Affichez la page d'accueil de WINDEV Mobile (Ctrl + <).
- Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 4 - Développement d'une application Android/iOS", double-cliquez sur "Gestion de produits Android/iOS - Exercice".
- WINDEV Mobile vous propose d'ouvrir le projet que vous avez manipulé dans la leçon précédente. Vous pouvez ouvrir le projet présent sur votre poste ou ouvrir le projet original. Choisissez "Ouvrir la copie locale".
| | |  | Corrigé | 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 "Partie 4 - Développement d'une application Android/iOS", double-cliquez sur "Gestion de produits Android/iOS - Corrigé". |
- 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. | | |  | Note | L'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,
- ...
|
- Pour créer un nouvel agencement :
- Ouvrez si nécessaire la fenêtre "FEN_Fiche_du_produit".
- 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".
- Validez 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".
- 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. Conservez le mode "Dissociation automatique" activé. - 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.
- 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.
|
|
|
|