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
  • Création de la fenêtre Fiche avec balayage
  • Création de la fenêtre Fiche
  • Création de la fenêtre interne
  • Gestion du balayage dans la fenêtre Fiche
  • Test de la fenêtre
  • Conclusion
Leçon 5.5. Fenêtre avec défilement
Ce que vous allez apprendre dans cette leçon
  • Créer une fenêtre interne par refactoring.
  • Changement du contenu d'une fenêtre par balayage.

Durée estimée : 20 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Dans les applications Windows, toutes les manipulations sont réalisées grâce à la souris ou au clavier.
En mobile, les interfaces doivent être pensées différemment. Avec les écrans tactiles, toutes les manipulations se font directement avec les doigts.
Dans les applications pour les appareils mobiles, WINDEV Mobile propose de nombreuses fonctionnalités pour gérer les mouvements spécifiques des doigts (pull to refresh, double touch, sliding, ...).
Dans cette leçon, nous allons créer une nouvelle fenêtre fiche, permettant de visualiser les produits.
Dans cette fenêtre, il sera possible de passer d'une fiche produit à une autre par un simple balayage.

Corrigé

Si vous n'avez pas créé l'application "WM Gestion Produits" dans la partie précédente, un projet corrigé est disponible. Ce projet contient toutes les fenêtres créées dans cette partie et vous permet de vérifier vos manipulations.
Pour ouvrir ce projet, dans la page d'accueil WINDEV Mobile (Ctrl + <), cliquez sur "Cours d'auto-formation" puis sélectionnez "Application iOS/Android (Corrigé)".
Création de la fenêtre Fiche avec balayage

Création de la fenêtre Fiche

  • Pour créer la fenêtre fiche :
    1. Créez une nouvelle fenêtre vierge.
      • Cliquez sur parmi les boutons d'accès rapide.
      • La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Fenêtre" puis sur "Fenêtre".
      • Dans l'assistant, sélectionnez l'onglet "Standard", choisissez "Vierge" et validez.
    2. Dans la fenêtre de sauvegarde de l'élément, indiquez :
      • le titre de la fenêtre : "Fiche du produit".
      • le nom de la fenêtre : "FEN_Fiche_du_produit_Avancé".
    3. Validez.
Nous allons maintenant créer un champ Fenêtre Interne dans la fenêtre Fiche "FEN_Fiche_du_produit_Avancé". Ce champ va accueillir une fenêtre interne qui affichera les données à faire défiler.
  • Pour créer le champ Fenêtre Interne :
    1. Sous le volet "Création", dans le groupe "Conteneurs", déroulez "Fenêtre interne" et sélectionnez "Zone de balayage (Fenêtre interne)".
    2. Cliquez dans la fenêtre à la position où le champ doit être créé (en haut à gauche).
    3. Redimensionnez le champ Fenêtre Interne pour qu'il occupe tout l'espace disponible de la fenêtre.
    4. Modifiez l'ancrage du champ Fenêtre Interne (option "Ancrage" dans le menu contextuel) : ancrez le champ en hauteur et en largeur ().
    5. Validez.

Création de la fenêtre interne

  • Pour simplifier la création de la fenêtre interne, nous allons la créer directement à partir de la fenêtre "FEN_Fiche_du_produit" présente dans notre projet :
    1. Ouvrez si nécessaire la fenêtre "FEN_Fiche_du_produit" sous l'éditeur (double-cliquez sur son nom dans l'explorateur de projet par exemple).
    2. Sélectionnez tous les champs de l'agencement portrait (Ctrl + A).
    3. Affichez le menu contextuel et sélectionnez l'option "Refactoring .. Créer une fenêtre interne avec la sélection".
    4. La fenêtre interne est automatiquement créée et la fenêtre de sauvegarde apparaît. Donnez le nom "FI_Produit" et validez.
    5. Affichez sous l'éditeur la fenêtre interne qui a été créée : cliquez sur le bouton "FI_Produit" dans la barre des éléments ouverts.
    6. Affichez la fenêtre de description de la fenêtre interne. Dans l'onglet "IHM", modifiez la largeur de la fenêtre : 320. Cette largeur correspond à la largeur du champ Fenêtre interne que nous avons créé dans la fenêtre "FEN_Fiche_du_produit_Avancé".
    7. Validez.

