AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV 2024!
Ayuda / Tutorial WINDEV / Tutorial - Aplicación WINDEV: gestionar datos
  • Lección 2 - Realizar una búsqueda simple y navegar por los registros
  • Presentación
  • Modificar una ventana: utilizar un control Pestaña
  • Crear un control Pestaña
  • Modificar el control Pestaña: texto e imágenes de las pestañas
  • Implementar una búsqueda
  • Área de visualización de los datos encontrados
  • Búsqueda exacta
  • Búsqueda genérica
  • Navegar por los formularios
  • Prueba de la ventana
  • En resumen

Tutorial - Aplicación WINDEV: gestionar datos

Lección 2 - Realizar una búsqueda simple y navegar por los registros
Abordaremos los siguientes temas:
  • Gestionar la búsqueda de registros.
  • Recorrer los registros.
Durée de la leçon 30 min
Presentación
En la lección anterior vimos cómo agregar y modificar registros. Ahora, vamos a completar nuestra aplicación agregando una búsqueda de registros (para modificarlos, por ejemplo).
Vamos a modificar la ventana principal de la aplicación "WD Full Application" para agregar varias pestañas.
  • La primera pestaña mostrará la lista de productos y permitirá agregarlos y modificarlos (desarrollamos estas funcionalidades en la lección anterior).
  • En la segunda pestaña podrá buscar un cliente por nombre. El formulario del cliente se mostrará en el mismo panel de pestañas.
Vamos a implementar dos modos de búsqueda:
  • una búsqueda exacta,
  • una búsqueda genérica.
Advertencia
Esta lección se basa en el ejemplo WD Full Application utilizado en la lección 1. Para seguir esta lección, debe haber completado los pasos de la lección 1.
Modificar una ventana: utilizar un control Pestaña
En este ejemplo, la búsqueda no se realizará en una nueva ventana: utilizaremos la ventana WIN_Menu. Por ahora, esta ventana muestra la lista de productos.
Crearemos varias pestañas para mostrar diferentes datos en esta ventana. Las pestañas permiten agrupar los datos por tema. El usuario puede acceder directamente a un tema haciendo clic en la pestaña deseada.
Para crear las diferentes pestañas utilizaremos el control Pestaña.

Crear un control Pestaña

Para mostrar los datos de la ventana "WIN_Menu" en un control Pestaña:
  1. Abra la ventana "WIN_Menu":
    • desde la barra de documentos abiertos.
    • haciendo doble clic en el nombre en el panel "Explorador de proyectos".
  2. Seleccione los controles y muévalos fuera de la ventana. Esto puede parecer "extraño", pero será más fácil trabajar en el control Pestaña y asociar los controles a cada pestaña.
    Mover los controles de la ventana
  3. Cree un control Pestaña en la ventana:
    • En la pestaña "Creación", en el grupo "Contenedores", despliegue "Pestaña y asociados" y seleccione "Pestaña".
    • Haga clic en la ventana para crear el control Pestaña.
    • Ubique el control Pestaña en la parte superior izquierda de la ventana.
    • De forma predeterminada, el control se crea con dos pestañas. El control Pestaña ocupa todo el espacio disponible en la ventana.
  4. Seleccione los controles que se encuentran al exterior de la ventana y desplácelos a la pestaña 1 del control Pestaña.
  5. Al deslizar los controles sobre el control Pestaña se muestra un borde verde. Este borde indica que los controles que se ubiquen en el panel de pestañas actual se asociarán a él automáticamente.
  6. Si es necesario, amplíe la ventana y el control Pestaña para que la tabla y los botones se muestren correctamente.
Manipular controles en un control Pestaña
  • Para comprobar si todos los controles están asociados a la pestaña actual, haga clic en otra pestaña: los controles asociados a la pestaña desaparecen.
  • Para cambiar el tamaño del control Pestaña sin tener en cuenta los anclajes definidos en los controles del panel de pestañas, mantenga pulsada la tecla Mayús mientras cambia el tamaño del control.
