Creación de una página XPage para realizar búsquedas

El usuario utiliza esta página para especificar parámetros de búsqueda y ver los resultados. Los parámetros de búsqueda son valores para la ciudad, el estado, el país y el código postal. El usuario puede rellenar cualquiera de estos parámetros y hacer clic en un botón. La página se renueva y los resultados se visualizan en forma de una vista. Una propiedad de búsqueda para la vista limita la visualización a los documentos que coinciden con los parámetros de búsqueda.

1. Al principio de la lista de XPages, haga clic en Página XPage nueva. Como alternativa puede hacer clic con el botón derecho del ratón en Páginas XPage > Página XPage nueva en el panel lateral.
2. Denomine la página XPage nueva BuscadorSitios y haga clic en Aceptar.
3. Desde debajo de Controles personalizados en el panel de la derecha, arrastre el control personalizado Cabecera hasta la página XPage.

   Es la misma página que ha colocado en la página XPage ListaSitios pero se ha puesto en un control personalizado para facilitar su mantenimiento. Un control personalizado es similar a un subformato.

4. Añada una hoja de estilo a la página de la forma siguiente:
   1. Haga clic sobre la página real, no sobre los controles, para que se active la página.
   2. Bajo Propiedades en el panel de la parte inferior, haga clic en Estilo.
   3. Desplácese hasta el final y haga clic en Añadir hoja de estilo a página
   4. En el recuadro Añadir hoja de estilo a página, seleccione styles.css.
   5. Haga clic en Aceptar.
5. Añada un título de la forma siguiente:
   1. En la página XPage, pulse Intro después de la cabecera, escriba un título para la página como, por ejemplo, Buscador de sitios y haga clic en Intro.
   2. Resalte el texto.
   3. En el panel de la parte inferior, haga clic en Estilo si todavía no está allí.
   4. En la lista bajo styles.css, haga clic en .title.
   El aspecto del texto cambiará para adecuarse al estilo seleccionado.
6. Por debajo del texto del título, especifique instrucciones para el usuario como, por ejemplo, Rellene algunos de estos campos o todos ellos y haga clic en Buscar y pulse Intro.
7. Cree una tabla con cuatro filas y dos columnas, de la forma siguiente:
   1. En Controles de contenedor en el panel de la derecha, arrastre Tabla bajo las instrucciones hasta la página XPage.

      Aparecerá el recuadro de diálogo Insertar tabla.

   2. En el recuadro de diálogo Insertar tabla, especifique 4 para las filas y 2 para las columnas.
   3. Haga clic en Aceptar.
   4. Utilice los manejadores de arrastre para ajustar la anchura de la tabla.
8. Realice lo siguiente para cada celda de la columna 1:
   1. En Controles principales en el panel de la derecha, arrastre Etiqueta hasta la celda.
   2. En el panel de la parte inferior, cambie la etiqueta del control a Ciudad (fila 1), Estado (fila 2), País (fila 3) o Código postal (fila 4).
9. Realice lo siguiente para cada celda de la columna 2:
   1. En Controles principales en el panel lateral, arrastre Recuadro de edición hasta la celda.
   2. Bajo Propiedades en el panel de la parte inferior, haga clic en Recuadro de edición.
   3. Cambie el nombre de ciudadBúsqueda (fila 1), estadoBúsqueda (fila 2), paísBúsqueda (fila 3) y códigoBúsqueda (fila 4).
   4. Bajo Propiedades en el panel de la parte inferior, haga clic en Datos.
   5. Para Enlazar datos utilizando, haga clic en Avanzado.
   6. En el menú desplegable Usar, seleccione Variable de ámbito.
   7. En el recuadro de lista Parámetro, seleccione Ámbito de sesión.
   8. Desplácese hasta el final y escriba el nombre de la variable como searchCity (fila 1), searchState (fila 2), searchCountry (fila 3) o searchZip (fila 4).
   Si enlaza estos recuadros de edición con variables de ámbito, podremos acceder a sus valores en código JavaScript™, en lugar de en el almacén de datos. Una variable de sesión retiene su valor a través de las páginas mientras dure la sesión del usuario en el servidor.
10. Realice lo siguiente para crear un botón para enviar y renovar la página:
    1. En Controles principales en el panel lateral, arrastre Botón hasta la línea que hay bajo la tabla.
    2. En el panel de la parte inferior, cambie la etiqueta del control a Buscar.
    3. En la lista desplegable para el tipo de botón, seleccione Enviar.
    Al hacer clic en este botón se enviará la página al servidor y se renovará el contenido de la página en función de los valores especificados por el usuario.
