DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 2024 !
Aide / Tuto WINDEV Mobile / Tuto - Développement d'une application Android et iOS
  • 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é

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.
Durée de la leçon 15 mn
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.

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.
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 :
Mode Portrait
Mode Paysage
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 :
  1. Ouvrez si nécessaire la fenêtre "FEN_Fiche_du_produit" sous l'éditeur.
  2. Sous le volet "Fenêtre", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez l'option "Ajouter des agencements".
    Ajouter des agencements
    L'assistant de création d'un agencement se lance.
  3. Passez à l'étape suivante de l'assistant.
  4. 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".
    Différences téléphone/tablette
  5. Passez à l'étape suivante de l'assistant.
  6. 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".
    Différences Portrait/Paysage
  7. Passez à l'étape suivante de l'assistant.
  8. 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".
    Système d'exploitation
  9. 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 :
  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. L'option Dissociation automatique (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é.
  3. 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.
      Déplacement des champs
    • Sélectionnez les champs "Libellé" et "Description" et placez-les à droite du champ Image. Modifiez la taille des champs si nécessaire.
      Déplacement des champs
    • Sélectionnez les champs "Prix" et "Quantité" et déplacez-les sous le champ Image à gauche.
      Déplacement des champs
    • Sélectionnez le champ "Code-barres" et le champ Bouton associé et placez-les sous la description.
      Déplacement des champs
    • 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.
      Déplacement des champs
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 :
  1. Sélectionnez le champ Image et les deux champs Bouton.
  2. Affichez le menu contextuel et sélectionnez l'option "Agencements .. Dissocier l'ancrage".
    Option de menu
  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 Ancrage.
Vous obtenez l'interface suivante :
Interface finale
Tester l'application
Pour lancer le test du projet :
  1. Cliquez sur Tester le projet 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 Rotation du simulateur du menu du simulateur.
  6. L'agencement que nous avons défini pour le mode paysage est automatiquement affiché :
    Agencement en mode paysage
  7. Fermez la fenêtre de test de l'application.
En résumé
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.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 16/11/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale