PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Nouveauté WINDEV 24 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Une fenêtre pour envoyer des emails
  • Création de la fenêtre
  • Création des champs de paramétrage de l'envoi
  • Création des champs permettant de saisir les caractéristiques de l'email
  • Envoi de l'email
  • Améliorations de la fenêtre
  • Fermeture de la fenêtre
  • Mise en forme
  • Ouverture non modale de la fenêtre
Leçon 4.9. Envoyer un email
Ce que vous allez apprendre dans cette leçon
  • Comment envoyer un email depuis une application WINDEV.
  • Comment intégrer un superchamp à une fenêtre.
  • Comment définir l'ordre de navigation sur une fenêtre.
  • Comment ouvrir une fenêtre non modale.

Durée estimée : 20 mn
Leçon précédenteSommaireLeçon suivante
Présentation
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 ...
WINDEV permet de gérer les emails grâce à plusieurs méthodes :
  • Gestion via Lotus Notes, Outlook ou MS Exchange :
    • Le logiciel de messagerie Lotus Notes ou Outlook : grâce à ces logiciels, il est possible d'envoyer et de recevoir des emails.
    • L'API "Simple Mail API" (appelé aussi SMAPI ou Simple MAPI) : ce mode de gestion des emails est utilisé par la plupart des applications Microsoft et principalement Microsoft Exchange.
  • Gestion via les protocoles POP3, IMAP et SMTP :
    • Le protocole POP3 : ce protocole de réception des emails est reconnu par tous les fournisseurs de services. Il permet de dialoguer directement avec le serveur, disponible chez votre fournisseur d'accès. Ce protocole permet de lister les messages reçus et de les lire.
    • Le protocole IMAP : ce protocole de réception d'emails permet de laisser les emails sur le serveur dans le but de pouvoir les consulter depuis différents clients de messagerie ou webmails.
    • Le protocole SMTP : ce protocole d'envoi d'emails est reconnu par tous les fournisseurs de services.
Dans cette leçon, nous allons créer une fenêtre permettant à l'utilisateur d'envoyer un email depuis l'application "WD Application Complète". Cette fenêtre est la suivante :
Nous allons pour cela, utiliser le protocole SMTP. En effet, c'est le mode qui est actuellement le plus utilisé dans le monde.
Pour plus de détails sur les autres méthodes, consultez l'aide en ligne.

Corrigé

Pour suivre cette leçon, il est nécessaire d'avoir effectué les leçons de cette partie jusqu'à la leçon "Leçon 4.7. Imprimer une liste de clients".
Un projet corrigé complet de l'application est également disponible : dans la page d'accueil de WINDEV (Ctrl + <), cliquez sur "Cours d'auto-formation", puis sélectionnez "Application complète (Corrigé)".

Exemple

Pour plus de détails sur la gestion des emails, consultez l'exemple "WD Mail" (exemple complet), livré en standard avec WINDEV. Cet exemple est accessible depuis la page d'accueil de WINDEV (Ctrl + <).
Une fenêtre pour envoyer des emails
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 bouton "Envoyer" regroupera tous les traitements permettant d'envoyer l'email.

