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

Principe

• 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

1. Cliquez sur 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.

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

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

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.

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.

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 parmi les boutons d'accès rapide.
8. Fermez la fenêtre de code.

Ouverture de la fiche 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

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.