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 4 - Ventanas con búsqueda
  • Presentación
  • Principio
  • Crear una consulta para buscar productos
  • Crear una consulta
  • Prueba de la consulta
  • Agregar una condición de selección
  • Prueba de la consulta con parámetros
  • Crear la interfaz
  • Crear la ventana
  • Abrir la ficha de producto
  • Prueba de la ventana
  • Implementar la búsqueda
  • Mejoras de la ventana
  • Deslizar hacia abajo para actualizar (Pull to refresh)
  • Utilizar un menú deslizante
  • En resumen

Tutorial - Desarrollar una aplicación Android e iOS

Lección 4 - Ventanas con búsqueda
Abordaremos los siguientes temas:
  • Crear una consulta con parámetros.
  • Crear una ventana mediante el asistente.
  • Implementar una búsqueda.
  • Utilizar la funcionalidad "Deslizar hacia abajo para actualizar (Pull to refresh)".
  • Agregar un menú deslizante.
Durée de la leçon 30 min
Presentación
En la lección 2, creamos una ventana con una lista de productos en un control Looper.
En esta lección, crearemos una ventana siguiendo los mismos pasos, pero agregaremos una opción para buscar un producto por nombre:
  • la ventana muestra la lista de productos en un control Looper.
  • cuando el usuario introduce el nombre de un producto en el campo de búsqueda, solo se muestran los productos que coinciden con este nombre.
En nuestro ejemplo, la búsqueda se hará en el archivo de datos "Product".
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.
Principio
La ventana que crearemos es la siguiente:
Buscar
Para crear esta ventana, vamos a:
  • Crear la consulta de selección de registros del archivo de datos Product.
  • Crear y configurar la ventana de búsqueda.
¿Qué es una consulta de selección?
Una consulta de selección es una consulta que "elegirá" solo los registros que corresponden a los criterios especificados.
Este tipo de consulta se llama Select debido al comando SELECT de SQL.
Crear una consulta para buscar productos

Crear una consulta

Para crear la consulta, utilizaremos el editor de consultas.
  1. Haga clic en Crear un elemento en los botones de acceso rápido. La ventana de creación de nuevos elementos se abre: haga clic en "Consulta­". El asistente de creación de consultas se abre.
  2. Elija la opción "Selección (SELECT)".
    Esta consulta nos permitirá seleccionar los registros. Pase a la etapa siguiente.
  3. La ventana de descripción de la consulta se abre.
  4. Defina un nombre y un título para la consulta: introduzca "QRY_Products" en el nombre de la consulta y "Find products by name" en el título:
    Nombre de la consulta
Para construir la consulta, vamos a seleccionar los elementos que se mostrarán en el resultado. Utilizaremos esta consulta para mostrar las características de un producto determinado: el nombre, la descripción y la imagen del producto.
  1. En "Análisis", seleccione el archivo de datos "Product".
  2. Despliegue el archivo de datos "Product" haciendo clic en la flecha: La lista de campos aparece.
    Selección de los campos del archivos de datos
  3. Seleccione el campo "ProductID" y haga clic en el botón . El campo aparece en la lista de elementos de la consulta.
  4. Repita los mismos pasos para los campos "Caption", "Description" y "Photo".
  5. La ventana de descripción de la consulta es la siguiente:
    Ventana de descripción de la consulta
  6. Valide la ventana de descripción de la consulta (botón "OK").
  7. Enseguida, se muestra la representación gráfica de la consulta y una ventana para guardarla.
  8. Valide la información que se muestra.

Prueba de la consulta

Como todos los elementos de un proyecto WINDEV Mobile, puede probar la consulta inmediatamente:
  1. Haga clic en Probar consulta.
  2. El resultado se muestra en una ventana:
    Resultado de la consulta
    El resultado muestra la lista de todos los productos.
    En nuestro caso, solo mostraremos los productos que coincidan con los criterios de búsqueda (el nombre del producto). Para ello, debemos utilizar una consulta con parámetros.
  3. Cierre la ventana.

Agregar 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 el criterio de búsqueda corresponda a un parámetro de la consulta.

Para definir un parámetro de la consulta, abra la ventana de descripción de la consulta. Para ello:
  • haga doble clic en el fondo del diagrama de la consulta.
  • abra el menú contextual de la consulta y seleccione "Descripción de la consulta".
