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 abarcará los siguientes temas
  • 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 la ventana
  • Conclusión
Lección 5.5. Ventana con desplazamiento
Esta lección abarcará los siguientes temas
  • 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.

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 el proyecto, en la página de inicio de WINDEV Mobile (Ctrl + <), haga clic en "Curso de autoformación" 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 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. 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 la pestaña "Creación", en el grupo "Contenedores", despliegue "Ventana interna" y seleccione "Área de deslizamiento (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 anclaje de control Ventana interna (opción "Ancla" de el menú contextual): anclar el control en altura y en anchura ( Anclaje en altura y anchura ).
    5. Valide.

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ú contextual y seleccionar "Refactorización .. Crear una ventana interna 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. Abra la 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. Valide.

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 la control Ventana interna y abra su descripción ("Descripción" en el menú contextual).
    3. En la pestaña "General", seleccione la ventana interna que se acaba de crear ("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 realizar el deslizamiento.
      • Seleccione la opción "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 archivo de datos del producto:
      • Haga clic en "Archivo/Consulta".
      • En la fuente, para la opción "Fichero de navegación", seleccione el fichero de datos "Producto"..
        Configuración de la fuente de la ventana interna
    6. Valide la ventana de descripción.
Se implementa el deslizamiento.
  • Para no molestarse por la apariencia del teclado durante el golpe, 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 hicimos esto 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. Abrir la ventana de descripción de la 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"..
      • Valide 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" de el menú contextual que se muestra.
      • Escriba el siguiente código WLanguage en el evento "Seleccionar el menú":
        ScreenToFile()
        HSave(Product)
        Close()
    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).
Prueba de la 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 Probar proyecto en 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