• Créer une fenêtre interne par refactoring.
• Changement du contenu d'une fenêtre par balayage.

	Durée estimée : 20 mn

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_Avancé_FICHE_Produit".
  3. Validez.

• 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 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".
       
  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".
       
  6. Validez la fenêtre de description.

• 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 4.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 :
       
       EcranVersFichier()
       Produit.Enregistre()
       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).

• 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()
     

• Nous allons maintenant tester le fonctionnement du projet sous le simulateur :
  1. Cliquez sur 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.
     

• gestion des emails,
• gestion des notifications,
• utilisation du panel de visualisation,
• utilisation du débogueur,
• ...