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
  • Imprimir desde Internet
  • Impresión directa
  • Generar documentos HTML, PDF o XML
  • ¿Qué es un reporte?
  • Crear un reporte de factura
  • Crear una consulta
  • Crear un reporte basado en una consulta
  • Modificar el reporte de factura
  • Abrir la vista previa del reporte mediante un control Botón
  • Implementar el proceso de impresión
  • Prueba de la impresión
Lección 5.2. Imprimir una factura
Esta lección abarcará los siguientes temas
  • Crear un reporte basado en una consulta.
  • Imprimir un reporte basado en una consulta con parámetros.
Duración de la lección

Tiempo estimado: 45 min
Lección anteriorTabla de contenidoSiguiente lección
Presentación
Los usuarios podrán imprimir directamente la factura del pedido buscado.

  • 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".
Imprimir desde Internet
De hecho, no se debería hablar de "imprimir" desde Internet. Cuando hay que imprimir un documento, se genera un archivo HTML, PDF o XML que se envía al navegador. Una vez el archivo en el navegador, el usuario decide si desea imprimir el documento.
También es posible enviar un "trabajo de impresión" al servidor. Sin embargo, el usuario final no podrá acceder al documento impreso (en el servidor o en una red compartida).
El documento generado se prepara en el editor de reportes. Los datos del documento pueden provenir de una base de datos.
Existen dos tipos de trabajos de impresión:
  • Impresión directa (en el servidor).
  • Generación de varios documentos (HTML, PDF, etc.).

Impresión directa

La impresión directa consiste en imprimir en una impresora directamente. La impresora está conectada al servidor o se puede acceder a ella desde la red.
La impresión directa con WEBDEV se recomienda solo para sitios de Intranet o Extranet. Este tipo de impresión permite imprimir los registros de conexiones de los clientes o imprimir directamente los pedidos en la impresora del departamento de ventas.

Generar documentos HTML, PDF o XML

La impresión a partir de documentos HTML, PDF o XML consiste en crear un documento que se mostrará en el navegador del usuario. Para crear este documento, puede utilizar el editor de reportes de WEBDEV. Así, su sitio WEBDEV puede generar un archivo con formato a partir de una fuente de datos. El archivo puede estar en formato HTML, PDF, RTF o XML.
La principal ventaja de este método es que el archivo puede ser enviado al navegador. El usuario puede imprimir el documento o guardarlo en el equipo.
La generación de un archivo puede utilizarse tanto para un sitio de Internet como de Intranet o Extranet (por ejemplo: si quiere enviar una orden de compra como PDF al usuario, etc.).
¿Qué es un reporte?
En nuestro ejemplo, la factura a imprimir corresponde a un reporte. Un reporte es un elemento del proyecto que agrupa y da formato a los datos que se van imprimir. WEBDEV incluye un editor de reportes específico para crear y editar reportes.
Un reporte incluye:
  • diferentes bloques. Los bloques definen las áreas en las que se mostrarán los datos. Los bloques disponibles son los siguientes:
    • Inicio de documento: se muestra solo en la primera página.
    • Encabezado de página: aparece en la parte superior de cada página.
    • Cuerpo: contiene los datos. Este bloque aparece siempre que haya datos por imprimir.
    • Pie de página: aparece en la parte inferior de cada página.
    • Fin de documento: aparece solo en la última página.
  • controles para mostrar los datos.
Veamos el reporte que vamos a crear:
Reporte de factura a crear
Crear un reporte de factura
Primero, vamos a definir los datos que se mostrarán en el reporte:
  • Las características del pedido: fecha y número de pedido.
  • Los datos personales del cliente: nombre, dirección, código postal, ciudad y país.
  • Las características de las líneas de pedido:
    • Cantidad del pedido,
    • Referencia del producto,
    • Título del producto,
    • Total sin impuestos,
    • Total con impuestos.
Para crear el reporte fácilmente, los datos a imprimir se agruparán en una consulta. Esta consulta puede ser utilizada por el reporte o por cualquier otro elemento del proyecto WEBDEV (control Tabla, Looper, etc.).

Nota