Para establecer un parámetro basado en el nombre del producto, definiremos una condición en uno de los campos del archivo de datos Product:
  1. Seleccione el campo Product.Caption en la lista de elementos de la consulta.
  2. Abra el menú contextual y seleccione la opción "Condición de selección .. Nueva condición".
    Condición de selección
  3. En la ventana que aparece, vamos a especificar que la condición de selección corresponde a un parámetro:
    Descripción de la condición
    • Seleccione "contiene".
    • Seleccione "el parámetro".
    • Conserve el nombre predeterminado del parámetro: "ParamCaption".
  4. Valide la ventana de descripción de la condición. El número "1" aparece a la derecha de "Product.Caption" para indicar que se ha definido una condición de selección.
    Condición en la ventana de descripción de la consulta
  5. Valide la ventana de descripción de la consulta.
  6. El gráfico de la consulta se modifica para tener en cuenta la condición de selección definida.
    Gráfico de la consulta
  7. Guarde la consulta haciendo clic en Guardar elemento en los botones de acceso rápido.

Prueba de la consulta con parámetros

Para probar la consulta con parámetros:
  1. Haga clic en Probar consulta.
  2. Enseguida, se abre una ventana que permite escribir los parámetros de la consulta.
  3. Seleccione el parámetro ParamCaption. En la parte inferior de la ventana, introduzca "Polo".
    Introducir los parámetros de la consulta
  4. Valide la ventana. El resultado de la consulta que corresponde a los parámetros especificados se abre.
  5. Cierre la ventana.
Vamos a crear la interfaz de nuestra ventana basándonos en esta consulta.
Crear la interfaz
Crearemos la ventana de búsqueda mediante el asistente de creación de ventanas. Vamos a crear una ventana "Looper" para mostrar la lista de productos como hicimos en la lección 2. Sin embargo, en esta lección, la ventana no utilizará datos directamente de un archivo de datos, sino de la consulta. Esto nos permitirá realizar una búsqueda utilizando el parámetro que definimos en la consulta.
El asistente de creación de ventanas incluye diferentes ventanas predefinidas. Estas ventanas le permitirán obtener una interfaz moderna en sus aplicaciones.
La mayoría de ventanas se pueden generar a partir de los datos.

Crear la ventana

Para crear la ventana de búsqueda:
  1. Haga clic en Crear un elemento en los botones de acceso rápido. La ventana de creación de nuevos elementos se abre: haga clic en "Ventana", y luego en "Ventana".
  2. En el asistente, elija "Looper" y valide.
  3. El asistente de creación de ventanas se abre.
  4. Seleccione la plataforma que desea utilizar: "Teléfono Android Genérico". Pase a la etapa siguiente del asistente.
  5. El asistente le pide que elija la fuente de datos de la ventana. En nuestro caso, es una consulta:
    • Haga clic en "Consultas".
    • Seleccione la consulta que acaba de crear: "QRY_Products".
      Selección de la consulta
  6. Pase a la etapa siguiente.
  7. Seleccione el estilo del Looper: "Imagen + Título + Texto abajo". Pase a la etapa siguiente.
  8. El asistente muestra automáticamente los campos de la consulta que corresponden al Looper generado. Conserve las opciones predeterminadas y pase a la siguiente etapa.
  9. Conserve "Caption" como el campo de ordenación predeterminado. Pase a la etapa siguiente.
  10. El asistente propone varias opciones para generar la ventana de tipo Looper. En este caso, conserve las opciones predeterminadas. Pase a la etapa siguiente.
  11. Defina un título y un nombre para la ventana. En este caso:
    • Introduzca "Products" para el título.
    • Introduzca "WIN_Advanced_LIST_Products" para el nombre.
  12. Finalice el asistente. La ventana se crea automáticamente, se muestra en el editor y se guarda.

Abrir la ficha de producto

