PC SOFT

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad WINDEV Mobile 25!
Este contenido proviene de una traducción automática.. Haga clic aquí para ver la versión original en inglés.
  • Esta lección le enseñará los conceptos siguientes...
  • Análisis del proyecto
  • Mostrar la lista de productos
  • Crear ventana
  • Creación de la ventana del formulario
  • Crear ventana
  • Creación de controles
  • Mostrar el formulario de la lista de productos
  • Gestión de la creación y modificación del producto
  • Modificación de la forma del producto
  • Creación de un nuevo producto
  • Uso de la cámara y visualización de una imagen
  • Presentación
  • Creación del botón para tomar fotos
  • Tomar fotos
  • Selección de una foto en el álbum de fotos
  • Gestión del código de barras del producto
  • Presentación
  • Implementación
  • Gestión de los anclajes en forma de producto
  • Uso del control de mapa
  • Crear ventana
  • Creación del control de mapa
  • Visualización de tiendas en el control de mapa
  • Uso de un control Zona multilínea
  • Crear ventana
  • Creación de la control Zona multilínea
  • Modificación de la control Zona multilínea
  • Programación del menú
  • Prueba de aplicación
Lección 5.2. Desarrollo de la aplicación
Esta lección le enseñará los conceptos siguientes...
  • Creación de una ventana con un looper.
  • Controles específicos: control Looper, control Zona multilínea, Control de mapas, ...
  • Manejo de la base de datos.
  • Características específicas del dispositivo utilizado (GPS, Foto, ....).
Duración de las clases

Tiempo estimado: 30 mn
Lección anteriorTabla de contenidoSiguiente lección
Análisis del proyecto
Echemos un vistazo a nuestro proyecto inicial. Este proyecto no contiene ninguna ventana. Sólo contiene el análisis que describe los archivos de datos de HFSQL Classic que se utilizarán.. Los archivos de datos correspondientes se suministran con datos para ejecutar las diferentes pruebas.
  • Para ver el análisis asociado al proyecto:
    1. Haga clic en Apertura de la editor de análisis entre los botones de acceso rápido del menú WINDEV Mobile.
    2. El editor de análisis se muestra en la pantalla.
      Análisis de este curso
    3. Este análisis incluye 3 archivos de datos:
      • Un archivo de datos del "Producto", que contiene la descripción del producto: nombre, precio, cantidad, ....
      • Un archivo de datos "Characteristic", que contiene las características del producto. Por ejemplo, si el producto es una camiseta, sus características se corresponderán con la talla, el color y la forma de la camiseta., ... Por lo tanto, el archivo de datos "Característico" es relacionado al archivo de datos "Producto".
      • Un archivo de datos "Store", que contiene las coordenadas GPS de cada tienda.
    4. Cierre el editor de análisis (haga clic en la cruz en la parte superior derecha del editor).
Mostrar la lista de productos
Vamos a crear una ventana para listar los diferentes productos. Estos productos se mostrarán en un control "Looper".
Esta ventana se creará con la creación de la ventana asistente.

Observación

La creación de la ventana asistente ofrece varias ventanas preestablecidas. Estas ventanas proponen interfaces modernas para sus aplicaciones.
La mayoría de estas ventanas se pueden generar a partir de sus datos, incluyendo el código WLanguage necesario para que funcionen.. Se pueden utilizar inmediatamente.

Crear ventana

  • Para crear la ventana que se utiliza para listar los productos:
    1. Haga clic en Cree una en los botones de acceso rápido. La ventana para crear nuevos elementos se abre: haga clic en "Ventana" y luego en "Ventana".
    2. En la asistente, seleccione la pestaña "Estándar".. En el área "Teléfono", seleccione "Looper" y valide.

      Observación

      Si está utilizando una configuración de iOS, la ventana para crear una nueva ventana contiene opciones adicionales, específicas de iOS.
      Se puede crear una ventana "Looper" para una plataforma iOS y para una plataforma Android.
      Recordatorio: Las imágenes de la parte 5 de este tutorial utilizan la configuración de Android. Pueden aparecer pequeñas diferencias si está utilizando la configuración de iOS.
    3. Comienza la creación de la ventana asistente.
    4. If the iOS platform was added, several platforms are proposed. Le aconsejamos que elija la plataforma con la resolución más pequeña.
      Creación de la ventana asistente
      Pase a la etapa siguiente del asistente.
    5. La asistente propone elegir la fuente de datos asociada a la ventana. En nuestro caso, será el archivo de datos del "Producto":
      • La opción "Archivos de datos" está seleccionada por defecto.
      • Seleccione el archivo de datos del producto.
        Seleccionando a el archivo de datos
    6. Pase a la etapa siguiente.
    7. Seleccione el estilo de la control Looper: "Imagen + Título + Texto abajo". Este modelo se utiliza para obtener una interfaz que contiene la imagen del producto, su nombre y su descripción.
      Selección del estilo de la control Looper
    8. Pase a la etapa siguiente.
    9. La asistente propone automáticamente los elementos de archivo correspondientes a los diferentes controles del looper generado.
      Configuración del looper
    10. Conserve los elementos propuestos y vaya al siguiente paso.
    11. Mantenga el orden sugerido en el elemento "ProductID".. Pase a la etapa siguiente.
    12. La asistente propone varias opciones para generar la ventana del Looper:
      Opciones de ventana
      • Generar un botón de creación en el Action Bar: Si se selecciona esta opción, la asistente propone generar una ventana de formulario editable.
      • Permitir eliminar deslizando una fila: Si se selecciona esta opción, el usuario podrá borrar un elemento de la control Looper pasando por encima del fila correspondiente.
      • Código de selección de filas: Si se selecciona la opción "Generar el código de apertura del formulario en solo lectura" (o "Generar el código de apertura del formulario en edición"), el asistente propone generar una ventana de formulario en modo de solo lectura o en modo de edición.
    13. En nuestro ejemplo, mantenga las opciones predeterminadas. Pase a la etapa siguiente.
    14. Dar un título y un nombre a la ventana generada. Escriba el título de la ventana: "Lista de productos". El nombre de la ventana se rellena automáticamente.
      Título y nombre de la ventana Looper
    15. Valide el asistente. La ventana se crea automáticamente, se muestra en el editor y se guarda.
      Ventana creada por la asistente

      Observación

      Los datos aparecen automáticamente en la ventana que se muestra en el editor. Este concepto se llama "Live Data".: usted ve los datos de sus archivos de datos en tiempo real!
      Esta función es muy útil para adaptar el tamaño de los controles a su contenido.
  • Vamos a hacer una primera prueba en el simulador para ver el resultado. Haga clic en Ejecutar la prueba de la ventana entre los botones de acceso rápido (o pulse F9).
    Ejecución de ventana en modo de test
  • Cierre el simulador para volver al editor de ventanas.

