Sunday, 15 September 2013

Experiencia de Usuarios con ADF

 

Durante mi última participación en el OTN TOur, el equipo de OTN Lat elaboró un video donde participó explicando algunos conceptos de los patrones de experiencia de usuario con ADF.

Lo comparto para que conozcan más al respecto.

Monday, 3 June 2013

Introducción a Java EE 7

 

Para los interesados ORACLE ha programado una web conference donde mostrará las novedades de la plataforma Java EE 7.

1. WebSocket client/server endpoints
2. Batch Applications
3. JSON Processing
4. Concurrency Utilities
5. Simplified JMS API
6. @Transactional and @TransactionScoped!
7. JAX-RS Client API
8. Default Resources
9. More annotated POJOs
10. Faces Flow

Los detalles de la conferencia en el siguiente enlace

Saturday, 18 May 2013

OTN Tour 2013

 

Este año nuevamente participaré en el OTN Tour de Latinoamérica.

En esta ocasión estaré en los siguientes países.

 

1. Guatemala : 17 de Julio.

2. Panamá: 22 de Julio

3. México: 26 de Julio’

Los temas que expondré serán :

ADF Techniques to improve productivity and User eXperience.

These days, users require not only essential applications, but developers also have to provide usable, fast and highly functional solutions. Achieving this is a very big challenge for organizations. However, Oracle developers have the support of UX Design Patters and the ADF framework features to cover those needs.

In this session, the speaker will show real user requirements such as avoiding the use of the mouse, proper organization of components, minimizing server invocations among others and how these issues were solved using ADF.

This session will include UX Design Patters , ADF Faces Client Framework, ADF Faces Components, ADF Task Flows.

Duration : 1 Hour.

 

ADF Basic Training

In this course, you will learn the main components of ADF and how to personalize it to build robust solutions. Step by step instructor will teach how to build a solution from model components to User Interface. In each topic, students will apply the theory concepts through labs in order to build a complete solution.

This course is ideal for people who are beginning to work with ADF or have some knowledge of the field. It clarifies what need to create ADF Solutions.

This training requires a computer for each participant.

Duration: 4 Hours.

 

Espero verlos en el OTN Tour

Monday, 28 January 2013

Curso ADF 11g –Parte 10

Tema : Pantalla de Invocación de Métodos

Para finalizar este curso vamos a crear una página para invocar un método que se encuentra en el modelo.

Requerimiento:

· Oracle Jdeveloper 11g. 11.1.1.5

· Oracle Database Express 11g

· Haber culminado la parte 8 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

Parte 8: Página de Búsqueda

Parte 9: Página de Creación de Registro

 

Opcional :

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

Código previo.

En los capítulos anteriores vimos como crear páginas con funcionalidades de búsqueda y de inserción de datos. Ahora lo que vamos hacer es crear una interfaz de usuario para invocar un método que creamos en la capa de Modelo.

En el capitulo 5, creamos un método que permite realizar un incremente sobre los precios de los productos en base a un porcentaje que nosotros indiquemos como parámetro. Bien el método funciona Ok, pero el usuario aún no puede utilizarlo. Bien, el laboratorio de ahora servirá justamente para crear una interfaz de usuarios que sirva para invocar dicho método.

Empecemos entonces la parte práctica.

1. En este caso crearemos una nueva página denominada incrementaPrecio.jspx. Para eso hagamos clic derecho sobre el paquete de pages y elija la opción : New

 

image

 

2. De la galería de componentes, elija la opción JSF | JSF Page. Pulse OK.

 

image

 

3. Renombre la página por incrementaPrecio.jspx y asegúrese que este activado la opción de creación del backing bean. Pulse OK.

image

 

4. La invocación de un método es relativamente sencillo, simplemente tenemos que arrastrar el método en la página. Para eso vaya al Data Control y elija la operación incremetarPrecio(int) y arrástrelo hasta la página. Elija la opción de ADF Parameter Form.

 

image

 

