DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV 2024 !
Aide / Tuto WINDEV / Tuto - Application WINDEV : gérer des données
  • Leçon 7 - Envoyer un email
  • 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
  • Le code WLangage permettant d'envoyer l'email
  • Améliorations de la fenêtre
  • Fermeture de la fenêtre
  • Mise en forme
  • Ouverture de la fenêtre depuis le menu déroulant
  • En résumé

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

Leçon 7 - Envoyer un email
Ce que vous allez apprendre :
  • 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 de la leçon 20 mn
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, etc.
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 :
Fenêtre d'envoi d'un email
L'envoi de l'email va utiliser le protocole SMTP.
WINDEV propose plusieurs méthodes pour envoyer et recevoir des emails. Pour plus de détails, consultez Communiquez par emails.
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.
Avertissement
Cette leçon est basée sur l'exemple réalisé dans la leçon 1.
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 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 Créer un élément 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.
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 Créer un champ de saisie.
  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.
Nous allons créer un nouveau champ de saisie permettant de saisir le mot de passe de l'utilisateur. Pour cela, nous allons utiliser un des champs prédéfini proposé par WINDEV :
  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.
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.)".
    Volet 'Alignement'
    Interface de la fenêtre à créer
  3. Enregistrez la fenêtre (Enregistrer un élément 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. Adresse de l'expéditeur :
Pour créer le champ de saisie correspondant à l'adresse de l'expéditeur, nous allons de nouveau utiliser un champ prédéfini :
  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.
2. Adresse du destinataire :
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". 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.
3. Sujet de l'email :
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 Créer un champ de saisie. 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.
4. Corps du message :
Pour le corps du message, nous allons utiliser un champ Editeur HTML pour email : l'utilisateur pourra ainsi mettre en forme facilement le texte de l'email grâce à un ruban spécifique.
  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.
Modifions les caractéristiques du champ via la fenêtre de description :
  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.
5. Pièces jointes :
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 "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éé.
Alignez les différents champs présents dans la fenêtre.
Fenêtre de saisie des emails
Nous allons maintenant créer le champ Bouton permettant d'envoyer les emails.
Le code WLangage permettant d'envoyer l'email
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.
Tout d'abord, agrandissez la fenêtre pour avoir assez de place pour positionner un bouton sous le champ Editeur HTML : utilisez la poignée de redimensionnement en bas à droite de la fenêtre.
Pour créer le champ Bouton permettant l'envoi des emails :
  1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur Créer un champ Bouton.
  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".
Maintenant, passons au code WLangage de ce bouton :
  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.
Enregistrez la fenêtre et son code (Enregistrer l'élément ou Ctrl + S).
Améliorations de la fenêtre
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.
Voyons maintenant si l'ordre de navigation entre les différents champs de la page est cohérent.
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.
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.
    Ordre de navigation
  4. Appuyez à nouveau sur la touche F5 pour faire disparaître les numéros.
  5. Enregistrez la fenêtre (Enregistrer un élément 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 avons créé le menu déroulant de la fenêtre dans la leçon 5 de ce tuto.
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".
Voyons le code de cette option :
  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.
Enregistrez la fenêtre et son code (Enregistrer un élément ou Ctrl + S).
Lancez le test du projet (Tester le 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".
Test de l'envoi d'un email
En résumé
Projet corrigé
Vous voulez vérifier le résultat de vos manipulations ?
Un projet corrigé est disponible. Ce projet contient les différentes fenêtres créées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Application WINDEV : gérer des données", double-cliquez sur "Application complète - Corrigé".
Cette leçon nous a permis de découvrir comment proposer l'envoi d'un email dans une application WINDEV. Bien entendu, les applications WINDEV peuvent également proposer la lecture des emails reçus. Pour plus de détails, consultez Lire un email.
Ce tuto présentant le développement d'une application de gestion est terminé. Nous vous conseillons de suivre le tuto Déployer l'application pour apprendre comment créer l'exécutable de votre application et comment déployer cette application chez vos utilisateurs.
Leçon précédenteSommaire
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 16/11/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale