Tutorial - Desarrollar una aplicación Android e iOS

1. Haga clic en 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:
   
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".
   
   Pase a la etapa siguiente.
5. En la lista de archivos de datos y consultas, seleccione "Product".
   
   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".
   
   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.
   
   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.
   
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.
      
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".
    
    Pase a la etapa siguiente.
13. Esta etapa permite definir el diseño del reporte.
    
    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".
    
    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.
    
    
19. Guarde el reporte (Ctrl + S).

1. Haga clic en en los botones de acceso rápido.
2. En la ventana de selección del modo de impresión, seleccione "Visor de reportes".
   
3. Valide. El reporte se ejecuta y muestra en 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.

Eliminar títulos

• 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.

Cambiar el nombre del producto

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

Código de barras del producto

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.

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

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

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".

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.

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:

Guarde el reporte (Ctrl + S).

Ejecute el reporte haciendo clic en en los botones de acceso rápido.

Seleccione "Visor de reportes" y valide. El reporte se ejecuta y muestra en el visor de reportes.

Agregar una opción al control Zona multilínea

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.

Configurar la nueva opción

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 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.

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.

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:

Programar la impresión

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 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 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.