WEBDEV permite crear reportes a partir de diferentes fuentes de datos: archivos de datos, consultas, controles, archivos de texto, etc.
En la mayoría de los casos, se recomienda agrupar los datos a imprimir en una consulta y luego, crear un reporte basado en dicha consulta. Para agregar datos al reporte, simplemente agregue el campo correspondiente a la consulta.
Los reportes basados en archivos de datos deben ser reportes simples, es decir, que muestren datos de un solo archivo de datos.

Crear una consulta

  • Vamos a utilizar el editor de consultas para crear la consulta base del reporte.
    1. Haga clic en Crear un elemento en los botones de acceso rápido. La ventana de creación de nuevos elementos se abre: haga clic en "Consulta­". El asistente de creación de consultas se abre.
    2. Elija la opción "Selección (SELECT)".
      Esta consulta nos permitirá seleccionar los registros que se imprimirán en el reporte. Pase a la etapa siguiente.
    3. La ventana de descripción de la consulta se abre.
  • En primer lugar, defina el nombre de la consulta: cambie "QRY_NoName1" por "QRY_Invoice" en "Nombre de la consulta".
  • Para construir la consulta, vamos a seleccionar los elementos que se mostrarán en el resultado. La consulta contendrá los datos de los archivos de datos Order, OrderLine y Customer.
    1. En la parte izquierda de la pantalla, seleccione el archivo de datos Order y haga clic en la flecha (Flecha): los campos del archivo de datos Order aparecen en el centro de la pantalla.
    2. Repita esta acción para los archivos de datos OrderLine y Customer.
La ventana de descripción de la consulta es la siguiente:
Ventana de descripción de la consulta
Hasta ahora, esta consulta permite seleccionar todos los pedidos y las líneas de pedido correspondientes.
Vamos a reorganizar los campos de la consulta. Este orden se utilizará para crear los diferentes controles del reporte basado en la consulta. El nombre del producto estará ubicado justo después de la referencia.
  • Para reorganizar los campos:
    1. Seleccione el campo ProductCaption del archivo de datos OrderLine.
    2. Haga clic en el botón Flecha para reorganizar los campos a la derecha de la lista de campos. El campo se desplaza hacia arriba.
    3. Posicione el campo justo después de la referencia del producto (OrderLine.Reference).
Vamos a seleccionar los datos de un solo pedido utilizando un identificador. Por lo tanto, vamos a definir el número de pedido como un parámetro.
  • Para definir el parámetro "Order ID":
    1. Seleccione el campo Order.OrderID en el centro de la ventana.
    2. Haga clic en la cuarta columna (ver nota a continuación): en el menú que aparece, seleccione "Nueva condición".

      Nota

      En la ventana de descripción de la consulta, la sección que muestra la lista de elementos de la consulta incluye 4 columnas:
      • Una columna con el nombre del campo
      • Una columna para mostrar u ocultar el campo en el resultado de la consulta
      • Una columna para establecer el orden de los campos
      • Una columna con el número de condiciones asociadas al campo.
      Para acceder a una de estas opciones, simplemente haga clic en la columna correspondiente.
    3. En la ventana que aparece, vamos a especificar que la condición de selección corresponde a un parámetro:
      Descripción de la condición
      Realice las siguientes operaciones:
      • Seleccione "Es igual a".
      • Seleccione "el parámetro".
      • Especifique el nombre del parámetro: "ParamOrderID".
    4. Valide la ventana de descripción de la condición. El número "1" aparece a la derecha del campo Order.OrderID para indicar que se ha definido una condición de selección.
    5. El identificador del pedido no se mostrará. Vamos a ocultarlo: haga clic en el ojo que se encuentra en la línea del campo y seleccione "No mostrar".
    6. Del mismo modo, oculte los siguientes campos:
      • Order.Status,
      • Order.CustomerID,
      • Order.PaymentModeID,
      • OrderLine.OrderID,
      • Customer.CustomerID.
    7. Valide la ventana de descripción de la consulta (botón "OK").
    8. Valide la información propuesta
    9. La representación gráfica de la consulta aparece en el editor:
      Representación gráfica de la consulta

