Tutorial - Desarrollar una aplicación Android e iOS

• una ventana con la lista de productos. Al hacer clic en un producto, se abrirá una ventana que permitirá modificarlo. También será posible crear un nuevo producto.
• una ventana para manipular mapas.
• una ventana con un menú.

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 la lección 1.

Crear la ventana

1. Haga clic en en los botones de acceso rápido (o presione Ctrl + N).
2. En la ventana "Nuevo", haga clic en "Ventana" y, a continuación, en "Ventana".
3. En el asistente, seleccione la pestaña "Estándar".
4. En la sección "Teléfono", seleccione "Looper" y valide.
   
   

   Recordatorio: Las diferentes lecciones de este tutorial se basan en una configuración Android. Si utiliza una configuración iOS, es posible que encuentre opciones específicas de iOS.
5. El asistente de creación de ventanas se abre.
6. Como nuestro proyecto contiene varias plataformas (iOS y Android), el asistente le pide que seleccione la plataforma que desea utilizar para crear la ventana. Le recomendamos que seleccione la plataforma con la menor resolución (en este caso, "iPhone Genérico").
   
   Pase a la etapa siguiente del asistente.
   
   

   Si su proyecto contiene ambas plataformas (Android e iOS), al elegir "iPhone genérico" se generará automáticamente la ventana para esta plataforma. "iOS" se convierte automáticamente en la plataforma actual del proyecto.
7. El asistente le pide que elija la fuente de datos de la ventana. En nuestro caso, vamos a elegir el archivo de datos "Product":
   • La opción "Archivos de datos" está seleccionada de forma predeterminada.
   • Seleccione el archivo de datos Product.
     
8. Pase a la etapa siguiente.
9. Seleccione el estilo del control Looper: "Imagen + Título + Texto abajo". Este modelo proporciona una interfaz que contiene la imagen, el nombre y la descripción del producto.
   
10. Pase a la etapa siguiente.
11. El asistente propone automáticamente los campos del archivo de datos que corresponden a los controles del Looper generado.
    
12. Conserve los campos predeterminados y pase a la etapa siguiente.
13. Conserve el campo de ordenación sugerido "ProductID". Pase a la etapa siguiente.
14. El asistente propone varias opciones para generar la ventana de tipo Looper:
    
    • Generar un botón de creación en el Action Bar: Si se selecciona esta opción, el asistente propone generar una ventana en modo de edición.
    • Permitir eliminar deslizando una fila: Si se selecciona esta opción, el usuario podrá eliminar un elemento del control Looper deslizando la fila correspondiente.
    • Código de selección de filas: Si se selecciona la opción "Generar el código de apertura en modo de solo lectura" (o "Generar el código de apertura en modo de edición"), el asistente propone generar una ventana en modo de solo lectura o de edición.
15. En este caso, conserve las opciones predeterminadas. Pase a la etapa siguiente.
16. Defina un título y un nombre para la ventana. Introduzca el título de la ventana: "List of products". El nombre de la ventana se crea automáticamente a partir del título.
    
17. Finalice el asistente. La ventana se crea automáticamente, se muestra en el editor y se guarda. Si el proyecto utiliza las configuraciones iOS y Android, la ventana aparece en la configuración iOS.
    
    
    
    

    Los datos ya se muestran en el control, incluso en el editor. Este concepto es conocido como "Live data": el contenido de los archivos de datos que se encuentran en el equipo de desarrollo se utiliza en las ventanas o reportes manipulados en el editor. Esta funcionalidad es especialmente útil para definir el tamaño de los controles en una ventana, por ejemplo. También puede utilizarse para adaptar el tamaño de los controles al contenido.

1. Despliegue la opción "Configuraciones (Aplicación iOS)" en la parte superior del panel "Explorador de proyectos".
2. Haga doble clic en el nombre de la configuración "Aplicación Android".
3. La configuración Android se selecciona automáticamente y la ventana que creamos aparece en esta configuración.

Prueba de la ventana

1. Haga clic en en los botones de acceso rápido (o pulse F9).
   