Observación

Cuando un proyecto está asociado a varias plataformas, la prueba de la ventana actual se ejecuta con la plataforma actual.. El shell utilizado para el simulador también se adapta a la plataforma actual.
Para realizar la prueba en otra plataforma, basta con habilitarla haciendo doble clic en su nombre en el panel "Project explorer"..
Observación: En esta parte, las imágenes que representan las pruebas corresponden a una concha de Android.
Creación de la ventana del formulario
Ahora vamos a crear una nueva ventana para mostrar el formulario del producto. A continuación, esta ventana se iniciará desde la lista de productos para mostrar los detalles del producto seleccionado.

Crear ventana

  • Para crear la ventana del formulario:
    1. Cree una nueva ventana en blanco.
      • Haga clic en Crear un elemento en los botones de acceso rápido.
      • La ventana para crear nuevos elementos se abre: haga clic en "Ventana" y luego en "Ventana".
      • En la asistente, seleccione la pestaña "Estándar", elija "En blanco" y valide.
    2. A continuación, se abre una ventana para guardar el elemento. Especifique el título de la ventana: "Forma del producto". Su nombre se propone automáticamente: "WIN_Product_form".
      Guardar el elemento
      Validate.
    3. La ventana se añade al proyecto, para todas las configuraciones.

Observación

If varias plataformas están definidas en el proyecto, la ventana para guardar un elemento propone asociar el nuevo elemento a todas las plataformas.
Para asociar el elemento a una única plataforma, basta con expandir "Configuraciones" en la ventana de guardar y elegir la plataforma deseada.:
Configuración a seleccionar para guardar el elemento

Creación de controles

  • Para crear los diferentes controles de edición utilizados para mostrar información sobre el producto:
    1. Visualizar el panel "Análisis" si es necesario: en la pestaña "Inicio", en el grupo "Entorno", despliegue "Paneles" y seleccione "Análisis". En el panel aparecen los diferentes ficheros de datos descritos en el análisis "WM Managing Products".
    2. Con el ratón, seleccione los elementos del archivo de datos del "Producto" que se muestran en el panel (excepto el elemento "ProductID").
    3. Arrastre y suelte estos elementos a la ventana que se acaba de crear.
      Arrastrar y soltar elementos
    4. Cambie el tamaño de los controles ("Nombre", "Código de barras", "Fecha de pedido" y "Descripción") para que sean visibles en la ventana.
    5. Reorganizar los controles en la ventana. Respete el siguiente orden: "Foto", "Nombre", "Precio", "Cantidad", "Código de barras", "Fecha de pedido", "Descripción".
      Reorganización de los controles
    6. Vamos a ver el orden de tabulación en la ventana:
      • Pulse F5. Los números que se muestran representan la orden de tabulación en la ventana.
        Orden de las pestañas en la ventana
        Presiona F5 de nuevo para ocultar los números.
      • La orden de tabulación se adapta automáticamente al orden de los mandos de la ventana..
    7. Grabe la ventana.
  • Ejecute la prueba de la ventana "WIN_Product_form" ( Ejecutar la prueba de la ventana entre los botones de acceso rápido).
    1. La ventana se muestra con los controles vacíos.
    2. Cierre el simulador.
  • Para mostrar los datos del producto:
    1. Muestra los eventos WLanguage asociados a la ventana:
      • Haga clic con el botón derecho del ratón en el área situada junto a la ventana.
      • Seleccione "Código" de el menú contextual que se muestra.
      • Aparece el editor de código.
    2. Introduzca el siguiente código WLanguage en el evento "End of initialization of WIN_Product_form":
      FileToScreen()

      FileToScreen se utiliza para mostrar en los controles los datos que se encuentran en el archivo de datos, para el registro actual. En nuestro caso, el registro actual será el registro seleccionado en la control Looper de "WIN_List_of_products".. Este control Looper es relacionado al archivo de datos del producto.
    3. Cierre la ventana de código.
    4. Grabe la ventana.

Mostrar el formulario de la lista de productos

Veamos ahora cómo mostrar la forma del producto seleccionado en la lista de productos.
  • Realice las siguientes operaciones:
    1. Vaya a la ventana "Lista de productos": haga clic en el botón "WIN_List_of_products" en la barra de documentos abierta:
      Barra de documentos abiertos
    2. Seleccione la control Looper.
      Atención: asegúrese de seleccionar el control Looper y no uno de sus controles.
    3. Despliegue el el menú contextual de control Looper (clic derecho) y seleccione "Código".
    4. En la ventana de código que aparece, escriba el siguiente código WLanguage en el evento "Selecting a fila of...":
      OpenMobileWindow(WIN_Product_form)

      Observación

      La entrada de código asistida le ayudará a: en cuanto teclee el corchete de apertura "(", una lista desplegable propone el nombre de todas las ventanas existentes en el proyecto. Todo lo que tiene que hacer es seleccionar la ventana con el teclado o con el ratón.
      Si el nombre de la ventana no se muestra en la lista, significa que esta ventana no se ha guardado previamente.
    5. Guarda las modificaciones pulsando Grabe el elemento entre los botones de acceso rápido.
    6. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
  • Ejecute la prueba de la ventana "WIN_List_of_products" de nuevo en el simulador ( Ejecutar la prueba de la ventana entre los botones de acceso rápido).
    • En la lista de productos, haga clic en uno de ellos con el ratón.
    • Se muestra la ventana detallada del producto.
  • Cierre el simulador.
Gestión de la creación y modificación del producto
Ahora vamos a modificar nuestras dos ventanas para gestionar la adición y modificación del producto.

Modificación de la forma del producto

Al crear la ventana del formulario, se creó automáticamente un Action Bar. Este Action Bar contiene un botón izquierdo para cancelar la entrada actual y volver a la ventana anterior.. En nuestro caso, este botón se utilizará para volver a la lista de productos.
Action Bar de la ventana
No hay ninguna modificación para realizar.
Vamos a añadir un botón de validación en la ventana "Action Bar of "WIN_Product_form" para gestionar la validación de las modificaciones.
  • En primer lugar, muestre (si es necesario) la ventana "WIN_Product_form" en el editor: haga clic en el botón correspondiente en la barra de documentos abierta.
  • Para añadir una opción de validación en la ventana Action Bar de la ventana:
    1. Seleccione la Action Bar (en la parte superior de la ventana).
    2. Abrir la ventana de descripción de la Action Bar: haga clic con el botón derecho del ratón y seleccione "Descripción" de el menú contextual.
      Descripción de Action Bar

      Observación

      La ventana de descripción de Action Bar se adapta a las plataformas utilizadas en el proyecto. De hecho, el Action Bar utilizado en una aplicación Android difiere del Action Bar utilizado en una aplicación iOS.
      Si su proyecto utiliza una configuración de Android, sólo se muestran las opciones correspondientes a la Action Bar para Android.
      Del mismo modo, for an iOS configuration, sólo se muestran las opciones correspondientes a Action Bar for iOS.
      Si su proyecto utiliza tanto una configuración de Android como una configuración de iOS, la ventana muestra una vista previa de la Action Bar para las dos plataformas.
      Los números le permiten acceder a las opciones de configuración.
      Vamos a presentar las opciones requeridas por nuestro ejemplo.
      Para obtener más información, consulte Descripción del control Action Bar.
    3. Haga clic en el número 2 (cualquier número 2 en la ventana). Se muestra la interfaz para escribir una opción en la barra de herramientas..
    4. Haga clic en "+" (debajo del área de "Arriba derecha") para añadir una opción. Se crea una nueva opción por defecto en la parte superior derecha.
    5. Modificar las características de esta opción:
      • En el área "Descripción de la opción", escriba "Listo"..
        Opciones del control Action Bar

        Observación

        En el tiempo de ejecución, la opción de subtítulo aparece en la Action Bar:
        • Si no hay ninguna imagen asociada a la opción.
        • Si la opción se transfiere al menú de abajo.
      • En la zona "Imagen preestablecida", amplíe la lista y seleccione "Listo"..
        Imagen predefinida de la opción
      • Valide la ventana de descripción.

        Observación

        Para volver a la interfaz de descripción de la Action Bar, sólo hay que pulsar el botón alt) Botón'2.
    6. El código WLanguage de esta opción se utilizará para guardar las modificaciones realizadas en la ventana "WIN_Product_form".. Para escribir este código:
      • Seleccione (si es necesario) el control Action Bar de la ventana.
      • Haga clic en "OK"..
      • Aparece un menú desplegable con la opción "Listo"..
        OK' en el Action Bar

        Observación

        Este menú desplegable es visible en edición para escribir el código WLanguage asociado con la opción. Este menú desplegable no se mostrará en tiempo de ejecución.
      • Haga clic con el botón derecho del ratón en la opción.
      • Seleccione "Código" de el menú contextual que se muestra.
      • Escriba el siguiente código WLanguage en el evento "Seleccionar el menú":
        ScreenToFile()
        HSave(Product)
        Close()

        Echemos un vistazo a estas líneas de código:
        • ScreenToFile se utiliza para inicializar los elementos con los valores de los controles de relacionado, para el registro actual.
        • HSave se utiliza para actualizar los datos del archivo para el registro actual.
    7. Guarda las modificaciones pulsando Grabe el elemento entre los botones de acceso rápido.
    8. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
  • Al cerrar la forma del producto, el contenido de la lista de productos que se encuentra en la ventana "WIN_List_of_products" debe actualizarse para tener en cuenta las modificaciones realizadas en la forma. Para ello, utilice el evento "Cerrar una ventana secundaria" de "WIN_List_of_products".
    1. Haga clic en el botón "WIN_List_of_products" (Lista_de_productos_WIN) en la barra de documentos abierta.:
      Barra de documentos abiertos
    2. Haga clic con el botón derecho del ratón en el fondo de la ventana y seleccione "Código" de el menú contextual. El siguiente código WLanguage se muestra automáticamente en el evento "Cerrar una ventana secundaria":
      LooperDisplay(LOOP_Product, taCurrentSelection)

      Echemos un vistazo a este código de WLanguage:
      • El evento "Cerrar una ventana secundaria" se ejecuta cada vez que se cierra una ventana secundaria de la ventana actual.. En nuestro caso, se ejecuta cuando se cierra la ventana "WIN_Product_form".
      • LooperDisplay se utiliza para actualizar los datos que se encuentran en la ventana control Looper de "WIN_List_of_products".. La constante taCurrentSelection se utiliza para actualizar datos de la variable banda de selección.
        Este código WLanguage se generó automáticamente cuando la asistente creó la ventana.
    3. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
  • Ejecute la prueba de la ventana "WIN_List_of_products" en el simulador ( Ejecutar la prueba de la ventana entre los botones de acceso rápido).
    • En la lista de productos, haga clic en uno de los productos con el ratón: por ejemplo, el producto "Polo Hibiscus Blue".
    • Se muestra la ventana detallada del producto. Modifique el nombre y el tipo de producto "Polo Hibiscus Light blue" y haga clic en el botón "OK".
    • Al volver a la lista de productos, notará que el nombre de este artículo ha sido actualizado.
  • Cerrar el simulador. Aparece el editor WINDEV Mobile.