Interfaz de la ventana con el control Pestaña

Modificar el control Pestaña: texto e imágenes de las pestañas

Cambie el nombre del control Pestaña:
  1. Haga doble clic en el control Pestaña que acaba de crear: la ventana de descripción del control se abre.
  2. Cambie el nombre del control. Introduzca el nombre "TAB_View".
  3. Valide la ventana de descripción del control.
De forma predeterminada, se crean dos pestañas. Vamos a cambiar su texto directamente:
  1. Seleccione el control Pestaña.
  2. Haga clic en "Pestaña 1". La pestaña cambia al modo de edición: introduzca "List of products". Presione la tecla Entrar para validar.
    Texto de la pestaña en modo de edición
  3. Haga clic en "Pestaña 2". El panel de pestañas se muestra. Haga clic de nuevo en "Pestaña 2". Introduzca "Find customers". Presione la tecla Entrar para validar.
Vamos a asociar una imagen a cada pestaña del control Pestaña. Para ello:
  1. Abra la ventana de descripción del control Pestaña (haga doble clic en el control, por ejemplo). La pestaña "General" de la ventana de descripción del control Pestaña permite configurar las características de cada pestaña. La lista de pestañas se muestra a la izquierda. En la parte derecha de la pantalla se pueden modificar las características de cada pestaña seleccionada.
  2. En la ventana de descripción, seleccione "List of products".
    Características de una pestaña del control Pestaña
  3. Enseguida, se muestran las características de la pestaña.
    Características de una pestaña del control Pestaña
  4. Vamos a asociar una imagen a la pestaña utilizando el catálogo de imágenes de WINDEV.
    Si se puede mostrar una imagen en un control o ventana, WINDEV propone utilizar el catálogo de imágenes. Este catálogo de imágenes puede abrirse mediante la opción "Catálogo" (disponible al hacer clic en el botón Mostrar opciones de imagen). El catálogo contiene cientos de imágenes e imágenes prediseñadas, entre otros.
  5. Haga clic en Mostrar opciones de imagen a la derecha de "Imagen". Seleccione "Catálogo" en el menú contextual que aparece. La ventana del catálogo de imágenes se abre.
  6. Escriba "Product" en la barra de búsqueda. Haga clic en la lupa para iniciar la búsqueda.
    Búsqueda de una imagen en el catálogo de imágenes
  7. Seleccione la imagen Imagen del producto y valide (botón "OK").
  8. Enseguida, aparece la ventana de ajustes de la imagen. Esta ventana permite modificar las características de la imagen: tamaño, luminosidad, etc. Conserve las opciones predeterminadas y valide.
  9. La imagen se genera en el directorio del proyecto y el archivo correspondiente se asocia automáticamente al elemento actual.
  10. En la ventana de descripción del control Pestaña, haga clic en "Find customers" en la lista de pestañas estáticas.
  11. Haga clic en Mostrar opciones de imagen a la derecha de "Imagen". Seleccione "Catálogo" en el menú contextual que aparece. La ventana del catálogo de imágenes se abre.
  12. Escriba "Person" en la barra de búsqueda. Haga clic en la lupa para iniciar la búsqueda.
  13. Entre las imágenes que aparecen, seleccione el ícono de dos personas (Imagen de personas) y valide.
  14. Conserve las opciones predeterminadas en los ajustes de la imagen y valide.
  15. Valide la ventana de descripción del control Pestaña.
Acabamos de crear un nuevo control: ahora debemos definir su anclaje en la ventana. Cuando se amplíe la ventana, el control Pestaña también debe ampliarse para ocupar todo el espacio disponible. Por lo tanto, el control debe estirarse hacia la derecha y hacia abajo.
  1. Seleccione el control Pestaña.
  2. Haga clic derecho para abrir el menú contextual y seleccione "Anclaje".
  3. En la ventana de anclaje, seleccione Ancho y alto y valide.
  4. Guarde la ventana haciendo clic en Guardar elemento en los botones de acceso rápido.
