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
  • Presentación
  • Creación de la ventana de formulario con swipe
  • Creación de la ventana Formulario
  • Creación de la ventana interna
  • Gestión del deslizamiento en la ventana del formulario
  • Prueba de ventana
  • Conclusión
Lección 5.5. Ventana con desplazamiento
Esta lección le enseñará los conceptos siguientes
  • Creación de una ventana interna mediante refactorización.
  • Cambiar el contenido de la ventana con el dedo.
Duración de las clases

Tiempo estimado: 20 mn
Lección anteriorTabla de contenidoSiguiente lección
Presentación
En las aplicaciones Windows, todas las operaciones se realizan con el ratón o el teclado.
En el móvil, las interfaces deben configurarse de forma diferente. Con las pantallas táctiles, todas las operaciones se realizan con los dedos.
En las aplicaciones para dispositivos móviles, WINDEV Mobile propone varias funcionalidades para gestionar los movimientos específicos de los dedos (pull to actualización, double touch, sliding,...).
En esta lección, vamos a crear una nueva ventana de formulario, utilizada para ver los productos.
En esta ventana, usted tendrá la posibilidad de pasar de una forma de producto a otra a través de un deslizamiento.
Imagen:ejemplo-WM.png Imagen:ejemplo-WM.png

Respuesta

Si la aplicación "Gestión de productos WM" no se ha creado en la parte anterior, se dispone de un proyecto corregido.. Este proyecto contiene todas las ventanas creadas en esta parte y le permite comprobar sus operaciones.
Para abrir este proyecto corregido, en la página de inicio de WINDEV Mobile (Ctrl + <), haga clic en "Tutorial" y seleccione "iOS/Android application (Answer)".
Creación de la ventana de formulario con swipe

Creación de la ventana Formulario

  • Para crear la ventana del formulario:
    1. Cree una nueva ventana en blanco.
      • Haga clic en Creación de un elemento entre los botones de acceso rápido.
      • Aparece la ventana para crear un nuevo elemento: 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 un elemento, especifique:
      • el título de la ventana: "Forma del producto".
      • el nombre de la ventana: "WIN_Product_form_Advanced".
    3. Valide.
Ahora vamos a crear una control Ventana interna en la ventana "WIN_Product_form_Advanced".. Este control albergará una ventana interna que mostrará los datos a desplazar.
  • Para crear la control Ventana interna:
    1. En el panel "Creación", en el grupo "Contenedores", expanda "Ventana interna" y seleccione "Deslizar área (ventana interna)".
    2. Haga clic en la posición donde se creará el control en la ventana (esquina superior izquierda).
    3. Cambie el tamaño de la control Ventana interna para que ocupe todo el espacio disponible en la ventana.
    4. Modificar el ancla de control Ventana interna (opción"Anclar" del menú que aparece): anclar el mando en altura y en anchura ( Anclaje en altura y anchura ).
    5. Validar.

Creación de la ventana interna

  • Para simplificar la creación de la ventana interna, la vamos a crear a partir de la ventana "WIN_Product_form" que se encuentra en nuestro proyecto:
    1. Si es necesario, abra "WIN_Product_form" en el editor (haga doble clic en su nombre en el panel "Project explorer").
    2. Seleccione todos los controles que se encuentran en el diseño vertical (Ctrl + A).
    3. Mostrar el menú que aparece y seleccionar "Refactorización... Crear una ventana interna a partir de la selección"..
    4. La ventana interna se crea automáticamente y se muestra la ventana de guardar.. Dar el nombre "IW_Product" y validar.
    5. Mostrar la ventana interna creada en el editor: haga clic en el botón "IW_Product" en la barra de elementos abiertos.
    6. Mostrar la ventana de descripción de la ventana interna. En la pestaña "UI" modificar el ancho de ventana: 320. Este ancho corresponde al ancho de control Ventana interna que se creó en la ventana "WIN_Product_form_Advanced"..
    7. Validar.

