AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Tutorial WEBDEV / Tutorial - Búsqueda e impresión con varios criterios
  • Esta lección abarcará los siguientes temas
  • Presentación
  • Crear una consulta para buscar pedidos
  • Crear una consulta
  • Prueba de la consulta
  • Uso de parámetros en la consulta
  • Prueba de la consulta con parámetros
  • Crear la página de búsqueda con varios criterios
  • Crear una página
  • Crear los controles para definir los criterios y mostrar el resultado
  • Optimizar la visualización de la página
Lección 5.1. Búsqueda con varios criterios
Esta lección abarcará los siguientes temas
  • Crear una consulta con parámetros.
  • Crear la interfaz para seleccionar los criterios de búsqueda.
  • Pasar parámetros a una consulta.
  • Mostrar el resultado de una consulta en un control Tabla.
  • Optimizar la actualización de la página mediante la activación de Ajax.
Duración de la lección

Tiempo estimado: 1h30 min
Lección anteriorTabla de contenidoSiguiente lección
Presentación
En las partes anteriores, creamos un proyecto WEBDEV para desarrollar un sitio con una sección de Internet y otra de Intranet.
En las diferentes lecciones de la parte 5, seguiremos trabajando con el proyecto "Full_WEBDEV_Site" que utilizamos en las partes 3 y 4.

  • Para abrir el proyecto:
    1. Inicie WEBDEV si es necesario.
    2. Vaya a la página de inicio de WEBDEV (Ctrl +<).
    3. En la página de inicio, haga clic en "Tutorial", luego en "Parts 3 to 6", haga doble clic en "Full WEBDEV Site - Exercise".
    4. Un cuadro de diálogo le pide que abra el proyecto en el que trabajó en la parte anterior. Puede abrir la copia local o el proyecto original. Seleccione "Abrir la copia local".

Corregido

Hay un proyecto completado disponible. Este proyecto contiene los diferentes elementos creados en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Parts 3 to 6", haga doble clic en "Full WEBDEV Site - Answers".


En esta lección, permitiremos a los usuarios realizar una búsqueda con varios criterios.
En nuestro ejemplo, esta búsqueda se realizará en el archivo de datos "Order". El usuario podrá seleccionar:
  • el nombre del cliente,
  • el estado del pedido,
  • el método de pago,
  • el precio del pedido.
La UI de la página "PAGE_Multicriteria_search" será la siguiente:
UI de la página
Esta IU incluye:
  • controles para seleccionar los criterios de búsqueda.
  • botones para iniciar la búsqueda o imprimir el resultado.
  • un control Tabla para mostrar el resultado de la búsqueda. Este control Tabla se basa en una consulta. La consulta permitirá seleccionar los registros que se mostrarán.
La primera etapa consiste en crear la consulta de selección de registros.

Nota

¿Qué es una consulta de selección?
Una consulta de selección es una consulta que selecciona los registros que corresponden a criterios específicos.
Este tipo de consulta se llama Select debido al comando SELECT de SQL.
Crear una consulta para buscar pedidos

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.
      Veamos la UI del editor de consultas:
      Interfaz del editor de consultas
      Esta UI incluye:
      1. la estructura jerárquica del análisis (la descripción de la base de datos del proyecto).
      2. los campos que se incluirán en la consulta.
      3. las opciones de selección de registros.
      4. la consulta en código SQL o en lenguaje natural.
  • Para construir la consulta, vamos a seleccionar los elementos que se mostrarán en el resultado.
    1. Haga doble clic en los campos del análisis, a la izquierda de la ventana de descripción. Los campos que se tienen en cuenta se muestran en el centro de la pantalla.
      Vamos a mostrar:
      • la información sobre el pedido. En el archivo de datos "Order", haga doble clic en los siguientes campos: OrderID, Date, Status y TotalIOT.
      • la información sobre el cliente que hizo el pedido. En el archivo de datos "Customer", haga doble clic en el campo "FullName".
      • el método de pago. En el archivo de datos "PaymentMode", haga doble clic en los campos "Caption" y "PaymentModeID".
      La ventana de descripción de la consulta es la siguiente:
      Descripción de la consulta en esta lección
    2. Los datos se ordenarán por fecha.
      • Seleccione el campo "Order.Date" en el centro de la pantalla, luego haga clic en "Ordenar" (en la lista de acciones) y seleccione "Ordenar según el campo seleccionado".
        Agregar un orden
      • En la ventana que aparece, seleccione un orden ascendente y valide.
    3. A la derecha de "Order.Date" aparece una flecha azul con el número 01. Esta flecha indica que se ha definido un orden ascendente en el campo. El número "01" indica que este orden se aplicará primero.
      Campo de la consulta ordenada
    4. Indique un nombre para la consulta: en "Nombre de la consulta", cambie "QRY_SinNombre1" por "QRY_FindOrders":
      Nombre de la consulta
    5. Valide la ventana de descripción de la consulta (botón "OK").
    6. Valide la ventana para guardar la consulta.
    7. La representación gráfica de la consulta aparece en el editor:
      Representación gráfica de la consulta

