PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 24 !
  • Ce que vous allez apprendre dans cette leçon ...
  • Présentation
  • Utilisation des ancrages
  • Tester l'application
Leçon 5.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.

Durée estimée : 15 mn
Leçon précédenteSommaireLeçon suivante
Présentation
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 créé dans la leçon précédente.

Corrigé

Si vous n'avez pas créé l'application "WM Gestion Produits", un projet exemple est disponible. Ce projet permet de suivre cette leçon.
Pour ouvrir ce projet intermédiaire, dans la page d'accueil de WINDEV Mobile (Ctrl + <) cliquez sur "Cours d'auto-formation" puis sélectionnez "Application iOS/Android (avec fenêtres)".
Un projet corrigé est également disponible. Ce projet regroupe toutes les fenêtres réalisées dans cette leçon.
Pour ouvrir ce projet corrigé, dans la page d'accueil de WINDEV Mobile (Ctrl + <) cliquez sur "Cours d'auto-formation" puis sélectionnez "Application iOS/Android (Corrigé)".
Utilisation des ancrages
  • 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 :
    1. Ouvrez si nécessaire la fenêtre "FEN_Fiche_du_produit".
    2. Sous le volet "Fenêtre", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez l'option "Ajouter des agencements".
    3. L'assistant de création d'un agencement se lance.
    4. Passez à l'étape suivante de l'assistant.
    5. 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".
    6. Passez à l'étape suivante de l'assistant.
    7. 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. J'ai besoin de modifier la disposition des champs selon l'orientation".
    8. Passez à l'étape suivante de l'assistant.
    9. 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".
    10. 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 :
    1. 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.
    2. Cliquez sur (en haut à droite de la fenêtre principale, dans la barre de titre) pour activer le mode "dissociation automatique". Grâce à cette option, toute modification effectuée sur une des fenêtres spécifiques de l'agencement ne sera pas reportée sur les autres.
    3. Nous allons modifier la position des champs dans l'agencement :
      • Sélectionnez le champ correspondant à la photo du produit ainsi que les deux boutons et déplacez-les vers la gauche de la fenêtre.
      • Sélectionnez les champs "Nom" et "Date de réappro" et placez-les à droite de la photo et de ses boutons.
      • Sélectionnez les champs "Prix" et "Quantité" et déplacez-les sous la photo du produit à gauche.
      • Sélectionnez le champ "Code-barres" et son bouton et placez-les à droite du prix.
      • Sélectionnez le champ "Description" et placez-le à droite de la quantité. Diminuez la hauteur du champ si nécessaire.
  • Sélectionnez le champ Image. Le champ Image ainsi que les deux boutons sont entourés d'un trait rouge. En effet, il y a un conflit d'ancrage avec le champ Nom.
  • Nous allons donc modifier l'ancrage de ces champs :
    1. Sélectionnez le champ Image et les deux boutons.
    2. Affichez le menu contextuel et sélectionnez l'option "Agencements .. Dissocier l'ancrage".
    3. 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 :
Tester l'application
  • Pour lancer le test du projet :
    1. Cliquez sur parmi les boutons d'accès rapide.
    2. Votre projet démarre par la fenêtre de menu.
    3. Cliquez sur la liste des produits.
    4. Cliquez sur un produit. La fiche produit apparaît en mode portrait.
    5. Changez l'orientation de la fenêtre en cliquant sur l'icône du simulateur, puis en sélectionnant l'option "Rotation" du menu contextuel.
    6. L'agencement que nous avons défini pour le mode paysage est automatiquement affiché :
    7. Fermez la fenêtre de test de l'application.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire