AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Tutorial WEBDEV / Tutorial - Búsqueda e impresión con varios criterios
  • Esta lección abarcará los siguientes temas
  • Presentación
  • Página Popup de envío de correos electrónicos
  • Crear la página Popup
  • Crear los controles que permitirán introducir las características del correo electrónico
  • Envío de correos electrónicos
  • Mejoras en la página
  • Cerrar la página Popup
  • Abrir la página Popup
Lección 5.3. Enviar un correo electrónico
Esta lección abarcará los siguientes temas
  • Cómo enviar un correo electrónico desde un sitio WEBDEV.
Duración de la lección

Tiempo estimado: 20 min
Lección anteriorTabla de contenidoSiguiente lección
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,
  • archivos adjuntos...
WEBDEV incluye varios métodos para gestionar correos electrónicos:
  • A través de Lotus Notes, Outloook o MS Exchange:
    • Lotus Notes o Outlook: estos programas le permiten enviar y recibir correos electrónicos.
    • " Simple Mail API" (también llamado SMAPI o Simple MAPI): este modo de gestión de correos electrónicos es utilizado por la mayoría de las aplicaciones de Microsoft, especialmente por Microsoft Exchange.
  • A través de los protocolos POP3, IMAP y SMTP:
    • Protocolo POP3: este protocolo de recepción de correos electrónicos es compatible con todos los proveedores de servicios. Permite comunicarse directamente con el servidor y está disponible en su proveedor de servicios de Internet (ISP). Además, permite ver la lista de mensajes entrantes y leerlos.
    • Protocolo IMAP: este protocolo de recepción de correos electrónicos permite dejar los correos electrónicos en el servidor para que puedan ser vistos desde diferentes clientes de mensajería o webmail.
    • Protocolo SMTP: este protocolo de envío de correos electrónicos es reconocido por todos los proveedores de servicios.
En esta lección, vamos a crear una página Popup que permita a los usuarios enviar sugerencias por correo electrónico al desarrollador del sitio web. La página popup es la siguiente:
Para ello, usaremos el protocolo SMTP. Este es el modo de envío más utilizado.
Para obtener más información sobre los diferentes métodos, consulte Enviar y recibir correos electrónicos.
  • Abra de nuevo el proyecto en el que trabajó en la lección anterior.
    1. Vaya a la página de inicio de WEBDEV (Ctrl +<).
    2. En la página de inicio, haga clic en "Tutorial", luego en "Parts 3 to 6", haga doble clic en "Full WEBDEV Site - Exercise".
    3. Un cuadro de diálogo le pide que abra el proyecto en el que trabajó en la lección anterior. Puede abrir la copia local o el proyecto original. Seleccione "Abrir la copia local".

Corregido

Hay un proyecto completado disponible. Este proyecto contiene los diferentes elementos creados en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Parts 3 to 6", haga doble clic en "Full WEBDEV Site - Answers".

Ejemplos

Para obtener más información sobre los correos electrónicos, consulte el ejemplo "Sending emails" (unit example), proporcionado con WEBDEV. Puede abrir este ejemplo desde la ventana de inicio de WEBDEV.
Página Popup de envío de correos electrónicos
La página Popup que vamos a crear contendrá todos los controles que permitirán al usuario introducir los diferentes elementos del correo electrónico. Vamos a incluir un botón "Send" para agrupar todos los procesos necesarios para enviar el correo electrónico.