Prueba de la consulta

Como con todos los elementos de un proyecto WEBDEV, puede probar la consulta que acabamos de crear:
  1. Haga clic en Probar un elemento.
  2. El resultado se muestra en una ventana:
    Resultado de la prueba de la consulta

    Nota

    Al hacer clic derecho en el resultado de la consulta, aparece un menú contextual. Puede exportar el resultado a:
    • un archivo XLSX (Excel).
    • un archivo XML (eXtensible Markup Language).
    • un archivo de Word u Open Office.
  3. El resultado muestra TODOS los pedidos. En nuestro caso, solo mostraremos los pedidos que coincidan con los criterios de búsqueda. Para ello, debemos utilizar una consulta con parámetros.
  4. Cierre la ventana.

Uso de parámetros en la consulta

En nuestro ejemplo, el usuario podrá seleccionar un valor para los siguientes criterios de búsqueda:
  • Nombre del cliente.
  • Estado del pedido.
  • Método de pago del pedido.
  • Precio del pedido.
Tenemos que modificar la consulta para que estos criterios de búsqueda coincidan con los parámetros de la consulta.
  • Para definir los parámetros de la consulta, abra 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).
  • Para definir el parámetro "Nombre del cliente":
    1. Seleccione el campo Customer.FullName en el centro de la pantalla.
    2. Despliegue "Condición de selección" (en la sección "Acciones" de la ventana) y seleccione "Nueva condición".
    3. En la ventana que aparece, vamos a especificar que la condición de selección corresponde a un parámetro:
      Nueva condición de selección
      • Seleccione "Contiene".
      • Seleccione "el parámetro".
      • Especifique el nombre del parámetro: "ParamCustomerName".

        Nota

        Se recomienda utilizar el prefijo "param" para los parámetros de la consulta. Esto le permite encontrarlos fácilmente en el editor de código.
        Cuando busque un parámetro de la consulta, simplemente introduzca 'param' y la función de completado de código del editor de código mostrará todos los parámetros.
    4. Valide la ventana de descripción de la condición. El número "1" aparece a la derecha del campo "Customer.FullName", indicando que se definió una condición de selección.
Lista de elementos de la consulta

Nota