11. Realice lo siguiente para visualizar la consulta utilizada para obtener los resultados:
    1. En la línea siguiente de la página XPage, escriba Cadena de consulta: y un espacio.
    2. En Controles principales en el panel de la derecha, arrastre Campo calculado hasta la celda.
    3. Bajo Propiedades en el panel de la parte inferior, haga clic en Font. Cambie el color a azul.
    4. Bajo Propiedades en el panel de la parte inferior, haga clic en Valor.
    5. Para Enlazar datos utilizando, haga clic en Avanzado.
    6. En el menú desplegable Usar, seleccione Variable de ámbito.
    7. En el recuadro de lista Parámetro, seleccione Ámbito de sesión.
    8. Desplácese hasta el final y escriba el nombre de la variable como serieConsulta.

       El nombre de la variable es el que usted elija y no tiene ningún significado especial. Más tarde le asignará un valor.

    Esto nos permite visualizar la consulta que calculamos más tarde. La visualización probablemente no es necesaria en una aplicación de producción pero resulta útil para realizar pruebas.
12. En Controles del controlador en el panel lateral, arrastre Vista hasta la siguiente línea de la página.
    1. Deje Mostrar datos de definido en Vista de Domino.
    2. Deje Aplicación definido en Actual.
    3. En la lista desplegable Vista, seleccione ListaSitios.
    4. Acepte vista1 como el nombre del origen de datos.
    5. En la lista de columnas del final, desmarque todo menos SiteName, Phone, StreetAddress, City y State. Puede cambiar esto y elegir qué columnas desea que aparezcan pero debe incluir NombreSitio.
    6. Haga clic en Aceptar.
13. Bajo Propiedades en el panel de la parte inferior, haga clic en Vista. En Durante la ejecución, abrir el documento seleccionado utilizando:, seleccione Sitio.
14. Bajo Propiedades en el panel de la parte inferior, haga clic en Datos. Asegúrese de que la vista esté definida en ListaSitios.
15. Ahora puede definir una consulta de búsqueda para limitar la vista a aquellos elementos que satisfagan lo que el usuario especifique en los campos de búsqueda. Realice lo siguiente:
    1. Bajo Propiedades en el panel de la parte inferior, haga clic en Todas las propiedades.
    2. Desplácese hasta el final. Expanda Datos y, a continuación, expanda la segunda aparición de Datos. Seleccione la propiedad Buscar.

       La pantalla debería ofrecer un aspecto similar al siguiente.

       

    3. Haga clic en el diamante que hay junto a la propiedad Buscar y seleccione Valor calculado.

       Se abrirá el editor de scripts.

    4. Escriba el código siguiente en el editor de scripts. Asegúrese de que el idioma sea JavaScript del lado del servidor y de que Calcular dinámicamente esté definido.

       var tmpArray = new Array("");
       var cTerms = 0;
       if(sessionScope.searchZip != null & sessionScope.searchZip != "") {
       	tmpArray[cTerms++] = "(FIELD SearchZip = \"" + sessionScope.searchZip + "\")";
       }
       if(sessionScope.searchCity != null & sessionScope.searchCity != "") {
       	tmpArray[cTerms++] = "(FIELD SearchCity = \"" + sessionScope.searchCity + "\")";
       }
       if(sessionScope.searchState != null & sessionScope.searchState != "") {
       	tmpArray[cTerms++] = "(FIELD SearchState = \"" + sessionScope.searchState + "\")";
       }
       if(sessionScope.searchCountry != null & sessionScope.searchCountry != "") {
       	tmpArray[cTerms++] = "(FIELD Country = \"" + sessionScope.searchCountry + "\")";
       }
       qstring = tmpArray.join(" AND ").trim();
       sessionScope.queryString = qstring; // esto sólo muestra la consulta
       return qstring // esto es lo que define la propiedad de búsqueda

       No vamos a realizar este ejercicio, pero el código podría dejarse como una función y colocarse en una biblioteca de scripts. La biblioteca de scripts se añadiría después como un recurso de la página y se accedería a la función mediante una simple referencia. Esto permite utilizar el código en varios sitios con mantenimiento central.

    5. Haga clic en Aceptar.
    Este código obtiene los valores que el usuario especifica en la página utilizando las variables de ámbito de sesión enlazadas con estos recuadros de edición. El código crea y devuelve una serie de consulta que coincide con los valores de los documentos en los campos códigoBúsqueda, ciudadBúsqueda, estadoBúsqueda y País.

    Para mayor claridad, estamos utilizando los mismos nombres de campo que los de los documentos que estamos buscando, pero podríamos utilizar cualquier nombre.

16. Ajuste la primera columna para permitir que el usuario pueda abrir el documento en modalidad de lectura:
    1. En la página XPage, haga clic en la primera columna de la vista.
    2. Bajo Propiedades en el panel de la parte inferior, haga clic en Mostrar.
    3. Haga clic en Mostrar los valores de esta columna como vínculos.
    4. En Modalidad de apertura de documentos, haga clic en Sólo lectura.

    Los usuarios de la web que miren los resultados de la búsqueda no podrán editar los documentos que encuentren cuando sigan el vínculo. En una aplicación real, también se utilizaría la lista de control de accesos.

17. Guarde los cambios y previsualice la nueva pantalla de búsqueda.
18. Previsualice la página como desee. Intente algunas búsquedas como, por ejemplo, 02108 o 33432 para el código postal; Boca Raton o Boston para la ciudad; MA para el estado; Francia para el país.
19. Cierre la página XPage BuscadorSitios haciendo clic en la X en la esquina superior derecha del panel central.