Création de la fenêtre

  • Créez une nouvelle fenêtre :
    1. Ouvrez si nécessaire le projet "WD Application Complète".
    2. 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".
      • L'assistant de création de fenêtre se lance.
      • Dans l'onglet "Basée sur un modèle", sélectionnez "Utiliser : FENMOD_Modèle" et validez l'assistant.
    3. La fenêtre de sauvegarde de l'élément créé apparaît. Cette fenêtre a pour titre "Envoi d'un email", son nom "FEN_Envoi_d_un_email" est automatiquement proposé. Validez les informations proposées.

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.
  • Pour créer le champ de saisie correspondant au nom du serveur SMTP :
    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.
  • Pour créer le champ de saisie correspondant au port :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Saisie".
    2. Sélectionnez un champ de saisie prédéfini de type Entier.
    3. La forme du champ apparaît sous le curseur de la souris.
    4. Cliquez sous le champ "Serveur SMTP" : le champ de saisie est automatiquement créé.
    5. Sélectionnez le champ et utilisez la touche Entrée du clavier. Le libellé passe en édition. Saisissez "Port" et validez. Le nom du champ correspond automatiquement à SAI_Port.
  • Pour créer le champ de saisie correspondant au nom 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 sous le champ "Port" : 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 "Utilisateur" et validez. Le nom du champ correspond automatiquement à SAI_Utilisateur.
  • Pour créer le champ de saisie correspondant au mot de passe 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éé.

      Astuce

      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.
      Si nécessaire cette fonctionnalité peut être désactivée par programmation. pour plus de détails, consultez l'aide en ligne.
  • Alignez les champs que vous venez de créer :
    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.
  • Pour créer le champ de saisie correspondant à l'adresse de l'expéditeur :
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Saisie".
    2. Sélectionnez le champ de saisie prédéfini "E-Mail".
    3. La forme du champ apparaît sous le curseur de la souris.
    4. Cliquez sous le champ "mot de passe" : le champ de saisie est automatiquement créé.
    5. Sélectionnez le champ et utilisez la touche Entrée du clavier. Le libellé passe en édition. Saisissez "Expéditeur" et validez.
  • Le champ permettant la saisie de l'adresse du destinataire va être un champ proposant les adresses des clients présents dans la base de données mais aussi permettant à l'utilisateur de saisir une autre adresse. Pour cela, nous allons utiliser un champ de type "Combo avec saisie" lié au fichier de données Client.
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Combo".
    2. La forme du champ apparaît sous le curseur de la souris.
    3. Cliquez sous le champ "Expéditeur" : l'assistant de création du champ Combo se lance automatiquement.
    4. Sélectionnez l'option "Afficher des données d'un fichier ou d'une requête existante". Passez à l'étape suivante.
    5. Sélectionnez le fichier "Client". Passez à l'étape suivante.
    6. Nous voulons afficher dans le champ les adresses email des clients :
      • Décochez la rubrique "IDClient".
      • Cochez la rubrique "Email".
      Passez à l'étape suivante.
    7. La rubrique de tri est la rubrique "Email". Passez à l'étape suivante.
    8. La valeur de retour est également la rubrique "Email". Passez à l'étape suivante.
    9. Conservez les options par défaut. Passez à l'étape suivante.
    10. 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.
    11. Modifiez le nom et le libellé du champ Combo :
      • Le nom du champ est "COMBO_Destinataire".
      • Le libellé du champ devient "Destinataire".
    12. Validez l'assistant. Le champ est automatiquement créé dans la fenêtre.
  • Pour créer le champ de saisie correspondant au sujet de l'email :
    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 sous le champ "Destinataire" : 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 "Sujet" et validez.
  • Pour le corps du message, nous allons utiliser un champ de saisie HTML : l'utilisateur pourra ainsi mettre en forme facilement le texte de l'email grâce à une barre d'outils spécifique.
    1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Saisie".
    2. Sélectionnez un champ de saisie prédéfini "Texte HTML".
    3. La forme du champ apparaît sous le curseur de la souris.
    4. Cliquez sous le champ "Sujet" : le champ de saisie est automatiquement créé.
    5. Agrandissez le champ afin que plusieurs lignes soient visibles.
    6. Affichez la fenêtre de description du champ (double-cliquez sur le champ).
      • Sous l'onglet "Général", modifiez le mode d'affichage de la barre d'outils du formatage. Cette barre d'outils doit être toujours visible.
      • Validez la fenêtre de description du champ.
    7. Si nécessaire, repositionnez le champ pour que la barre d'outils soit correctement affichée.
  • Pour que l'utilisateur puisse ajouter une pièce jointe, nous allons lui proposer un sélecteur de fichiers. Mais au lieu de le créer de toutes pièces, nous allons utiliser un champ de saisie prédéfini de type fichier. Grâce au menu contextuel du champ (option "Parcourir"), l'utilisateur pourra sélectionner le fichier à joindre.
    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 "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 "Texte HTML". Le sélecteur de fichiers est immédiatement créé.
  • Alignez les différents champs présents dans la fenêtre.
Nous allons maintenant créer le bouton permettant d'envoyer les emails.