5. El asistente sugerirá la creación de un campo para ingresar el porcentaje a incrementar. Pulse OK.

image

 

6. En este punto, se ha creado un formulario para invocar el método. Sin embargo para poder ver el efecto del cambio, vamos a incluir un tabla con la información de los precios por producto. Para eso,  use el data control y arrastre la vista de ProductoVO 1debajo del formulario de invocación. Elija ADF Read Only Table..

image

 

7. Acepte los valores por Default. Pulse OK.

image

 

8. Modifique la etiqueta y el botón del formulario de invocación.

image

9. Probemos el resultado. Haga Run Sobre la página, coloque un valor entero y pulse procesar.

image

 

10. Notará que los precios se incrementaron correctamente.

 

image

 

Descargar Código Finalizado.

Friday, 25 January 2013

Curso ADF–Parte 9

Tema :  Agregar Clientes

En el post anterior trabajamos en un pantalla de búsqueda. Ahora vamos a completar dicha pantalla con la operación de creación

 

Requerimiento:

· Oracle Jdeveloper 11g. 11.1.1.5

· Oracle Database Express 11g

· Haber culminado la parte 8 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

Parte 8: Página de Búsqueda

 

Opcional :

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

Código previo.

 

Vamos a continuar con la pantalla de listado, pues es desde ahí donde empezaremos a realizar el mantenimiento de datos. Primero vamos a agregar un toolbar desde donde se realizará las operaciones descritas previamente. 

Los pasos a realizar son los siguientes:

1. Abra la página de listaCliente.jspx y haciendo clic derecho sobre la región toolbar elija la opción “Toolbar” tal como muestra la siguiente figura. Lo que va a pasar es que se creará un control toolbar el cual es un contenedor de botones. Entre sus ventajas esta que aplica un separador entre cada botón.

 

image

 

2. Ahora será necesario insertar los botones para los operaciones. Lo que vamos a hacer a continuación es utilizar el framework para agilizar esta operaciones. Si bien el proceso es muy sencillo, sólo es un drag and drop, lo importante es entender que es lo que sucede detrás de escena.   Por eso hagamos una breve explicación del proceso antes de empezar a programar esto.

Si usted recuerda en la parte de creación del modelo creamos entidades  y view objets(basadas en tablas de BD) que abstraen la capa de modelo. Bien esos componentes que hemos definido son usados para poder crear la pantalla que estamos mostrando en este momento. En este caso hemos usado el view object de Cliente para mostrar dicha información. El punto más importante a entender es que lo que se muestra no es el view object propiamente dicho, sino una instancia del view object en memoria.  Es la misma analogía que la definición de clase y objeto. Ahora porque hacemos hincapié en esto?, pues básicamente para resaltar que las operaciones que vamos a realizar en este momento se aplicarán sobre los DATOS EN MEMORIA.

Eso significa que acciones como agregar ó   eliminación de un registro se realizarán sobre los datos cargados en memoria del servidor y NO en la base de datos.  Para que esos datos cargados e memoria puedan impactar en la BD se usará una operación llamada “commit”, de la misma forma si queremos que esos cambios no se apliquen podremos usar la operación “rollback”

Bien, que otra cosa importante debemos considerar:  los datos cargados en memoria son preservados por el framework  entre varios HTTP request (termino técnico: State management ) . Es decir los datos cargados no se pierden gracias a que el framework maneja el estado de los datos.  DE manera más sencilla, es como si los datos que son cargados por estas instancias se guardarán en session.  De esta forma si el usuario por ejemplo selecciona una fila de la tabla (en la pantalla), el framework guarda esa referencia en memoria y nosotros la podemos conocer con lógica en nuestro código. O mejor aún podemos recuperar los datos que el usuario ha filtrado para poder realizar algún tipo de procesamiento.

Bien,  una vez que entendemos esto vamos a realizar estas operaciones.

3. La primera operación que realizaremos será el de Creación. Bien en este caso crearemos un botón en la sección de toolbar haciendo clic derecho sobre esa zona y eligiendo la opción “Insert inside Toolbar  | Toolbar Button”

