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 5 - Gestos de deslizamiento en una ventana
  • Presentación
  • Crear una ventana Ficha de producto con deslizamiento
  • Principio
  • Crear la ventana y el control Ventana interna
  • Crear una ventana interna
  • Gesto de deslizamiento en la ventana Ficha de producto
  • Prueba de la ventana
  • Abrir la ficha de producto desde la lista de productos
  • Pruebas
  • En resumen

Desarrollo de una aplicación para Android e iOS

Lección 5 - Gestos de deslizamiento en una ventana
Abordaremos los siguientes temas:
  • Crear una ventana interna a través de un proceso de refactorización.
  • Cambiar el contenido de una ventana con un gesto de deslizamiento.
Durée de la leçon 20 min
Presentación
En las aplicaciones de Windows, todas las operaciones se realizan con el ratón o el teclado.
En los dispositivos móviles, las interfaces deben diseñarse de forma diferente. En las pantallas táctiles, todas las operaciones se realizan con los dedos.
En aplicaciones para dispositivos móviles, WINDEV Mobile ofrece diferentes funcionalidades para gestionar gestos táctiles específicos (por ejemplo, deslizar hacia abajo para actualizar, doble toque, desplazar, etc.). Los vimos en la lección anterior.
En esta lección, crearemos una nueva ventana para ver los productos.
En esta ventana, podrá navegar por las fichas de los productos con un simple gesto de deslizamiento.
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 una ventana Ficha de producto con deslizamiento

Principio

Una ventana Ficha de producto compatible con gestos de deslizamiento utiliza ventanas internas. Los datos que el usuario deslizará en la pantalla estarán integrados en una ventana interna. Solo tiene que definir las opciones del gesto de deslizamiento.
En nuestro ejemplo, vamos a:
  • crear una nueva ventana. Esta ventana contendrá un control Ventana interna.
  • crear una ventana interna que contenga la información que se va a mostrar, en nuestro caso, la ficha de producto (Product form).
  • configurar los gestos de deslizamiento en la ventana.

Crear la ventana y el control Ventana interna

En primer lugar, vamos a crear una ventana en blanco. Esta ventana contendrá un control Ventana interna.
Para crear una ventana en blanco:
  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 "Ventana", y luego en "Ventana".
  3. En el asistente, seleccione la pestaña "Estándar", elija "En blanco" y valide.
  4. En la ventana para guardar el elemento, indique:
    • el título de la ventana: "Product form".
    • el nombre de la ventana: "WIN_Advanced_FORM_Product".
  5. Valide.
Vamos a crear un control Ventana interna en la ventana "WIN_Advanced_FORM_Product". Este control contendrá una ventana interna que mostrará los datos por los que el usuario puede navegar.

Para crear el control Ventana interna:
  1. En la pestaña "Creación", en el grupo "Contenedores", despliegue "Ventana interna" y seleccione "Área de deslizamiento (ventana interna)".
  2. Haga clic en la ventana en la ubicación en la que desea crear el control (en la esquina superior izquierda, por ejemplo).
  3. Cambie el tamaño del control Ventana interna para que ocupe todo el espacio de la ventana.
  4. Cambie el anclaje del control Ventana interna (opción "Anclaje" en el menú contextual): ancle el control vertical y horizontalmente (Ancho y alto).
  5. Valide.

Crear una ventana interna

Para crear fácilmente la ventana interna, la crearemos desde la ventana "WIN_Product_form" de nuestro proyecto:
  1. Si es necesario, abra la ventana "WIN_Product_form" en el editor (haga doble clic en su nombre en el panel "Explorador de proyectos").
  2. Seleccione todos los controles en el layout vertical (Ctrl + A).
  3. Abra el menú contextual y seleccione la opción "Refactorización .. Crear una ventana interna a partir de la selección".
  4. La ventana interna se crea automáticamente y aparece una ventana para guardarla. Defina el nombre "IW_Product" y valide.
  5. Abra la ventana interna que acabamos de crear en el editor: haga clic en "IW_Product" en las pestañas de documentos abiertos.
  6. Abra la descripción de la ventana interna. En la pestaña "UI", cambie el ancho de la ventana: 360. Este ancho corresponde al del control Ventana interna que creamos en la ventana "WIN_Advanced_FORM_Product".
  7. Valide.