Envoi de l'email

  • Pour créer le bouton d'envoi :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
    2. Cliquez à l'emplacement de création du bouton (par exemple en bas de la fenêtre).
    3. Sélectionnez le bouton et modifiez son libellé (par exemple en utilisant la touche Entrée). Le nouveau libellé est "Envoyer".
    4. Editez le code de ce bouton : dans le menu contextuel du bouton (clic droit), sélectionnez l'option "Code".
    5. Saisissez les différents codes suivants dans le traitement "Clic sur" :
      • le code de connexion et d'ouverture de la session SMTP :
        MaSession est un emailSessionSMTP
        MaSession..Nom = SAI_Utilisateur
        MaSession..MotDePasse = SAI_Mot_de_passe
        MaSession..AdresseServeur = SAI_Serveur_SMTP
        MaSession..Port = SAI_Port
        // Ouvre la session SMTP
        SI PAS EmailOuvreSession(MaSession) 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 EmailOuvreSession utilisée avec cette variable permet ensuite d'ouvrir la session.
      • le code de préparation de l'email :
        MonMessage est un Email

        MonMessage..Expediteur = SAI_Expéditeur
        MonMessage..Sujet = SAI_Sujet
        MonMessage..HTML = SAI_Texte_HTML
        MonMessage..Message = HTMLVersTexte(SAI_Texte_HTML)

        // Ajoute un destinataire
        Ajoute(MonMessage..Destinataire,...
        COMBO_Destinataire..ValeurAffichée)

        // Ajoute la pièce jointe si besoin
        SI SAI_Fichier <> "" ALORS
        EmailChargeFichierAttaché(MonMessage, 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.
      • le code d'envoi de l'email :
        // Envoie l'email
        SI EmailEnvoieMessage(MaSession, 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 EmailEnvoieMessage. 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.
      • le code de fermeture de la session SMTP :
        // Ferme la session SMTP
        EmailFermeSession(MaSession)
        Ce code ferme la session grâce à la fonction EmailFermeSession.
  • Enregistrez la fenêtre et son code ( ou Ctrl + S).
Améliorations de la fenêtre
Nous allons apporter quelques améliorations à notre fenêtre :
  • Ajouter un bouton de fermeture
  • 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 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 bouton doit être créé (par exemple, en bas, à droite du 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 "Texte HTML" : ce champ doit être ancré en largeur et en hauteur.
    • Sélectionnez les boutons : 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 :

    Note

    L'ordre de navigation des champs est l'ordre dans lequel l'utilisateur pourra saisir les valeurs dans les différents champs de la fenêtre. Le passage d'un champ à un autre sera effectué lors de l'appui sur la touche Tab pendant l'exécution. L'ordre de saisie par défaut correspond à l'ordre de création des champs. Il peut être modifié :
    • soit en donnant un ordre de saisie automatique : le premier champ en saisie sera le champ situé le plus en haut à gauche, le deuxième sera celui qui est immédiatement situé à droite ou immédiatement en dessous ...
    • soit en spécifiant un ordre de saisie par sélection.
    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 non modale de la fenêtre

La fenêtre de gestion des emails va être ouverte directement depuis la fenêtre "FEN_Menu". Son mode d'ouverture va être spécifique car cette fenêtre ne doit pas bloquer la consultation des différentes informations affichées dans la fenêtre "FEN_Menu".
  • Pour ouvrir la fenêtre "FEN_Envoi_d_un_email" depuis la fenêtre "FEN_Menu" :
    1. Affichez la fenêtre "FEN_Menu" sous l'éditeur (double-cliquez sur son nom dans le volet "Explorateur" 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".
    7. Affichez le menu contextuel de l'option "Envoyer un email" (clic droit) et sélectionnez "Code".
    8. Saisissez le code suivant :
      // Ouvre la fenêtre d'envoi d'email
      OuvreFille(FEN_Envoi_d_un_email)
      Dans ce code, la fonction 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.
  • Enregistrez la fenêtre et son code ( ou Ctrl + S).
  • Lancez le test du projet ( parmi les boutons d'accès rapide) et l'ouverture de la fenêtre d'envoi d'emails via l'option "Menu .. Envoyer un email".
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 24
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire