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 siguientes conceptos
  • Panorama general
  • Creación de la consulta utilizada para encontrar los productos
  • Creación de la consulta
  • Prueba de consulta
  • Añadir una condición de selección
  • Prueba de consulta con parámetros
  • Creación de la interfaz
  • Creando la ventana
  • Gestión de la búsqueda
  • Mejoras en las ventanas
  • Gestionar la funcionalidad "Pull to refresh" (Deslizar hacia abajo para actualizar)
  • Uso de un menú deslizante
Lección 5.4. Ventana con búsqueda
Esta lección le enseñará los siguientes conceptos
  • Creación de una consulta con parámetros.
  • Creación de una ventana mediante el asistente.
  • Implementar la búsqueda.
  • Gestión de "Pull to actualización".
  • Añadir un menú deslizante.
Duración de las clases

Tiempo estimado: 30 mn
Lección anteriorTabla de contenidoSiguiente lección
Panorama general
En la lección 5.2, hemos explicado cómo crear una ventana para listar los productos en un looper.
Vamos a crear una ventana basada en el mismo principio pero proponiendo una búsqueda sobre el nombre del producto.:
  • la ventana muestra la lista de productos en un looper.
  • cuando el usuario escribe un nombre de producto en el área de búsqueda, los productos correspondientes se muestran en el looper.
En nuestro ejemplo, esta búsqueda se realizará en el archivo de datos del "Producto".
La interfaz de "WIN_List_of_products_Advanced" será la siguiente:
Buscar
Para crear esta ventana, vamos a:
  • Crear la consulta para la selección de registros en el archivo de datos del producto.
  • Crear y configurar la ventana de búsqueda.

Observación

¿Qué es una consulta de selección?
Una consulta de selección es una consulta que "elegirá" los registros correspondientes a los criterios especificados.
Este tipo de consulta se denomina consulta select porque el comando SELECT se utiliza en el lenguaje SQL.

Respuesta

Si no se ha creado la aplicación "Gestión de productos WM" en la parte anterior:
  • un proyecto intermedio está disponible. Este proyecto contiene las ventanas creadas en las partes anteriores. Este proyecto te permite seguir esta lección y crear las nuevas ventanas.
    Para abrir este proyecto, en la página de inicio de WINDEV Mobile (Ctrl + <), haga clic en "Tutorial" y seleccione "iOS/Android application (With windows)"..
  • 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 consulta utilizada para encontrar los productos

Creación de la consulta

  • El editor de consultas se utilizará para crear la consulta.
    1. Haga clic en Creación de un elemento entre los botones de acceso rápido. Aparece la ventana de creación de elementos: haga clic en "Consulta. Se inicia el asistente de creación de consultas.
    2. Seleccione la opción "Seleccionar.
      De hecho, esta consulta se utilizará para seleccionar registros. Vaya al siguiente paso.
    3. Aparece la ventana de descripción de la consulta.
    4. Ponga un nombre y una leyenda a su consulta: escriba "QRY_Products" en lugar de "QRY_NoName1" en el área "Query name" y "Find products on the name" en el área "Caption:
      Nombre de la consulta
  • Para construir la consulta, vamos a seleccionar los elementos que se mostrarán en el resultado.
    1. La consulta debe utilizarse para mostrar las características del producto seleccionado:
      • Seleccione el archivo de datos del "Producto" en el área de la ventana "Análisis"..
      • Haga clic en la flecha para seleccionar todos los elementos del archivo de datos en la consulta.
        Selección de los elementos de los archivos de datos
    2. La ventana de descripción de la consulta es la siguiente:
      Ventana de descripción de la consulta
    3. Validar la ventana de descripción de la consulta (botón"OK").
    4. Se muestra la representación gráfica de la consulta y la ventana para grabar la consulta..
    5. Validar la información mostrada.

Prueba de consulta

Como todos los elementos encontrados en un proyecto WINDEV Mobile, usted tiene la capacidad de ejecutar la prueba de consulta que acaba de crear:
  1. Haga clic en Ejecute la prueba de consulta.
  2. El resultado se muestra en una ventana:
    Resultado de la consulta
    TEl resultado muestra TODOS los productos.
    En nuestro caso, queremos mostrar los productos correspondientes a los criterios de búsqueda, el nombre del producto. Para ello, debemos utilizar una consulta con parámetros.
  3. Cierra la ventana.

Añadir una condición de selección