2. Cierre el simulador para volver al editor de ventanas.

Cuando un proyecto está asociado a varias plataformas, la ventana se prueba en la plataforma actual. El simulador se adapta a la plataforma actual.

Crear la ventana

1. Cree una nueva ventana en blanco.
   • Haga clic en en los botones de acceso rápido.
   • La ventana de creación de nuevos elementos se abre: haga clic en "Ventana", y luego en "Ventana".
   • En el asistente, seleccione la pestaña "Estándar", elija "En blanco" y valide.
2. La ventana para guardar el elemento se abre. Introduzca el título de la ventana: "Product form". El nombre se define automáticamente: "WIN_Product_form".
   
   Valide.
3. La ventana se agrega al proyecto, para todas las configuraciones.

Si se definen varias plataformas en el proyecto, la ventana asocia el nuevo elemento a todas las plataformas.
Para asociar el elemento a una sola plataforma, simplemente despliegue "Configuraciones" y elija la plataforma deseada.

Crear los controles

1. Abra el panel "Análisis" si es necesario: en la pestaña "Inicio", en el grupo "Entorno", despliegue "Paneles", seleccione "Paneles" y, a continuación, haga clic en "Análisis". Los diferentes archivos de datos del análisis de "WM Product Management" aparecen en el panel.
2. Seleccione los campos del archivo de datos "Product" que se muestran en el panel (excepto "ProductID").
3. Arrastre los campos y suéltelos en la ventana (por ejemplo, en el área superior izquierda).
   

Mejorar la UI

1. Si es necesario, seleccione todos los controles (Ctrl + A).
   Observación: Al crear los controles, estos están seleccionados de forma predeterminada.
2. Desplace todos los controles hacia abajo.

Al desplazar el control Imagen, aparecen guías de alineación. Estas guías le ayudan a ubicar los controles con respecto a la ventana o a otros controles.

1. Seleccione ambos controles (primero seleccione "Caption").
2. Vaya a las opciones de alineación (pestaña "Alineación" de la cinta de opciones de WINDEV Mobile).
   
3. Vamos a alinear los bordes externos e internos de los controles. Haga clic en la opción "Justificar (Int. y Ext.)".
   

Consejo: Puede ajustar el tamaño del área de entrada utilizando los puntos rojos de los controladores de tamaño para reducir el espacio entre el título y el área de entrada.

Obtendrá el siguiente resultado.

Orden de tabulación en la ventana
Hemos cambiado el orden de los controles en la ventana. Este orden define cómo se mueve el foco de un control a otro. Para obtener más información, consulte Orden de tabulación en una ventana, página, etc.

1. Pruebe la ventana (haga clic en en los botones de acceso rápido).
2. La ventana se muestra con los controles vacíos.
3. Cierre el simulador.

Mostrar los datos de un registro determinado en la ficha del producto

1. Abra los eventos WLanguage de la ventana WIN_Product_form:
   • En las pestañas de documentos abiertos, haga clic derecho en la pestaña de la ventana actual.
   • En el menú contextual que aparece, seleccione "Código del elemento".
     
   • El editor de código se abre.
2. Introduzca el siguiente código WLanguage en el evento "Fin de inicialización de WIN_Product_form":
   
   Product.ToWindow()
   
   
   La función <Archivo de datos>.ToWindow obtiene los datos del registro actual en el archivo de datos y los muestra en los controles de la ventana. En este caso, el registro actual es el registro seleccionado en el control Looper de la ventana "WIN_List_of_products". El control Looper está relacionado con el archivo de datos Product.
3. Cierre la ventana de código.
4. Guarde la ventana.

Abrir la ficha de producto desde la lista de productos

1. Seleccione la ventana "List of products": haga clic en "WIN_List_of_products" en las pestañas de documentos abiertos (debajo de la cinta de opciones de WINDEV Mobile):
   
2. Seleccione el control Looper.
   Atención: asegúrese de seleccionar el control Looper y no uno de sus controles.