Implementar una búsqueda
Hemos terminado de crear la ventana "WIN_Menu". Ahora podemos centrarnos en el contenido del panel de pestañas que permite buscar clientes.
Este panel de pestañas se dividirá en varias áreas:
  • Un área para mostrar los datos encontrados.
  • Un área para introducir los elementos que se van a buscar.
  • Un área que contiene los botones de navegación.

Área de visualización de los datos encontrados

Primero, vamos a crear varios controles para mostrar los datos del cliente.
Crearemos los controles Campo de entrada de la misma manera en que creamos los controles en la ventana de la ficha del producto: arrastraremos y soltaremos los campos desde el panel "Análisis".
Para crear los controles que mostrarán los datos del cliente:
  1. Seleccione la ventana WIN_Menu en el editor y hacer clic en la pestaña "Find customers". El panel de pestañas aparece vacío.
  2. Abra panel "Análisis" en el editor, si es necesario: en la pestaña "Inicio", en el grupo "Entorno", despliegue "Paneles", seleccione "Paneles" y, a continuación, haga clic en "Análisis". Los archivos de datos descritos en el análisis "WD Full Application" se muestran en el panel.
  3. Haga clic en el ícono Flecha a la izquierda del archivo de datos "Customer": los campos del archivo de datos aparecen.
  4. Seleccione los campos del archivo de datos Customer que aparecen en el panel "Análisis". Puede seleccionar varios elementos manteniendo pulsada la tecla Ctrl.
  5. Arrastre los campos desde el panel y suéltelos en el panel de pestañas "Find customers".
    Arrastrar y soltar los campos del archivo de datos Customer
  6. Los controles se crean automáticamente en el panel de pestañas. Estos controles están enlazados al campo correspondiente en el archivo de datos.
  7. Guarde la ventana (Ctrl + S).
Vamos a alinear los controles y a definir el mismo tamaño:
  1. Seleccione el control "City" y luego, los demás controles Campo de entrada de la ventana (mantenga pulsada la tecla Ctrl y haga clic en los controles). El primer control seleccionado se utilizará como referencia para establecer el tamaño de los otros controles.
  2. En la pestaña "Alineación", en el grupo "Interno y externo", haga clic en "Justificar (Int. y Ext.)".
    Pestaña 'Alineación' de la cinta de opciones
Pruebe la ventana (haga clic en Probar ventana en los botones de acceso rápido). Haga clic en la pestaña "Find customers". La ventana se muestra con los controles vacíos. Cierre la ventana de prueba para volver al editor.

Búsqueda exacta

En primer lugar, vamos a realizar una búsqueda de coincidencia exacta.
Información clave:
Las búsquedas exactas buscan registros que coincidan exactamente con las palabras clave de la búsqueda.
Para realizar una búsqueda exacta, vamos a seleccionar el nombre del cliente en un control Combo Box. El botón "Exact-match search" permitirá mostrar el formulario de la persona correspondiente. En este caso, solo una persona coincide con el nombre seleccionado.
Posicione el control Combo Box encima de los controles que acaba de crear. Si los controles están demasiado cerca de la parte superior del panel de pestañas, debe desplazarlos hacia abajo. Para ello:
  1. Seleccione todos los controles en el panel de pestañas:
    • Presione Ctrl + A: todos los controles de la ventana y del panel de pestañas actual se seleccionan.
    • Mantenga pulsada la tecla Ctrl y haga clic en el control Pestaña: solo se seleccionan los controles del panel de pestañas.
    • Suelte la tecla Ctrl.
  2. Mueva uno de los controles seleccionados hacia abajo.
    Selección de los controles a desplazar hacia abajo
  3. Todos los controles se desplazan hacia abajo.