En nuestro ejemplo, el usuario podrá seleccionar un valor para el nombre del producto. Debemos modificar la consulta para que este criterio de búsqueda corresponda a un parámetro de consulta.
  • Para definir un parámetro de consulta, muestre la ventana de descripción de la consulta:
    haga doble clic en el fondo de la representación gráfica de la consulta (o seleccione "Descripción de la consulta" en el menú contextual).
  • Gestionar el parámetro "Nombre del producto":
    1. En el medio de la ventana, seleccione el elemento Nombre del producto.
    2. Muestra el menú contextual y selecciona "Condición de selección .. Nueva condición".
      Condición de selección
    3. En la ventana que se muestra, vamos a especificar que la condición de selección corresponde a un parámetro:
      Describiendo la condición
      • Seleccione "contiene".
      • Seleccione "el parámetro".
      • Mantener el nombre de parámetro propuesto automáticamente: "ParamName".
    4. Validar la ventana de descripción de la condición. El número "1" aparece a la derecha del elemento "Nombre del producto", indicando que se ha definido una condición de selección..
      Condición en la ventana de descripción de la consulta
    5. Validar la ventana de descripción de la consulta.
    6. El gráfico de consulta se modifica para tener en cuenta la condición de selección definida..
      Gráfico de consulta
    7. Guarde la consulta haciendo clic en Grabe el elemento entre los botones de acceso rápido.

Prueba de consulta con parámetros

  • Ejecutar la prueba de consulta con parámetros:
    1. Haga clic en Ejecute la prueba de consulta.
    2. Aparece una ventana que le permite escribir los diferentes parámetros de consulta.
    3. Seleccione el parámetro ParamName. En la parte inferior de la ventana, escriba "Polo"..
      Introducción de los parámetros de consulta
    4. Validar la ventana. Se muestra el resultado de la consulta correspondiente a los parámetros especificados.
    5. Cierra la ventana.
Ahora vamos a crear la interfaz de nuestra ventana basada en esta consulta.
Creación de la interfaz
La ventana de búsqueda se creará mediante el asistente para la creación de ventanas.

Observación

El asistente de creación de ventanas ofrece muchas ventanas preestablecidas. Estas ventanas proponen interfaces modernas para sus aplicaciones.
La mayoría de estas ventanas se pueden generar a partir de sus datos.

Creando la ventana

  • Para crear la ventana de búsqueda:
    1. Haga clic en Creación de un elemento entre los botones de acceso rápido. Aparece la ventana de creación de elementos: haga clic en "Ventana" y luego en "Ventana".
    2. En el asistente, seleccione "Looper" y valide.
    3. Se inicia el asistente de creación de ventanas.
    4. Elija la plataforma a utilizar: "Teléfono Android genérico". Vaya al siguiente paso del asistente.
    5. El asistente propone elegir la fuente de datos asociada a la ventana. En nuestro caso, es una consulta:
      • Haga clic en "Consultas".
      • Seleccione la consulta que acaba de crear: "QRY_Productos".
        Selección de la consulta
    6. Vaya al siguiente paso.
    7. Seleccione el estilo del looper: "Imagen + Título + Pie de foto abajo". Vaya al siguiente paso.
    8. El asistente propone automáticamente los elementos de consulta correspondientes al looper generado. Mantenga las opciones propuestas y vaya al siguiente paso.
    9. Mantener la posición de clasificación propuesta por defecto ("Nombre"). Ir al siguiente paso.
    10. El asistente propone varias opciones para generar la ventana Looper. En nuestro ejemplo, mantenga las opciones predeterminadas. Ir al siguiente paso.
    11. Dar un título y un nombre a la ventana generada. En nuestro caso:
      • Para el título, escriba "Productos".
      • Para el nombre, escriba "WIN_List_of_products_Advanced".
    12. Validar el asistente. La ventana se crea automáticamente, se muestra en el editor y se guarda..
  • Ahora vamos a modificar la ventana "WIN_List_of_products_Advanced" para mostrar la forma del producto que se creó en una lección anterior.
    1. Haga clic con el botón derecho del ratón en la control Looper y seleccione "Code"..
      Depósito de seguridad: asegúrese de seleccionar el control Looper y no uno de los controles que contiene.
    2. En el editor de código, escriba el siguiente código WLanguage en el evento "Initializing....":
      QRY_Products.ParamName = Null
    3. Esta línea de código se utiliza para inicializar el valor del parámetro encontrado en la consulta "QRY_Products" utilizada por el control Looper. Por defecto, el valor de este parámetro es "Null", lo que le permite ignorar el parámetro. Por lo tanto, todos los productos se mostrarán en la ventana.
    4. En el editor de código, escriba el siguiente código de WLanguage en el evento "Selecting a fila ....":
      HReadSeek(Product,ProductID,QRY_Products.ProductID)
      OpenMobileWindow(WIN_Product_form)
      Vamos a estudiar este código:
      • La control Looper se basa en la consulta QRY_Product. Al seleccionar el producto en la control Looper, el registro seleccionado es el que se encuentra en la consulta.
      • Al hacer clic en el control fila, queremos abrir la ventana del formulario que se creó de antemano.. Esta ventana se basa en el archivo de datos del producto.
      • El registro seleccionado por la consulta debe encontrarse en el archivo de datos "Producto" para poder cargar el buffer de los datos seleccionados en la memoria. La operación es realizada por HReadSeek.
      • A continuación, OpenMobileWindow abre la ventana del formulario "WIN_Product_form"..
    5. Guarde las modificaciones haciendo clic en Grabe el elemento entre los botones de acceso rápido.
    6. Cierre la ventana de código (haga clic en X en la esquina superior derecha del editor de código).
    7. Pruebe la ventana que se acaba de crear en el simulador ( Ejecutar la prueba de la ventana entre los botones de acceso rápido).
      Ventana que se está ejecutando actualmente
    8. Haga clic en uno de los productos: se muestra la ventana del formulario.
    9. Termina la prueba.

Gestión de la búsqueda

Ahora vamos a gestionar la búsqueda. Para ello, vamos a:
  • Permita la búsqueda en el Action Bar.
  • Cree un botón de búsqueda en el Action Bar.
  • Para permitir la búsqueda en el Action Bar:
    1. Mostrar (si es necesario) la ventana "WIN_List_of_products_Advanced" en el editor.
    2. Visualizar la ventana de descripción de Action Bar (haga doble clic en Action Bar).
    3. En la pestaña "Detalles", marque "Permitir búsqueda en el Action Bar"..
  • Para crear un botón de búsqueda en el Action Bar:
    1. En la pestaña "General" de la ventana de descripción de Action Bar:
    2. Número de clic 2. Se muestra la interfaz para escribir una opción en la barra de herramientas..
    3. 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. Modificar las características de esta opción:
      • En el área "Caption", escriba "Find"..
      • En la zona "Imagen preajustada", amplíe la lista y seleccione "Buscar"..
      • Validar la ventana de descripción.
    4. El código de esta opción se utiliza para hacer visible el área de búsqueda. Para escribir este código:
      • Seleccione (si es necesario) el Action Bar de la ventana.
      • Haga clic en el botón de búsqueda.
      • Aparece un menú desplegable con la opción "Buscar.
      • 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ú":
        ActionBarSearchVisible(True)
    5. Guarde las modificaciones haciendo clic en Grabe el elemento entre los botones de acceso rápido.
    6. Cierre la ventana de código (haga clic en X en la esquina superior derecha del editor de código).
    7. Seleccione la Action Bar y muestre el código asociado (pulse F2 o seleccione "Código" en el menú contextual).
    8. En el editor de código, escriba el siguiente código de WLanguage en el evento "Validar la búsqueda...":
      QRY_Products.ParamName = ACTB_ActionBar..SearchValue
      LooperDisplay(LOOP_QRY_Products,taReExecuteQuery)
    9. Echemos un vistazo a este código de WLanguage:
      • El parámetro de consulta se inicializa con el valor de búsqueda introducido en el campo Action Bar.
      • A continuación, control Looper se vuelve a mostrar por LooperDisplay. La constante taReexecuteQuery se utiliza para volver a ejecutar la consulta base de control Looper y, por lo tanto, para tener en cuenta el nuevo parámetro.
    10. Guarde las modificaciones haciendo clic en Grabe el elemento entre los botones de acceso rápido.
    11. Cierre la ventana de código (haga clic en X en la esquina superior derecha del editor de código).
    12. En esta ventana también se puede crear un botón para la adición de productos.. Esta operación ya se realizó en el lección 5.2 "Crear un nuevo producto". Se deben realizar las mismas operaciones. Sólo debe adaptarse el código de la tecla "+"..
    13. Pruebe la ventana que acaba de crearse en el simulador ( Ejecutar la prueba de la ventana entre los botones de acceso rápido).
      • Haga clic en la lupa.
      • Escriba "Polo" en la zona de búsqueda.
      • Validar (tecla ENTER).
      • La lista de productos que contienen "Polo" se muestra a continuación.
        Busca en la ventana
    14. Cierre el simulador.