3. Haga clic derecho para abrir el menú contextual del control Looper y seleccione "Código".
4. En el editor de código, escriba el siguiente código WLanguage en el evento "Selección de una fila de LOOP_Product":
   
   WIN_Product_form.OpenMobileWindow()
   
   
   
   

   Empiece a escribir el código y siga las sugerencias del sistema de completado de código: una lista desplegable con los nombres de los diferentes elementos del proyecto aparece al escribir el nombre de la ventana. Seleccione el nombre de la ventana deseada.
   Así mismo, las diferentes funciones y propiedades que se pueden utilizar en la ventana aparecen cuando se inserta un punto ('.') después del nombre de la ventana.
5. Guarde los cambios haciendo clic en en los botones de acceso rápido.
6. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

1. Haga clic en en los botones de acceso rápido.
2. En la lista de productos, haga clic en uno de ellos.
3. La ventana de detalles del producto se abre.

Agregar una opción de validación al Action Bar

1. Abra la ventana "WIN_Product_form" en el editor (selecciónela en las pestañas de documentos abiertos).
2. Seleccione el Action Bar (en la parte superior de la ventana).
3. Abra la ventana de descripción del Action Bar (seleccione "Descripción" en el menú contextual).
   
   
   
   

   La ventana de descripción del Action Bar se adapta a las plataformas utilizadas en el proyecto. El Action Bar de una aplicación Android es diferente del Action Bar de una aplicación iOS.

   Nuestro proyecto utiliza la configuración Android y iOS: la ventana muestra una vista previa del Action Bar para ambas plataformas. Los números le permiten acceder a las opciones que desea configurar.

   Solo utilizaremos las opciones necesarias para nuestro ejemplo. Para obtener más información, consulte Descripción del control Action Bar.
4. Haga clic en el número 2 (cualquier número 2 en la ventana). Una nueva UI permite introducir una opción en el Action Bar.
5. Haga clic en el botón "+" (debajo del área "Arriba a la derecha") para agregar una opción. Una nueva opción se crea en la parte superior derecha.
6. Cambie las características de la opción:
   • En la sección "Título de la opción", escriba "Done".
     
     
     
     

     Al ejecutar la aplicación, el texto de la opción se muestra en el Action Bar:

     • Si no hay ninguna imagen asociada a la opción.
     • Si la opción se mueve al menú inferior.
   • En la sección "Imagen predefinida", despliegue la lista y seleccione "Validar".
     
   • Confirme los cambios y cierre la ventana de descripción.
     
     

     Para volver a la descripción general del Action Bar, haga clic en .
7. El código WLanguage de esta opción permitirá guardar los cambios en la ventana "WIN_Product_form". Para escribir este código:
   • Seleccione el control Action Bar.
   • Haga clic en "OK".
   • Enseguida, se despliega un menú con la opción "Done".
     
     
     
     

     Este menú desplegable solo se muestra en modo de edición para introducir el código WLanguage asociado a la opción. El menú desplegable no se muestra en tiempo de ejecución.
   • Haga clic derecho en la opción.
   • Seleccione "Código" en el menú contextual que aparece.
   • Escriba el siguiente código WLanguage en el evento "Selección del menú":
     
     Product.FromWindow()
     Product.Save()
     Close()
     
     
     Analicemos estas líneas de código:
     • La función <Archivo de datos>.FromWindow actualiza los campos del registro actual con los datos de los controles enlazados en la ventana.
     • La función <Archivo de datos>.Save actualiza el registro actual en el archivo de datos.
8. Guarde los cambios haciendo clic en en los botones de acceso rápido.
9. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

Actualizar la lista de productos

1. Haga clic en "WIN_List_of_products" en las pestañas de documentos abiertos:
   
2. Haga clic derecho en el fondo de la ventana y seleccione "Código" en el menú contextual. El siguiente código WLanguage se muestra automáticamente en el evento "Cierre de una ventana hija":
   
   LooperDisplay(LOOP_Product,taCurrentSelection)
   
   
   
   

   El código generado no utiliza la sintaxis con prefijo, sino la sintaxis "estándar" de WLanguage. En la sintaxis con prefijo, el código es el siguiente:

   LOOP_Product.Display(taCurrentSelection)
   
