AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV Mobile 2024!
Ayuda / Tutorial WINDEV Mobile / Tutorial - Desarrollar una aplicación Android e iOS
  • Lección 6 - Imprimir el catálogo de productos
  • Presentación
  • Crear un reporte
  • Prueba del reporte
  • Editar el reporte
  • Eliminar títulos
  • Cambiar el nombre del producto
  • Imagen, referencia y descripción del producto
  • Código de barras del producto
  • Precio del producto
  • Fecha de reaprovisionamiento del producto
  • Prueba del reporte
  • Imprimir el reporte mediante programación
  • Agregar una opción al control Zona multilínea
  • Configurar la nueva opción
  • Programar la impresión
  • En resumen

Tutorial - Desarrollar una aplicación Android e iOS

Lección 6 - Imprimir el catálogo de productos
Abordaremos los siguientes temas:
  • Crear un reporte de tipo formulario.
  • Imprimir un reporte.
Durée de la leçon 20 min
Presentación
En esta lección veremos cómo imprimir una lista de productos por referencia.
Para ello, crearemos un reporte de tipo formulario para representar un catálogo de datos.
¿Qué es un reporte?
Un reporte proporciona una vista personalizada de los datos: datos de una base de datos, de un archivo de texto, de un control Tabla, etc.
El principio para crear un reporte es el siguiente:
  • los datos a imprimir proceden de una fuente de datos (archivo de datos definido en un análisis, consulta, etc.).
  • el reporte agrupa, ordena y define el formato de los datos.
El reporte generado puede visualizarse en la aplicación móvil como un archivo PDF.


Advertencia
Esta lección se basa en el ejemplo WM Product Management utilizado en la lección 1. Para seguir esta lección, debe haber completado los pasos de las lecciones anteriores.
Crear un reporte
En primer lugar, vamos a crear un reporte de tipo formulario. Para ello, utilizaremos el asistente de creación de reportes:
  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. El asistente muestra varios tipos de reportes:
    Asistente de creación de reportes - Tipo de reporte
  3. Seleccione "Formulario". Pase a la etapa siguiente.
  4. Seleccione la fuente de datos del reporte. El reporte se basará en el archivo de datos Product. Seleccione "Un archivo de datos o una consulta existente".
    Asistente de creación de reportes - Fuente de datos
    Pase a la etapa siguiente.
  5. En la lista de archivos de datos y consultas, seleccione "Product".
    Asistente de creación de reportes - Seleccionar un archivo de datos
    Pase a la etapa siguiente.
  6. Defina la clave de búsqueda del archivo de datos. En nuestro caso, se recorrerá el archivo de datos Product utilizando la referencia del producto. Seleccione la clave de búsqueda: "Reference".
    Asistente de creación de reportes - Recorrer el archivo de datos
    Pase a la etapa siguiente.
  7. El asistente permite definir las opciones para ordenar los datos en el reporte. De forma predeterminada, el asistente propone el elemento utilizado como clave de búsqueda del archivo de datos.
    Asistente de creación de reportes - Orden de datos
    Conserve las opciones predeterminadas y pase a la siguiente etapa.
  8. El asistente pregunta si desea insertar rupturas.
    ¿Qué es una ruptura?
    Una Ruptura es una operación que permite agrupar registros (o filas) según uno o más criterios. Atención, los registros (o filas) se imprimirán.
    Una ruptura SIEMPRE ESTÁ relacionada con un criterio de ordenación.
    Para obtener más información, consulte Ruptura en un reporte.
    Asistente de creación de reportes - Ruptura
  9. En este reporte, no utilizaremos rupturas. Seleccione "No insertar rupturas en el reporte". Pase a la etapa siguiente.
  10. Especifique el orden en el que se imprimirán los campos y cómo se distribuirán en los diferentes bloques.
    • El campo ProductID no se mostrará en el reporte: deseleccione el campo ProductID.
    • Los campos se mostrarán en el bloque Cuerpo en el siguiente orden:
      • Caption
      • Photo
      • Description
      • Bar_Code
      • Price
      • Reference
      • Quantity
      • ReorderDate
    • Por cada campo, seleccione la fila correspondiente y utilice las flechas de la derecha para desplazarlo hacia arriba o hacia abajo en la lista.
      Asistente de creación de reportes - Campos a mostrar
  11. Pase a la etapa siguiente.
  12. Dado que el reporte muestra campos numéricos, esta etapa permite definir si se deben realizar cálculos en el reporte. En nuestro ejemplo, no es necesario realizar ningún cálculo. Haga clic en el botón "Ningún cálculo".
    Asistente de creación de reportes - Ruptura
    Pase a la etapa siguiente.
  13. Esta etapa permite definir el diseño del reporte.
    Asistente de creación de reportes - Formato de papel
    Conserve los valores predeterminados con la orientación "Vertical".
    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 ser diferentes según el tipo de impresora.
  14. Pase a la etapa siguiente.
  15. Esta etapa permite seleccionar la plantilla del reporte. Le recomendamos utilizar la misma plantilla de las ventanas. En nuestro caso, seleccione "Material 3".
    Asistente de creación de reportes - Plantilla del reporte
    Pase a la etapa siguiente.
  16. Por último, defina un nombre y un título para el reporte y guárdelo.
    • Introduzca el nombre: "RPT_Product".
    • Introduzca el título: "Product Catalog".
      Advertencia
      El nombre y el título son diferentes.
  17. Valide.
  18. El reporte se muestra en el editor de reportes.
    Reporte en modo de edición
  19. Guarde el reporte (Ctrl + S).