Creación de un nuevo producto

El principio para crear un producto es el siguiente:
  • En la ventana de la lista de productos, vamos a añadir una opción en la ventana de Action Bar de la ventana para abrir la ventana "Forma del producto".
  • Luego, modificaremos el código WLanguage de la ventana "Forma del producto" para gestionar la adición en el archivo de datos del producto.
  • Para añadir una opción en la Action Bar de la ventana:
    1. En primer lugar, muestre (si es necesario) la ventana "WIN_List_of_products" en el editor: haga clic en el botón correspondiente en la barra de documentos abierta.
    2. Seleccione la Action Bar (en la parte superior de la ventana).
    3. Abrir la ventana de descripción de la Action Bar: haga clic con el botón derecho del ratón y seleccione "Descripción" de el menú contextual.
      Descripción de Action Bar
    4. Haga clic en el número 2 (cualquier número 2 en la ventana). Se muestra la interfaz para escribir una opción en la barra de herramientas..
    5. Haga clic en "+" (debajo del área de "Arriba derecha") para añadir una opción. Se crea una nueva opción por defecto en la parte superior derecha. Modificar las características de esta opción:
      • En el área "Descripción de la opción", escriba "Nuevo producto"..
        Introducir el título de la opción
      • En la sección "Imagen preestablecida", despliegue la lista y seleccione "Agregar".
        Selección de la imagen predefinida
      • Valide la ventana de descripción.
    6. El código WLanguage de esta opción se utiliza para abrir la ventana "Forma del producto" y restablecer sus controles.. Para introducir este código WLanguage:
      • Seleccione (si es necesario) el control Action Bar de la ventana.
      • Haga clic en el botón "+.
      • Aparece un menú desplegable con la opción "Nuevo producto.
        Menú desplegable del control Action Bar
      • Haga clic con el botón derecho del ratón en la opción.
      • Seleccione "Código" de el menú contextual que se muestra.
      • Escriba el siguiente código WLanguage en el evento "Seleccionar el menú":
        HReset(Product)
        OpenMobileWindow(WIN_Product_form)

        HReset inicializa las variables del artículo en el archivo de datos del "Producto" con los valores por defecto para gestionar un nuevo registro.
    7. Guarda las modificaciones pulsando Grabe el elemento entre los botones de acceso rápido.
    8. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
  • Ahora vamos a comprobar la gestión de la adición de registros en la ventana de formulario de producto.
    1. Abrir la ventana "WIN_Product_form" en el editor: haga clic en el botón correspondiente en la barra de documentos abierta.
    2. Mostrar el código de la opción de validación en el Action Bar:
      • Seleccione la Action Bar.
      • Haga clic en "OK"..
      • Aparece un menú desplegable con la opción "Listo"..
      • Selecciona "Código" de la el menú contextual de la opción "Hecho" (clic con el botón derecho del ratón).
      • El código WLanguage del evento "Click" no cambia:
        ScreenToFile()
        HSave(Product)
        Close()

        Veamos este código de nuevo:
        • Por defecto, HSave es equivalente a HModify (registro actual modificado en el archivo de datos).
        • Si HRESET ha sido llamada anteriormente (como es el caso cuando se añade un nuevo producto), HSave añade un nuevo registro en el archivo de datos (equivalente a HAdd).
    3. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
  • Abrir "WIN_List_of_products" en el editor de la ventana y probarlo en el simulador ( Ejecutar la prueba de la ventana entre los botones de acceso rápido).
    • Haga clic en el botón "+" que se encuentra en la Action Bar.
    • Escriba un nuevo producto.
    • Validar. El nuevo producto se muestra en la lista de productos.
    • Cierre el simulador.

Observación

Si su proyecto utiliza varias plataformas, se debe ejecutar un GO para cada plataforma. En el simulador aparecerán las diferencias entre el modo de visualización y el modo de funcionamiento..
Uso de la cámara y visualización de una imagen

¡Atención!

Este párrafo requiere un dispositivo equipado con una cámara. Si este no es el caso, vaya directamente al siguiente párrafo.
Además, este párrafo exige que la aplicación se instale en el dispositivo porque utiliza recursos de hardware a los que no se puede acceder en modo de simulación.