3. Analicemos este código WLanguage:
   • El evento "Cierre de una ventana hija" se ejecuta cada vez que se cierra una ventana hija de la ventana actual. En nuestro caso, se ejecuta cuando se cierra la ventana "WIN_Product_form".
   • La función <Looper>.Display (o LooperDisplay) actualiza los datos del control Looper de la ventana "WIN_List_of_products". La constante taCurrentSelection actualiza los datos a partir de la banda de selección.
     Este código WLanguage se generó automáticamente cuando se creó la ventana en el asistente.
4. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

Prueba de la ventana

Pruebe la ventana "WIN_List_of_products" en el simulador (haga clic en en los botones de acceso rápido).

• En la lista de productos, haga clic en uno de ellos: por ejemplo, en el producto "Polo Hibiscus, Blue".
• La ventana de detalles del producto se abre. Cambie el nombre a "Polo Hibiscus, Light blue" y haga clic en "OK".
• Al volver a la lista de productos, notará que el nombre del artículo se actualizó.

Principio

• Agregaremos una opción al Action Bar de la ventana de la lista de productos para abrir la ventana "Product form".
• A continuación, editaremos el código WLanguage de la ventana "Product form" para agregar datos al archivo de datos Product.

Abrir la ficha de producto desde el Action Bar

1. Abra la ventana "WIN_List_of_products" en el editor: selecciónela en las pestañas de documentos abiertos.
2. Seleccione el Action Bar (en la parte superior de la ventana).
3. Abra la ventana de descripción del Action Bar: haga clic derecho y seleccione la opción "Descripción" en el menú contextual.
   
4. Haga clic en el número 2 (cualquier número 2 en la ventana). Enseguida, aparece una pantalla para introducir una opción en la barra de herramientas.
5. Haga clic en el botón "+" (debajo del área "Arriba a la derecha") para agregar una opción. Una nueva opción se crea en la parte superior derecha. Cambie las características de la opción:
   • En la sección "Título de la opción", escriba "New product".
     
   • En la sección "Imagen predefinida", despliegue la lista y seleccione "Agregar".
     
   • Confirme los cambios y cierre la ventana de descripción.
6. El código WLanguage de esta opción permitirá abrir la ventana "Product form" con los controles en blanco. Para introducir el código WLanguage:
   • Seleccione el control Action Bar.
   • Haga clic en el botón "+".
   • Enseguida, se despliega un menú con la opción "New product".
     
   • Haga clic derecho en la opción.
   • Seleccione "Código" en el menú contextual que aparece.
   • Escriba el siguiente código WLanguage en el evento "Selección del menú":
     
     Product.Reset()
     WIN_Product_form.OpenMobileWindow()
     
     
     La función <Archivo de datos>.Reset reinicia las variables de los campos del archivo de datos "Product" con los valores predeterminados para gestionar el nuevo registro.
7. Guarde los cambios haciendo clic en en los botones de acceso rápido.
8. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

Agregar un producto

1. Seleccione la pestaña "WIN_Product_form" para abrir la ventana en el editor.
2. Abra el código de la opción "OK" en el Action Bar:
   • Seleccione el Action Bar.
   • Haga clic en "OK".
   • Enseguida, se despliega un menú con la opción "Done".
   • Haga clic con derecho en la opción "Done" y seleccione "Código" en el menú contextual.
   • El código WLanguage del evento "Clic" no cambia:
     
     Product.FromWindow()
     Product.Save()
     Close()
     
     
     Veamos este código de nuevo:
     • De forma predeterminada, la función <Archivo de datos>.Save equivale a <Archivo de datos>.Modify: el registro actual en el archivo de datos se modifica.
     • Si se llamó a la función <Archivo de datos>.Reset antes de <Archivo de datos>.Save (por ejemplo, cuando se agrega un nuevo producto), <Archivo de datos>.Save agrega un nuevo registro al archivo de datos (en este caso equivale a la función <Archivo de datos>.Add).
3. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