Crear un reporte basado en una consulta

  • Para crear un reporte:
    1. Haga clic en Crear un elemento en los botones de acceso rápido.
    2. La ventana de creación de nuevos elementos se abre: haga clic en "Reporte", y luego en "Reporte". El asistente de creación de reportes se abre.
    3. El asistente muestra varios tipos de reportes:
      Asistente de creación del reporte - Tipos de reportes
    4. Seleccione "Tabla". Pase a la etapa siguiente.
    5. Seleccione la fuente de datos del reporte. El reporte se basará en la consulta que acabamos de crear. Seleccione "Un archivo de datos o una consulta existente". Pase a la etapa siguiente.
      Asistente de creación de reportes - Fuente de datos
    6. En la lista de archivos de datos y consultas, seleccione la consulta "QRY_Invoice". Pase a la etapa siguiente.
    7. El asistente pregunta si desea insertar rupturas. En este reporte, no vamos a utilizar rupturas. Este concepto se presentará más adelante en este tutorial. Seleccione "No insertar rupturas en el reporte". Pase a la etapa siguiente.
    8. Vamos a especificar el orden en el que se imprimirán los campos y cómo se distribuirán en los diferentes bloques:
      • Los campos del cliente aparecerán en el bloque "Inicio de documento". No es necesario repetir estos datos en cada línea de pedido.
      • Los campos del pedido se mostrarán en el bloque "Encabezado de página". No es necesario repetir estos datos en cada línea de pedido.
      • Los campos de las líneas de pedido se mostrarán en el cuerpo del reporte. Estos campos se mostrarán para todas las líneas de pedido.
      • Los campos que contienen los totales se mostrarán en el bloque "Fin de documento". No es necesario repetir estos datos en cada línea de pedido.
        Asistente de creación de reportes - Campos a mostrar
        La siguiente tabla muestra los diferentes campos asignados a los bloques en el mismo orden en que aparecen en el asistente:
        CampoBloque
        OrderNumInicio de documento
        DateEncabezado de página
        TotalBT Fin de documento
        TotalVATFin de documento
        TotalIOT Fin de documento
        ReferenceCuerpo
        QuantityCuerpo
        TotalIOT_OrCuerpo
        TotalBT_OrCuerpo
        ProductCaption Cuerpo
        UnitPriceBTCuerpo
        CompanyInicio de documento
        FullNameInicio de documento
        AddressInicio de documento
        ZipCodeInicio de documento
        CityInicio de documento
        StateCountyInicio de documento
        CountryInicio de documento
        PhoneDeseleccionar
        CellDeseleccionar
        EmailDeseleccionar
    9. Pase a la etapa siguiente.
    10. El asistente propone crear un contador, una suma o un promedio en los campos numéricos del reporte. En este reporte, los cálculos se realizan mediante la consulta. Haga clic en el botón "Ningún cálculo". Pase a la etapa siguiente.
    11. Esta etapa permite definir el diseño del reporte.
      Asistente de creación del reporte - Diseño
      Conserve los valores predeterminados con la orientación "Vertical".

      Nota

      Márgenes de impresión
      Cuando elija los márgenes de impresión, no olvide tener en cuenta los márgenes físicos de las impresoras. Los márgenes físicos de las impresoras son márgenes en los que no se puede imprimir. Además, los márgenes físicos pueden cambiar según los modelos de impresora.
    12. Pase a la etapa siguiente.
    13. Esta etapa le permite seleccionar la plantilla del reporte. Le recomendamos utilizar la misma plantilla de las páginas. En este caso, seleccione la plantilla "Phoenix" y pase a la etapa siguiente.
    14. Por último, especifique un nombre y un título para el reporte.
      • Defina "RPT_Invoice" como nombre del reporte.
      • En el título, introduzca "Invoice".
        Asistente de creación del reporte - Nombre y título del reporte
    15. Valide.
    16. Tal como está definida la tabla no cabe en una página A4 en modo vertical. WEBDEV sugiere:
      • imprimir el reporte en 2 páginas horizontalmente,
      • cambiar al modo horizontal,
      • reducir el tamaño de la tabla.
        Reducir el tamaño del reporte
      Seleccione "Reducir tabla".
    17. Valide la información propuesta.
    18. El reporte se muestra en modo de edición en el editor de reportes:
      Reporte en el editor
    19. Las diferentes líneas de pedido se agrupan en una tabla.
  • Ejecute el reporte haciendo clic en Probar un elemento en los botones de acceso rápido.
    1. El editor de reportes propone varios destinos de impresión. Puede seleccionar uno de los siguientes destinos:
      • Visor de reportes: el reporte se muestra en la pantalla en una ventana específica.

        Nota

        El visor de reportes solo está disponible al desarrollar el sitio.
        En tiempo de ejecución, el usuario no podrá utilizar el visor de reportes. La vista previa del archivo generado se mostrará en el navegador.
      • Impresora: el reporte se imprime en la impresora predeterminada.
      • Archivo específico: el reporte se imprime en un archivo en el formato seleccionado.
        Seleccionar modo de impresión
      Seleccione "Visor de reportes" y valide.
    2. El editor de reportes le pide que introduzca los parámetros de la consulta utilizada por el reporte. Anteriormente, utilizamos un parámetro para especificar el número del pedido que se va a imprimir. Para este ejemplo, introduzca el valor "5".
      Introducir los parámetros de la consulta
      Valide.
    3. El reporte se muestra en la pantalla.
      Reporte en el visor de reportes
    4. Cierre el visor de reportes.