Mejoras en las ventanas

Gestionar la funcionalidad "Pull to refresh" (Deslizar hacia abajo para actualizar)

Una nueva característica será añadida a nuestra ventana: la dirección de "Pull to actualización".. Esta característica permite al usuario "tirar" de una Tabla o control Looper para actualización ar su contenido.
Durante esta acción, aparece automáticamente una barra actualización en el área expuesta:
  • La barra indica que debe tirar hacia actualización.
  • Luego, la barra indica que debe liberar a actualización.
  • La barra indica que la operación actualización está en curso.. Se muestra una barra de progreso durante la duración de actualización.
  • El control se actualiza.
  • Para utilizar la función "Pull to Refresh":
    1. Mostrar (si es necesario) la ventana "WIN_List_of_products_Advanced" en el editor.
    2. Seleccione la control Looper y muestre la ventana de descripción del control.
    3. En la pestaña "Detalles" de la ventana de descripción del control, en la zona "Movimientos y gestos", marque "Deslizar hacia abajo para actualizar (Pull to refresh)"..
      Ajustes de Pull to Refresh

      Observación

      Se puede utilizar una ventana interna específica para gestionar la función "Pull to actualización".. En este ejemplo, usaremos la ventana por defecto.
      Vea Pull to Refresh (Android/iOS) para más detalles.
    4. Validar la ventana de descripción del control.
  • Se ha añadido la opción "Pull to actualización":
    • la barra actualización que se mostrará al usuario durante la operación.
    • el evento "Refrescamiento por pull/release" entre los eventos control Looper. Este evento se llama automáticamente durante el gesto de actualización. Ahora vamos a modificar el código WLanguage de este evento para gestionar cómo se actualiza el control.
  • Para modificar el código WLanguage del evento "Refreshing by pull/release":
    1. Seleccione la control Looper y visualice el evento asociado (presione F2 por ejemplo).
    2. En el editor de código, escriba el siguiente código de WLanguage en el evento "Refreshing by pull/release":
      LooperDisplay(LOOP_QRY_Products,taReExecuteQuery)
    3. Como ya se ha visto para la gestión de la búsqueda, LooperDisplay se utiliza para volver a visualizar el control Looper. La constante taReexecuteQuery se utiliza para volver a ejecutar la consulta base de control Looper y, por lo tanto, para tener en cuenta los nuevos registros introducidos en la base de datos..
    4. Guarde las modificaciones haciendo clic en Grabe el elemento entre los botones de acceso rápido.
    5. Cierre la ventana de código (haga clic en X en la esquina superior derecha del editor de código).
  • Pruebe la ventana que acaba de crearse en el simulador ( Ejecutar la prueba de la ventana entre los botones de acceso rápido).
    1. Haga clic en la parte superior del garfio con el ratón y mueva el ratón hacia la parte inferior.
    2. Suelte el ratón. El looper se actualiza.
      Pull to actualización en ejecución
    3. Cierre el simulador.
Este ejemplo le permite entender la implementación de la función "Pull to actualización"..
Esta característica puede ser utilizada por ejemplo en la misma aplicación en HFSQL Client/Server donde otros usuarios actualizan o añaden productos.. Estas modificaciones pueden ser visualizadas por la función "Pull to actualización".

Uso de un menú deslizante