Gestión del deslizamiento en la ventana del formulario

  • Para asociar la ventana interna con la ventana Formulario:
    1. Mostrar la ventana "WIN_Product_form_Advanced" en el editor (haga clic en su nombre en la barra de elementos abiertos).
    2. Seleccione el control Ventana interna y muestre su descripción ("Descripción" en el menú que aparece).
    3. En la pestaña "General", seleccione la ventana interna que acaba de crear ("IW_Product").
    4. En la pestaña "UI", en "Cambiar contenido al deslizar":
      • La opción "Permitir el cambio de contenido al deslizar" ya está marcada porque hemos elegido el control Ventana interna para el deslizamiento.
      • Marque "Posicionarse en el registro actual al abrir la ventana interna.".
      • La orientación de deslizamiento es "Horizontal" por defecto.
        Ajustes de deslizamiento
    5. En la pestaña "Contenido" vamos a configurar el modo de llenado de la ventana interna. Esta ventana mostrará los datos del Producto archivo de datos:
      • Haga clic en "Archivo/Consulta".
      • En la fuente, para la opción "Archivo examinado", seleccione la opción "Producto" archivo de datos.
        Configuración de la fuente de la ventana interna
    6. Validar la ventana de descripción.
Se implementa el deslizamiento.
  • Para evitar ser molestados por la apariencia del teclado durante el deslizamiento, vamos a usar SIPVisible:
    1. Mostrar los eventos WLanguage de la control Ventana interna en "WIN_Product_form_Advanced"..
    2. Escribe el siguiente código en el evento WLanguage "Selection by swipe...":
      SIPVisible(False)
    3. Cerrar el editor de código.
  • Para finalizar esta ventana, vamos a añadir la opción de validación en la Action Bar de la ventana. Ya lo hicimos en la lección 5.2 ("Gestión de la creación y modificación del producto"). Aquí sólo presentaremos los puntos principales:
    1. Seleccione la Action Bar (en la parte superior de la ventana).
    2. Visualizar la ventana de descripción de Action Bar.
    3. Número de clic 2. Aparece la interfaz para escribir una opción en el campo Action Bar..
    4. Haga clic en el botón "+" 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 "Caption", escriba "Done"..
      • En la zona "Imagen preestablecida", amplíe la lista y seleccione "Listo"..
      • Validar la ventana de descripción.
    6. Para introducir el código utilizado para guardar las modificaciones realizadas en la ventana "WIN_Product_form_Advanced":
      • Seleccione (si es necesario) el control Action Bar de la ventana.
      • Haga clic en "OK"..
      • Aparece un menú desplegable con la opción "Listo"..
      • Haga clic con el botón derecho del ratón en la opción.
      • Seleccione "Código" en el menú que aparece en la pantalla.
      • Escriba el siguiente código WLanguage en el evento "Seleccionar el menú":
        ScreenToFile()
        HSave(Product)
        Close()
    7. Guarde las modificaciones haciendo clic en Grabe el elemento entre los botones de acceso rápido.
    8. Cierre la ventana de código (haga clic en X en la esquina superior derecha del editor de código).
Prueba de ventana
Antes de ejecutar la prueba de la ventana, vamos a modificar la ventana "WIN_List_of_products_Advanced" para abrir directamente la ventana desde la que se acaba de crear.
  • Para abrir la ventana con un deslizamiento de la lista de productos:
    1. Mostrar la ventana "WIN_List_of_products_Advanced" en el editor (haga clic en su nombre en la barra de documentos abiertos).
    2. Mostrar los eventos WLanguage relacionados con la control Looper.
    3. En el caso "Selección de un fila ....", sustituya el código WLanguage:
      HReadSeek(Product,ProductID,QRY_Products.ProductID)
      OpenMobileWindow(WIN_Product_form)
      por
      HReadSeek(Product,ProductID,QRY_Products.ProductID)
      OpenMobileWindow(WIN_Product_form_Advanced)
  • Vamos a probar el modo de funcionamiento del proyecto en el simulador:
    1. Haga clic en Ejecutar prueba del proyecto entre los botones de acceso rápido.
    2. En el control Looper que se muestra, haga clic en un producto para mostrar su forma.
    3. Haga clic en el formulario del producto y mueva el ratón a la derecha o a la izquierda. La forma del producto cambia automáticamente.
      Deslizamiento de la ventana
Conclusión
En esta parte se explicaron los principales conceptos para el desarrollo de aplicaciones Android o iOS.
En esta parte no se han presentado varios temas:
  • gestión de correos electrónicos,
  • gestión de notificaciones,
  • usando el panel de visualización,
  • usando el depurador,
  • ...
No dude en ver la ayuda en línea para descubrir y comprobar nuevas características.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 25
Comentarios
Haga clic en [Agregar] para publicar un comentario