La descripción de la consulta en lenguaje natural (en la parte inferior del editor de consultas) se actualiza automáticamente en función de la nueva condición.
Consulta en lenguaje natural
  • Ahora veamos el segundo parámetro: el estado del pedido:
    1. Seleccione el campo Order.Status en el centro de la pantalla.
    2. Haga clic en el botón "Condición de selección" y seleccione "Nueva condición".
    3. En la ventana que aparece, vamos a especificar que la condición de selección es igual a un parámetro:
      Condición de selección
      • Seleccione "Es igual a".
      • Seleccione "el parámetro".
      • Especifique el nombre del parámetro: "ParamStatus".
    4. Valide la ventana de descripción de la condición. El número "1" aparece a la derecha del campo "Order.Status" para indicar que se ha definido una condición de selección.
  • Vamos a definir una condición en el método de pago. El campo "PaymentMode.PaymentModeID" no debe aparecer en el resultado de la consulta, pero se le debe definir una condición. Para ello, lo vamos a ocultar.
    1. Para no mostrar el campo "PaymentMode.PaymentModeID" en el resultado:
      • Haga clic en el ojo (Mostrar campo) del campo "PaymentMode.PaymentModeID" en la lista de elementos de la consulta (en el centro de la pantalla).
      • En el menú que aparece, seleccione "No mostrar".
    2. Para definir una condición de selección en el campo "PaymentMode.PaymentModeID":
      • Seleccione el campo "PaymentMode.PaymentModeID" (en el centro de la pantalla).
      • Haga clic en el botón "Condición de selección" y seleccione "Nueva condición".
      • En la ventana que aparece, especifique que la condición de selección corresponde a un parámetro:
        • Seleccione "Es igual a".
        • Seleccione "el parámetro".
        • Especifique el nombre del parámetro: "ParamPaymentModeID".
    3. Valide la condición de selección.
      Lista de elementos de la consulta
  • La última condición de selección se definirá en el monto del pedido. Definiremos dos condiciones de selección para especificar el precio mínimo y máximo.
    1. Seleccione el campo "Order.TotalIOT" en la lista de elementos de la consulta.
    2. Haga clic derecho para abrir el menú contextual del campo y seleccione "Condición de selección .. Nueva condición".
    3. En la ventana que aparece:
      • Seleccione la condición "Es mayor que o igual a".
      • Haga clic en "el parámetro".
      • Especifique el nombre del parámetro: "ParamMinPrice".
    4. Valide la condición de selección.
    5. Defina otra condición en el mismo campo "Order.TotalIOT": haga clic derecho para abrir el menú contextual del campo y seleccione "Condición de selección .. Nueva condición".
    6. En la ventana que aparece:
      • Seleccione la condición "Es menor que o igual a".
      • Haga clic en "el parámetro".
      • Especifique el nombre del parámetro: "ParamMaxPrice".
    7. Valide la condición de selección.

      Nota

      Puede reemplazar estas dos condiciones de selección (es mayor que o igual a y es menor que o igual a) por la condición "Está comprendido entre".
      Sin embargo, cuando se utiliza la condición de selección "Está comprendido entre", significa que hay que introducir los dos valores (lo que no ocurre si se definen dos condiciones diferentes).
    8. Valide la ventana de descripción de la consulta. El gráfico de la consulta se actualiza y tiene en cuenta las nuevas condiciones de selección.
      Gráfico de la consulta
    9. Guarde la consulta haciendo clic en Guardar un 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 un elemento.
    2. Enseguida, se abre una ventana que permite escribir los parámetros de la consulta.

      Nota

      Los parámetros pueden ser ignorados desmarcando la casilla a la izquierda del nombre. En este caso, se ignora la condición de selección asociada al parámetro. Por ejemplo, si se ignora el parámetro ParamCustomerName, la consulta tendrá en cuenta los pedidos de todos los clientes.
      Observación: Si todos los parámetros están desmarcados, la consulta devuelve el resultado completo.
      Parámetros de prueba de la consulta
    3. Defina los siguientes datos:
      • Desmarque los parámetros ParamCustomerName y ParamStatus.
      • Seleccione el parámetro ParamPaymentModeID. En la parte inferior de la pantalla, introduzca "1".
      • Seleccione el parámetro ParamMinPrice. En la parte inferior de la pantalla, introduzca "150".
      • Seleccione el parámetro ParamMaxPrice. En la parte inferior de la pantalla, introduzca "300".
    4. Valide la ventana. El resultado de la consulta que corresponde a los parámetros especificados se abre.
    5. Cierre la ventana.
Ahora, crearemos una página para:
  • especificar los parámetros de la consulta,
  • ejecutar la consulta,
  • ver el resultado de la consulta.
Crear la página de búsqueda con varios criterios

Crear una página

  • Para crear la página que mostrará el resultado de la búsqueda con varios criterios:
    1. Cree una nueva página en blanco.
      • 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 "Página", y luego en "Página".
      • El asistente de creación de páginas se abre automáticamente.
      • En la sección "Basado en un modelo del proyecto", seleccione "PAGETPL_Simple" y valide el asistente.
    2. La ventana para guardar la página se abre.
    3. Introduzca el título: "Multicriteria search". El nombre "PAGE_Multicriteria_search" se rellena automáticamente.
    4. Valide.

Crear los controles para definir los criterios y mostrar el resultado