image

 

4. Modifiquemos la propiedad Text por “Agregar”.

image

5. Nuestra próxima acción será crear un formulario “de escritura” que permita manipular los datos de la fila instanciada. Para esos haremos uso de un ventanas emergentes.

6. Incluyamos la ventana emergente dentro de la página. Para ello,  haciendo uso de la paleta de estructura, arrastre el control popup dentro de la sección af:form de manera similar a lo mostrado en la siguiente página.

image

7. El Popup define una región cuyo contenido es recuperados, por default,  al momento que abrir el popup. En ese momento es guardado en cache. Sin embargo nosotros queremos que su contenido no se guarde en cache sino que se actualice cada vez que abra el botón. Entonces será necesario  cambiar la propiedad Content Delivery por LazyUncached.

image

 

Puede conocer más teoría sobre este componente en el siguiente enlace.

http://jdevadf.oracle.com/adf-richclient-demo/docs/tagdoc/af_popup.html

 

8. Ahora debemos definir el contenido que tendrá el popup. En nuestro caso, será una ventana de dialogo que incluirá cajas de texto donde el usuario colocará la información del nombre y email del cliente. Entonces arrastremos ahora el contro Dialog dentro del popup.

image

 

9.  En el title coloque : “Gestión de Clientes”

image

 

10. Ahora será necesario colocar las cajas de texto para insertar los valores hacia la página. En este punto nos vamos a apoyar en el DataControl y utilizando las referencias a las instancias de las vistas,  arrastrarlas y mostrarlas como un formulario.  Vaya al data control y arrastre la referencia ClienteVO1 hacia la ventana de dialogo. Elija la opción ADF Form.

image

11. El asistente sugerirá que se indique los campos (cajas de texto) que tendrá la pantalla. En nuestro casos eliminaremos el campo ClienteId debido a que el usuario no ingresa ese dato (se genera en base al sequencial) Pulse OK.

image

 

 

12. El resultado será algo similar a lo mostrado a continuación.

 

image

 

13. Bien, analicemos la situación hasta este momento. Hemos creado un botón que levanta un popup con los datos de la instancia de la misma vista que usamos para poblar la tabla de la página. En este punto es importante destacar lo siguiente.

13.1 Como hemos explicado previamente, lo que vemos en la pantalla es una instancia de la vista ClienteVO. Es la misma vista que hemos usado para crear los datos de la tabla  así como para crear los datos del formulario que esta en el popup. Cuando hablamos de una instancia de la vista ClienteVO usted lo puede ver como una colección de objetos (registros) en memoria.

13.2 Al abrirse la ventana, la operación que debería ejecutarse debe ser crear un nuevo registro en la instancia de la vista. Esto sería como crear un nuevo objeto  sobre la colección de datos que representa la vista. Adicionalmente, el formulario que levantamos en el popup debería mostrar justamente ese nuevo registro y no otro registro de la colección.

13.3 Al pulsarse el botón OK, lo que debe pasar es que los datos que el usuario ingreso sobre el nuevo registro debería aplicarse sobre la BD.

Ok, para solucionar esto aprovecharemos algunas capacidades que ofrece ADF.

13.4 Para poder crear una nuevo registro sobre la vista ClienteVO, usaremos una operación llamada CreateInsert que es proporcionada por el framework (Todas las vistas tiene esa operación “out-of-the-box”)

13.5 Para llamar a la operación de inserción indicada en el paso anterior usaremos un listener que tiene el popup llamado PopupFetchListener que justamente se invoca cuando se levanta la ventana del popup.

13.6 Para poder volcar los datos que están en memoria debemos usar otra operación llamada “commit”.

13.7 Para llamar a la operación de commit usaremos un listener que tiene el control de dialogo y que justamente es invocado cuando el usuario pulse el botón OK. El listener se llama Dialog Listener.