El reporte se genera. Vamos a probar el reporte para ver el resultado.
Prueba del reporte
Para probar el reporte que acabamos de crear:
  1. Haga clic en Probar elemento en los botones de acceso rápido.
  2. En la ventana de selección del modo de impresión, seleccione "Visor de reportes".
    Modo de impresión
  3. Valide. El reporte se ejecuta y muestra en el visor de reportes.
    Vista previa del reporte
Puede imprimir directamente la página actual o todo el documento haciendo clic en la impresora (pestaña "Imprimir").
Cierre el visor de reportes.
El visor de reportes permite obtener una vista previa real del reporte impreso. Este modo de impresión solo está disponible durante el desarrollo de la aplicación móvil.
Editar el reporte
El asistente nos ayudó a obtener un reporte listo para usar.
Para descubrir las características del editor de reportes, vamos a realizar algunos cambios en el reporte creado automáticamente para que se parezca más a un catálogo de productos.

Eliminar títulos

En un reporte, el título y el contenido de un control son independientes. Por ejemplo, los detalles del producto se muestran en dos controles:
  • un control Estático que categoriza los detalles del producto ("Desc.:" en nuestro reporte).
  • un control Estático enlazado a un archivo de datos, que mostrará los datos.
Para mejorar la presentación del reporte, elimine los títulos de los siguientes controles: Caption, Description, Bar code, Price y Reference.

Cambiar el nombre del producto

Vamos a mostrar el texto en Arial 20.
Para ello:
  1. Seleccione el control que corresponde al nombre del producto.
  2. Abra la ventana de descripción del control (seleccione "Descripción" del menú contextual).
  3. En la pestaña "Estilo", seleccione el elemento "Título principal".
  4. En "Fuente", seleccione "Arial".
  5. En "Tamaño", introduzca 20.
  6. Confirme los cambios y cierre la ventana de descripción.
  7. Adapte el tamaño del control (seleccione "Adaptar tamaño" en el menú contextual) y muévalo a la parte superior izquierda del bloque "Cuerpo".

Imagen, referencia y descripción del producto

Seleccione los distintos controles de la página (Description, Bar code, Price, Reference y Reorder date) y desplácelos a la mitad derecha del reporte.
Seleccione la foto del producto. Amplíe este control y ubíquelo debajo del nombre del producto.
Reduzca el tamaño del control que contiene la referencia y muévalo debajo de la imagen del producto.
Seleccione el control de la descripción del producto y muévalo a la derecha del control Imagen. Redúzcalo si es necesario.