Para crear el control Combo Box que nos permitirá seleccionar a la persona deseada:
  1. Cree un control Combo Box: en la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Combo Box".
  2. Haga clic en la pestaña "Find customers" y ubique el control entre la pestaña y el control "Customer ID".
  3. El asistente de creación de controles Combo Box aparece. Vamos a crear un control Combo Box basado en el archivo de datos "Customer".
  4. Seleccione la opción "Mostrar datos de un archivo o una consulta existente".
    Asistente de creación del control Combo Box
    Pase a la etapa siguiente del asistente.
  5. Seleccione el archivo de datos "Customer". Pase a la etapa siguiente.
  6. Vamos a mostrar el nombre y los apellidos del cliente.
    • Deseleccione el campo "CustomerID".
    • Seleccione el campo "FullName".
      Asistente de creación del control Combo Box
  7. Pase a la etapa siguiente.
  8. El campo "FullName" también se utilizará para ordenar la lista de clientes que se muestran en el control Combo Box. Seleccione el campo "FullName".
    Asistente de creación del control Combo Box
  9. Pase a la etapa siguiente.
  10. El valor devuelto por el control Combo Box será el identificador "CustomerID". Este es el valor que se buscará en el archivo de datos Customer. Seleccione el campo "CustomerID.
    Asistente de creación del control Combo Box
    Pase a la etapa siguiente.
  11. El control Combo Box no se enlazará a ningún campo. Conserve "No" y vaya a la etapa siguiente.
  12. Valide la siguiente etapa ("Siguiente").
  13. Defina un nombre para el control (por ejemplo, "COMBO_Customer") y un título (por ejemplo, "Sought customer").
  14. Finalice el asistente. Posicione el control Combo Box en la ventana (en la esquina superior izquierda, por ejemplo).
  15. Seleccione el control Combo Box y modifique el tamaño (utilizando los controladores de tamaño) para que se muestre todo el nombre del cliente.
    Creación del control de búsqueda
Para crear el control Botón que permitirá buscar clientes:
  1. Cree un control Botón: en la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón.
  2. Ubique el control Botón al lado del Combo Box que acaba de crear.
  3. Defina el nombre "BTN_ExactMatchSearch" y el título "Exact-match search" para este control.
  4. Si es necesario, ajuste el tamaño del control para que el título se muestre correctamente.
  5. Introduzca el siguiente código WLanguage en el evento "Clic" del control:
    // Finds the customer by identifier 
    Customer.ReadSeekFirst(CustomerID, COMBO_Customer) 
    IF Customer.Found() THEN
    // Displays the customer data
    Customer.ToWindow()
    END
  6. Analicemos este código WLanguage:
    • La función <Archivo de datos>.ReadSeekFirst permite realizar una búsqueda exacta. En este ejemplo, la búsqueda se realiza en el archivo de datos Customer y en el campo CustomerID. El valor buscado es el último parámetro de la función. En este caso, el valor buscado corresponde al valor seleccionado en el Combo Box. Este valor se obtiene utilizando directamente el nombre del control Combo Box (COMBO_Customer).
    • La función <Archivo de datos>.Found permite probar el resultado de la búsqueda. Si la función <Archivo de datos>.Found devuelve True, se encontró un valor, si la función <Archivo de datos>.Found devuelve False, no se encontró ningún valor. Siempre que se encuentra un registro se lee y se convierte en el registro actual del archivo de datos.
    • En este código, si se encontró el registro, se muestra con la función <Archivo de datos>.ToWindow.
      <Archivo de datos>.ToWindow y <Ventana>.ToFile realizan la operación inversa: los datos de los campos del archivo de datos se muestran en los controles correspondientes.
  7. Cierre el editor de código.
  8. Guarde la ventana (Ctrl + S).
Probemos nuestra búsqueda exacta:
  1. Pruebe la ventana (haga clic en Probar ventana en los botones de acceso rápido).
  2. Haga clic en la pestaña "Find customers", si es necesario.
  3. Seleccione un valor en el control Combo Box y haga clic en "Exact-match search".
    Prueba de la búsqueda exacta
  4. El resultado aparece inmediatamente.
  5. Cierre la ventana de prueba para volver al editor.