Crearemos un control Tabla basado en la consulta, y luego crearemos los diferentes controles que permitan al usuario seleccionar los criterios de búsqueda.
Crear un control Tabla
  • Para crear el control Tabla que mostrará el resultado de la búsqueda:
    1. Cree un control Tabla: en la pestaña "Creación", en el grupo "Datos", despliegue "Tabla" y seleccione "Tabla simple ".
    2. Haga clic en la página "PAGE_Multicriteria_search": el asistente de creación del control Tabla se abre.
    3. El control Tabla se basará en la consulta "QRY_FindOrders" (creada anteriormente). Seleccione la opción "Mostrar datos de un archivo o una consulta existente". Pase a la etapa siguiente del asistente.
    4. Seleccione la consulta que se utilizará como fuente de datos para el control Tabla:
      • Despliegue el grupo "Consultas".
      • Seleccione la consulta "QRY_FindOrders".
        Asistente de creación del control Tabla - Selección de la fuente de datos
      • Pase a la etapa siguiente del asistente.
      • Seleccione todos los campos que aparecen: todos se mostrarán en el control Tabla.
        Asistente de creación del control Tabla - Selección de los campos a mostrar
        Pase a la etapa siguiente del asistente.
    5. Conserve las opciones predeterminadas en las diferentes etapas del asistente y valide.
    6. El control Tabla se crea automáticamente en la página.
    7. Si es necesario, desplace el control Tabla para que se muestre completamente.
      Control Tabla en el editor de páginas
  • Para una mejor legibilidad, vamos a modificar la descripción del control Tabla.
    1. Abra la descripción del control Tabla (haga doble clic en el control).

      Nota

      La ventana de descripción del control Tabla está compuesta por dos partes:
      • la parte superior, que contiene el nombre del control, así como el nombre y tipo de las columnas.
      • la parte inferior, que contiene las diferentes pestañas de descripción.
        Ventana de descripción del control Tabla
      Si hace clic en el nombre del control Tabla, la parte inferior muestra las características de la tabla.
      Si hace clic en una columna, la parte inferior muestra las características de las columnas.
    2. Haga clic en el nombre del control Tabla. El título del control Tabla aparece en la parte inferior. Vamos a cambiar este texto. Reemplace el texto por "Search results".
      Cambiar el título del control Tabla
    3. Haga clic en la columna "COL_OrderID". El título de la columna se muestra en la parte inferior de la ventana. Reemplace "Order ID" por "ID".
      Cambiar el título de la columna COL_OrderID
    4. Haga clic en la columna "COL_FullName". Reemplace "Name" por "Customer".
    5. Haga clic en la columna "COL_Caption". Reemplace "Caption" por "Payment mode".
    6. Valide la ventana de descripción del control Tabla. Estos cambios se aplican automáticamente al control.
    7. Reduzca el tamaño de la columna "ID" para que todas las columnas se ajusten al control Tabla.
    8. Amplíe las columnas Customer y PaymentMode.
      Control Tabla en el editor de páginas
    9. Guarde la página haciendo clic en Guardar un elemento en los botones de acceso rápido. Vamos a comprobar el tamaño de las columnas al ejecutar la página.

Nota

Live Data y controles basados en consultas
Los datos en tiempo real no se muestran en los controles que utilizan una consulta como fuente de datos por el siguiente motivo: Los datos que se muestran dependen del resultado de la consulta y solo pueden obtenerse en tiempo de ejecución.
  • Vamos a probar esta página por primera vez:
    1. Haga clic en Probar un elemento en los botones de acceso rápido.
    2. Solo se muestran los pedidos que se pagan en efectivo, con un precio entre $150 y $300. Esto corresponde a los resultados de la última prueba de la consulta ejecutada en el editor, cuando especificamos los parámetros en la ventana de prueba de la consulta.
      Control Tabla en tiempo de ejecución
    3. Cierre el navegador para volver al editor.
  • Echemos un vistazo a los eventos del control Tabla:
    1. Seleccione el control Tabla y presione F2.
    2. El evento "Inicialización de TABLE_QRY_FindOrders" contiene el siguiente código:
      // The control uses a query with parameters to display the data.
      // The parameters of they query must be defined before or
      // when the control is initialized.
      // The query will be automatically run if at least one parameter is defined.
      //
      // For more details, see the online help:
      // Query with parameters, Use in a Table, List Box or Combo Box control
      //
      // Parameters of 'QRY_FindOrders' query
      //MySource.ParamCustomerName = <Value of ParamCustomerName>
      //MySource.ParamStatus = <Value of ParamStatus>
      MySource.ParamPaymentModeID = "1"
      MySource.ParamMinPrice = "150"
      MySource.ParamMaxPrice = "300"

      Los parámetros de prueba se obtuvieron como parámetros predeterminados para la ejecución. Ahora, vamos a modificar la página para que el usuario pueda introducir los parámetros mediante diferentes controles.
    3. Para crear la página, vamos a definir como comentarios todas las líneas de código que corresponden a parámetros:
      • Seleccione las tres líneas de código que comienzan con "MySource ...".
      • Presione Ctrl + /.
      • Las líneas de código pasan a ser comentarios.
    4. Cierre el editor de código (haga clic en la "X" de la esquina superior derecha).