Modificaremos la ventana "WIN_Advanced_LIST_Products" para abrir la ficha de producto que creamos en la lección 2.
  1. Haga clic derecho en el control Looper y seleccione "Código".
    Atención: asegúrese de seleccionar el control Looper y no uno de los controles dentro de este.
  2. En el editor de código, introduzca el siguiente código WLanguage en el evento "Inicialización":
    QRY_Products.ParamCaption = Null
    Esta línea de código inicializa el valor del parámetro de la consulta "QRY_Products" utilizada por el control Looper. De forma predeterminada, el valor del parámetro es "Null" (lo que permite ignorar el parámetro). Por lo tanto, todos los productos se mostrarán en la ventana.
  3. En el editor de código, introduzca el siguiente código WLanguage en el evento "Selección de una fila":
    Product.ReadSeek(ProductID, QRY_Products.ProductID)
    WIN_Product_form.OpenMobileWindow()
    Analicemos este código:
    • El control Looper está basado en la consulta QRY_Products. Al seleccionar un producto en el control Looper, el registro que se selecciona es el de la consulta.
    • Al hacer clic en una fila del control, se abrirá la ventana de la ficha que creamos anteriormente. Esta ventana está basada en el archivo de datos Product.
    • El registro seleccionado por la consulta debe buscarse en el archivo de datos "Product" para poder cargar el buffer de los datos seleccionados en la memoria. Esta operación se realiza con la función <Archivo de datos>.ReadSeek.
    • La función <Ventana>.OpenMobileWindow abre la ventana "WIN_Product_form".
  4. Guarde los cambios haciendo clic en Guardar elemento en los botones de acceso rápido.
  5. 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

Probaremos la ventana en el simulador:
  1. Haga clic en Probar ventana en los botones de acceso rápido.
    Ventana en ejecución
  2. Haga clic en uno de los productos: la ventana de la ficha se abre.
  3. Finalice la prueba.
Implementar la búsqueda
Ahora vamos a implementar la búsqueda. Para ello, vamos a:
  • Habilitar la búsqueda en el Action Bar.
  • Crear un botón de búsqueda en el Action Bar.
Para habilitar la búsqueda en el Action Bar:
  1. Abra la ventana "WIN_Advanced_LIST_Products" en el editor.
  2. Abra la ventana de descripción del Action Bar (haga doble clic en el Action Bar).
  3. En la pestaña "Detalles", seleccione la opción "Habilitar la 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 del Action Bar:
  2. Haga clic en el número 2. Una nueva UI permite introducir una opción en la barra de herramientas.
  3. Haga clic en el botón "+" para agregar una opción. Una nueva opción se crea en la parte superior derecha. Cambie las características de la opción:
    • En el título de la opción, escriba "Find".
    • En la sección "Imagen predefinida", despliegue la lista y seleccione "Buscar".
    • Confirme los cambios y cierre la ventana de descripción.
  4. El código de esta opción permitirá que se muestre la barra de búsqueda. Para escribir este código:
    • Seleccione el Action Bar.
    • Haga clic en el botón de búsqueda.
    • En seguida, se despliega un menú con la opción "Find" .
    • 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ú":
      ActionBarSearchVisible(True)
  5. Guarde los cambios haciendo clic en Guardar elemento en los botones de acceso rápido.
  6. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).
  7. Seleccione el Action Bar y abra el código asociado (presione F2 o seleccione "Código" en el menú contextual).
  8. En el editor de código, introduzca el siguiente código WLanguage en el evento "Validación de la búsqueda":
    QRY_Products.ParamCaption = ACTB_ActionBar.SearchValue
    LOOP_QRY_Products.Display(taReExecuteQuery)
  9. Analicemos este código WLanguage:
    • El parámetro de la consulta se inicializa con el valor de búsqueda que se introdujo en el Action Bar.
    • Luego, la función <Looper>.Display vuelve a mostrar el control Looper. La constante taReExecuteQuery vuelve a ejecutar la consulta base del control Looper y tiene en cuenta el nuevo parámetro.
  10. Guarde los cambios haciendo clic en Guardar elemento en los botones de acceso rápido.
  11. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).
  12. También puede crear un botón en la ventana para agregar productos. Ya realizamos esta operación en la lección 2, "Crear un nuevo producto". Solo tiene que seguir los mismos pasos. Simplemente adapte el código del botón "+".
  13. Pruebe la ventana en el simulador (haga clic en Probar ventana en los botones de acceso rápido).
    • Haga clic en el ícono de búsqueda.
    • Escriba "Polo" en la barra de búsqueda.
    • Valide (pulse Entrar).
    • Solo se muestran los productos que contienen el nombre "Polo".
      Búsqueda en la ventana
  14. Cierre el simulador.
Mejoras de la ventana
Implementaremos las siguientes características para mejorar la ventana:
  • Deslizar hacia abajo para actualizar (Pull to refresh),
  • Un menú deslizante.
Veremos cómo implementar estas características, muy utilizadas en las aplicaciones móviles.

Deslizar hacia abajo para actualizar (Pull to refresh)

