AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV 2024!
Ayuda / Tutorial WINDEV / Tutorial - Aplicación WINDEV: gestionar datos
  • Lección 7 - Enviar un correo electrónico
  • Presentación
  • Ventana para enviar correos electrónicos
  • Crear una ventana
  • Crear controles para el envío de correos electrónicos
  • Crear los controles que permitirán introducir las características del correo electrónico
  • Código WLanguage para el envío del correo electrónico
  • Mejoras en la ventana
  • Cerrar la ventana
  • Formato
  • Abrir la ventana desde el menú desplegable
  • En resumen

Tuto - Aplicación completa con datos

Lección 7 - Enviar un correo electrónico
Abordaremos los siguientes temas:
  • Cómo enviar un correo electrónico desde una aplicación WINDEV.
  • Cómo incluir un supercontrol en una ventana.
  • Cómo definir el orden de tabulación en una ventana.
  • Cómo abrir una ventana no modal.
Durée de la leçon 20 min
Presentación
WLanguage incluye un gran número de funciones que permiten gestionar el envío y la recepción de correos electrónicos. También puede acceder a las características de un correo electrónico:
  • remitente, destinatarios,
  • fecha de envío, asunto, mensaje,
  • documentos adjuntos, etc.
En esta lección, vamos a crear una ventana para que el usuario envíe un correo electrónico desde la aplicación "WD Full Application". La ventana es la siguiente:
Ventana de envío de correos electrónicos
Utilizaremos SMTP para enviar correos electrónicos.
WINDEV ofrece varios métodos para enviar y recibir correos electrónicos. Para obtener más información, consulte Envío y recepción de correos electrónicos.
En primer lugar, crearemos la ventana con los diferentes controles para introducir las características del correo electrónico. A continuación, escribiremos el código para enviar el correo electrónico.
Advertencia
Esta lección se basa en el ejemplo desarrollado en la lección 1.
Ventana para enviar correos electrónicos
Esta ventana contendrá todos los controles que permiten al usuario escribir los diferentes elementos del correo electrónico. Un control Botón "Send" agrupará todos los procesos que permiten enviar el correo electrónico.

Crear una ventana

Cree una nueva ventana:
  1. Haga clic en Crear un elemento en los botones de acceso rápido.
  2. Haga clic en "Ventana", y luego en "Ventana". El asistente de creación de ventanas se abre.
  3. En la pestaña "Basado en un modelo", seleccione "Utilizar: WINTPL_Template" y finalice el asistente.
La ventana para guardar el elemento se abre. Introduzca "Sending an email" en el título, el nombre se completa automáticamente: "WIN_Sending_an_email". Valide la información predeterminada.

Crear controles para el envío de correos electrónicos

Primero, crearemos todos los controles para configurar el servidor SMTP utilizado para el envío de mensajes. Se necesitan cuatro controles Campo de entrada:
  • Servidor SMTP,
  • Puerto del servidor SMTP,
  • Nombre del usuario,
  • Contraseña del usuario.
Para crear el control Campo de entrada que corresponde al nombre del servidor SMTP:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Campo de entrada.
  2. La forma del control aparece bajo el cursor.
  3. Haga clic en el área superior izquierda de la ventana: el control Campo de entrada se crea automáticamente.
  4. Seleccione el control y presione la tecla Entrar. El texto pasa a modo de edición. Introduzca "SMTP server" y valide. El nombre del control cambia automáticamente a EDT_SMTP_Server.
Realice las siguientes acciones:
Siguiendo los mismos pasos, cree dos controles Campo de entrada:
  • Un control EDT_Port para introducir el puerto del servidor SMTP. Introduzca "Port" en el título del control.
  • Un control EDT_User para introducir el nombre del usuario.
Vamos a crear un nuevo control Campo de entrada para permitir a los usuarios introducir su contraseña. Para ello, utilizaremos uno de los controles predefinidos disponibles en WINDEV:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Entrada".
  2. Seleccione el control Campo de entrada predefinido de tipo "Contraseña".
  3. La forma del control aparece bajo el cursor.
  4. Haga clic debajo del control "User": el control Campo de entrada se crea automáticamente.
    El control "Password" aparece en el editor con un punto y un ícono de "ojo".
    En ejecución, cuando el usuario introduzca la contraseña, los caracteres serán reemplazados por puntos. Los usuarios podrán hacer clic en el ícono del ojo para cambiar la visibilidad de la contraseña: esto le permite a los usuarios comprobar sus contraseñas.