Vamos a crear los diferentes controles que permitirán al usuario seleccionar los parámetros de la consulta. Estos controles se ubicarán arriba del control Tabla.
  • Si es necesario, desplace el control Tabla y reduzca su altura para dejar espacio a los controles de selección de criterios.
Primer parámetro: Nombre del cliente
Vamos a crear un control Campo de entrada para que el usuario introduzca el nombre del cliente que desea buscar.
  • Para crear el control Campo de entrada:
    1. Abra el panel "Análisis" 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 diferentes archivos de datos definidos en el análisis "Full_WEBDEV_Site" se muestran en el panel.
    2. Haga clic en el ícono Flecha a la izquierda del archivo de datos "Customer": los campos del archivo de datos aparecen.
    3. Seleccione el campo "FullName" del archivo de datos Customer, luego arrástrelo y suéltelo en la ventana "PAGE_Multicriteria_search".
    4. El control campo de entrada se crea automáticamente. Ubique el control arriba del control Tabla.
      Crear el control Campo de entrada 'Name'
  • Ahora vamos a pasar el valor introducido en el control Campo de entrada como parámetro a la consulta:
    1. Seleccione el control Tabla y presione F2.
    2. En el evento de inicialización del control Tabla, reemplace la siguiente línea:
      //MySource.ParamCustomerName = <Value of ParamCustomerName>
      por:
      MySource.ParamCustomerName = EDT_FullName

      En este código, EDT_FullName es el nombre del control Campo de entrada que acaba de crear. El valor de este control está asociado al parámetro ParamCustomerName que espera la consulta.
    3. Cierre el editor de código.
  • Antes de ejecutar la prueba, vamos a crear un control Botón para que se vuelva a mostrar el contenido del control Tabla según el valor seleccionado en el Botón de opción:
    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.
      • luego, haga clic en la parte superior derecha de la página.
    2. Cambie el título del control (presione Entrar). Introduzca "Find".
    3. Cambie el estilo del control:
      • Haga clic derecho para abrir el menú contextual del control y seleccione la opción "Seleccionar un estilo WEBDEV".
      • En la ventana que aparece, seleccione "Details (With background)".
        Selección de estilo
      • Valide (botón "OK").
    4. Cambie el tamaño del control si es necesario:
      • seleccione el control.
      • seleccione "Adaptar tamaño" en el menú contextual.
    5. Abra el código del control: presione F2.
    6. Escriba el siguiente código en el evento "Clic en xxx (servidor)":
      TABLE_QRY_FindOrders.Display(taInit)

      En este código, la constante taInit vuelve a ejecutar el evento de inicialización del control Tabla (evento en el que se pasan los parámetros a la consulta).
    7. Cierre el editor de código.
  • Vamos a probar el primer parámetro:
    1. Guarde la página haciendo clic en Guardar un elemento en los botones de acceso rápido.
    2. Haga clic en Probar un elemento en los botones de acceso rápido.
    3. En la página que aparece, escriba "ADDAMS" y haga clic en "FIND". El contenido del control Tabla cambia: todos los pedidos realizados por "ADDAMS" aparecen en la tabla.
      Buscar un cliente por nombre
    4. Cierre la página de prueba.
Segundo parámetro: Estado del pedido
Un pedido puede tener tres estados:
  • en espera,
  • validado,
  • cancelado.
