Thursday 20 December 2012

Curso ADF 11g–Parte 8

 

Tema : Página de Búsqueda

Bien, luego de haber realizado los laboratorios anteriores ya estamos listos para empezar la creación de la interfaz de usuario. Empecemos por algo muy sencillo que es una página que permite realizar una búsqueda de registros.

Requerimiento:

· Oracle Jdeveloper 11g. 11.1.1.5

· Oracle Database Express 11g

· Haber culminado la parte 7 del tutorial.

Capítulos Anteriores

Parte 1: Creación del Modelo de Datos.

Parte 2: Creación de Componentes de Negocio

Parte 3: Personalización de Entidades

Parte 4: Personalización de View Objects.

Parte 5: Lógica en el Módulo de Aplicaciones

Parte 6: Manejo de Bindings

Parte 7: Creación de Templates

Opcional :

Si no culmino los capítulos anteriores y quiere empezar desde este capítulo, puede descargar el siguiente código para continuar el curso.

Código previo.

Bien toca realizar una página de búsqueda la cual permita obtener de manera tabular a todos los clientes cuyo nombre coincida con un dato que el usuario ingrese por la pantalla. 

 

Los pasos a realizar son los siguientes:

1. Elija la carpeta pages y haciendo clic derecho seleccione la opción New

image 

2. Elija la opción JSF – JSF Page

image

3. Nombre la página como listaCliente, elija el templateVentas y asegurese de tener activo la opción Automaticaly Expose UI Components….. tal como se muestra en la siguiente figura.

Pulse OK,

image

 

3. Note que se ha creado una nueva página que hereda los datos del template y define una región denominada “contenido” donde podremos colocar nuestros componentes.

image

4. Tenemos primero que darle un título a la página creada. Para eso elija en la paleta de estructura la opción de pageTemplate y en la paleta de propiedades cambie el valor de titulo por “Listado de Clientes”

image

 

5. Ahora empezaremos a poblar la página de componentes gráficos. Sin embargo, una regla clave es colocar siempre un contenedor debajo de cualquier componente gráfico. En este caso y siguiendo la pauta del capitulo a anterior debemos colocar layouts que sean flexibles al cambio de tamaño que sufra la página por parte del usuario final. En este caso el layout que nos asegura este comportamiento es el PanelStrechLayout. Arrastremos este contenedor sobre la página :

image

 

6. Sólo trabajaremos con la región top y center. Elimine el resto de regiones.

image

 

7. La región de top la reservaremos para los controles de búsqueda, ahora sólo nos limitaremos a mostrar los datos de los clientes de manera tabular. En este caso antes de arrastrar la tabla de datos es conveniente usar un layout especializado en alojar tablas denominado PanelCollection. Arrástrelo hacia la región center.

 

image

 

8. Ahora si, arrastre desde la paleta de Data Control la referencia a ClienteVO1. Elija la opción Table | ADF Read only Table.

image

 

9. La siguiente ventana permitirá definir la manera en la que se mostrará la tabla. En este caso seleccione la opción Single Row y Enable Sorting las cuales permiten seleccionar una fila de la tabla y habilitan enlaces en la cabecera para permitir el ordenamiento de la tabla en base a un fila. Pulse OK.

image

10. Bien, se debe haber generado la tabla con datos. Un primer inconveniente que vemos es que las columnas tiene un ancho fijo, lo cual no aprovecha la totalidad del espacio. Para solucionar esto indiquemos a la tabla que columna tendrá un tamaño variable en base a las dimensiones del browser. Ubíquese en la tabla y en la paleta de propiedades cambie la propiedad ColumnStreaching por last.

image

 

11. Bien, hasta acá tenemos la pantalla con una tabla que tiene la propiedad de expandirse ó contraerse en función al tamaño del browser. Puede probarlo haciendo clic derecho sobre la pantalla y pulsando Run.

image

 

12. El resultado hasta este punto sería similar a lo mostrado a continuación.

 

image

 

Note que si expande o contrae la página el contenido también se acomoda al nuevo tamaño.

 

13. Ahora lo que toca por hacer es colocar criterios de búsqueda en la pantalla. En este caso sólo colocaremos un criterio de búsqueda por nombre. Para lograr esto, es necesario modificar el view object que hemos usado para crear la tabla e incluir una característica llamada ViewCriteria.  Aprovechemos este paso para brindar una rápida inducción a lo que son View Criterias.

 

VIEW CRITERIAS.

Los view criterias son como filtros que tiene un query que se definen en tiempo de diseño. 

Si hacemos una analogía con los conceptos de base de datos, un view object vendría a ser el query, por ejem:

SELECT *

FROM CLIENTE

El view criteria vendría a ser un criterio o filtra de esa consulta por ejemplo

NOMBRE LIKE ´JOSE´

La ventaja de el uso de view criterias es que podrías tener más de uno sobre la misma consulta, y dinámicamente podrías escoger cual de los criterios aplicar dependiendo de las circunstancias. Siguiendo con el ejemplo podría tener otro criterio que busque a los clientes por su email, entonces tendríamos otro criterio cómo

EMAIL LIKE ‘parbizu@hotmail.com’

 

14. Definamos el view criteria . Para ello haga doble clic sobre la vista ClienteVO y seleccionando la categoría Query pulse el botón  “Create new View criteria” tal como se muestra a continuación.

 

image

 

15. Sobre la pantalla mostrada defina el criterio. En este caso pulse el botón “Add Criteria” y seleccione el atributo nombre como el campo sobre el cual se hará la búsqueda-