En varias aplicaciones móviles, el menú no corresponde a una ventana "estática".. Corresponde a una ventana corredera que se muestra a través de una opción de Action Bar y/o a través de un deslizamiento de ventana.
Vamos a modificar la ventana "WIN_List_of_products_Advanced" para añadir un "menú deslizante".. Este menú usará la control Zona multilínea de la ventana "WIN_Menu" que se creó de antemano.
  • Para crear un menú deslizante, lo vamos a hacer:
    • Crear una ventana interna. Esta ventana interna contendrá las opciones del menú.
    • Modificar la ventana "WIN_List_of_products_Advanced" para mostrar el menú.

      Observación

      Una ventana interna es una ventana simple sin Action Bar y sin barra de herramientas.. Una ventana interna se utiliza para incluir fácilmente un conjunto de controles en otra ventana.
  • Para crear la ventana interna que contiene el menú:
    1. Haga clic en Creación de un elemento entre los botones de acceso rápido. Aparece la ventana de creación de elementos: haga clic en "Ventana" y luego en "Ventana interna".
    2. La ventana interna se abre automáticamente en el editor.
    3. Se muestra la ventana para guardar un elemento. Escriba el nombre de la ventana interna: "IW_MLZ_Opciones".
      Guardar el elemento
    4. Validar.
    5. Mostrar la ventana de descripción de la ventana interna ("Descripción" de el menú contextual).
    6. En la pestaña "UI", especifique las dimensiones de esta ventana interna:
      • anchura: el que más te convenga. Debe ser suficiente con ver completamente los controles del menú desplegable. En teoría, el menú deslizante debe ser más estrecho que la ventana sobre la que se muestra (260 por ejemplo)..
      • Altura: Esta altura debe corresponder a la altura de la ventana por encima de la cual se muestra el menú deslizante.. En nuestro caso, esta altura es de 248.
        Dimensiones de la ventana interior
    7. En la pestaña "Estilo", especifique un color de fondo para la ventana interna.. En efecto, para que el menú sea transparente, el parámetro "Color de fondo de la ventana interna" debe corresponder a "White"..
    8. Validar.
    9. Guarde la ventana haciendo clic en Grabar un elemento entre los botones de acceso rápido.
  • Para añadir las opciones del menú en la ventana interna:
    1. Abra la ventana "WIN_Menu" creada previamente (haga doble clic en su nombre en el panel "Project explorer", por ejemplo).
    2. Copiar los controles encontrados en la ventana "WIN_Menu" en la ventana interna "IW_MLZ_Options":
      • Seleccionar todos los elementos que se encuentran en la ventana "WIN_Menu" (Ctrl + A).
      • Copiar los elementos (Ctrl + C).
      • Mostrar la ventana "IW_MLZ_Options" (haga clic en su nombre en la barra de documentos abiertos).
      • Pegar los elementos (Ctrl + V).
    3. A través de las manijas de selección, modificar el ancho de control Zona multilínea para que se muestre completamente en la ventana interna.. A través de los anclajes se modifican también todos los controles de la control Zona multilínea.. Aparece la siguiente ventana:
      Ventana interna en el editor
  • Ahora vamos a modificar el código de WLanguage utilizado para abrir la lista de productos. De hecho:
    • trabajamos con la ventana "WIN_List_of_products_Advanced" y no con la ventana "WIN_List_of_products"..
    • la ventana "WIN_List_of_products_Advanced" contiene el menú deslizante. Por lo tanto, la opción "Lista de productos" no debe volver a abrir esta ventana..
  • Vamos a cambiar el código WLanguage utilizado para seleccionar el control Zona multilínea.
    1. Seleccione la control Zona multilínea.
    2. Visualizar los eventos WLanguage asociados (F2).
    3. Reemplace la línea:
      CASE 1 // List of products
      OpenMobileWindow(WIN_List_of_products)
      por:
      CASE 1 // List of products
      WinSlidingVisible(swLeft, False)
      En este código WLanguage, WinSlidingVisible se utiliza para hacer invisible la ventana deslizante que se muestra desde la izquierda.. Por lo tanto, se muestra la lista de productos.
    4. Guarde las modificaciones haciendo clic en Grabe el elemento entre los botones de acceso rápido.
    5. Cierre la ventana de código (haga clic en X en la esquina superior derecha del editor de código).
  • Asociar la ventana interna a la ventana "WIN_List_of_products_Advanced":
    1. Mostrar la ventana "WIN_List_of_products_Advanced" (haga clic en su nombre en la barra de documentos abiertos).
    2. Mostrar la ventana de descripción.
    3. En la pestaña "Detalles", en "Ventana deslizante izquierda", seleccione "IW_MLZ_Options"..
      TLa opción "Deslizar" se utiliza para gestionar automáticamente el modo en que se muestra la ventana deslizante durante el deslizamiento..
    4. Validar.
    5. La ventana que se asocia a una Action Bar, el editor propone habilitar la opción utilizada para abrir la ventana corredera..
      Habilitación de la opción
    6. Aceptar.
  • Vamos a probar el modo de funcionamiento del menú deslizante en el simulador:
    1. En el panel "Explorador de proyectos", defina la ventana "WIN_List_of_products_Advanced" como primera ventana del proyecto (de hecho, la ventana "WIN_Menu" es ahora inútil)..
      • Seleccione la ventana "WIN_List_of_products_Advanced" en el panel "Project explorer".
      • Mostrar el menú contextual.
      • 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".
    2. Haga clic en Ejecutar la prueba del proyecto entre los botones de acceso rápido.
    3. Al hacer clic en el menú de Action Bar, se muestra la ventana deslizante del menú.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 25
Comentarios
Haga clic en [Agregar] para publicar un comentario