Prueba de la ventana

Abra la ventana "WIN_List_of_products" en el editor de ventanas y ejecute la prueba en el simulador (haga clic en en los botones de acceso rápido).

• Haga clic en el botón "+" en el Action Bar.
• Introduzca un nuevo producto.
• Valide. El nuevo producto aparece en la lista de productos.
• Cierre el simulador.

El proyecto utiliza varias plataformas: le recomendamos que pruebe el proyecto a través del botón "GO" en cada plataforma. Así, podrá ver las diferencias de visualización y funcionamiento en el simulador.

Presentación

• crear un control Botón para abrir la cámara. La foto se guardará como una imagen en la memoria y se mostrará en el control Imagen del producto.
• crear un control Botón para seleccionar una foto del álbum del dispositivo.

Advertencia
Para probar esta funcionalidad, la prueba debe ejecutarse en el dispositivo móvil, y no en el simulador. Esta funcionalidad requiere componentes de hardware que no están disponibles en el simulador. Cuando se ejecuta una prueba en un dispositivo móvil, el asistente de generación de la aplicación se abre automáticamente.

Para obtener más información sobre la generación de una aplicación para dispositivos móviles, consulte los siguientes tutoriales:

• Implementar una aplicación Android.
• Implementar una aplicación iOS.

Crear un botón para tomar fotos

1. Abra la ventana "WIN_Product_form".
2. Ubique el control Imagen a la izquierda de la ventana.
3. Alinéelo con el control Estático utilizando las reglas de alineación.
4. Agregue un control Botón a la ventana:
   • En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en : la forma del control aparece debajo del cursor.
   • Haga clic en la parte superior derecha del control Imagen para crear el control Botón.

1. Haga clic derecho para abrir el menú contextual del control.
2. Seleccione "Descripción". La ventana de descripción del control se abre automáticamente.
3. En la pestaña "General", haga clic en a la derecha de "Imagen". Seleccione "Catálogo" en el menú contextual que aparece.
4. Enseguida, se abre el catálogo de imágenes de WINDEV Mobile. Este catálogo contiene cientos de imágenes en diferentes campos, formatos y tamaños.
5. Introduzca "photo" en la barra de búsqueda y valide. Se muestran varias imágenes:
   
6. Haga doble clic en la imagen para seleccionarla.
7. En la ventana que aparece, puede seleccionar el tamaño, el color, la orientación, el formato y el nombre de la imagen.
8. Conserve las opciones predeterminadas y asigne el nombre "Camera" a la imagen.
9. Valide la ventana.
10. La ruta de la imagen se muestra en la descripción del control Botón.
11. Asigne el siguiente nombre al control: "BTN_Camera".
12. Borre el título del control.
13. Valide la ventana de descripción.
14. En el editor, reduzca el tamaño del control.

Estilo del control

1. Seleccione el control Botón creado previamente.
2. Abra el menú contextual y haga clic en la opción "Seleccionar un estilo".
3. La ventana que aparece muestra todos los estilos que pueden utilizarse para los controles Botón en la plantilla "Material 3".
   
4. Haga clic en la barra de búsqueda e introduzca "BTN_Blank".
   
   Este nombre corresponde a un estilo sin color de fondo. Este es el estilo que vamos a usar.
5. Valide la ventana de selección de estilos.
6. El estilo elegido se aplica automáticamente al control Botón. La imagen asociada al control Botón se conserva.

Tomar fotos

1. Haga clic derecho en el control Botón y seleccione "Código" en el menú contextual.
2. Introduzca el siguiente código WLanguage en el evento "Clic en":
   
   // Local variable
   ProductImage is string 
   // Start the camera
   ProductImage = VideoStartApp(viPictureCapture)
   IF ProductImage <> "" THEN
   IMG_Photo = ProductImage
   END
   
   En este código WLanguage, la función VideoStartApp abre la cámara del dispositivo para grabar un video o tomar una foto.
3. Guarde los cambios haciendo clic en en los botones de acceso rápido.
4. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

Crear un botón para seleccionar una foto del dispositivo