Código de barras del producto

El código de barras del producto se muestra como texto sin formato. Lo reemplazaremos por un control Código de barras.
  1. Elimine el control que contiene el código de barras del producto.
  2. Seleccione los controles que aparecen abajo y desplácelos hacia abajo.
  3. En la pestaña "Creación", en el grupo "Datos", despliegue "Código de barras" y seleccione "EAN 128". Haga clic en el reporte debajo de la descripción del producto.
Ahora enlazaremos el control Código de barras al campo correspondiente en el archivo de datos:
  1. Abra la ventana de descripción del control (seleccione "Descripción" en el menú contextual).
  2. En la pestaña "Enlace", seleccione el campo "Bar_Code" en el archivo de datos Product.
  3. Valide la ventana de descripción del control.

Precio del producto

Vamos a modificar el estilo del precio del producto para que muestre más grande en el catálogo:
  1. Mueva el control del precio a la derecha del control Código de barras.
  2. Abra la ventana de descripción del control (seleccione "Descripción" del menú contextual).
  3. En la pestaña "Estilo", seleccione el elemento "Título principal".
  4. Realice los siguientes cambios:
    • En "Tamaño", introduzca 20.
    • Marque las casillas "N" (Negrita) y "K" (Cursiva).
  5. Confirme los cambios y cierre la ventana de descripción.
  6. Si es necesario, amplíe el control para que se muestre todo el contenido.

Fecha de reaprovisionamiento del producto

Cambie el texto del control "Reorder":
  1. Seleccione el control "Reorder".
  2. Pulse la barra espaciadora: el texto cambia a modo de edición.
  3. Introduzca "Reorder date".
  4. Valide (pulse Entrar).
  5. Abra el menú contextual del control y seleccione "Adaptar tamaño".
Alinee el control "Reorder date" a la derecha:
  1. Seleccione el control "Reorder date".
  2. En la pestaña "Modificación", en el grupo "Edición rápida", haga clic en el ícono "Alinear a la derecha".
  3. La fecha se alinea automáticamente a la derecha.
Vamos a ubicar los controles "Quantity" y "Reorder date" debajo del precio:
  1. Seleccione los controles "Quantity" y "Reorder date" (junto con sus campos correspondientes).
  2. Muévalos debajo del código de barras.

Prueba del reporte

Obtendrá el siguiente reporte:
Reporte en modo de edición
Guarde el reporte (Ctrl + S).
Hemos terminado de crear el reporte. Vamos a probar el reporte para ver el resultado.
Ejecute el reporte haciendo clic en Probar elemento en los botones de acceso rápido.
Seleccione "Visor de reportes" y valide. El reporte se ejecuta y muestra en el visor de reportes.
Vista previa del reporte
Puede imprimir directamente la página actual o todo el documento haciendo clic en la impresora (pestaña "Imprimir").
Cierre el visor de reportes y el simulador.
Imprimir el reporte mediante programación
Ahora que nuestro reporte está terminado, necesitamos integrar una funcionalidad de impresión en nuestra aplicación. Vamos a agregar una opción al control Zona multilínea en la ventana "WIN_Menu" para imprimir el reporte.

Agregar una opción al control Zona multilínea

Para insertar una nueva opción en la ventana "WIN_Menu":
  1. Abra la ventana "WIN_Menu" en el editor (haga doble clic en ella en el panel "Explorador").
  2. Seleccione el control Zona multilínea que contiene el menú.
  3. Abra la ventana de descripción del control (seleccione "Descripción" del menú contextual).
  4. En la pestaña "General", agregue una nueva fila entre "Map of stores" y "Exit application":
    • Haga clic en "Nueva fila".
    • En la ventana que aparece, seleccione "Fila simple con ícono".
    • Haga clic en "Finalizar".
  5. En la descripción del control Zona multilínea, seleccione la nueva fila y muévala una posición hacia arriba con las flechas (antes de "Exit application").
  6. Confirme los cambios y cierre la ventana de descripción.