Presentación

Vamos a gestionar la foto del producto utilizando la cámara del dispositivo.
Para ello, lo vamos a hacer:
  • crear una control Botón para lanzar la cámara. La foto será recuperada en el formato de una imagen en memoria y mostrada en el control Imagen del producto.
  • crear una control Botón para seleccionar una foto del álbum del dispositivo móvil.

Creación del botón para tomar fotos

  • Para crear la control Botón se utiliza para tomar fotos:
    1. Abra la ventana "WIN_Product_form" en el editor.
    2. Añadir un control Botón en la ventana:
      • En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón : la forma del control aparece debajo del ratón.
      • Luego haga clic en la parte superior derecha de la control Imagen para crear la control Botón.
  • Modificaremos la control Botón para asociarla a una imagen que represente una cámara:
    1. Seleccione el control y abra su menú emergente (clic derecho).
    2. Seleccione "Descripción". Aparece la ventana de descripción del control.
    3. En la pestaña "General", haga clic en el botón Menú desplegable a la derecha del control de "Imagen".. Seleccione "Catálogo" de el menú contextual que se muestra.
    4. 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 "foto" en el cuadro de búsqueda en la parte superior y valide. Se muestran varias imágenes:
      Catálogo de imágenes
    6. Por ejemplo, haga doble clic en Imagen a seleccionar 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. Mantenga todas las opciones predeterminadas y especifique el nombre de la imagen ("Cámara").
    9. Valide la ventana.
    10. La ruta de la imagen se muestra en la descripción control Botón.
    11. Dar un nombre al control: "BTN_Cámara".
    12. Borre el título del control.
    13. Valide la ventana de descripción.
    14. En el editor, reduzca el tamaño del control.
  • Esta control Botón utiliza el estilo por defecto de la plantilla "Phoenix" asociada al proyecto.: el fondo del control es azul. En nuestro caso, el fondo azul no es necesario. Modificaremos el estilo asociado al control:
    1. Si es necesario, seleccione la control Botón que acaba de crear.
    2. Abre el menú contextual y selecciona "Elegir un estilo".
    3. La ventana que aparece enumera todos los estilos que se pueden utilizar para los controles de los Botones en la pantalla Phoenix plantilla.
      Estilos de la plantilla
    4. Haga clic en la lupa e introduzca "BTN_Blank"..
      Buscar el estilo
      Este nombre corresponde a un estilo sin color de fondo. Este es el estilo que vamos a usar.
    5. Presione Enter para validar. El estilo "BTN_Blank" se selecciona automáticamente.
    6. Validar la ventana para la selección de estilo.
    7. El estilo elegido se aplica automáticamente a la control Botón.

Tomar fotos

Ahora introduciremos el código de WLanguage para tomar una foto y mostrarla en el control Imagen del formulario del producto.
  • Para tomar fotos:
    1. Seleccione "Código" de la el menú contextual de la control Botón (clic derecho).
    2. Escriba el siguiente código WLanguage en el evento "Click":
      // Local variable
      sPhoto is string
      // Start the camera
      sPhoto = VideoStartApp(viPictureCapture)
      IF sPhoto <> "" THEN
      IMG_Photo = sPhoto
      END
      En este código WLanguage, VideoStartApp se utiliza para lanzar la aplicación nativa de la cámara en el dispositivo para grabar vídeo o tomar una foto.
    3. Guarda las modificaciones pulsando Grabe el elemento entre los botones de acceso rápido.
    4. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).

Selección de una foto en el álbum de fotos

Vamos a añadir una control Botón para seleccionar una foto en el álbum del dispositivo y asociarla con el producto.
  • Para crear la control Botón para seleccionar la foto, vamos a "Copiar - Pegar" la captura de la foto control Botón que acabamos de crear:
    1. Seleccione la control Botón "BTN_Camera" que acaba de ser creada.
    2. Presiona Ctrl + C: la control Botón se copia en el portapapeles.
    3. Presiona Ctrl + V: el cursor del ratón cambia y la sombra de control aparece debajo del cursor.
    4. Haga clic en la ventana junto al control "BTN_Camera".: se crea automáticamente la nueva control Botón.
    5. Abra la ventana de descripción del control (haga doble clic en el control):
      • Dar un nombre al control: "Álbum_de_fotos_de_BTN".
      • Seleccione una imagen en el catálogo de imágenes.
        Observación: No olvide cambiar el nombre de la imagen por defecto.
    6. Valide la ventana de descripción.
Observación: Este botón de control corresponde a un "Copiar - Pegar" de la captura de fotos control Botón, las características de estilo son automáticamente las mismas. ¡No hay necesidad de modificarlos!

  • El código WLanguage asociado a esta control Botón se utiliza para abrir el álbum de fotos del dispositivo y seleccionar una imagen para mostrarla en la control Imagen del formulario del producto.
    1. Seleccione "Código" de el menú contextual de botón (clic con el botón derecho del ratón).
    2. Sustituya el código WLanguage del evento "Click" por el siguiente código WLanguage:
      // Local variable
      sPhoto is string
      // Start the selection
      sPhoto = AlbumPicker(albumImage)
      IF sPhoto <> "" THEN
      IMG_Photo = sPhoto
      END
      En este código WLanguage, AlbumPicker se utiliza para recuperar la foto seleccionada del álbum de fotos.
    3. Guarda las modificaciones pulsando Guardar un elemento entre los botones de acceso rápido.
    4. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
Gestión del código de barras del producto