Búsqueda genérica

Ahora vamos a realizar una búsqueda genérica.
Información clave:
Una búsqueda genérica busca todos los elementos que comienzan por el valor introducido.
Para realizar esta búsqueda, crearemos un control Campo de entrada para escribir el nombre que queremos buscar, y un control Botón para iniciar la búsqueda.
Para crear el control de búsqueda:
  1. Vaya a la pestaña "Find customers" de la ventana "WIN_Menu" en el editor.
  2. Cree un control Campo de entrada: en la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Campo de entrada.
  3. En la ventana, haga clic debajo del control Combo Box ("Sought customer"). El control Campo de entrada se crea.
  4. Defina el nombre "EDT_Sought_Name" y el título "Sought name" para este control.
Para crear el control Botón que permite iniciar la búsqueda genérica:
  1. Cree un control Botón: en la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón.
  2. Ubique el control al lado del Campo de entrada que acaba de crear.
    Interfaz de la búsqueda
  3. Defina el nombre "BTN_GenericSearch" y el título "Generic search" para este control.
  4. Si es necesario, ajuste el tamaño del control para que el título se muestre correctamente.
  5. Introduzca el siguiente código WLanguage en el evento "Clic" del botón:
    // Finds a customer by name
    Customer.ReadSeek(FullName, EDT_Sought_Name)
    IF Customer.Found() THEN
    // Displays the customer data
    Customer.ToWindow()
    ELSE
    Error("No customer matches")
    END

    La función <Archivo de datos>.ReadSeek permite realizar una búsqueda genérica. En este ejemplo, la búsqueda se realiza en el archivo de datos "Customer" y en el campo "FullName". El valor buscado corresponde al valor introducido en el control "EDT_Sought_Name". Este valor se obtiene utilizando directamente el nombre del control.
  6. Cierre la ventana de código.
  7. Guarde la ventana (Ctrl + S).
Ahora, probemos nuestra búsqueda genérica:
  1. Pruebe la ventana (haga clic en Probar ventana en los botones de acceso rápido).
  2. Haga clic en la pestaña "Find customers", si es necesario.
  3. Introduzca un valor en el control Campo de entrada (por ejemplo "BEEF") y haga clic en "Generic search".
    Prueba de la búsqueda genérica
  4. El resultado aparece inmediatamente. Sin embargo, si varios registros corresponden a la búsqueda, solo se muestra el primero.
  5. Detenga la prueba y vuelva al editor.

Navegar por los formularios

Vamos a agregar cuatro controles Botón para navegar por los registros del archivo de datos "Customer". Estos controles son de tipo "botones de navegación".
Botones de navegación
Estos controles le permitirán:
  • navegar por los registros del archivo de datos,
  • navegar por todos los registros que corresponden a una búsqueda genérica.
Cada botón tiene un ícono que permite mostrar:
  • el primer registro,
  • el registro anterior,
  • el siguiente registro,
  • el último registro.
Para crear el control Botón que permite mostrar el primer registro del archivo de datos:
  1. Vaya a la pestaña "Find customers" del control Pestaña.
  2. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón.
  3. La forma del control aparece bajo el cursor. A continuación, haga clic en el panel de pestañas, debajo del botón "Generic search". El control Botón se crea automáticamente.
Las plantillas permiten dar un mismo aspecto a las ventanas de un proyecto. Además, definen el estilo de todos los controles de las ventanas. Cada botón de tipo navegación tiene un estilo específico definido. Para aplicar este estilo:
  1. Seleccione el control Botón.
  2. Haga clic derecho para abrir el menú contextual y elija "Seleccionar un estilo".
  3. Todos los estilos definidos para los botones se muestran en la ventana que aparece. En "Otros estilos", seleccione "BTN_First".
    Estilo del control
  4. Valide.