Alinee los controles que acaba de crear:
  1. Seleccione los cuatro controles.
  2. En la pestaña "Alineación", en el grupo "Interno y externo", haga clic en "Justificar (Int. y Ext.)".
    Pestaña 'Alineación'
    Interfaz de la ventana a crear
  3. Guarde la ventana (Guardar un elemento o Ctrl + S).

Crear los controles que permitirán introducir las características del correo electrónico

Para escribir un correo electrónico, el usuario necesita:
  • Un control para introducir la dirección del remitente.
  • Un control para introducir o seleccionar la dirección del destinatario.
  • Un control para introducir el asunto del correo electrónico.
  • Un control para introducir el texto del correo electrónico. El usuario debe tener la posibilidad de definir el formato del texto del correo electrónico.
  • Un control para agregar archivos adjuntos.
Crearemos estos controles en nuestra ventana.

1. Dirección del remitente:
Para crear el control Campo de entrada para la dirección del remitente, utilizaremos un control predefinido:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Entrada".
  2. Escriba "Correo" en el cuadro de búsqueda de la lista de controles predefinidos. Seleccione "Entrada correo electrónico". La forma del control aparece bajo el cursor.
  3. Haga clic debajo del control "Password": el control Campo de entrada se crea automáticamente.
  4. Seleccione el control y presione la tecla Entrar. El texto pasa a modo de edición. Introduzca "Sender" y valide.
2. Dirección del destinatario:
El control utilizado para escribir la dirección del destinatario debe contener la lista de direcciones de los clientes que se encuentran en la base de datos, pero también debe permitir al usuario escribir otra dirección. Para ello, utilizaremos un control "Combo Box con entrada" relacionado con el archivo de datos Customer.
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Combo Box". La forma del control aparece bajo el cursor.
  2. Haga clic debajo del control "Sender": el asistente de creación del control Combo Box se abre automáticamente.
  3. Seleccione la opción "Mostrar datos de un archivo o una consulta existente". Pase a la etapa siguiente.
  4. Seleccione el archivo de datos Customer. Pase a la etapa siguiente.
  5. Las direcciones de correo electrónico de los clientes se mostrarán en el control:
    • Deseleccione el campo "CustomerID".
    • Seleccione el campo "Email".
    Pase a la etapa siguiente.
  6. El criterio de ordenación es el campo "Email". Pase a la etapa siguiente.
  7. El valor de retorno es el campo "Email". Pase a la etapa siguiente.
  8. Conserve las opciones predeterminadas. Pase a la etapa siguiente.
  9. En la etapa "Parámetros adicionales", seleccione la casilla "Permitir entrada". El usuario debe poder introducir una dirección de correo electrónico. Pase a la etapa siguiente.
  10. Cambie el nombre y el título del control Combo Box:
    • Introduzca "COMBO_Recipient" en el campo del nombre.
    • Introduzca "Recipient" en el campo del título.
  11. Finalice el asistente. El control se crea automáticamente en la ventana.
3. Asunto del correo electrónico:
Para crear el control Campo de entrada que corresponde al asunto del correo electrónico:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Campo de entrada. La forma del control aparece bajo el cursor.
  2. Haga clic debajo del control "Recipient": el control Campo de entrada se crea automáticamente.
  3. Seleccione el control y presione la tecla Entrar. El texto pasa a modo de edición. Introduzca "Subject" y valide.
4. Cuerpo del mensaje:
Para el cuerpo del mensaje, utilizaremos un control Editor HTML para correos electrónicos: el usuario podrá definir fácilmente el formato del texto del correo electrónico mediante una cinta de opciones específica.
  1. En la pestaña "Creación", en el grupo "Otros controles", despliegue "HTML" y seleccione "Editor HTML para correos electrónicos".
  2. La forma del control aparece bajo el cursor.
  3. Haga clic debajo del control "Subject": El control Editor HTML se crea automáticamente.
  4. Agrande la ventana utilizando los controladores de tamaño, luego amplíe el control vertical y horizontalmente para que la cinta de opciones del control y algunas líneas de texto se muestren correctamente.