¡Atención!

Este párrafo requiere un dispositivo equipado con una cámara.
De lo contrario, no podrá probar su uso.
Además, este párrafo exige que la aplicación se instale en el dispositivo porque utiliza recursos de hardware a los que no se puede acceder en modo de simulación.

Presentación

El archivo de datos del "Producto" contiene un elemento de "Código de barras".... Este elemento se utiliza para almacenar el valor de un código de barras. Algunos dispositivos (especialmente los equipados con una cámara) pueden escanear un código de barras para recuperar su valor.
El código de barras se gestiona a través de la cámara del aparato y mediante una función específica de WLanguage.

Implementación

  • Crear una control Botón para la gestión de los códigos de barras:
    1. Mostrar (si es necesario) la ventana "WIN_Product_form" en el editor.
    2. Añadir un control Botón en la ventana:
      • En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón.
      • La forma del control aparece debajo del ratón.
      • Cree el control junto al control "Código de barras" (redimensione el control Campo de entrada si es necesario).
    3. Abra la ventana de descripción de control Botón (haga doble clic en el control):
      • Dar un nombre al control: "BTN_Bar_Code".
      • Borre el título del control.
      • Seleccione una imagen de código de barras en el catálogo de imágenes (por ejemplo, escriba la palabra clave "Código").
    4. Valide la ventana de descripción.
    5. En el editor, reduzca el tamaño del control.
  • En cuanto a la control Botón utilizada para tomar una foto, modificaremos el estilo asociado al control:
    1. Si es necesario, seleccione la control Botón que acaba de crear.
    2. Abre el menú contextual y selecciona "Elegir un estilo".
    3. En la ventana que enumera los estilos disponibles, haga clic en la lupa y especifique "BTN_Blank"..
      Buscar el estilo
    4. Presione Enter para validar. El estilo "BTN_Blank" se selecciona automáticamente.
    5. Validar la ventana para la selección de estilo.
    6. El estilo elegido se aplica automáticamente a la control Botón.
  • El código WLanguage de esta control Botón permitirá escanear el código de barras.
    1. Seleccione "Código" de la el menú contextual del control (clic derecho).
    2. Escriba el siguiente código WLanguage en el evento "Click":
      // 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, BCCaptura permite decodificar la información almacenada en un código de barras usando la cámara del dispositivo.
    3. Guarda las modificaciones pulsando Grabe el elemento entre los botones de acceso rápido.
    4. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
Gestión de los anclajes en forma de producto
Todos los controles se han colocado en la forma de Producto. La resolución vertical y horizontal puede variar según los dispositivos.
El anclaje se utiliza para adaptar el tamaño de los controles a la resolución y para evitar mostrar áreas "vacías" en la ventana (especialmente en la parte inferior derecha).
Si el dispositivo de destino de la aplicación se conoce desde la creación del proyecto, las ventanas adoptan el tamaño del dispositivo de destino.. No requiere anclaje.
Si no se conoce el dispositivo de destino de la aplicación o si se utilizan varios dispositivos, se debe elegir la resolución común más pequeña tan pronto como se cree el proyecto.. El anclaje es necesario en este caso.
  • Definir el anclaje que se aplicará a los diferentes controles de las ventanas:
    1. Seleccione los siguientes controles (haga clic en cada control mientras mantiene presionada la tecla Ctrl):
      • la control Imagen que muestra la imagen del producto,
      • el control Botón solía tomar fotos,
      • la control Botón para seleccionar una foto del álbum.
    2. Muestra la el menú contextual de selección (clic derecho del ratón) y selecciona "Ancla".
    3. Seleccione "Centrado horizontalmente" ( Centros horizontales ).
      Manejo de anclas
    4. Validar.
  • Permite definir el anclaje que se aplicará a los controles de edición:
    1. Seleccione los siguientes controles de edición (haga clic en cada control mientras mantiene presionada la tecla Ctrl):
      • denominar
      • Código de barras
      • Fecha de pedido
      • Descripción
    2. Mostrar la el menú contextual de selección (clic derecho del ratón) y seleccionar "Ancla".
    3. Seleccione "Ancho" ( anchura ).
    4. Validar.
  • Repetir esta operación con la control Botón que permite gestionar los códigos de barras. En este caso, seleccione "Derecho" ( Right ).
  • Todos los anclajes se han definido en la ventana. Se muestran las flechas rojas que indican la orientación de los anclajes:
    Ventana con anclaje en el editor
Uso del control de mapa
A continuación presentaremos el control de mapas y las funciones GPS de WLanguage.
Nuestra base de datos contiene un archivo de datos "Store". Este archivo de datos contiene las direcciones de los almacenes que se localizarán en un mapa mediante las funciones de mapeo.

Crear ventana

Vamos a crear una nueva ventana y agregarle un control de Mapa.
  • Para crear la ventana:
    1. Crear una nueva ventana en blanco. Haga clic en Crear un elemento en los botones de acceso rápido. Se muestra la ventana para la creación de elementos: haga clic en "Ventana" y luego en "Ventana".. En la asistente, elija "Blanco" y valide.
    2. A continuación, se abre una ventana para guardar el elemento. Especifique el título de la ventana: "Mapa de tiendas". Su nombre se propone automáticamente: "WIN_Map_of_stores". Valide.

Creación del control de mapa

  • Para crear el control de 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 ratón.
    2. Haga clic dentro de la ventana para crear el control. El control Mapa aparece en el editor de ventanas.
    3. Abrir la ventana de descripción del control "Map" (por ejemplo, hacer doble clic en el control).
    4. En la ventana de descripción del control, especifique el nombre del control ("MAP_STORE") y valide.
    5. Guarda las modificaciones pulsando Guardar un elemento entre los botones de acceso rápido.

