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

1. Cliquez sur le bouton parmi les boutons d'accès rapide.
2. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Etat" puis sur "Etat". L'assistant de création d'un état se lance. L'assistant de création d'un état propose plusieurs types d'états :
   
3. Sélectionnez "Fiche". Passez à l'étape suivante.
4. Sélectionnez la source des données de l'état. L'état va être basé sur le fichier de données Produit. Sélectionnez "Un fichier de données ou une requête existante".
   
   Passez à l'étape suivante.
5. Dans la liste des fichiers de données et des requêtes, sélectionnez le fichier de données "Produit".
   
   Passez à l'étape suivante.
6. Définissez la clé de parcours du fichier de données. Dans notre cas, nous allons parcourir le fichier de données Produit selon la référence du produit. Sélectionnez la clé de parcours "Référence".
   
   Passez à l'étape suivante.
7. L'assistant permet maintenant de définir les options de tri des données dans l'état. Par défaut, l'assistant propose la rubrique utilisée comme clé de parcours du fichier de données.
   
   Conservez les options par défaut et passez à l'étape suivante.
8. L'assistant demande d'indiquer s'il y a une rupture.
   
   

   Qu'est-ce qu'une rupture ?

   Une Rupture est une opération qui consiste à regrouper des enregistrements (ou lignes) suivant un ou plusieurs critères. Attention, les enregistrements (ou lignes) sont bien entendu imprimés.

   Une rupture est OBLIGATOIREMENT liée à un tri.

   Pour plus de détails, consultez Rupture dans un état.
   
9. Dans cet exemple, nous n'utiliserons pas de rupture. Répondez "Je ne veux pas de rupture dans l'état". Passez à l'étape suivante.
10. Cette étape permet d'indiquer dans quel ordre sont imprimées les rubriques et leur répartition dans les différents blocs.
    • La rubrique IDProduit ne sera pas affichée dans l'état : décochez la rubrique IDProduit.
    • Les rubriques seront affichées dans le bloc Corps selon l'ordre suivant :
      • Libellé
      • Photo
      • Description
      • Code_Barres
      • Prix
      • Reférence
      • Quantité
      • DateRéAppro
    • Pour chaque rubrique, sélectionnez la ligne correspondante et utilisez les boutons fléchés à droite de la liste pour modifier sa position dans la liste.
      
11. Passez à l'étape suivante.
12. L'état affichant des rubriques de type numérique, cette étape permet de définir si des calculs doivent être effectués dans l'état. Dans notre exemple, aucun calcul ne doit être réalisé. Cliquez sur le bouton "Aucun calcul".
    
    Passez à l'étape suivante.
13. Cette étape permet de définir la mise en page de l'état.
    
    Nous garderons les valeurs par défaut avec l'orientation "Portrait".
    
    

    Marges d'impression
    Lors du choix des marges d'impression, n'oubliez pas de tenir compte des marges physiques des imprimantes. Les marges physiques sont les marges réservées par l'imprimante dans lesquelles il n'est pas possible d'imprimer. De plus, les marges physiques diffèrent en fonction des modèles d'imprimante.
14. Passez à l'étape suivante.
15. Cette étape permet de sélectionner le gabarit utilisé pour l'état. Il est conseillé d'utiliser le même gabarit que pour les fenêtres. Dans notre cas, sélectionnez par exemple le gabarit "Material 3".
    
    Passez à l'étape suivante.
16. Il ne reste plus qu'à donner un nom et un libellé à l'état et à le sauvegarder.
    • Saisissez le nom : "ETAT_Produit".
    • Saisissez le titre : "Catalogue Produits".
      
      Avertissement
      Le nom et le titre sont différents.
17. Validez.
18. L'état apparaît sous l'éditeur d'états.
    
    
19. Enregistrez l'état (Ctrl + S).

1. Cliquez sur parmi les boutons d'accès rapide.
2. Dans la fenêtre de choix du mode d'impression, sélectionnez "Visualisateur de rapports".
   
3. Validez. L'état s'exécute et s'affiche à l'écran en mode "Aperçu".
   

L'impression via le visualisateur de rapports permet d'obtenir un aperçu réel de l'impression. Ce mode d'impression est disponible uniquement lors du développement de l'application mobile.

Suppression des libellés

• un champ Libellé qui contient le libellé du champ ("Descr.:" dans notre état).
• un champ Libellé lié à la rubrique du fichier de données dans lequel les données seront affichées.

Modification du libellé du produit

1. Sélectionnez le champ correspondant au libellé du produit.
2. Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
3. Dans l'onglet "Style", sélectionnez l'élément "Libellé principal".
4. Pour l'option "Police", sélectionnez "Arial".
5. Pour l'option "Taille", saisissez 20.
6. Validez la fenêtre de description.
7. Adaptez la taille du champ (option "Adapter la taille" du menu contextuel) et positionnez-le en haut à gauche du bloc "Corps".

Photo, référence et description du produit

Code-barres du produit

1. Supprimez le champ affichant le code-barres du produit.
2. Déplacez les champs placés dessous vers le bas.
3. Sous le volet "Création", dans le groupe "Données", déroulez "Code-barres" et sélectionnez "EAN 128". Cliquez dans l'état sous le champ correspondant à la description du produit.

1. Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
2. Dans l'onglet "Liaison", sélectionnez la rubrique "Code_Barres" du fichier de données Produit.
3. Validez la fenêtre de description du champ.

Prix du produit