Vamos a agregar una nueva funcionalidad a la ventana: el gesto "Deslizar hacia abajo para actualizar".
Esta funcionalidad permite que los usuarios actualicen el contenido de un control Tabla o Looper con un gesto de deslizamiento hacia abajo. Por ejemplo, podría utilizarse en una aplicación en modo HFSQL Client/Server, donde otros usuarios pueden actualizar o agrear productos. Los cambios podrían verse utilizando el gesto "Deslizar hacia abajo para actualizar".
Cuando el usuario "desliza hacia abajo" para actualizar el contenido del control, una barra de actualización aparece automáticamente en el área que queda descubierta:
  • Primero, la barra indica que se debe deslizar hacia abajo para actualizar.
  • Luego, indica que se debe soltar para actualizar.
  • También indica que la actualización está en curso. Durante la actualización se muestra una barra de progreso.
  • El control se actualiza.
Para habilitar la funcionalidad "Deslizar hacia abajo para actualizar":
  1. Abra la ventana "WIN_Advanced_LIST_Products" en el editor.
  2. Seleccione el control Looper y abra la ventana de descripción del control.
  3. En la pestaña "Detalles" de la ventana de descripción del control, en el área "Desplazamientos y gestos", seleccione "Deslizar hacia abajo para actualizar (Pull to refresh)".
    Ajustes de la funcionalidad

    Puede utilizar una ventana interna específica para el gesto "Deslizar hacia abajo para actualizar". En este ejemplo utilizaremos la ventana predeterminada.
    Para obtener más información, consulte Deslizar hacia abajo para actualizar (Android/iOS).
  4. Valide la ventana de descripción del control.
La configuración de la funcionalidad "Deslizar hacia abajo para actualizar" agregó:
  • la barra de actualización que se mostrará al usuario durante la operación.
  • el evento "Actualización al deslizar hacia abajo" en los eventos del control Looper. Este evento se llama automáticamente cuando los usuarios deslizan hacia abajo para actualizar. Vamos a modificar el código WLanguage de este evento para gestionar la actualización del control.
Para editar el código WLanguage del evento "Actualización al deslizar hacia abajo":
  1. Seleccione el control Looper y abra los eventos asociados (F2).
  2. En el editor de código, escriba el siguiente código WLanguage en el evento "Actualización al deslizar hacia abajo":
    LOOP_QRY_Products.Display(taReExecuteQuery)
  3. Como vimos anteriormente para la búsqueda, <Looper>.Display vuelve a mostrar el control Looper. La constante taReExecuteQuery vuelve a ejecutar la consulta base del control Looper y tiene en cuenta los nuevos registros de la base de datos.
  4. Guarde los cambios haciendo clic en Guardar elemento en los botones de acceso rápido.
  5. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).
Pruebe la ventana en el simulador (haga clic en Probar ventana en los botones de acceso rápido).
  1. Haga clic y arrastre la parte superior del Looper hacia abajo.
  2. Suelte el ratón. El Looper se actualiza.
    Actualización al deslizar hacia bajo
  3. Cierre el simulador.

Utilizar un menú deslizante

En varias aplicaciones móviles, el menú no corresponde a una ventana "estática". Corresponde a una ventana deslizante que se muestra a través de una opción del Action Bar y/o mediante un gesto de deslizamiento.
Las ventanas deslizantes pueden aparecer por la derecha, la izquierda o la parte inferior de la pantalla.
Vamos a modificar la ventana "WIN_Advanced_LIST_Products" para agregar un menú deslizante. Este menú utilizará el control Zona multilínea de la ventana "WIN_Menu" que creamos en la lección 2.

Para crear un menú deslizante, vamos a:
  • Crear una ventana interna. Esta ventana interna contendrá las opciones de menú.
  • Modificar la ventana "WIN_Advanced_LIST_Products" para mostrar el menú.
    Una ventana interna es una ventana simple sin Action Bar, ni otras barras de herramientas. Una ventana interna permite insertar fácilmente un conjunto de controles en otra ventana.