En nuestro análisis, el estado del pedido se guarda en el campo "Status" del archivo de datos "Order". Este campo es de tipo Botón de opción.
Para que el usuario pueda seleccionar uno de estos tres estados, utilizaremos un control Botón de opción enlazado al campo "Status" del archivo de datos "Order".

Nota

Los botones de opción también se denominan "casillas de opción". Se utilizan para seleccionar una sola opción en una lista de opciones.
¿Cómo diferenciar un botón de opción de una casilla de verificación?
  • Los botones de opción permiten seleccionar una sola opción.
  • Las casillas de verificación permiten seleccionar varias opciones.
  • Para crear el control Botón de opción:
    1. En el panel "Análisis", haga clic en el ícono Flecha a la izquierda del archivo de datos "Order": los campos del archivo de datos aparecen.
    2. Seleccione el campo "Status" en el archivo de datos Order, luego arrástrelo y suéltelo en la página "PAGE_Multicriteria_search".
    3. El control Botón de opción se crea automáticamente. Ubique el control arriba del control Tabla.
      Crear el control Botón de opción
  • Vamos a utilizar el valor seleccionado en el control Botón de opción para pasarlo a la consulta como parámetro:
    1. Abra los eventos del control Tabla:
      • Seleccione el control Tabla.
      • Haga clic derecho para abrir el menú contextual y seleccione "Código".
    2. En el evento de inicialización del control Tabla, reemplace la siguiente línea:
      //MySource.ParamStatus = <Value of ParamStatus>
      por:
      MySource.ParamStatus = RADIO_Status

      En este código, RADIO_Status corresponde al nombre del control Botón de opción que acabamos de crear. El valor de este control está asociado al parámetro ParamStatus que espera la consulta.
    3. Cierre el editor de código.
  • Vamos a probar los dos primeros parámetros que se pasaron:
    1. Haga clic en Probar página en los botones de acceso rápido.
    2. Escriba "ADDAMS" y seleccione "Pending".
    3. Haga clic en "FIND": solo los pedidos realizados por ADDAMS y en espera de pago aparecen en la tabla.
      Pedidos de un cliente determinado, filtrados por estado
  • En este ejemplo, solo se han mostrado los pedidos realizados por un cliente determinado y con un estado específico. Ahora, ahora vamos a mostrar todos los pedidos realizados por un cliente, independientemente del estado. Vamos a modificar la página para realizar este proceso.
    En este caso, vamos a:
    • Agregar un estado adicional para mostrar todos los pedidos,
    • Gestionar el estado adicional.
  • Cierre el navegador.
  • Para agregar una opción al control Botón de opción:
    1. Seleccione el control Botón de opción creado anteriormente.
    2. Haga doble clic en el control para abrir la ventana de descripción.
    3. En la pestaña "Contenido", en la lista de opciones, inserte la opción "All orders" en la parte superior de la lista:
      • Haga clic en el botón "+".
      • Escriba "All orders".
      • Utilice la flecha hacia arriba (a la derecha de la ventana) para mover la opción hacia arriba.
        Opciones del control Botón de opción
    4. Valide la ventana de descripción del control.
    5. Amplíe el control en el editor para mostrar todas las opciones (mueva el control Tabla, si es necesario).
  • La opción "All orders" ignora el parámetro "ParamStatus" de la consulta. Para ignorar un parámetro de la consulta, simplemente asígnele el valor NULL. Vamos a gestionar este caso para el parámetro ParamStatus.
    1. Seleccione el control Tabla y abra los eventos (presione F2 o seleccione "Código" en el menú contextual).
    2. En el evento de inicialización del control Tabla, reemplace la siguiente línea:
      MySource.ParamStatus = RADIO_Status
      por:
      SWITCH RADIO_Status
      // All orders
      CASE 1
      MySource.ParamStatus = Null
      OTHER CASE
      MySource.ParamStatus = RADIO_Status-1
      END

      En este código, si el control RADIO_Status corresponde a 1 (caso de la opción "All orders"), se asigna el valor "NULL" al parámetro de la consulta asociada. En caso contrario, el valor del parámetro es el número de la opción seleccionada menos 1 (que corresponde a la opción que agregamos).
    3. Cierre el editor de código.
  • Vamos a probar la página.
    1. Guarde la página haciendo clic en Guardar un elemento en los botones de acceso rápido.
    2. Haga clic en Probar página en los botones de acceso rápido.
    3. Escriba "ADDAMS" y seleccione "All orders".
    4. Haga clic en "FIND": los pedidos realizados por ADDAMS aparecen en la tabla, independientemente del estado.
      Buscar un cliente por nombre y el estado de los pedidos
    5. Cierre el navegador.