Crear la página Popup

  • Para crear la página Popup:
    1. Abra el proyecto "Full_WEBDEV_Site" si es necesario.
    2. Abra la página "PAGE_List_of_products".
    3. En la barra de páginas, haga clic en "Páginas Popup".
    4. En el menú que aparece, haga clic en "Nueva popup".
    5. La página popup aparece en el editor.
    6. Amplíe la página Popup vertical y horizontalmente con los controladores de tamaño.
    7. Guarde la página (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 el asunto del correo electrónico.
  • Un control para introducir el texto del correo electrónico.
Vamos a agregar estos controles a la página.
Observación: dado que el destinatario es el desarrollador del sitio, la dirección correspondiente estará en el código de envío del correo electrónico. Los parámetros del servidor SMTP también se introducirán directamente en el código.

  • Para crear el control Campo de entrada que corresponde a la dirección del remitente:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Entrada".
    2. Seleccione el control "Entrada de correo electrónico".
    3. Haga clic en la página: el control Campo de entrada se crea automáticamente.
    4. Cambie el texto del control por: "Sender".
  • 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.
    2. Haga clic debajo del control "Sender": el control Campo de entrada se crea automáticamente.
    3. Cambie el texto del control por: "Subject".
  • Para el cuerpo del mensaje, usaremos un control Campo de entrada HTML: el usuario podrá definir el formato del texto del correo electrónico utilizando una barra de herramientas específica.
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Entrada".
    2. Seleccione "Entrada HTML".
    3. La forma del control aparece bajo el cursor.
    4. Haga clic debajo del control "Subject": el control Campo de entrada se crea automáticamente.
    5. Amplíe el control para mostrar varias líneas.
    6. Haga doble clic en el control para abrir la ventana de descripción.
      • En la pestaña "General", cambie el modo de visualización de la barra de herramientas HTML (opción "Barra de herramientas HTML"). Esta barra de herramientas siempre debe estar visible.
      • Valide la ventana de descripción del control.
    7. Ajuste la posición del control si es necesario.
  • Alinee los diferentes controles de la página.
Vamos a crear el control Botón que nos permitirá enviar los correos electrónicos.

Envío de correos electrónicos

  • 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 Botón (por ejemplo, en la parte inferior de la página).
    3. Seleccione el control y cambie el texto (presione Entrar, por ejemplo). Introduzca "Send".
    4. Edite el código del control (F2).
    5. Introduzca los siguientes códigos en el evento "Clic" del servidor:
      • el código para establecer la conexión e iniciar la sesión SMTP:
        MySession is emailSMTPSession
        MySession.ServerAddress = "smtpserver"
        // Type the address of SMTP server
        MySession.Name = "user_name"
        // Type the username (if necessary)
        MySession.Password = ""
        // Type the password (if necessary)
         
        // Starts the SMTP session
        IF MySession.StartSession() = False THEN
        ToastDisplay("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.
      • el código para preparar el correo electrónico:
        Suggestion is Email
        Suggestion.Sender = EDT_Sender
        Suggestion.Subject = EDT_Subject
        Suggestion.HTML = EDT_HTML
        Suggestion.Message = HTMLToText(EDT_HTML)
        Suggestion.Recipient = "developer@mysite"
        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 página con las propiedades de la variable Email.
      • el código para enviar el correo electrónico:
        // Send the email
        IF MySession.SendMessage(Suggestion) = False THEN
        ToastDisplay("Sending error", ErrorInfo())
        ELSE
        ToastDisplay("Thank you for your suggestion.")
        END
        El correo electrónico se envía usando la función <Sesión>.SendMessage, que se utiliza con la variable que contiene las características de la sesión SMTP. A esta función se le pasa como parámetro una variable con las características del correo electrónico que se va 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.
      • el código para cerrar la sesión SMTP:
        // Close the SMTP session
        MySession.CloseSession()
        Este código cierra la sesión con la función <Sesión>.CloseSession. Cierre el editor de código.
  • Guarde la página y el código (Guardar un elemento o Ctrl + S).

Nota

El proceso de envío de correos electrónicos se da a título informativo. En un sitio real, se recomienda comprobar los parámetros introducidos, procesar los errores, guardar un archivo de registro, etc.
Mejoras en la página
Vamos a mejorar la página Popup:
  • Agregar un control Botón para cerrar la página Popup.
  • Abrir la página Popup desde la página "PAGE_List_of_products".

Cerrar la página Popup

  • Para agregar un control Botón que permita cerrar la página Popup:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Botón".
    2. Haga clic en la página, en la ubicación en la que desea crear el control Botón (por ejemplo, en la parte inferior, a la derecha del botón "SEND").
      Creación del control para cerrar la página
    3. Seleccione el control y presione la tecla Entrar. El texto pasa a modo de edición. Introduzca "Cancel" y valide.
    4. Abra los eventos asociados al control (F2).
    5. Introduzca el siguiente código en el evento Clic (navegador):
      PopupClose()
      La función PopupClose cierra la Popup.
  • PopupClose es una función Navegador, por lo tanto, solo se puede ejecutar en los navegadores: no es necesario volver al servidor. Vamos a modificar el tipo del botón "Cancel":
    1. Haga doble clic en el botón "Cancel" para abrir la ventana de descripción.
    2. En la pestaña "General", en la sección "Acción del botón":
      • para el "tipo", seleccione "Ejecutar solo código de clic Navegador".
      • para "Durante la acción", seleccione "No enviar nada al servidor".
    3. Valide la ventana de descripción del control.
Veamos cómo abrir la página Popup.

Abrir la página Popup

La página Popup de envío de correos electrónicos se abrirá desde el menú de la página "PAGE_List_of_products".

  • Abra la página "PAGE_List_of_products": en las pestañas de documentos abiertos del editor, haga clic en "PAGE_List_of_products".
    Visualización de páginas Popup
  • Ahora vamos a crear un control Enlace para enviar una sugerencia:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Enlace".
    2. A continuación, haga clic en la parte superior de la página (debajo del control "Notifications"): el control Enlace se crea.
    3. Cambie el título por: "Send a suggestion" y valide.
    4. Haga doble clic en el control para abrir la ventana de descripción.
    5. En la sección "Acción del enlace":
      • Seleccione el tipo "Ejecutar solo código de clic Navegador".
      • Para "Durante la acción", seleccione "No enviar nada al servidor".
        Descripción del control Enlace
    6. Valide la ventana de descripción del control.
    7. Abra los eventos asociados al control Enlace (F2).
    8. Introduzca el siguiente código en el evento Clic (navegador):
      POPUP_NoName1.Display()
      La función <Popup>.Display muestra la Popup.

Nota

¿Por qué no abrimos la ventana popup desde el menú del modelo de páginas?
La página Popup está vinculada a "PAGE_List_of_products". Solo se puede utilizar desde esta página.
Para utilizar una Popup desde un modelo de páginas, esta debe crearse a partir del modelo de páginas.
  • Guarde la página y el código (Guardar un elemento o Ctrl + S).
  • Pruebe la página (haga clic en Probar página en los botones de acceso rápido) y abra la Popup para enviar una sugerencia.
    Prueba de la página Popup
  • Cierre el navegador.

Nota

¿Por qué no aparece el enlace en el navegador en la ubicación especificada?
En el editor de páginas, el control Enlace está situado encima del control de búsqueda, pero en tiempo de ejecución aparece encima de la opción "ADD A PRODUCT". Esta diferencia se debe al anclaje del control Enlace.
En el editor de páginas, aparecen varias flechas rojas en el encabezado de la página. Estas flechas indican que los controles están anclados. Veremos los anclajes en detalle en la lección Conceptos avanzados. El control Enlace que creamos no está anclado y sigue el movimiento de los controles a su alrededor.
  • Para anclar el control Enlace a la derecha (y evitar que se mueva):
    1. Seleccione el control Enlace.
    2. Haga clic derecho en el control y seleccione "Anclaje" en el menú contextual.
    3. En la ventana que aparece, seleccione la opción y valide.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 28
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 31/05/2023

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