1. Seleccione el control "BTN_Camera".
2. Presione Ctrl + C: el control Botón se copia en el portapapeles.
3. Presione Ctrl + V: el cursor cambia y la sombra de control aparece debajo del cursor.
4. Haga clic en la ventana al lado del control "BTN_Camera": el nuevo control Botón se crea automáticamente.
5. Haga doble clic en el control para abrir la ventana de descripción:
   • Asigne el siguiente nombre al control: "BTN_Photo_Album".
   • Seleccione una imagen en el catálogo de imágenes.
     Observación: No olvide cambiar el nombre predeterminado de la imagen.
6. Confirme los cambios y cierre la ventana de descripción.

1. Haga clic derecho en el botón y seleccione "Código" en el menú contextual.
2. Reemplace el código WLanguage del evento "Clic en" por el siguiente código:
   
   // Local variable
   ProductImage is string 
   // Start the selection
   ProductImage = AlbumPicker(albumImage)
   IF ProductImage <> "" THEN
   IMG_Photo = ProductImage
   END
   
   En este código WLanguage, la función AlbumPicker permite recuperar la foto seleccionada en el álbum de fotos.
3. Guarde los cambios haciendo clic en en los botones de acceso rápido.
4. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

Presentación

Advertencia
Para probar esta funcionalidad, la prueba debe ejecutarse en el dispositivo móvil, y no en el simulador. Esta funcionalidad requiere componentes de hardware que no están disponibles en el simulador. Cuando se ejecuta una prueba en un dispositivo móvil, el asistente de generación de la aplicación se abre automáticamente.

Para obtener más información sobre la generación de una aplicación para dispositivos móviles, consulte los siguientes tutoriales:

• Implementar una aplicación Android.
• Implementar una aplicación iOS.

Implementación

1. Seleccione el botón de cámara.
2. En la pestaña "Estilo", en el grupo "Estilo y plantilla", haga clic en "Copiar estilo".
3. A continuación, haga clic en el control Botón creado anteriormente. El estilo se aplica automáticamente.

1. Haga doble clic en el control y seleccione "Código" en el menú contextual.
2. Introduzca el siguiente código WLanguage en el evento "Clic en":
   
   // Local variable
   bc is BarCode 
   // Start the scan
   bc = BCCapture()
   IF bc.Content <> "" THEN
   EDT_Bar_code = bc.Content
   END
   
   En este código WLanguage, BCCapture descifra la información almacenada en el código de barras utilizando la cámara del dispositivo.
3. Guarde los cambios haciendo clic en en los botones de acceso rápido.
4. Cierre la ventana de código (haga clic en la "X" en la pestaña del editor de código).

1. Seleccione los siguientes controles manteniendo presionada la tecla Ctrl:
   • el control Imagen que muestra la imagen del producto,
   • el control Botón que permite tomar fotos,
   • el control Botón que permite seleccionar una foto del álbum.
2. Haga clic derecho para abrir el menú contextual de la selección y seleccione "Anclaje".
3. Seleccione "Centrado horizontalmente" ().
   
4. Valide.

1. Seleccione los siguientes controles Campo de entrada manteniendo presionada la tecla Ctrl:
   • Caption
   • Description
   • Bar code
   • Reorder date
2. Haga clic derecho para abrir el menú contextual de la selección y seleccione "Anclaje".
3. Seleccione "Ancho" ().
4. Valide.

Repita esta acción para los controles "Bar code" y "Reference". En este caso, seleccione "Derecha" ().

Se han definido todos los anclajes en la ventana. Las flechas rojas que indican la orientación de los anclajes aparecen en la ventana:

Crear la ventana

Crear un control Mapa

1. En la pestaña "Creación", en el grupo "Controles gráficos", haga clic en "Mapa". La forma del control aparece debajo del cursor.
2. Haga clic en la ventana para crear el control. El control Mapa aparece en el editor de ventanas.
3. Haga doble clic en el control Mapa para abrir la ventana de descripción.
4. En la ventana de descripción del control, cambie el nombre del control por "MAP_STORE" y valide.
5. Guarde los cambios haciendo clic en en los botones de acceso rápido.