Tercer parámetro: Método de pago
Se pueden utilizar varios métodos de pago para un pedido: efectivo, cheques, etc. Los diferentes métodos de pago se almacenan en el archivo de datos "PaymentMode".
Vamos a crear un control Combo Box basado en este archivo de datos para que el usuario seleccione un método de pago.

Nota

El control Combo Box permite mostrar una lista de elementos y seleccionar un elemento de la lista.
A diferencia del control List Box, un Combo Box muestra un solo elemento a la vez: al hacer clic en el control, éste se expande y permite seleccionar otro elemento. Solo se puede seleccionar un elemento.
Los elementos que se muestran en un control Combo Box se pueden definir al crear el control en el editor. Estos elementos:
  • se definen mediante programación.
  • provienen de un archivo de datos o consulta.


  • Para crear un control Combo Box:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en "Combo Box".
    2. Haga clic en la ventana, en la ubicación en la que desea crear el control (por ejemplo, junto al control Botón de opción).
    3. El asistente de creación del control Combo Box se abre.
    4. Seleccione la opción "Mostrar datos de un archivo o de una consulta existente" y vaya a la etapa siguiente.
    5. Seleccione el archivo de datos "PaymentMode" y pase a la etapa siguiente.
    6. El campo que se mostrará en el control Combo Box es "Caption". Seleccione "Caption".
      Pase a la etapa siguiente.
    7. Seleccione la clave de búsqueda: "Caption".
      Pase a la etapa siguiente.
    8. Seleccione el valor de retorno "PaymentModeID". El valor de retorno es importante porque se pasará como parámetro a la consulta.
      Pase a la etapa siguiente.
    9. Conserve las opciones predeterminadas de las etapas del asistente y valide la creación del control Combo Box.
    10. El control Combo Box se crea automáticamente en la página.
  • Cambie el título del control Combo Box (presione Entrar). Introduzca "Payment mode".
    Cambiar el título del control
  • Ahora vamos a pasar el valor seleccionado en el control Combo Box como parámetro a la consulta:
    1. Abra los eventos del control Tabla: Seleccione el control Tabla y presione F2.
    2. En el evento de inicialización del control Tabla, reemplace la siguiente línea:
      //MySource.ParamPaymentModeID = 1
      por:
      MySource.ParamPaymentModeID = COMBO_PaymentMode

      En este código, COMBO_PaymentMode corresponde al nombre del control Combo Box que acabamos de crear. El valor de este control está asociado al parámetro ParamPaymentModeID que espera la consulta.
    3. Cierre el editor de código.
    4. Guarde la página (Guardar un elemento o Ctrl + S).
  • Vamos a probar los parámetros que se pasaron:
    1. Haga clic en Probar página en los botones de acceso rápido.
    2. Introduzca "ADDAMS".
    3. Cambie el estado de los pedidos con el control Botón de opción y el método de pago con el control Combo Box, y luego haga clic en "FIND". El contenido del control Tabla cambia.
      Pedidos de un cliente determinado, filtrados por estado
    4. Cierre el navegador.
Último parámetro: Total del pedido
El último parámetro de la consulta corresponde al total del pedido. Tenemos un parámetro que corresponde al precio mínimo y un parámetro que corresponde al precio máximo. El usuario debe poder elegir un intervalo de precios. Para ello, usaremos un Control deslizante de rango.

Nota