Gesto de deslizamiento en la ventana Ficha de producto

Para asociar la ventana interna a la ventana Ficha de producto:
  1. Abra la ventana "WIN_Advanced_FORM_Product" en el editor (haga clic en ella en las pestañas de documentos abiertos).
  2. Seleccione el control Ventana interna y abra su descripción (opción "Descripción" en el menú contextual).
  3. En la pestaña "General", seleccione la ventana interna "IW_Product".
  4. En la pestaña "UI", en la sección "Cambiar contenido al deslizar":
    • La opción "Permitir cambiar de contenido al deslizar" ya está seleccionada porque elegimos el control Ventana interna para cambiar el contenido al deslizar.
    • Seleccione la opción "Posicionarse en el registro actual al abrir la ventana interna.".
    • De forma predeterminada, la orientación del deslizamiento es "Horizontal".
      Configuración del deslizamiento
  5. En la pestaña "Contenido" vamos a definir cómo se rellenará la ventana interna. Esta ventana mostrará los datos del archivo de datos Product:
    • Haga clic en "Archivo/Consulta".
    • En la sección fuente, en la opción "Archivo recorrido", seleccione el archivo de datos "Product".
      Configuración de la fuente de la ventana interna
  6. Valide la ventana de descripción.
El deslizamiento se ha definido correctamente.
Para evitar que el teclado aparezca durante el deslizamiento, vamos a utilizar la función SIPVisible:
  1. Abra los eventos WLanguage del control Ventana interna de "WIN_Advanced_FORM_Product".
  2. Introduzca el siguiente código en el evento WLanguage "Selección por deslizamiento...":
    SIPVisible(False)
  3. Cierre el editor de código.
Para terminar esta ventana, vamos a agregar la opción de validación al Action Bar. Ya realizamos esta operación en la lección 2 ("Crear y modificar un producto"). Aquí, solo presentaremos los puntos principales:
  1. Seleccione el Action Bar (en la parte superior de la ventana).
  2. Abra la ventana de descripción del Action Bar.
  3. Haga clic en el número 2. Enseguida, se muestra una pantalla para editar las opciones del Action Bar.
  4. Haga clic en el botón "+" para agregar una opción. Una nueva opción se crea en la parte superior derecha.
  5. Cambie las características de la opción:
    • En el título de la opción, escriba "Done".
    • En la sección "Imagen predefinida", despliegue la lista y seleccione "Validar".
    • Confirme los cambios y cierre la ventana de descripción.
  6. Para introducir el código que guarda los cambios realizados en la ventana "WIN_Advanced_FORM_Product":
    • Seleccione el control Action Bar.
    • Haga clic en "OK".
    • Enseguida, se despliega un menú con la opción "Done".
    • 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()
  7. Guarde los cambios haciendo clic en Guardar elemento en los botones de acceso rápido.
  8. Cierre la ventana de código.
Prueba de la ventana

Abrir la ficha de producto desde la lista de productos

Antes de probar la ventana, vamos a modificar la ventana "WIN_Advanced_FORM_Product" para abrir directamente la ventana de la ficha de producto que acabamos de crear.

Para abrir la ventana Ficha de producto desde la lista de productos:
  1. Abra la ventana "WIN_Advanced_LIST_Products" en el editor (haga clic en ella en las pestañas de documentos abiertos).
  2. Abra los eventos WLanguage del control Looper.
  3. En el evento "Selección de una fila...", reemplace el siguiente código WLanguage:
    Product.ReadSeek(ProductID,QRY_Products.ProductID)
    WIN_Product_form.OpenMobileWindow()
    por
    Product.ReadSeek(ProductID,QRY_Products.ProductID)
    WIN_Advanced_FORM_Product.OpenMobileWindow()

Pruebas

Vamos a probar el proyecto en el simulador:
  1. Haga clic en Probar proyecto en los botones de acceso rápido.
  2. En el control Looper que se muestra, haga clic en un producto para ver los detalles.
  3. Haga clic en la ficha del producto y desplace el ratón hacia la derecha o izquierda. La ficha del producto cambia automáticamente.
    Deslizamiento de la ventana
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 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".
En esta lección, vimos cómo habilitar los gestos de deslizamiento en una ventana.
En la próxima lección, veremos cómo imprimir contenido en PDF desde un dispositivo móvil.
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: 06/12/2023

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