Tuto - Application WINDEV : gérer des données

Le WLangage possède toutes les fonctions nécessaires pour gérer l'envoi et la réception d'emails. Vous pouvez également accéder à toutes les caractéristiques d'un email :

• expéditeur, destinataires,
• date d'envoi, sujet, message,
• pièces jointes, etc.

Nous allons tout d'abord créer la fenêtre contenant les différents champs permettant de saisir les caractéristiques de l'email puis nous saisirons le code nécessaire à l'envoi de l'émail.

La fenêtre que nous allons créer va contenir tous les champs permettant à l'utilisateur de saisir les différents éléments de l'email. Un champ Bouton "Envoyer" regroupera tous les traitements permettant d'envoyer l'email.

Création de la fenêtre

Créez une nouvelle fenêtre :

1. Cliquez sur parmi les boutons d'accès rapide.
2. Cliquez sur "Fenêtre" puis sur "Fenêtre". L'assistant de création de fenêtre se lance.
3. Dans le volet d'onglet "Basée sur un modèle", sélectionnez "Utiliser : FENMOD_Modèle" et terminez l'assistant.

Création des champs de paramétrage de l'envoi

Nous allons dans un premier temps créer tous les champs permettant de paramétrer le serveur SMTP utilisé pour l'envoi des messages. Quatre champs de saisie sont nécessaires :

• Serveur SMTP,
• Port du serveur SMTP,
• Nom de l'utilisateur,
• Mot de passe de l'utilisateur.

1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
2. La forme du champ apparaît sous le curseur de la souris.
3. Cliquez en haut à gauche de la fenêtre : le champ de saisie est automatiquement créé.
4. Sélectionnez le champ et utilisez la touche Entrée du clavier. Le libellé passe en édition. Saisissez "Serveur SMTP" et validez. Le nom du champ correspond automatiquement à SAI_Serveur_SMTP.

A vous de jouer : De la même manière, créez 2 nouveaux champs de saisie : Un champ de saisie SAI_Port permettant de saisir le port du serveur SMTP. Ce champ a pour libellé "Port". Un champ de saisie SAI_Utilisateur permettant de saisir le nom de l'utilisateur.

1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Saisie".
2. Sélectionnez un champ de saisie prédéfini "Mot de passe".
3. La forme du champ apparaît sous le curseur de la souris.
4. Cliquez sous le champ "Utilisateur" : le champ de saisie est automatiquement créé.
   
   

   Le champ de saisie "Mot de passe" apparaît sous l'éditeur avec une puce et un oeil.
   En exécution, lorsque l'utilisateur saisira son mot de passe, les caractères seront remplacés par des puces. Un clic sur l'oeil permettra de voir le mot de passe saisi en clair : l'utilisateur pourra ainsi vérifier son mot de passe.

1. Sélectionnez les quatre champs.
2. Sous le volet "Alignement", dans le groupe "Interne et externe", cliquez sur "Justifier (Int. et Ext.)".
   
   
3. Enregistrez la fenêtre ( ou Ctrl + S).

Création des champs permettant de saisir les caractéristiques de l'email

Pour écrire un email, l'utilisateur doit avoir à sa disposition :

• Un champ permettant de saisir l'adresse de l'expéditeur.
• Un champ permettant de saisir ou sélectionner l'adresse du destinataire.
• Un champ permettant de saisir le sujet de l'email.
• Un champ permettant de saisir le texte de l'email. L'utilisateur doit avoir la possibilité de mettre en forme le texte de l'email.
• Un champ permettant d'ajouter des pièces jointes.

Nous allons ajouter tous ces champs en quelques clics dans notre fenêtre.

1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Saisie".
2. Dans la liste des champs pré-définis, saisissez "Email" dans la zone de recherche. Sélectionnez le champ de saisie prédéfini "Saisie eMail". La forme du champ apparaît sous le curseur de la souris.
3. Cliquez sous le champ "Mot de passe" : le champ de saisie est automatiquement créé.
4. Sélectionnez le champ et utilisez la touche Entrée du clavier. Le libellé passe en édition. Saisissez "Expéditeur" et validez.

1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Combo". La forme du champ apparaît sous le curseur de la souris.
2. Cliquez sous le champ "Expéditeur" : l'assistant de création du champ Combo se lance automatiquement.
3. Sélectionnez l'option "Afficher des données d'un fichier ou d'une requête existante". Passez à l'étape suivante.
4. Sélectionnez le fichier de données Client. Passez à l'étape suivante.
5. Nous voulons afficher dans le champ les adresses email des clients :
   • Décochez la rubrique "IDClient".
   • Cochez la rubrique "Email".
   Passez à l'étape suivante.
