PC SOFT

AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV Mobile 26!
Este contenido se ha traducido automáticamente. Haga clic aquí para ver la versión en inglés.
  • Esta lección abarcará los siguientes temas
  • Presentación
  • Crear una ventana Ficha de producto con deslizamiento
  • Creación de la ventana Formulario
  • Crear una ventana interna
  • Gesto de deslizamiento en la ventana del formulario
  • Prueba de la ventana
  • Conclusión
Lección 4.5. Ventana con desplazamiento
Esta lección abarcará los siguientes temas
  • Crear una ventana interna por refactorización.
  • Cambiar el contenido de la ventana con un gesto de deslizamiento.
Duración de la lección

Tiempo estimado: 20 min
Lección anteriorTabla de contenidoSiguiente lección
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 las aplicaciones para dispositivos móviles, WINDEV Mobile ofrece múltiples funciones para gestionar gestos táctiles específicos (por ejemplo, tirar para actualización, doble toque, deslizar, etc.).
En esta lección, crearemos una nueva ventana de formulario para ver los productos.
En esta ventana, podrá pasar de un formulario de producto a otro con un simple deslizamiento.

Respuestas

Si la aplicación "Gestión de productos WM" no se creó en la lección anterior, se dispone de un proyecto corregido. Este proyecto contiene todas las ventanas creadas en esta lección y le permite comprobar sus operaciones.
Para abrir el proyecto corregido, vaya a la página de inicio y haga clic en "Tutorial", luego en "Parte 4 - Desarrollo de una aplicación Android/iOS", haga doble clic en "Gestión de productos Android/iOS (Respuestas)".
Crear una ventana Ficha de producto con deslizamiento

Creación de la ventana Formulario

  • 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 el asistente, seleccione la pestaña "Estándar", elija "En blanco" y valide.
    2. 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".
    3. Valide.
Ahora crearemos una control Ventana interna en la ventana "WIN_Advanced_FORM_Product".. Esta Control contendrá una ventana interna que mostrará los datos a desplazar.

  • Para crear el control Ventana interna:
    1. En el panel "Creación", en el grupo "Contenedores", amplíe "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. Modificar el anclaje de la control Ventana interna (seleccionar "Anclaje" en el menú contextual): defina el anclaje vertical y horizontal del control ( Anclaje en altura y anchura ).
    5. Validar.

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 diseño vertical (Ctrl + A).
    3. Abra el menú contextual y seleccione "Refactoring ... Crear una ventana interna de la selección".
    4. La ventana interna se crea automáticamente y una ventana para guardarla aparece en pantalla. Defina el nombre "IW_Product" y valide.
    5. Abre la ventana interna que acabamos de crear en el editor: haga clic en "WI_Product" en las pestañas abiertas de Document.
    6. Abra la descripción de la ventana interna. En la pestaña "UI", modifica el ancho de la ventana: 320. Esta anchura corresponde a la anchura de la control Ventana interna que hemos creado en "WIN_Advanced_FORM_Product".
    7. Validar.

Gesto de deslizamiento en la ventana del formulario

  • Para asociar la ventana interna a la ficha del producto:
    1. Abra la ventana "WIN_Advanced_FORM_Product" en el editor (haga clic en ella en las pestañas abiertas de Document).
    2. Seleccione el control Ventana interna y abra su description (seleccione "description" en el menú contextual).
    3. En la pestaña "General", seleccione la ventana interna que acabamos de crear ("IW_Product").
    4. En la pestaña "UI", en la sección "Cambiar contenido al deslizar":
      • "Permitir cambiar de contenido al deslizar" ya está marcada porque hemos elegido el control Ventana interna para pasar el contenido.
      • 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 configurar el modo para 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 navegado", 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. Abrir los eventos WLanguage de la control Ventana interna en "WIN_Advanced_FORM_Product".
    2. Introduzca el siguiente código en el evento WLanguage "Selección por desplazamiento...":
      SIPVisible(False)
    3. Cerrar el editor de código.
  • Para finalizar esta ventana, vamos a añadir la opción de validación a la Action Bar de la ventana. Ya realizamos esta operación en la lección 4.2 ("Crear y modificar un producto"). Aquí, solo presentaremos los puntos principales:
    1. Seleccione la 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 introducir una opción en el Action Bar.
    4. Haga clic en el botón "+" para agregar una opción. Ua nueva opción se crea en la parte superior derecha.
    5. Modifique 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".
      • Valide la ventana de descripción.
    6. Introducir el código para guardar los cambios realizados en la ventana "WIN_Advanced_FORM_Product":
      • Seleccione (si es necesario) la Action Bar Control de la ventana.
      • 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ú":
        ScreenToFile()
        Product.Save()
        Close()
    7. Guarde los cambios haciendo clic en Grabe el elemento 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).
Prueba de la ventana
Antes de probar la ventana, vamos a modificar la ventana "WIN_Advanced_FORM_Product" para abrir directamente la ventana del formulario 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 abiertas de Document).
    2. Abrir los eventos de WLanguage relacionados con la control Looper.
    3. En el evento "Selección de un 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()
  • Vamos a probar el proyecto en el simulador:
    1. Haga clic en Probar proyecto en los botones de acceso rápido.
    2. En la control Looper que se muestra, haga clic en un producto para ver el formulario de detalles del producto.
    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
Conclusión
En esta lección se explicaron los principales conceptos para desarrollar aplicaciones Android o iOS.
Sin embargo, hay varios temas por descubrir:
  • gestión de correos electrónicos,
  • gestión de notificaciones,
  • uso del panel de visualización,
  • uso del depurador,
  • ...
Consulte la ayuda en línea para descubrir y comprobar las nuevas funciones.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 26
Comentarios
Haga clic en [Agregar] para publicar un comentario