Vamos a cambiar las características del control a través de la ventana de descripción:
  1. Seleccione el control Editor HTML y abra la ventana de descripción (Alt + Enter).
  2. Cambie el nombre del control. Defina "HTMEDT_Email" como nombre del control.
  3. Seleccione "Minibarra de herramientas".
    El control Editor HTML le permite elegir entre dos tipos de barras de herramientas: una cinta de opciones estándar o una minibarra de herramientas, que es mucho más práctica para escribir correos electrónicos.
  4. Valide.
5. archivos adjuntos:
Vamos a crear un selector de archivos para que los usuarios puedan agregar archivos adjuntos. En lugar de crearlo desde cero, vamos a utilizar un control Campo de entrada predefinido de tipo archivo. El usuario podrá seleccionar el archivo a adjuntar haciendo clic en "Examinar" en el menú contextual del control.
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Entrada". La lista de controles predefinidos se abre.
  2. Seleccione el control "Entrada de ruta de archivo" y arrástrelo a la ventana "WIN_Sending_an_email": suelte el control debajo del control "Editor HTML". El selector de archivos se crea inmediatamente.
Alinee todos los controles de la ventana.
Ventana de entrada de correos electrónicos
Vamos a crear el control Botón que nos permitirá enviar los correos electrónicos.
Código WLanguage para el envío del correo electrónico
El correo electrónico se enviará pulsando un botón. Crearemos el botón en la ventana y escribiremos el código WLanguage correspondiente.
En primer lugar, amplíe la ventana para tener espacio suficiente para agregar el botón debajo del control Editor HTML: utilice el controlador de redimensionamiento de la esquina inferior derecha de la ventana.
Para crear el control Botón de envío de correos electrónicos:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón.
  2. Haga clic en la ubicación en la que desea crear el control (por ejemplo, en la parte inferior de la ventana).
  3. Seleccione el control y cambie el texto (por ejemplo, presione Entrar). Introduzca "Send".
Pasemos al código WLanguage de este botón:
  1. Edite el código WLanguage del control Botón: haga clic derecho y seleccione "Código" en el menú contextual.
  2. Introduzca las siguientes líneas de código en el evento "Clic":
    • Código WLanguage para la conexión e inicio de sesión SMTP:
      MySession is emailSMTPSession
      MySession.Name = EDT_User
      MySession.Password = EDT_Password
      MySession.ServerAddress = EDT_SMTP_Server
      MySession.Port = EDT_Port
      // Starts the SMTP session
      IF NOT MySession.StartSession() THEN
      Error("Unable to connect to the SMTP server.", ErrorInfo())
      RETURN
      END
      Este código utiliza una variable avanzada de tipo emailSMTPSession. Las diferentes propiedades de esta variable definen las características de la sesión SMTP. Luego, se utiliza la función <Sesión>.StartSession para iniciar la sesión.
    • código WLanguage para preparar el correo electrónico:
      MyMessage is Email

      MyMessage.Sender = EDT_Sender
      MyMessage.Subject = EDT_Subject

      HTMEDT_Email.ToEmail(MyMessage)

      // Adds a recipient
      MyMessage.Recipient.Add(COMBO_Recipient.DisplayedValue)


      // Adds the attachment if necessary
      IF EDT_File <> "" THEN
      MyMessage.LoadAttachment(EDT_File)
      END
      Este código utiliza una variable de tipo Email. Las diferentes propiedades de esta variable definen las características del correo electrónico que se va a enviar. Este código asocia el contenido de los diferentes controles de la ventana a las propiedades de la variable Email.
      En este código:
      • la función <Control Editor HTML>.ToEmail asocia directamente el contenido del correo electrónico con las propiedades correspondientes de la variable Email. Si se incluyen imágenes en el texto del correo electrónico, se añadirán automáticamente como archivos adjuntos.
      • la función <Correo>.LoadAttachment integra el archivo adjunto, si existe, en la variable Email.
    • Código WLanguage para el envío del correo electrónico:
      // Sends the email
      IF MySession.SendMessage(MyMessage) = False THEN
      Error("Message not sent.", ErrorInfo())
      ELSE
      // Message sent
      ToastDisplay("Message sent", toastShort, vaMiddle, haCenter)
      END
      El correo electrónico se envía con la función <Email>.SendMessage. Simplemente pase como parámetros la variable que contiene las características de la sesión SMTP, y la variable que contiene las características del correo electrónico a enviar.
      Si se envía el correo electrónico, se muestra un mensaje Toast indicando que el correo electrónico se ha enviado. Un Toast es un mensaje corto que aparece durante unos segundos.
    • Código WLanguage para cerrar la sesión SMTP:
      // Closes the SMTP session
      MySession.CloseSession()
      Este código cierra la sesión con la función <Sesión>.CloseSession.