6. La rubrique de tri est la rubrique "Email". Passez à l'étape suivante.
7. La valeur de retour est également la rubrique "Email". Passez à l'étape suivante.
8. Conservez les options par défaut. Passez à l'étape suivante.
9. Dans l'écran "Paramètres supplémentaires", cochez l'option "Autoriser la saisie". En effet, l'utilisateur doit pouvoir saisir une nouvelle adresse email. Passez à l'étape suivante.
10. Modifiez le nom et le libellé du champ Combo :
    • Le nom du champ est "COMBO_Destinataire".
    • Le libellé du champ devient "Destinataire".
11. Validez l'assistant. Le champ est automatiquement créé dans la fenêtre.

1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur . La forme du champ apparaît sous le curseur de la souris.
2. Cliquez sous le champ "Destinataire" : le champ de saisie est automatiquement créé.
3. Sélectionnez le champ et utilisez la touche Entrée du clavier. Le libellé passe en édition. Saisissez "Sujet" et validez.

1. Sous le volet "Création", dans le groupe "Autres champs", déroulez "HTML" et sélectionnez "Editeur HTML pour E-mail".
2. La forme du champ apparaît sous le curseur de la souris.
3. Cliquez sous le champ "Sujet" : le champ Editeur HTML est automatiquement créé.
4. Agrandissez la fenêtre à l'aide des poignées de redimensionnement puis agrandissez le champ en largeur et en hauteur afin que le ruban du champ et plusieurs lignes soient visibles.

1. Sélectionnez le champ Editeur HTML et affichez la fenêtre de description du champ (Alt + Entrée).
2. Modifiez le nom du champ. Le nouveau nom du champ est "EDHTML_Email".
3. Cochez l'option "Minibarre".
   
   

   Le champ Editeur HTML propose deux types de barres d'outils : un ruban détaillé ou une minibarre, plus adaptée à la saisie des emails.
4. Validez.

1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Saisie". La liste des champs prédéfinis disponibles par défaut s'affiche.
2. Sélectionnez le champ "Saisie Chemin de fichier" et réalisez un "Drag and Drop" vers la fenêtre "FEN_Envoi_d_un_email" : lâchez le champ en dessous du champ "Editeur HTML". Le sélecteur de fichiers est immédiatement créé.

L'envoi de l'email va être effectué par un bouton. Nous allons créer le bouton dans la fenêtre et associer le code WLangage correspondant à ce champ.

1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
2. Cliquez à l'emplacement de création du champ (par exemple en bas de la fenêtre).
3. Sélectionnez le champ et modifiez son libellé (par exemple en utilisant la touche Entrée). Le nouveau libellé est "Envoyer".

1. Editez le code WLangage associé à ce champ Bouton : dans le menu contextuel (clic droit), sélectionnez l'option "Code".
2. Saisissez les lignes de code suivantes dans l'événement "Clic sur" :
   • code WLangage permettant la connexion et l'ouverture de la session SMTP :
     
     MaSession est une emailSessionSMTP
     MaSession.Nom = SAI_Utilisateur
     MaSession.MotDePasse = SAI_Motdepasse
     MaSession.AdresseServeur = SAI_Serveur_SMTP
     MaSession.Port = SAI_Port
     // Ouvre la session SMTP
     SI PAS MaSession.OuvreSession() ALORS
     Erreur("Impossible de se connecter au serveur SMTP.", ErreurInfo())
     RETOUR
     FIN
     
     Ce code utilise une variable avancée de type emailSessionSMTP. Les différentes propriétés de cette variable permettent de définir les caractéristiques de la session SMTP. La fonction <Session>.OuvreSession utilisée avec cette variable permet ensuite d'ouvrir la session.
   • code WLangage de préparation de l'email :
     
     MonMessage est un Email
     
     MonMessage.Expediteur = SAI_Expéditeur
     MonMessage.Sujet = SAI_Sujet
     
     EDHTML_Email.VersEmail(MonMessage)
     
     // Ajoute un destinataire
     MonMessage.Destinataire.Ajoute(COMBO_Destinataire.ValeurAffichée)
     
     
     // Ajoute la pièce jointe si besoin
     SI SAI_Fichier <> "" ALORS
     MonMessage.ChargeFichierAttaché(SAI_Fichier)
     FIN
     
     Ce code utilise une variable de type Email. Les différentes propriétés de cette variable permettent de définir les caractéristiques de l'email à envoyer. Ce code associe donc le contenu des différents champs de la fenêtre aux propriétés de la variable de type Email.
     Dans ce code :
     • la fonction <Champ Editeur HTML>.VersEmail permet d'associer directement tout le contenu de l'email aux propriétés correspondantes de la variable email. Si des images sont inclues dans le texte de l'email, ces images sont automatiquement ajoutées en pièces jointes.
     • la fonction <email>.ChargeFichierAttaché permet d'intégrer le fichier attaché s'il existe dans la variable Email.
   • code WLangage permettant d'envoyer l'email :
     
     // Envoie l'email
     SI MaSession.EnvoieMessage(MonMessage) = Faux ALORS
     Erreur("Message non envoyé.", ErreurInfo())
     SINON
     // Message envoyé
     ToastAffiche("Message envoyé", toastCourt, cvMilieu, chCentre)
     FIN
     
     L'envoi de l'email est simplement réalisé avec la fonction <Email>.EnvoieMessage. Il suffit de lui passer en paramètre la variable contenant les caractéristiques de la session SMTP et la variable contenant les caractéristiques de l'email à envoyer.
     Si l'email est envoyé, un message de type Toast indiquant que l'email a été envoyé est affiché. Un message Toast correspond à un message furtif.
   • code WLangage permettant de fermer la session SMTP :
     
     // Ferme la session SMTP
     MaSession.FermeSession()
     
     Ce code ferme la session grâce à la fonction <Session>.FermeSession.