1. Déplacez le champ correspondant au prix du produit à droite du champ Code-barres.
2. Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
3. Dans l'onglet "Style", sélectionnez l'élément "Libellé principal".
4. Les modifications à effectuer sont :
   • Pour l'option "Taille", saisissez 20.
   • Cochez les cases "G" (gras) et "I" (Italique).
5. Validez la fenêtre de description.
6. Agrandissez si nécessaire le champ pour que le libellé apparaisse en entier.

Date de réapprovisionnement du produit

1. Sélectionnez le champ "Réappro.".
2. Appuyez sur la touche Espace du clavier : le libellé passe en modification.
3. Remplacez le libellé par "Date de réappro.".
4. Validez (touche Entrée).
5. Affichez le menu contextuel du champ et sélectionnez l'option "Adapter la taille".

1. Sélectionnez le champ correspondant à la date de réapprovisionnement.
2. Sous le volet "Modification", dans le groupe "Edition rapide", cliquez sur l'icône "Aligné à droite".
3. La date est automatiquement alignée à droite.

1. Sélectionnez les champs (libellés et rubriques) correspondant à la quantité et à la date de réapprovisionnement.
2. Positionnez ces champs sous le code-barres.

Test de l'état

Exécutez cet état en cliquant sur parmi les boutons d'accès rapide.

Choisissez "Visualisateur de rapports" et validez. L'état s'exécute et s'affiche dans le visualisateur de rapports.

Ajouter une option dans le champ Zone multiligne

1. Affichez la fenêtre "FEN_Menu" sous l'éditeur (double-cliquez sur son nom dans le volet "Explorateur" par exemple).
2. Sélectionnez le champ Zone multiligne qui permet d'afficher le menu.
3. Affichez la fenêtre de description du champ (option "Description" du menu contextuel).
4. Dans l'onglet "Général", ajoutez une nouvelle ligne entre l'option "Carte des magasins" et l'option "Quitter l'application" :
   • Cliquez sur le bouton "Nouvelle".
   • Dans l'assistant qui s'affiche, choisissez "Ligne simple avec picto".
   • Cliquez sur "Terminer".
5. Dans la fenêtre de description du champ Zone multiligne, sélectionnez la ligne ajoutée et utilisez la flèche pour remonter la ligne à la position supérieure (avant "Quitter l'application").
6. Validez la fenêtre de description.

Paramétrer l'option ajoutée

1. Cliquez sur le champ Image de la troisième ligne.
2. Affichez la fenêtre de description de l'image (double-clic sur le champ).
3. Dans la fenêtre de description :
   • Donnez un nom à l'image (par exemple "IMG_Imprimer").
   • Cliquez sur le bouton à droite du champ "Image". Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue" afin de choisir une image représentant l'action.
   • Dans la fenêtre du catalogue d'images, saisissez dans le champ de recherche le mot "Imprimer" et appuyez sur la touche Entrée.
   • Sélectionnez une image par un double-clic.
   • Dans la fenêtre de paramétrage de l'image générée, sélectionnez une taille (par exemple, L (Largeur) = 80 et H (Hauteur) = 80), donnez un nom à l'image (par exemple "Imprimer") et validez.
4. Validez la fenêtre de description.

1. Cliquez sur le champ Libellé de la troisième ligne.
2. Affichez la fenêtre de description (double-clic sur le champ).
3. Dans l'onglet "Général" de la fenêtre de description :
   • Donnez un nom au champ (par exemple "LIB_Imprimer").
   • Changez le libellé (par exemple "Imprimer le catalogue").
4. Validez la fenêtre de description.
5. Le menu apparait sous l'éditeur.

1. Sélectionnez le champ Libellé "Carte des magasins".
2. Sous l'onglet "Style", dans le groupe "Style et gabarit", cliquez sur le bouton "Copier le style".
3. Le curseur de souris se transforme en pinceau.
4. Cliquez sur le champ Libellé "Imprimer le catalogue". Le style est automatiquement appliqué au champ.

Vous obtenez la fenêtre suivante :

Programmation de l'impression

1. Sélectionnez le champ Zone multiligne.
2. Affichez les événements WLangage associés (touche F2).
3. Remplacez la ligne :
   
   CAS 3 // Sortir de l'application
   Ferme()
   
   par :
   
   CAS 3 // Imprimer le catalogue
   iDestination(iPDFGénérique)
   ETAT_Produit.Imprime()
   // Ouverture du fichier 
   LanceAppliAssociée(iDernierFichier())
   CAS 4 // Sortir de l'application 
   Ferme()
   
   Dans ce code WLangage :
   • la fonction iDestination permet de paramétrer la destination de l'impression. Dans notre cas (une application mobile), l'état que nous avons créé va être imprimé sous forme d'un fichier PDF grâce à la constante iPDFGénérique.
   • la fonction <Etat>.Imprime permet de lancer l'impression de l'état ETAT_Produit. Le fichier PDF correspondant est donc créé.
   • la fonction LanceAppliAssociée permet d'afficher le fichier PDF généré dans le lecteur de PDF (connu par la fonction iDernierFichier) disponible sur le périphérique en cours.
4. Enregistrez les modifications en cliquant sur parmi les boutons d'accès rapide.
5. Fermez la fenêtre de code (cliquez sur la croix en haut à droite de l'éditeur de code).

Testez la fenêtre et ses options de menu en cliquant sur parmi les boutons d'accès rapide. Sous le simulateur, le fichier PDF correspondant au catalogue produit est généré et ouvert dans le lecteur PDF utilisé par le poste en cours.

Dans notre exemple, le menu étant également affiché en tant que fenêtre coulissante, l'impression du catalogue produit peut également être ajouté de la même manière dans la fenêtre FI_ZML_Options.