Ahora modificaremos la fila que acabamos de insertar.

Configurar la nueva opción

Para cambiar la imagen de la tercera fila del control Zona multilínea:
  1. Haga clic en el control Imagen de la tercera fila.
  2. Haga doble clic en la imagen para abrir la ventana de descripción.
  3. En la ventana de descripción:
    • Defina un nombre para la imagen (por ejemplo, "IMG_Print").
    • Haga clic en Menú contextual a la derecha de "Imagen". Seleccione "Catálogo" en el menú contextual que aparece para seleccionar una imagen que represente la acción.
    • En el catálogo de imágenes, introduzca "Print" en la barra de búsqueda y presione la tecla Entrar.
    • Haga doble clic en la imagen que desea seleccionar.
    • En la ventana de configuración de la imagen, seleccione un tamaño (por ejemplo, A (Ancho) = 80 y A (Alto) = 80), defina un nombre para la imagen (por ejemplo, "Print") y valide.
  4. Valide la ventana de descripción.
Para cambiar el texto de la tercera fila del control Zona multilínea:
  1. Haga clic en el control Estático de la tercera fila.
  2. Haga doble clic en el control para abrir la ventana de descripción.
  3. En la pestaña "General" de la ventana de descripción:
    • Defina un nombre para el control (por ejemplo, "STC_Print").
    • Cambie el título (por ejemplo, "Print catalog").
  4. Confirme los cambios y cierre la ventana de descripción.
  5. El menú aparece en el editor.
"Print catalog" aparece en gris. Vamos a copiar el estilo de "Map of stores" y lo aplicaremos a la nueva opción de menú:
  1. Seleccione "Map of stores".
  2. En la pestaña "Estilo", en el grupo "Estilo y plantilla", seleccione "Copiar estilo".
  3. El cursor se convierte en un pincel.
  4. Haga clic en "Print catalog". El estilo se aplica automáticamente al control.
Obtendrá la siguiente ventana:
Menú en modo de edición

Programar la impresión

Vamos a cambiar el código WLanguage utilizado para seleccionar el control Zona multilínea.
  1. Seleccione el control Zona multilínea.
  2. Abra los eventos WLanguage asociados (F2).
  3. Reemplace la línea:
    CASE 3 // Exit application
    Close()
    por:
    CASE 3 // Print catalog
    iDestination(iGenericPDF)
    RPT_Product.Print()
    // Open file 
    ShellExecute(iLastFile())
    CASE 4 // Exit application 
    Close()
    En este código WLanguage:
    • La función iDestination permite configurar el destino de la impresión. En nuestro caso (una aplicación móvil), el reporte que creamos se imprimirá como un archivo PDF utilizando la constante iPDFGeneric.
    • la función <Reporte>.Print imprime el reporte RPT_Product. El archivo PDF correspondiente se crea.
    • la función ShellExecute muestra el archivo PDF generado en el lector de PDF (devuelto por la función iLastFile) disponible en el dispositivo actual.
  4. Guarde los cambios haciendo clic en Guardar elemento en los botones de acceso rápido.
  5. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).
Pruebe la ventana y sus opciones de menú haciendo clic en Probar elemento en los botones de acceso rápido. En el simulador, el archivo PDF del catálogo de productos se genera y abre en el lector de PDF instalado en el equipo actual.
Dado que en nuestro ejemplo el menú también se muestra como una ventana deslizante, la opción de impresión del catálogo de productos también puede añadirse en la ventana IW_MLZ_Options.
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 y los reportes creados y utilizados en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Tutorial - Develop an Android/iOS application", haga doble clic en "Android/iOS product management - Answers".
En esta lección, vimos cómo crear y editar un reporte, y cómo imprimirlo mediante programación.
En la próxima lección, veremos cómo utilizar servicios web en una aplicación WINDEV Mobile.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 12/12/2023

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