Visualización de tiendas en el control de mapa

Principio Principio
Ahora vamos a añadir el código utilizado para mostrar todos los almacenes del archivo de datos "Store" en un mapa.
Para ello, navegaremos por el archivo de datos "Store" con un bucle FOR EACH. A continuación, se utilizarán las variables de marcador. Una variable de marcador se utiliza para definir un marcador que se mostrará en un mapa.
Un marcador contiene información diversa. Utilizaremos la siguiente información:
  • Nombre,
  • Latitud,
  • Longitude.
MapAddMarker se utiliza para añadir un marcador en el control del mapa. A continuación, simplemente ajuste el nivel de zoom para ver todos los marcadores en el control de mapa. Si el zoom no está ajustado correctamente, es posible que algunos marcadores no sean visibles o que se superpongan en el control.
Implementación
  • Para introducir el código WLanguage para visualizar las tiendas:
    1. Haga clic con el botón derecho del ratón fuera de la ventana. Seleccione "Código" de el menú contextual que se muestra. Se muestran los diferentes eventos WLanguage asociados a la ventana.
    2. Escriba el siguiente código WLanguage en el evento "Declaraciones globales de...".
      // Global variables
      gMarker is Marker
      // Load the stores
      FOR EACH Store
      // Marker coordinates
      gMarker.Position.Latitude = Store.Latitude
      gMarker.Position.Longitude = Store.Longitude
      // Marker name
      gMarker.Name = Store.Name
      // Add the marker
      MapAddMarker(MAP_STORE,gMarker)
      END
      // Best zoom to view all markers on the map
      MAP_STORE..Zoom = zoomAdaptSize
    3. Guarda las modificaciones pulsando Grabe el elemento entre los botones de acceso rápido.
    4. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
  • Ejecute la prueba de la ventana "WIN_Map_of_stores" en el simulador ( Ejecutar la prueba de la ventana entre los botones de acceso rápido). A continuación, cierre el simulador.
Uso de un control Zona multilínea
El control "Multiline zone" se utiliza a menudo en las plataformas móviles. Este control se utiliza para agrupar varios controles:
  • opciones en una categoría,
  • grupo de información sobre un contacto, ....
Este control puede contener al mismo tiempo:
  • líneas definidas en el modo de edición (líneas estáticas),
  • filas definidas en tiempo de ejecución, por programación (filas dinámicas).
Se utilizará una control Zona multilínea para crear el menú principal de nuestra aplicación.. Vamos a crear una nueva ventana e insertar una control Zona multilínea en ella.
La ventana que se creará es la siguiente:
Ventana para crear

Crear ventana

Vamos a crear una ventana y agregarle una control Zona multilínea.
  • Para crear la ventana:
    1. Cree una nueva ventana en blanco:
      • Haga clic en Crear un elemento en los botones de acceso rápido.
      • La ventana para crear nuevos elementos se abre: haga clic en "Ventana" y luego en "Ventana".. En la asistente, elija "Blanco" y valide.
    2. A continuación, se abre una ventana para guardar el elemento. Especifique el título de la ventana: "Menú". Su nombre se propone automáticamente: "Menú_WIN". Valide.

Creación de la control Zona multilínea

  • Para crear la 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 ratón.
    2. Haga clic dentro de la ventana para crear el control.
    3. Abra la ventana de descripción del control (haga doble clic en el control, por ejemplo).
    4. En la ventana de descripción, especifique el nombre del control ("MZ_MENU") y valide.
La control Zona multilínea contiene una línea vacía. Vamos a añadir tantas líneas como el número de opciones que encontremos en nuestro menú.
Nuestro menú incluirá 3 opciones:
  • Listado de productos.
  • Mapa de tiendas.
  • Salga de la aplicación.

Modificación de la control Zona multilínea

  • Modificar la control Zona multilínea:
    1. Abra la ventana de descripción del control (haga doble clic en el control, por ejemplo).
    2. Haga clic en el botón "Nueva fila". Se abre una ventana: esta ventana contiene todos los modelos de líneas preestablecidas.
    3. Selecciona la "fila simple con pictograma" modelo y valida. Repita esta operación dos veces.
      Ahora, la zona multilínea contiene:
      • una fila "en blanco",
      • 3 "filas simples con pictogramas".
        control Zona multilínea
    4. Vamos a borrar el fila en blanco que es inútil en nuestro ejemplo:
      • Seleccione la fila en blanco (la primera fila).
      • Luego haga clic en el botón "Eliminar".
    5. Valide la ventana de descripción. Se crea su menú.