Modificar el reporte de factura

Vamos a realizar algunos cambios en el reporte creado anteriormente.
  • Vamos a mover la información del cliente y del pedido a la parte superior de la página:
    1. Elimine el texto a la izquierda de los datos del cliente (Nombre, etc.).
    2. Ubique el campo que contiene la ciudad junto al código postal.
    3. Utilice los controles de tamaño para agrandar el control que contiene el nombre de la empresa: el tamaño del control debe ser el mismo que el de los controles Zip Code y City.
    4. Alinee los controles:
      • Seleccione el control Company.
      • Presione Ctrl y seleccione los controles que contienen la dirección, el estado y el país.
      • En la pestaña "Alineación", haga clic en "Justificar (Int. y Ext.)".
        Pestaña Alineación
    5. Seleccione los datos del cliente y desplácelos a la derecha del reporte.
    6. Desplace el número de pedido: ubíquelo en la parte de arriba del bloque "Encabezado de página"
      Cambio de posición del control que contiene el número de pedido
  • Vamos a agregar un borde alrededor de los datos del cliente. Para ello, insertaremos un control Estático sobre los datos del cliente. Solo los bordes del control Estático serán visibles.
    1. Cree un control Estático: en la pestaña "Creación", en el grupo "Texto", haga clic en "Estático".
    2. Haga clic dentro del área "Inicio de documento", donde se muestran los datos del cliente.
    3. Presione Shift y amplíe el control Estático con los tiradores de tamaño para que se superponga a los datos del cliente. Esta operación permite ampliar el control Estático sin mover los controles que se encuentran debajo (con contienen los datos del cliente).
    4. En el menú contextual del control Estático, seleccione "Editar título" y borre el texto. Haga clic en cualquier lugar del reporte para confirmar los cambios.
  • Para configurar los bordes:
    1. Seleccione el control Estático creado previamente.
    2. Presione R y haga clic en el ícono Configurar los bordes en la esquina superior derecha del control.
    3. Seleccione la opción "Editar bordes". Las opciones de configuración aparecen:
      Opciones de configuración de los bordes
    4. Seleccione:
      • el color "Azul" en los colores contextuales.
      • un borde simple (línea delgada).
      • un redondeo de 2 mm para el ancho y alto.
  • Vamos a establecer la posición de los totales en el bloque "Fin de documento":
    1. Seleccione los controles del bloque "Fin de documento" que contienen los totales.
    2. Ubique los controles en la esquina inferior derecha de la tabla (arriba del texto "Developed with WEBDEV").
    3. El reporte se muestra en el editor de reportes:
      Reporte en el editor de reportes
    4. Hemos terminado el reporte de factura ("Invoice"). Guarde el reporte haciendo clic en el ícono Guardar un elemento en los botones de acceso rápido.
    5. Verifique los cambios realizados abriendo el reporte en modo "Visor de reportes" (haga clic en Probar reporte en las opciones de acceso rápido).
      Reporte en modo 'Visor de reportes'
    6. Cierre el visor de reportes.