13.8 Adicionalmente debemos capturar la acción de Cancelar, la cual debería eliminar los cambios que tiene actualmente el registro. La operación que invocaremos en este caso es “Rollback” que tambien lo ofrece el framework.

14. Bien, si ha notado se invocan tres operaciones del framework : CreateInsert, Commit, Rollback. Antes de poder usarlo, es necesario que estas operaciones estén disponibles en la página que estamos construyendo. Para registrar estas operaciones, haga clic sobre la pestaña de bindings.

image

 

 

15. Ahora pulse el botón (+) de la sección de Bindings . En la ventana mostrada elija la opción action . Pulse OK.

image

 

16. En la siguiente ventana mostrada elegir la Vista ClieteVO1 y la operación CreateInsert tal como muestra la siguiente figura. Pulse OK.

image

17. Repita el mismo proceso para crear las operaciones de Commit y Rollback, sólo que en este caso se debe elegir la raíz VentasAMDataControl.

image

18. En este momento usted debe tener algo similar a lo mostrado a continuación.

image

 

19. Ahora tenemos que programar los listener. Primero vamos a realizar el que indicamos en el punto 13.2. Elija el popup y en el propiedad PopupFetchListener defina el método cargarPopup()

image

 

20. Ahora diríjase al backing bean de la página

image

21. Ubique le método definido y coloque las siguientes líneas de código.

 

public void cargarPopup(PopupFetchEvent popupFetchEvent) {
    // Add event code here...
    DCBindingContainer bindings = (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry(); 
    OperationBinding operationBinding =
    bindings.getOperationBinding("CreateInsert");
    operationBinding.execute();
   
}

 

Lo que estamos haciendo básicamente es llamar al método CreateInsert creado en el punto 16.

21. Ahora toca programar los botones de OK y Cancel. En este caso, ambas acciones son ejecutadas por el listener DialogListener.  Define el método ejecutar() sobre dicha propiedad.

 

image

 

22. En el backing, sobreescribimos el método de la siguiente manera :

public void ejecutar(DialogEvent dialogEvent) {
   
    if (dialogEvent.getOutcome().name().equals("ok"))
    {
        DCBindingContainer bindings = (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry(); 
        OperationBinding operationBinding =
        bindings.getOperationBinding("Commit");
        operationBinding.execute();
       
    }
    else if (dialogEvent.getOutcome().name().equals("cancel"))
    {
        DCBindingContainer bindings = (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry(); 
        OperationBinding operationBinding =
        bindings.getOperationBinding("Rollback");
        operationBinding.execute();
    }
   
   
    // Add event code here...
}

 

Es claro que estamos capturando la acción del  dialogo y ejecutando el método respectivo.

 
23. Finalmente,  para que este popup pueda mostrarse es necesario indicar que el botón agregar del punto 4, debe invocar al popup del punto 6. Para ello haremos uso de la operación ShowPopupBehavior . Arrastre esta operación desde la paleta de componentes hacia el Boton Agregar que creamos previamente.

 

image

 

23. La página podría disponer de muchos popups, así que debemos indicar en la propiedad PopUpId del componente que popup vamos a usar. Entonces, ubíquese en dicha propiedad y haciendo clic sobre la opción Edit.

 

image

 

24. Elija el popup que creamos previamente. Pulse OK.

image

 

25. Finalmente, hay que forzar a que la tabla se refresque cada vez que se produzca alguna acción en el popup o en la ventana de dialogo. Entonces elija la tabla en la paleta de estructura.

 

image

 

26. Modifique sus propiedad PartialTriggers usando el menú contextual. Pulse la opción Edit.

image

 

27. Seleccione el popup y la ventana de dialogo y pulse OK.

image

28. Probemos hasta acá el funcionamiento de la página. Haga Run.

image

29. Pulse el botón Agregar y registre información de un nuevo cliente. Pulse Aceptar.

image

30. La tabla debe mostrar el nuevo registro agregado.

 

image

 

Si desea puede comparar su código con el proyecto culminado hasta este punto.

Descargar Código Final.

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