Mostrar tiendas en el control Mapa

• Nombre,
• Latitud,
• Longitud.

Código WLanguage asociado a la ventana

1. Seleccione la pestaña de la ventana en las pestañas de documentos abiertos y haga clic en "Código del elemento" en el menú contextual. Los eventos WLanguage de la ventana se muestran en el editor de código.
2. Escriba el siguiente código WLanguage en el evento "Declaraciones globales de...".
   
   // Global variables
   StoreMarker is Marker
   // Load the stores
   FOR EACH Store 
   // Marker coordinates
   StoreMarker.Position.Latitude = Store.Latitude
   StoreMarker.Position.Longitude = Store.Longitude
   // Marker name
   StoreMarker.Name = Store.Name
   // Add the marker
   MAP_STORE.AddMarker(StoreMarker)
   END
   // Best zoom to view all markers on the map
   MAP_STORE.Zoom = zoomAdaptSize
   
3. Guarde los cambios haciendo clic en en los botones de acceso rápido.
4. Cierre la ventana de código.

Pruebe la ventana "WIN_Map_of_stores" en el simulador (haga clic en en los botones de acceso rápido).

Advertencia
Durante la prueba, puede que el mapa muestre un mensaje de error de carga. El control Mapa está sujeto a condiciones específicas. Estas condiciones deben cumplirse para que el control Mapa se muestre correctamente en el dispositivo. Para obtener más información, consulte Condiciones de uso del control Mapa.

Cierre el simulador.

• opciones de una categoría,
• información sobre un contacto, etc.

• filas definidas en el editor (filas estáticas),
• filas definidas en tiempo de ejecución, mediante programación (filas dinámicas).

Crearemos la siguiente ventana:

Crear la ventana

Crear un control Zona multilínea

1. En la pestaña "Creación", en el grupo "Datos", haga clic en "Zona multilínea". La forma del control aparece debajo del cursor.
2. Haga clic en la ventana para crear el control.
3. Haga doble clic en el control para abrir la ventana de descripción.
4. En la ventana de descripción, especifique el nombre del control ("MZ_MENU") y valide.

• List of products.
• Map of stores.
• Exit application.

Modificar el control Zona multilínea

1. Haga doble clic en el control para abrir la ventana de descripción.
2. Haga clic en "Nueva fila". Enseguida, se abre una ventana: esta ventana contiene modelos de filas predefinidas.
3. Seleccione "Fila simple con ícono". Repita esta operación dos veces.
   Ahora, el control Zona multilínea contiene:
   • una fila "en blanco",
   • 3 "filas simples con ícono".
     
4. Vamos a eliminar la fila en blanco, dado que no la vamos a utilizar en este ejemplo:
   • Seleccione la fila en blanco (la primera fila).
   • Luego, haga clic en "Eliminar".
5. Confirme los cambios y cierre la ventana de descripción. Se ha creado el menú.

1. Haga clic en el control Imagen de la primera fila.
2. Haga doble clic en la imagen para abrir la ventana de descripción.
3. En la ventana de descripción:
   • Asigne un nombre a la imagen (por ejemplo, "IMG_ListOfProducts").
   • Haga clic en . Seleccione "Catálogo" en el menú contextual que aparece para seleccionar una imagen que represente la acción.
   • En la ventana del catálogo de imágenes, escriba "List" 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 que aparece, defina el tamaño de la imagen (por ejemplo, A (Ancho) = 80 y A (Alto) = 80). Enseguida, asigne un nombre a la imagen (por ejemplo, "ListOfProducts") y valide.
     
     

     De forma predeterminada, la imagen de un control Zona multilínea está en modo "Homotético expandido centrado". La imagen se redimensionará automáticamente.
4. Valide la ventana de descripción.

1. Haga clic en el control Estático de la primera 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:
   • Asigne un nombre al control (por ejemplo, "STC_ListOfProducts").
   • Cambie el título (por ejemplo, "List of products").
4. Valide la ventana de descripción.
   