Un Control deslizante de rango es un control gráfico que se puede incluir fácilmente en un sitio WEBDEV y que permite seleccionar los límites de un intervalo (valor inicial y valor final).
  • Para gestionar el precio del producto:
    1. En la pestaña "Control deslizante", en el grupo "Controles gráficos", despliegue "Creación" y seleccione "Rango de precios".
      Crear un Control deslizante
    2. Haga clic en la página, entre el control "Payment mode" y el botón "FIND". El control deslizante de rango se crea automáticamente.
      Crear un Control deslizante
  • El control que se acaba de crear es un control avanzado que incluye el control deslizante y dos controles que muestran los límites. El control ya está programado para mostrar los límites. Vamos a inicializar el Control deslizante para que los límites coincidan con los datos del archivo de datos Order.
    1. Seleccione el Control deslizante y abra los eventos (F2).
    2. Inserte el siguiente código antes las líneas existentes en el evento de inicialización del control:
      // The lower value is the least expensive amount
      Order.ReadFirst(TotalIOT)
      MySelf.MinValue = Order.TotalIOT
      MySelf.LowerValue = MySelf.MinValue
       
      // The upper value is the most expensive amount
      Order.ReadLast(TotalIOT)
      MySelf.MaxValue = Order.TotalIOT
      MySelf.UpperValue = MySelf.MaxValue

      Analicemos este código:
      • La función <Archivo de datos>.ReadFirst lee el primer registro del archivo de datos "Order" según la clave de búsqueda, TotalIOT en este caso. Por lo tanto, esta función lee el registro que corresponde al precio más bajo.
      • A continuación, el precio leído en el registro se asocia al límite mínimo del Control deslizante, así como a su valor inferior.
        • El límite mínimo indica el valor más bajo que puede seleccionar el usuario.
        • El valor inferior indica el valor más bajo seleccionado actualmente.
      • El mismo principio se utiliza para encontrar el precio más alto. La única diferencia es la función utilizada: <Archivo de datos >.ReadLast. Esta función lee el último registro del archivo de datos Order según el precio, es decir, el registro con el precio más alto.
    3. Cierre la ventana de código.
  • Vamos a pasar los precios seleccionados como parámetro a la consulta:
    1. Abra los eventos del control Tabla: seleccione el control Tabla y presione F2.
    2. En el evento de inicialización del control Tabla, reemplace las siguientes líneas:
      //MySource.ParamMinPrice = "1500"
      //MySource.ParamMaxPrice = "3000"

      por:
      MySource.ParamMinPrice = SLIDER_BUDGET.LowerValue
      MySource.ParamMaxPrice = SLIDER_BUDGET.UpperValue

      En este código, los parámetros que corresponden a los precios son iguales al valor inferior y superior del Control deslizante.
    3. Cierre el editor de código.
    4. Guarde la página (Guardar elemento o Ctrl + S).
  • Vamos a probar los parámetros que se pasaron:
    1. Haga clic en Probar página en los botones de acceso rápido.
    2. Defina los parámetros de búsqueda:
      • Nombre del cliente,
      • Estado,
      • Método de pago,
      • Precio.
    3. Haga clic en "FIND". El contenido del control Tabla cambia.
      Búsqueda con el control deslizante
    4. Cierre el navegador.
Optimizar la visualización de la página
De forma predeterminada, al hacer clic en el botón "Find", el servidor devuelve todo el contenido de la página.
Para optimizar la visualización de la página, puede activar el modo Ajax en este botón. En nuestro ejemplo, el servidor solo devolverá el contenido del control Tabla.

Nota

WEBDEV incluye varios métodos para utilizar la tecnología Ajax en un sitio:
  • Ajax con un solo clic: simplemente haga clic en AJAX en el editor de código para activar Ajax en un evento.
  • Controles Ajax (controles Tabla y Looper). Los controles Ajax permiten mostrar los datos cargados dinámicamente desde el servidor. ¡No es necesario descargar todo al mismo tiempo!
  • Ajax utilizando funciones específicas de WLanguage: AjaxExecute y AJAXExecuteAsynchronous.
  • Para activar Ajax en el botón "Find":
    1. Seleccione el botón "Find" y abra los eventos (F2).
    2. En el encabezado del evento "Clic en xxx (servidor)", el enlace AJAX aparece tachado.
      Ajax no activado
    3. Haga clic en el enlace AJAX: el enlace "AJAX activado" aparece para indicar que el evento se convierte automáticamente en un evento Ajax.
      Ajax activado
    4. Cierre el editor de código.
  • Pruebe la página:
    1. Haga clic en Probar página en los botones de acceso rápido.
    2. Defina los parámetros de búsqueda:
      • Nombre del cliente,
      • Estado,
      • Método de pago,
      • Precio.
    3. Haga clic en "Find". Solo se vuelve a mostrar el contenido del control Tabla.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 28
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 01/06/2023

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