Cambie el nombre del control Botón:
  1. Abra la ventana de descripción del control:
    • Seleccione el control Botón.
    • Haga clic derecho para abrir el menú contextual y seleccione la opción "Descripción".
  2. Defina el nombre "BTN_First" para este control.
  3. Valide la ventana de descripción.
Realice las siguientes acciones:
Siguiendo los mismos pasos, cree 3 nuevos controles Botón.
  • Defina los siguientes nombres para estos controles: "BTN_Previous", "BTN_Next" y "BTN_Last".
  • Asocie los controles con los siguientes estilos: "BTN_Previous", "BTN_Next" y "BTN_Last".
Ahora escribiremos el código WLanguage asociado a los diferentes botones.
Empecemos con el botón que permite ir al primer registro.
  1. Haga clic derecho en el control. Seleccione "Código" en el menú que aparece.
  2. En la ventana de código que aparece, escriba el siguiente código WLanguage en el evento "Clic":
    // Reads the first customer
    Customer.ReadFirst()
    IF Customer.Out() THEN
    // No customer
    Info("No form to view.")
    ELSE
    // Displays the customer data
    Customer.ToWindow()
    END
    La función <Archivo de datos>.ReadFirst permite leer el primer registro del archivo de datos según la clave utilizada en la última búsqueda (FullName en este caso).
Para el botón que muestra el registro anterior, puede escribir el siguiente código WLanguage en el evento "Clic" del botón "BTN_Previous":
// No iteration has been initialized
IF Client.RecNum() <= 0 THEN
// Reads the last customer
Customer.ReadLast()
ELSE
// Reads the previous customer
Customer.ReadPrevious()
END

// If the beginning of file is exceeded
IF Customer.Out() THEN
Info("Start of file reached.")
ELSE
// Displays the customer data
Customer.ToWindow()
END
Del mismo modo, escriba el siguiente código WLanguage en el evento "Clic" del botón "BTN_Next":
// No iteration has been initialized
IF Client.RecNum() <= 0 THEN
// Reads the first customer
Customer.ReadFirst()
ELSE
// Reads the next customer
Customer.ReadNext()
END

// If the end of file is exceeded
IF Customer.Out() THEN
Info("End of file reached.")
ELSE
// Displays the customer data
Customer.ToWindow()
END
Por último, escriba el siguiente código WLanguage en el evento "Clic" del botón "BTN_Last":
// Reads the last customer
Customer.ReadLast()
IF Customer.Out() THEN
// No customer
Info("No form to view.")
ELSE
// Displays the customer data
Customer.ToWindow()
END
En estos códigos:
En todos los casos:
El código de los controles "Next" y "Previous" contiene líneas de código adicionales que permiten:
  • Comprobar si ya se ha realizado una búsqueda en el archivo de datos Customer (resultado de la función <Archivo de datos>RecNum para saber si ya se ha iniciado la lectura del archivo de datos).
  • Leer el primer o último registro, si es necesario. Para leer el registro anterior o siguiente, se debe haber iniciado una lectura en el archivo de datos.
Guarde la ventana haciendo clic en Guardar un elemento en los botones de acceso rápido.

Prueba de la ventana

Probemos la ventana una última vez:
  1. Pruebe la ventana (haga clic en Probar ventana en los botones de acceso rápido).
  2. Haga clic en la pestaña "Find customers", si es necesario.
  3. Busque un cliente (introduzca "BEEF" e inicie una búsqueda genérica, por ejemplo).
  4. Navegue por el archivo de datos haciendo clic en cada uno de los botones de navegación.
  5. Detenga la prueba para volver al editor.
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 - WINDEV application: Manage data", haga doble clic en "Full application - Answers".
En esta lección, vimos cómo realizar búsquedas exactas y genéricas y cómo recorrer un archivo de datos. En la próxima lección, realizaremos una búsqueda con varios criterios en los registros de la base de datos.
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: 20/12/2023

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