1. Haga clic en el control Imagen de la segunda fila.
2. Haga doble clic en la imagen para abrir la ventana de descripción.
3. En la ventana de descripción:
   • Asigne un nombre a la imagen (por ejemplo, "IMG_MapOfStores").
   • Haga clic en . Seleccione "Catálogo" en el menú contextual que aparece para seleccionar una imagen que represente la acción.
   • En la ventana del catálogo de imágenes, escriba "Map" en la barra de búsqueda y presione la tecla Entrar.
   • Haga doble clic en la imagen que desea seleccionar.
   • Defina el tamaño de la imagen en la ventana de configuración que aparece (por ejemplo, A (Ancho) = 80 y A (Alto) = 80). Enseguida, asigne un nombre a la imagen (por ejemplo, "MapOfStores") y valide.
4. Valide la ventana de descripción.

1. Haga clic en el control Estático de la segunda 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:
   • Asigne un nombre al control (por ejemplo, "STC_MapOfStores").
   • Cambie el título (por ejemplo, "Map of stores").
4. Valide la ventana de descripció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:
   • Asigne un nombre a la imagen (por ejemplo, "IMG_Exit").
   • Haga clic en . Seleccione "Catálogo" en el menú contextual que aparece para seleccionar una imagen que represente la acción.
   • En la ventana del catálogo de imágenes, escriba "Close" en la barra de búsqueda y presione la tecla Entrar.
   • Haga doble clic en la imagen que desea seleccionar.
   • Defina el tamaño de la imagen en la ventana de configuración que aparece (por ejemplo, A (Ancho) = 80 y A (Alto) = 80). Enseguida, asigne un nombre a la imagen (por ejemplo, "Close") 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:
   • Asigne un nombre al control (por ejemplo, "STC_Exit").
   • Cambie el título (por ejemplo, "Exit application").
4. Valide la ventana de descripción.

1. Haga clic en el control Estático de la primera fila.
2. Abra la ventana de descripción (Alt + Entrar).
3. En la pestaña "Estilo", seleccione el elemento "Título", despliegue "Color fuente" y seleccione el color negro.
4. Confirme los cambios y cierre la ventana de descripción.
5. El color del texto cambia automáticamente.

1. Haga clic en el control Estático de la segunda fila.
2. Presione F4. Esta tecla repite la última acción. En este caso, el texto se vuelve negro.
3. Seleccione el control Estático de la tercera fila y pulse de nuevo F4.

Programar el menú

1. Haga clic derecho en el control Zona multilínea y seleccione "Código".
   Atención: asegúrese de seleccionar el control Zona multilínea y no uno de los controles dentro de este.
2. En el editor de código, escriba el siguiente código WLanguage en el evento "Selección (clic) de una fila en...":
   
   SWITCH MZ_MENU
   CASE 1 // List of products
   WIN_List_of_products.OpenMobileWindow() 
   CASE 2 // Map of stores
   WIN_Map_of_stores.OpenMobileWindow() 
   CASE 3 // Exit application
   Close()
   END
   
3. Guarde los cambios haciendo clic en en los botones de acceso rápido.
4. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

1. Seleccione la ventana "WIN_Menu" en el panel "Explorador de proyectos".
2. Abra el menú contextual.
3. Seleccione "Primera ventana del proyecto". Un ícono específico (con un 1 pequeño) aparece a la izquierda del nombre de la ventana, en el panel "Explorador de proyectos".

Hasta ahora, hemos probado las ventanas individualmente haciendo clic en en los botones de acceso rápido. Ahora vamos a probar todo el proyecto.

1. Haga clic en en los botones de acceso rápido.
2. El proyecto inicia con la ventana de menú. Haga clic en una opción de menú para comprobar si los enlaces son correctos.

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 - Develop an Android/iOS application", haga doble clic en "Android/iOS product management - Answers".

• adición y modificación de registros en una base de datos,
• uso de controles potentes en una aplicación móvil: Looper, Mapa, Zona multilínea,
• uso de funcionalidades específicas (cámara, código de barras, etc.).