Nous allons apporter quelques améliorations à notre fenêtre :

• Ajouter un champ Bouton pour fermer la fenêtre.
• Remettre en forme la fenêtre grâce à la gestion des ancrages et l'ordre de navigation.
• Lancer la fenêtre depuis la fenêtre "FEN_Menu".

Fermeture de la fenêtre

Pour ajouter un champ Bouton permettant de fermer la fenêtre :

1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Bouton" : la liste des boutons prédéfinis s'affiche.
2. Cliquez sur le bouton "Fermer".
3. Cliquez dans la fenêtre à la position où le champ doit être créé (par exemple, en bas, à droite du champ Bouton "Envoyer").

Mise en forme

Pour définir les ancrages :

• Sélectionnez les champs "Expéditeur", "Destinataire" et "Sujet" : ces champs doivent être ancrés en largeur.
• Sélectionnez le champ "Editeur HTML" : ce champ doit être ancré en largeur et en hauteur.
• Sélectionnez les champs Bouton : ces champs doivent être ancrés à droite et en bas.
• Sélectionnez le champ de sélection de fichier : ce champ doit être ancré en largeur et en bas.

Pour définir l'ordre de navigation :

1. Affichez l'ordre de navigation grâce à la touche F5.
2. Définissez l'ordre de navigation automatique : sous le volet "Fenêtre", dans le groupe "Ordre", déroulez "Navigation" et sélectionnez "Définir en automatique".
3. Les numéros sont modifiés et apparaissent désormais dans l'ordre.
   
4. Appuyez à nouveau sur la touche F5 pour faire disparaître les numéros.
5. Enregistrez la fenêtre ( ou Ctrl + S).

Ouverture de la fenêtre depuis le menu déroulant

La fenêtre de gestion des emails va être ouverte directement depuis une option du menu déroulant de la fenêtre "FEN_Menu". Nous allons tout d'abord créer l'option de menu :

1. Affichez la fenêtre "FEN_Menu" sous l'éditeur (double-cliquez sur son nom dans le volet "Explorateur de projet" par exemple).
2. Sous l'éditeur, déroulez l'option "Menu" et sélectionnez l'option "Quitter".
3. Affichez le menu contextuel de l'option "Quitter" (clic droit) et sélectionnez "Ajouter avant".
4. Saisissez le libellé de l'option "Envoyer un email" et validez.
5. Sélectionnez à nouveau l'option "Quitter".
6. Affichez le menu contextuel de l'option "Quitter" (clic droit) et sélectionnez "Insérer un séparateur".

1. Affichez le menu contextuel de l'option "Envoyer un email" (clic droit) et sélectionnez "Code".
2. Saisissez le code WLangage suivant :
   
   // Ouvre la fenêtre d'envoi d'email
   FEN_Envoi_d_un_email.OuvreFille()
   
   Dans ce code WLangage, la fonction <Fenêtre>.OuvreFille permet de réaliser une ouverture "non modale" de la fenêtre : l'utilisateur pourra à la fois écrire un email et consulter les informations de la fenêtre principale.