Cada fila incluye un control Imagen, un control Estático y una imagen de una flecha. Ahora vamos a modificar el control Imagen y el control Estático de cada fila para representar la acción del menú.
Modificar el 1er fila: acceso a la lista de productos
  • Para modificar la imagen en la primera fila del control Zona multilínea:
    1. Haga clic en la control Imagen en el primer fila.
    2. Abra la ventana de descripción de la imagen (haga doble clic en el control).
    3. En la ventana de descripción:
      • Dé un nombre a la imagen ("IMG_ListOfProducts" por ejemplo).
      • Haga clic en el botón Menú contextual. Seleccione "Catálogo" de el menú contextual que aparece para elegir una imagen que represente la acción.
      • En la ventana del catálogo de imágenes, escriba "Lista" en el control de búsqueda y pulse Intro.
      • Seleccione una imagen con un doble clic.
      • En la ventana para configurar la imagen generada, seleccione un tamaño (80 por ejemplo, W (Ancho) = 80 y H (Alto) = 80), déle un nombre a la imagen ("ListOfProducts" por ejemplo) y valide..

        Observación

        La imagen utilizada en una control Zona multilínea está en modo "Homothetic extended centered" por defecto.. La imagen será automáticamente"redimensionada" a las dimensiones adecuadas.
    4. Valide la ventana de descripción.
  • Modificar la control Estático en el primer fila del control Zona multilínea:
    1. Haga clic en la control Estático en el primer fila.
    2. Abra la ventana de descripción (haga doble clic en el control).
    3. En la ventana de descripción de la pestaña "General":
      • Dé un nombre al control (por ejemplo,"STC_ListOfProducts").
      • Cambie el título (por ejemplo, "Lista de productos").
    4. Valide la ventana de descripción.
      control Zona multilínea
Modificar el 2º fila: acceso al mapa de tiendas
  • Para modificar la imagen en la segunda fila del control Zona multilínea:
    1. Haga clic en la control Imagen en el segundo fila.
    2. Abra la ventana de descripción de la imagen (haga doble clic en el control).
    3. En la ventana de descripción:
      • Dé un nombre a la imagen ("IMG_MapOfStores" por ejemplo).
      • Haga clic en el botón Menú contextual. Seleccione "Catálogo" de el menú contextual que aparece para elegir una imagen que represente la acción.
      • En la ventana del catálogo de imágenes, escriba "Mapa" en el control de búsqueda y pulse Intro.
      • Seleccione una imagen con un doble clic.
      • En la ventana para configurar la imagen generada, seleccione un tamaño (80 por ejemplo, W (Ancho) = 80 y H (Alto) = 80), dé un nombre a la imagen ("MapOfStores" por ejemplo) y valide.
    4. Valide la ventana de descripción.
  • Modificar la control Estático en el segundo fila del control Zona multilínea:
    1. Haga clic en la control Estático en el segundo fila.
    2. Abra la ventana de descripción (haga doble clic en el control).
    3. En la ventana de descripción de la pestaña "General":
      • Dé un nombre al control ("STC_MapOfStores" por ejemplo).
      • Cambie el título (por ejemplo "Mapa de tiendas").
    4. Valide la ventana de descripción.
Modificar el 3er fila: salida de la aplicación
  • Para modificar la imagen en la tercera fila del control Zona multilínea:
    1. Haga clic en la control Imagen en el tercer fila.
    2. Abra la ventana de descripción de la imagen (haga doble clic en el control).
    3. En la ventana de descripción:
      • Dé un nombre a la imagen ("IMG_Exit" por ejemplo).
      • Haga clic en el botón Menú contextual. Seleccione "Catálogo" de el menú contextual que aparece para elegir una imagen que represente la acción.
      • En la ventana del catálogo de imágenes, escriba "Cerrar" en el control de búsqueda y pulse Intro.
      • Seleccione una imagen con un doble clic.
      • En la ventana para configurar la imagen generada, seleccione un tamaño (80 por ejemplo, W (Ancho) = 80 y H (Alto) = 80), dé un nombre a la imagen ("Cerrar" por ejemplo) y valide.
    4. Valide la ventana de descripción.
  • Modificar la control Estático de la tercera línea que se encuentra en el control Zona multilínea:
    1. Haga clic en la control Estático en el tercer fila.
    2. Abra la ventana de descripción (haga doble clic en el control).
    3. En la ventana de descripción de la pestaña "General":
      • Dé un nombre al control ("STC_Exit" por ejemplo).
      • Cambiar el título ("Salir de la aplicación" por ejemplo).
    4. Valide la ventana de descripción.

Programación del menú

  • Finalmente, escribiremos el código WLanguage necesario para realizar cada acción en el menú:
    1. Haga clic con el botón derecho del ratón en la control Zona multilínea y seleccione "Code"..
      Atención: asegúrese de seleccionar el control Zona multilínea y no uno de los controles que le pertenecen.
    2. En el editor de código, escriba el siguiente código WLanguage en el evento "Selection (click) of a line in....":
      SWITCH MZ_MENU
      CASE 1 // List of products
      OpenMobileWindow(WIN_List_of_products)
      CASE 2 // Map of stores
      OpenMobileWindow(WIN_Map_of_stores)
      CASE 3 // Exit from the application
      Close()
      END
    3. Guarda las modificaciones pulsando Grabe el elemento entre los botones de acceso rápido.
    4. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
Prueba de aplicación
El último paso consiste en especificar que la ventana del menú es la primera ventana de la aplicación. Para ello, vamos a realizar una prueba completa del proyecto y definir la primera ventana del proyecto.
  • Definir la primera ventana del proyecto:
    1. Seleccione la ventana "WIN_Menú" en el panel "Explorador de proyectos".
    2. Mostrar el menú contextual.
    3. Seleccione "Primera ventana de proyecto".. Un icono específico (con un 1 pequeño) aparece delante del nombre de la ventana, en el panel "Project explorer".
Hasta ahora, la prueba de las ventanas se ejecutaba individualmente pulsando Ejecutar la prueba de la ventana entre los botones de acceso rápido.
  • Iniciar la prueba del proyecto en el simulador:
    1. Haga clic en Probar proyecto en los botones de acceso rápido.
    2. Su proyecto comienza con la ventana del menú. Haga clic en una opción de su menú para comprobar si los diferentes enlaces son correctos.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 25
Comentarios
Haga clic en [Agregar] para publicar un comentario