Guarde la ventana y el código (Guardar elemento o Ctrl + S).
Mejoras en la ventana
Vamos a mejorar nuestra ventana:
  • Agregar un control Botón para cerrar la ventana.
  • Definir el formato de la ventana fijando los anclajes y el orden de tabulación.
  • Abrir la ventana desde la ventana "WIN_Menu".

Cerrar la ventana

Para agregar un control Botón que permita cerrar la ventana:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Botón": la lista de botones predefinidos aparece.
  2. Haga clic en el botón "Cerrar".
  3. Haga clic en la ubicación en la que desea crear el control (por ejemplo, abajo, a la derecha del botón "Send").

Formato

Para definir los anclajes:
  • Seleccione los controles "Sender", "Recipient" y "Subject": ancle los controles horizontalmente.
  • Seleccione el control "Editor HTML": ancle el control vertical y horizontalmente.
  • Seleccione los controles Botón: ancle los controles a la derecha y abajo.
  • Seleccione el control de selección de archivos: ancle el control horizontalmente y hacia abajo.
Ahora veamos si el orden de tabulación de los controles de la página es coherente.
El orden de tabulación de los controles es el orden en el que el usuario podrá introducir los valores en los diferentes controles de la ventana. En tiempo de ejecución, la tecla Tab permite cambiar de un control a otro. El orden de tabulación predeterminado es el orden en el que se crearon los controles.
Para definir el orden de tabulación:
  1. Pulse F5 para ver el orden de tabulación.
  2. Defina un orden de tabulación automático: en la pestaña "Ventana", en el grupo "Orden", despliegue "Orden tab." y seleccione "Definir automáticamente".
  3. Los números cambian y aparecen en orden.
    Orden de tabulación
  4. Presione F5 de nuevo para ocultar los números.
  5. Guarde la ventana (Guardar un elemento o Ctrl + S).

Abrir la ventana desde el menú desplegable

La ventana se abrirá directamente desde una opción de menú desplegable de "WIN_Menu".
Creamos el menú desplegable en la lección 5 de este tutorial.
En primer lugar, vamos a crear la opción de menú:
  1. Abra la ventana "WIN_Menu" en el editor (haga doble clic en ella en el panel "Explorador de proyectos").
  2. En el editor, despliegue la opción "Menu" y seleccione "Exit".
  3. Haga clic derecho para abrir el menú contextual de la opción "Exit" y seleccione "Agregar antes".
  4. Introduzca el texto "Send an email" y valide.
  5. Seleccione de nuevo la opción "Exit".
  6. Haga clic derecho para abrir el menú contextual de "Exit" y seleccione "Insertar un separador".
Veamos el código de esta opción:
  1. Haga clic derecho para abrir el menú contextual de la opción "Send an email" y seleccione "Código".
  2. Introduzca el siguiente código WLanguage:
    // Opens the window for sending emails
    WIN_Sending_an_email.OpenChild()
    En este código WLanguage, la función <Ventana>.OpenChild abre la ventana en modo "no modal": el usuario podrá escribir un correo electrónico y ver la información de la ventana principal al mismo tiempo.
Guarde la ventana y el código (Guardar un elemento o Ctrl + S).
Ejecute la prueba del proyecto (haciendo clic en Probar proyecto en los botones de acceso rápido) y abra la ventana de envío de correos electrónicos a través de la opción "Menu .. Send an email".
Prueba del envío de un correo electrónico
En resumen
Proyecto completado
¿Desea comprobar el resultado final de las etapas descritas en este tutorial?
Hay un proyecto completado disponible. Este proyecto contiene las ventanas creadas en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Tutorial - WINDEV application: Manage data", haga doble clic en "Full application - Answers".
En esta lección, vimos cómo enviar un correo electrónico desde una aplicación WINDEV. Las aplicaciones WINDEV también permiten la lectura de correos electrónicos entrantes. Para obtener más información, consulte Leer un correo electrónico.
Hemos terminado este tutorial en el que vimos cómo desarrollar una aplicación de gestión. Le recomendamos seguir el tutorial Implementar la aplicación para aprender a crear y distribuir el archivo ejecutable de la aplicación.
Lección anteriorTabla de contenido
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 05/12/2023

Señalar un error o enviar una sugerencia | Ayuda local