image

16. Adicionalmente debemos definir el operador y el operando empleado en el criterio. El operador será Contain (que trabaja como un like de base de datos), y el operando será del tipo bind variable.

image

 

17. El campo parameter debe ser completado con el nombre de la variable que se usará para pasar valores a la consulta. Pulse el botón de (+) para agregar una nueva variable denominada p_nombre tal como se muestra en la figura. Pulse OK en las dos siguientes ventanas.

image

 

18. Perfecto, ya tenemos creado el viewCriteria denominado ClienteVOCriteria. Será ahora necesario disponer de un método que invoque a este query-

image

 

19. Vamos ahora a incluir un método que reciba como parámetro un string y filtre los datos de la vista de cliente usando el viewcriteria defindo previamente.  Ingrese al módulo de aplicación VentasAM y a su clase de implementación VentasAMImpl

 

image

 

20. Sobre esas clase agreguemos un nuevo método denominado filtrarCliente el cual recibirá como parámetro una cadena y filtrará la vista de ClienteVO con el viewcriteria.

 

public void filtrarCliente(String nombre)
{
    this.getClienteVO1().setApplyViewCriteriaName("ClienteVOCriteria");
    this.getClienteVO1().setNamedWhereClauseParam("p_nombre", nombre);
    this.getClienteVO1().executeQuery();
}

 

image

 

21. Finalmente no olvide publicar su método en el módulo de aplicaciones. Pulse OK.

image

 

22. Regresemos a la página listaCliente.jspx e incluyamos una caja de texto que lo usaremos para pasar los parámetros de la búsqueda. Entonces sobre la sección Top arrastre un Panel Group Layout.  Modifique la propiedad Layout de este componente por horizontal tal como se muestra en la siguiente figura.

 

image

 

23. Ahora incluiremos una caja de texto que usaremos para que el usuario escriba el nombre que quiere buscar. Entonces arrastre el control InputText sobre el layout y cambie su propiedad Label por Nombre.

 

image

 

24. Una vez que hemos incluido la caja de texto, será necesario definir sobre que variable se almacenará el contenido de la caja de texto. Para eso usted puede apoyarse en la capa de bindings. Por default cada vez que se crea una página se incluye un bindings llamado variable que puede ser usado para alojar variables locales. Bien entonces crearemos esta variable llamada b_nombre y la enlazaremos a la caja de texto creada en el paso anterior. Para eso aperture la seccion de bindings de la página .

image

 

25. Ubíquese en la paleta de estructura y haciendo clic derecho sobre el bindings variable elegir la opción Insert inside variables | variable tal como se muestra en la figura.

image

 

26. Defina como nombre variable b_nombre y del tipo String.Pulse OK.

image

 

27. Lo que ha hecho es simplemente crear una variable a nivel iterador. Sin embargo las variables a nivel iterador no pueden ser accedidas directamente por la página sino que deben pasar a travez de un value binding.  Puede leer nuestro capitulo anterior para comprender más sobre esta arquitectura. Bien entonces el siguiente paso será crear un value binding . Para eso en la seccion de bindigs pulse el botón “Create control bindings”

 

image

 

28. En esa pantalla elija la opción de atributes values.

image

29. Luego elija como dataSource las variables y como atributo b_nombre definido en el paso anterior. Pulse OK.

 

image

30. Notará que se ha creado un nuevo value bindigs denominado b_nombre1. Este último será el nombre que usaremos como variable temporal para almacenar los valores de la página.

image

31. Regrese a la página en modo de diseño y seleccionado el inputText asociado al nombre modifique su propiedad value pulsando la flecha para habilitar el menú contextual y luego la opción Expression Builder

 

image

 

32. Luego coloque la siguiente expresión sobre el campo y pulse OK.

 

#{bindings.b_nombre1.inputValue}

 

image

 

33. Bien en este punto tenemos una pantalla con una caja de texto que guarda todos sus valores ingresados en una variable llamada b_nombre1. Bien lo que nos faltaría sería invocar al método filtrarCliente (del punto 20) y pasarle como parámetro el valor de la variable b_nombre1. Estamos de acuerdo?.  Para eso simplemente vayamos a la paleta de datacontrols ,que como hemos explicado expone nuestra capa de modelo  automáticamente, y arrastremos la operación filtrarCliente hacia la página, al costado de la caja de texto eligiendo la opción Method | ADF Button, tal como se muestra en la siguiente figura.

 

image

 

34. Aparecerá una ventana que permitirá definir el valor que tendrá el parámetro del método. Lo que haremos será utilizar las expresiones para asociarlas a la variable b_nombre. Pulse Ok en las pantallas modificadas.

image

 

image

 

35. Finalmente modifiquemos el valor del texto del botón por : Buscar.

image

 

36. Probemos nuevamente nuestra pantalla. Repita el paso 11 y verá que ahora la pagina inicialmente recupera todos loa valores

image

 

37. Ahora si colocamos la palabra “la” y pulsamos Buscar, nos mostrará todas las coincidencias.

image

 

38. Si desea puede descargar el proyecto culminado en el siguiente enlace.

CODIGO COMPLETO

2 comments:

  1. Que bueno Plinio que hayas podido continuar con este tutorial la verdad que esta muy bueno y muy completo!!
    Te consulto nuevamente, tendras los scripts de la Base porque los scripts se han caido.
    Muchas gracias por todo, saludos desde Argentina!!

    ReplyDelete
    Replies
    1. Disculpa el inconveniente. Los archivos ya se encuentran disponibles.

      Delete