Gestion du balayage dans la fenêtre Fiche

  • Pour associer la fenêtre interne à la fenêtre Fiche :
    1. Affichez la fenêtre "FEN_Fiche_du_produit_Avancé" sous l'éditeur (cliquez sur son nom dans la barre des éléments ouverts).
    2. Sélectionnez le champ Fenêtre Interne et affichez sa description (option "Description" du menu contextuel).
    3. Dans l'onglet "Général", sélectionnez la fenêtre interne que nous venons de créer "FI_Produit".
    4. Dans l'onglet "IHM", dans la zone "Changement de contenu par balayage" :
      • L'option "Autoriser le changement de contenu par balayage" est déjà cochée car nous avons choisi le champ Fenêtre Interne pour balayage.
      • Cochez l'option "Se positionner sur l'enregistrement courant lors de l'ouverture de la fenêtre interne".
      • Par défaut, l'orientation du balayage est "Horizontal".
    5. Dans l'onglet "Contenu", nous allons configurer le mode de remplissage de la fenêtre interne. Cette fenêtre va afficher les données du fichier Produit :
      • Cliquez sur "Fichier/Requête".
      • Dans la source, sélectionnez le fichier "Produit".
    6. Validez la fenêtre de description.
Le balayage est mis en place.
  • Pour ne pas être gêné par l'apparition du clavier lors du balayage, nous allons utiliser la fonction ClavierVisible :
    1. Dans la fenêtre "FEN_Fiche_du_produit_Avancé", affichez les traitements du champ Fenêtre Interne.
    2. Dans le traitement "Sélection par balayage ...", saisissez le code suivant :
      ClavierVisible(Faux)
    3. Fermez l'éditeur de code.
  • Pour finir cette fenêtre, nous allons ajouter l'option de validation dans l'Action Bar de la fenêtre (nous avons déjà réalisé cette opération dans la leçon 5.2 paragraphe "Gestion de la création et de la modification d'un produit", nous présentons ici uniquement les points importants) :
    1. Sélectionnez l'Action Bar (en haut de la fenêtre).
    2. Affichez la fenêtre de description de l'Action Bar.
    3. Cliquez sur le numéro 2. L'interface de saisie d'une option de la barre d'outils apparaît.
    4. Cliquez sur le bouton "+" pour ajouter une option. Une nouvelle option par défaut est créée en haut à droite.
    5. Modifiez les caractéristiques de cette option :
      • Dans la zone "Libellé", saisissez "Valider".
      • Dans la zone "Image prédéfinie", déroulez la liste et sélectionnez "Valider".
      • Validez la fenêtre de description.
    6. Pour saisir le code permettant d'enregistrer les modifications effectuées dans la fenêtre "FEN_Fiche_du_produit_Avancé" :
      • Sélectionnez si nécessaire le champ Action Bar de la fenêtre.
      • Cliquez sur le bouton "OK".
      • Un menu déroulant avec l'option "Valider" apparaît.
      • Faites un clic droit sur l'option.
      • Dans le menu contextuel qui s'affiche, sélectionnez l'option "Code".
      • Dans le traitement "Sélection du menu", saisissez le code suivant :
        EcranVersFichier()
        HEnregistre(Produit)
        Ferme()
    7. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
    8. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).
Test de la fenêtre
Avant de tester la fenêtre, nous allons modifier la fenêtre "FEN_Liste_des_produits_Avancé" pour ouvrir directement la fenêtre fiche que nous venons de créer.
  • Pour ouvrir la fenêtre fiche avec balayage depuis la liste des produits :
    1. Affichez la fenêtre "FEN_Liste_des_produits_Avancé" sous l'éditeur (cliquez sur son nom dans la barre des éléments ouverts).
    2. Affichez les traitements liés au champ Zone répétée.
    3. Dans le traitement "Sélection d'une ligne ... ", remplacez le code :
      HLitRecherche(Produit,IDProduit,REQ_Produits.IDProduit)
      OuvreFenêtreMobile(FEN_Fiche_du_produit)
      par
      HLitRecherche(Produit,IDProduit,REQ_Produits.IDProduit)
      OuvreFenêtreMobile(FEN_Fiche_du_produit_Avancé)
  • Nous allons maintenant tester le fonctionnement du projet sous le simulateur :
    1. Cliquez sur parmi les boutons d'accès rapide.
    2. Dans la zone répétée qui s'affiche, cliquez sur un produit pour afficher sa fiche.
    3. Cliquez dans la fiche du produit et déplacez la souris vers la droite ou la gauche. La fiche du produit change automatiquement.
Conclusion
Cette partie vous a présenté les bases pour le développement d'applications Android ou iOS.
Beaucoup de thèmes n'ont pas pu être abordés dans cette partie :
  • gestion des emails,
  • gestion des notifications,
  • utilisation du panel de visualisation,
  • utilisation du débogueur,
  • ...
N'hésitez pas à consulter l'aide en ligne pour chercher, découvrir, tester de nouvelles fonctionnalités.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire