DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Tuto WINDEV Mobile / Tuto - Développement d'une application Android et iOS
  • Leçon 5 - Fenêtre avec défilement
  • Présentation
  • Création de la fenêtre Fiche avec balayage
  • Principe
  • Création de la fenêtre et du champ Fenêtre interne
  • Création de la fenêtre interne
  • Gestion du balayage dans la fenêtre Fiche
  • Test de la fenêtre
  • Ouverture de la fiche depuis la liste des produits
  • Test
  • En résumé

Tuto - Développement d'une application Android et iOS

Leçon 5 - Fenêtre avec défilement
Ce que vous allez apprendre :
  • Créer une fenêtre interne par refactoring.
  • Changement du contenu d'une fenêtre par balayage.
Durée de la leçon 20 mn
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, etc.). Nous les avons vues dans la leçon précédente.
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.
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.
Création de la fenêtre Fiche avec balayage

Principe

Une fenêtre fiche avec balayage utilise le principe des fenêtre internes. L'information à faire défiler par balayage est intégrée dans une fenêtre interne. Il suffit ensuite de paramétrer les options de balayage.
Dans notre exemple, nous allons :
  • créer une nouvelle fenêtre. Cette fenêtre contiendra un champ Fenêtre interne.
  • créer une fenêtre interne qui contiendra les informations à afficher (dans notre cas, la "fiche produit").
  • mettre en place le balayage dans la fenêtre.

Création de la fenêtre et du champ Fenêtre interne

Nous allons tout d'abord créer une fenêtre vierge. Cette fenêtre va contenir un champ "Fenêtre interne".
Pour créer la fenêtre vierge :
  1. Cliquez sur Créer un élément parmi les boutons d'accès rapide.
  2. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Fenêtre" puis sur "Fenêtre".
  3. Dans l'assistant, sélectionnez l'onglet "Standard", choisissez "Vierge" et validez.
  4. 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_Avancé_FICHE_Produit".
  5. Validez.
Nous allons maintenant créer un champ Fenêtre interne dans la fenêtre Fiche "FEN_Avancé_FICHE_Produit". 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 (Ancrage 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 le volet "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 "UI", modifiez la largeur de la fenêtre : 360. Cette largeur correspond à la largeur du champ Fenêtre interne que nous avons créé dans la fenêtre "FEN_Avancé_FICHE_Produit".
  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_Avancé_FICHE_Produit" 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 "UI", 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".
      Paramétrage du balayage
  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 de données Produit :
    • Cliquez sur "Fichier/Requête".
    • Dans la source, pour l'option "Fichier parcouru", sélectionnez le fichier de données "Produit".
      Paramétrage de la source de la fenêtre interne
  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_Avancé_FICHE_Produit", affichez les événements WLangage du champ Fenêtre Interne.
  2. Dans l'événement "Sélection par balayage ...", saisissez le code WLangage 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 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 l'Action Bar 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_Avancé_FICHE_Produit" :
    • 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 l'événement "Sélection du menu", saisissez le code WLangage suivant :
      Produit.DepuisFenêtre()
      Produit.Enregistre()
      Ferme()
  7. Enregistrez les modifications en cliquant sur Enregistrer l'élément parmi les boutons d'accès rapide.
  8. Fermez la fenêtre de code.
Test de la fenêtre

Ouverture de la fiche depuis la liste des produits

Avant de tester la fenêtre, nous allons modifier la fenêtre "FEN_Avancé_LISTE_Produits" 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_Avancé_LISTE_Produits" sous l'éditeur (cliquez sur son nom dans la barre des documents ouverts).
  2. Affichez les événements WLangage liés au champ Zone répétée.
  3. Dans l'événement "Sélection d'une ligne ...", remplacez le code WLangage :
    Produit.LitRecherche(IDProduit,REQ_Produits.IDProduit)
    FEN_Fiche_du_produit.OuvreFenêtreMobile()
    par
    Produit.LitRecherche(IDProduit,REQ_Produits.IDProduit)
    FEN_Avancé_FICHE_Produit.OuvreFenêtreMobile()

Test

Nous allons maintenant tester le fonctionnement du projet sous le simulateur :
  1. Cliquez sur Tester le projet parmi les boutons d'accès rapide.
  2. Dans le champ 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.
    Balayage de la fenêtre
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 de la mise en place du balayage dans une fenêtre.
Dans la prochaine leçon, nous aborderons le sujet des impressions, disponibles en mobile sous forme de fichiers PDF.
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