Abrir la vista previa del reporte mediante un control Botón
Como vimos al principio de esta lección, dado que el sitio se ejecuta en un servidor, el documento se enviará a una impresora conectada al servidor (inaccesible para los usuarios).
El reporte se generará como un documento PDF en el servidor, y luego podrá descargarse o mostrarse en el equipo del usuario. Así, los usuarios podrán imprimir el documento en sus impresoras.
En nuestro sitio, el reporte "RPT_Invoice" se imprimirá mediante un control Botón ubicado en la página que permite buscar los pedidos. Este control Botón imprimirá la factura del pedido seleccionado.
Observación: Para completar esta parte del tutorial, se debe haber creado la página "PAGE_Multicriteria_Search" en la Lección 5.1. Búsqueda con varios criterios.

Implementar el proceso de impresión

Para imprimir el reporte "RPT_Invoice":
  1. Vaya a la página "PAGE_Multicriteria_Search": haga clic en "PAGE_Multicriteria_Search" en las pestañas de los documentos abiertos.
  2. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Botón".
  3. Haga clic a la derecha del control Tabla para crear el control Botón.
  4. Seleccione el control y presione la tecla Entrar. El texto pasa a modo de edición.
  5. Reemplace "BOTÓN" por "PRINT" y valide los cambios.
    Control Botón en el editor
  6. Abra el código del botón (F2) y escriba el siguiente código en el evento "Clic en xxx (servidor)":
    iDestination(iGenericPDF)
    RPT_Invoice.InitQuery(TABLE_QRY_FindOrders.COL_OrderID[TABLE_QRY_FindOrders])
    RPT_Invoice.Print()
    FileDisplay(iLastFile(), "application/pdf")

    Analicemos este código:
    • La función iDestination define el formato de impresión (PDF en este caso).
    • Dado que el reporte "RPT_Invoice" se basa en una consulta con parámetros, se debe pasar el parámetro a la consulta antes de ejecutar el reporte. Esta operación se realiza con la función <Reporte>.InitQuery. En nuestro caso, el parámetro corresponde al número del pedido actual, que aparece en el control Tabla.
    • La función <Reporte>.Print permite generar el reporte "Report_Invoice" en el formato especificado (PDF en este caso).
    • La función FileDisplay muestra la factura al usuario:
      • La función iLastFile devuelve la ruta del último archivo generado por un reporte.
      • "application/pdf" es el tipo MIME del archivo devuelto. Cuando se especifica este tipo, el navegador muestra directamente el archivo o elige la aplicación que se utilizará para mostrar el archivo en el equipo del usuario final.
  7. Cierre el editor de código.
  8. Guarde la página (Guardar un elemento o Ctrl + S).

Prueba de la impresión

  • Ahora, solo tenemos que hacer una prueba real:
    1. Pruebe la página "PAGE_Multicriteria_Search".
    2. Especifique los criterios deseados e inicie la búsqueda.
    3. Seleccione uno de los pedidos que se muestran en el control Tabla.
    4. Imprima el pedido con el botón "PRINT".
      Imprimir reporte
    5. El navegador abre el archivo PDF. El navegador cambió la página actual por el archivo PDF. Vamos a cambiar este comportamiento.
    6. Cierre el navegador.
  • Para abrir el archivo PDF en otra pestaña o navegador:
    1. Haga doble clic en el botón "Print" en la página "PAGE_Multicriteria_Search". La ventana de descripción se abre.
    2. En la pestaña "General", en "Destino", seleccione "Nueva pestaña del navegador".
      Impresión en una nueva pestaña
    3. Valide.

Nota

¿Nueva pestaña o nueva ventana?
Ni el usuario ni el desarrollador del sitio pueden elegir si la vista previa de impresión se abrirá en una nueva pestaña o en una nueva ventana. Es el navegador el que determina cuál de las dos opciones se utiliza. Este comportamiento puede variar según el navegador utilizado.
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