Para crear la ventana interna que contiene el menú:
  1. Haga clic en Crear un elemento en los botones de acceso rápido. La ventana de creación de nuevos elementos se abre: haga clic en "Ventana", y luego en "Ventana interna".
  2. La ventana interna se abre automáticamente en el editor.
  3. La ventana para guardar el elemento se abre. Escriba el nombre de la ventana interna: "IW_MLZ_Options".
    Guardar el elemento
  4. Valide.
  5. Abra la descripción de la ventana interna (opción "Descripción" en el menú contextual).
  6. En la pestaña "UI", indique las dimensiones de la ventana interna:
    • Ancho: el valor que desee. Debe ser suficiente para ver todos 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).
    • Alto: La altura debe ser la misma que la de la ventana en la que se muestra el menú deslizante. En nuestro caso, esta altura es de 248.
      Dimensiones de la ventana interna
  7. Especifique el color de fondo de la ventana interna en la pestaña "Estilo". Para evitar que el menú sea transparente, el "Color de fondo de la ventana interna" debe ser "Blanco".
  8. Valide.
  9. Guarde la ventana haciendo clic en Guardar un elemento en los botones de acceso rápido.
Para agregar las opciones de menú a la ventana interna:
  1. Abra la ventana "WIN_Menu" creada anteriormente (haga doble clic en ella en el panel "Explorador de proyectos", por ejemplo).
  2. Copie los controles de "WIN_Menu" a "IW_MLZ_Options":
    • Seleccione todos los elementos de "WIN_Menu" (Ctrl + A).
    • Copie los elementos (Ctrl + C).
    • Abra la ventana "IW_MLZ_Options" (haga clic en ella en las pestañas de documentos abiertos).
    • Pegue los elementos (Ctrl + V).
  3. Cambie el ancho del control Zona multilínea con los controladores de tamaño para que se muestre completamente en la ventana interna. Con los anclajes, el tamaño de los controles que se encuentran en el control Zona multilínea también cambia. Obtendrá la siguiente ventana:
    Ventana interna en el editor
Vamos a cambiar el código WLanguage que abre la lista de productos. Cambiaremos este código dado que:
  • estamos trabajando en la ventana "WIN_Advanced_LIST_Products" y no en "WIN_List_of_products".
  • la ventana "WIN_Advanced_LIST_Products" contiene el menú deslizante. La opción "List of products" del menú deslizante no debe volver a abrir esta ventana.
Vamos a cambiar el código WLanguage utilizado para seleccionar el control Zona multilínea.
  1. Seleccione el control Zona multilínea.
  2. Abra los eventos WLanguage asociados (F2).
  3. Reemplace la línea:
    CASE 1 // List of products
    WIN_List_of_products.OpenMobileWindow()
    por:
    CASE 1 // List of products
    WinSlidingVisible(swLeft, False)
    En este código WLanguage, la función WinSlidingVisible oculta la ventana que se aparece desde la izquierda. Así, se muestra la lista de productos.
  4. Guarde los cambios haciendo clic en Guardar elemento en los botones de acceso rápido.
  5. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).
Para asociar la ventana interna a la ventana "WIN_Advanced_LIST_Products":
  1. Abra la ventana "WIN_Advanced_LIST_Products" (haga clic en ella en las pestañas de documentos abiertos).
  2. Abra la ventana de descripción.
  3. En la pestaña "Detalles", en la sección "Ventana deslizante izquierda", seleccione "IW_MLZ_Options".
    La opción "Deslizar" permite gestionar automáticamente el modo en el que se muestra la ventana durante el deslizamiento.
  4. Valide.
  5. Dado que la ventana está asociada a un Action Bar, el editor le pide que active la opción para abrir la ventana deslizante.
    Activación de la opción
  6. Acepte.
Vamos a probar el menú deslizante en el simulador:
  1. En el panel "Explorador de proyectos", establezca la ventana "WIN_Advanced_LIST_Products" como la primera ventana del proyecto (ya no necesitamos la ventana "WIN_Menu").
    • Seleccione "WIN_Advanced_LIST_Products" en el panel "Explorador de proyectos".
    • Abra el menú contextual.
    • Seleccione "Primera ventana del proyecto". Un ícono específico (con un 1 pequeño) aparece a la izquierda del nombre de la ventana, en el panel "Explorador de proyectos".
  2. Haga clic en Probar proyecto en los botones de acceso rápido.
  3. Al hacer clic en el menú del Action Bar, aparece la ventana deslizante del menú.
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, descubrimos algunas de las funcionalidades más utilizadas en las aplicaciones móviles:
  • La posibilidad de realizar una búsqueda en el Action Bar.
  • La implementación de la funcionalidad "Delizar hacia abajo para actualizar".
  • La implementación de ventanas deslizantes.
En la próxima lección, veremos una nueva funcionalidad específica de las aplicaciones móviles: los gestos de deslizamiento.
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: 15/12/2023

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