Guía del Desarrollador de Oracle ADF

Inicio→Oracle→JDeveloper : Guía del Desarrollador de ADF
Google

Creando un formulario de búsqueda utilizando POJO WS y el Web Service Data Control.




Contenidos de este práctico.

Introduccion.
Crear un Web Service desde una clase JavaBean.
Configurar el Data Control ADF WS.
Crear el Formulario.
Definir UI hints y validación.
Resumen.
Fuentes.

En el documento, este ícono, representa una captura de pantalla asociada a ese paso del tutorial. Haciendo Click sobre él,
cargará la imagen, y nuevamente click la ocultará.

Introducción.

El Web Service Data Control es una de las dos opciones que tienen los desarrolladores de ADF para acceder a JAX-WS Web Services. En el panel Data Controls de Oracle JDeveloper, se exponen colecciones de servicios, los métodos y atributos para el uso declarativo.

En este ejercicio práctico, usted debe realizar las siguientes tareas.

  1. Crear un Web Service desde una clase JavaBean.

  2. Configurar el Data Control ADF WS.

  3. Definir UI hints y validación.

A continuación se muestra una captura de pantalla de la aplicación finalizada y en tiempo de ejecución.


En la aplicación de ejemplo, usted utiliza un formulario ADF para consultar datos de un servicio Web, a través de una función de búsqueda que acepta argumentos complejos de tipo Employee. Los resultados de la búsqueda se muestra en una tabla sin la necesidad de actualizar la página entera.

Requisitos para realizar este práctico


Separador

1

Creando un servicio Web desde una clase JavaBean.

  1. Par crear el servicio Web, expanda PojoModelApplication Sources→oracle.pojo.facade y seleccione la clase java SessionFacade.java.

  2. Haga click derecho con el mouse sobre ella y del menú contextual, escoja Create Web Service


  3. En el dialogo Web Service, elija la opción "Java EE 1.5, with support for JAX-WS Annotations" para construir una anotación basado Web Service desde el modelo POJO.


  4. En el campo Web Service Name, escriba HrPojoWsService. El puerto WS se utiliza más tarde cuando se accede a los Servicios Web desde ADF.


  5. Click Next

  6. Una vez más, haga click en Next y aceptar todos los valores predeterminados en el paso 4 del asistente de creación de WS.


  7. La clase POJO expone métodos más de lo necesario para este práctico. Pulse Deselect All y, a continuación, seleccione todos los métodos que tienen en el nombre un findEmployee.


  8. Click en Finish para generar la definición del Web Service

  9. En Application Navigator de Oracle JDeveloper, seleccione la entrada SessionFacade.java, observe que su ícono ha cambiado para indicar la funcionalidad del servicios Web. Haga click derecho sobre él y elija Test Web Service del menú contextual.


    Nota: Si esta es su primera experiencia con la construcción de JAX-WS Web Services, puede hacer doble click a la entrada de la clase Java para ver las anotaciones agregó.


  10. Si en tiempo de compilación obtiene un mensaje de error (Por ejemplo, en este caso el mensaje de error es que no encuentra la variable "Locale" ). Haga click derecho sobre el error, y del menú contextual escoja Goto Source para ir al lugar donde se generó el error:

    importe java.util.Locale; utilizando combinacion de teclas [Alt] + [Enter].

  11. El test WS muestra el servicio Web de referencia de archivo WSDL, un cuadro de lista la expone las funciones de servicios Web, un formulario para solicitar parámetros de entrada y un área para mostrar la respuesta del servicio web.


  12. Marque la cadena de referencia WSDL URL y cópielo al portapapeles con la tecla del teclado Ctrl + C. También puede seleccionarlo haciendo click derecho sobre la cadena y eligiendolo desde la lista desplegable. Observe la siguiente captura:

    La Referencia WSDL es necesaria cuando se crea WS Data Control. Para esta práctica, el servicio Web se implementa en el servidor WebLogic integrado en Oracle JDeveloper.

  13. Haga Click en el botón Open WSDL para abrir el dialogo Select Web Service Decsription .


  14. Clik en Ok

  15. De la lista Operations, seleccione HrPojoWsPort.findEmploye(,), que es una función que espera un objeto de tipo Empleado


  16. En el formulario de parametros, seleccione el atributo departmentIdpara incluirlo en la solicitud, y cancele la selección de todas las otras opciones. Defina un valor de "60" para el atributo DepartmentID (sin comillas)

  17. Presione el botón Send Request


  18. El WS responde en el área de respuestas


  19. Cierre el WS tester


Separador

Para crear el servicio web de la definición de control datos, es necesario crear una referencia WSDL para que JDeveloper escriba la estructura de servicio en los metadatos XML.

1.
  1. Click derecho sobre el proyecto WsDcModely elija New del menú contextual para crear un nueva configuración WS Data control.

  2. En la New Gallery, seleccione la entrada Business Tier | Web Service

  3. Seleccione la entrada Web Service Data Control en el área Items y click en Ok.


  4. Escriba WsSampleBaseDC en el campo Name para definir el nombre para mostrar Data Control

  5. En el campo URL, pegue la referencia previamente WSDL que copió al probar el servicio Web.


  6. Presione Next para continuar la configuración y para validar el acceso WSDL

  7. De las 4 funciones de busqueda empleados expuestas por el WS, sólo seleccione la la función findEmployee y trasládela al panel de de seleccionados.


  8. Presione Next

  9. En el dialogo Response Format, acepte el formato por defecto, que es XML. Press Next.


  10. El último paso en la configuración (no se muestra como una captura de pantalla) le permite definir la autenticación para el acceso de servicios Web. Ignorar el cuadro de diálogo y pulse en "Finish" para generar la configuración de WS DCefine authentication


  11. Expanda la estructura del proyecto
    WSDcModel→Application Sources→adf.sample.WsSampleBaseDC→findEmployee y seleccione la opción "Return.xml". El documento "Return.xml" describe el conjunto de resultados de la respuesta WS.


  12. Abra la ventana Structure (Ctrl + Shift + S) y el inspector de propiedades (ctrl + shift + I)


    En la ventana Structure, seleccione uno de los atributos expuestos para editar sus atributos "Label" y Tool Tip.  El WS Data Control permite a los desarrolladores definir UI Hints que son atendidos por la capa view (vista) en tiempo de ejecución. Esto no sólo le permite definir la etiqueta consistente y control hints, sino que también, le permite definir a continuación, para que puedan ser traducidos.

  13. Establezca los valores de los atributos "Label" a Department Id y Tool Tip a Department Identifier como se muestra en la imagen de abajo. Es posible extraer la ventana de inspector de propiedades y se mueven más cerca de la ventana de la estructura con el ratón y doblar la tecla Ctrl presionada.

    Nota: Los valores de las propiedades se guardan al salir del campo de la propiedad. Así que asegúrate de seleccionar otra propiedad brevemente antes de pasar a editar otro atributo.


  14. Expanda la estructura del proyecto
    WSDcModel→Application Sources →adf.sample y haga doble click en el archivo "WSDcModelBundle.properties" para abrirlo en el editor. El archivo define claves y strings que usted proporciona para los atributos.

    Aunque no se necesita para este práctico, para crear una versión traducida, se duplica este archivo y se define el nombre del duplicado como WSDcModelBundle_< lang >.properties, donde < lang > debe ser reemplazado con "de" para el alemán, "fr" para Francia, etc.


  15. Para hacer lo mismo con los argumentos de entrada previsto por la la función findEmployee, seleccione la opción arg0.xml en el paquete WsSampleBase.findEmployee.params


  16. Haga doble click en la entrada arg0.xmlpara abrir el dialogo de edición dialog. Observe que esta es la segunda opción para definir atributos del WS DC

  17. Seleccione un atributo, por ejemplo. "departmentId", y presione el ícono para abrir el diálogo de edición.

    Nota: las etiquetas donde usted define los atributos, más tarde se mostrarán en el formulario de búsqueda. Las etiquetas editadas anteriormente son las que se muestran en la tabla de resultados


  18. Edite los textos Label Text y Tool Tip.

    Observe que hay una sección "Validation" en este cuadro de diálogo que le permite definir reglas de validación para atributos que luego se aplica en la capa de enlace de ADF. Tenemos un ejemplo de cómo usarlo en el final de este práctico


  19. Presione Save All cuando haya terminado.

Separador

Para crear el formulario de búsqueda, primero debe crear una página y luego insertar el formulario.

1. Creando una página con un formulario de búsqueda.
  1. Click derecho con el mouse sobre el proyecto ViewController y elija New del menú contextual

  2. En New Gallery, seleccione la categoria Web Tier | JSF y elija la opción JSF Page.


  3. Presione Ok

  4. En el dialogo Create JSF Page defina File Name como EmployeeSearch.jspx para el nombre del archivo

  5. Seleccione el Radio Button Quick Start Layout y presione el botón Browse

  6. Seleccione el diseño a one column como muestra la imagen siguiente. Esto creará una página con un panel divisor para separar las dos áreas de vistas.


  7. Presione Ok en ambos cuadros de diálogo para crear la página en blanco

  8. Expanda el panel Data Controls.

  9. Seleccionela entrada arg0 desde el nodo findEmployee_parameters. En este nodo se resuelve la estructura de atributos de tipo de entrada complejas - y la instancia del objeto Empleado.

  10. Arrastre el nodo arg0 a la zona superior de la página JSF y suéltelo como "Form | ADF Form" para generar el formulario de búsqueda.


  11. En el cuadro de diálogo Edit Form Fields, marque la casilla de opción Include Submit Button y Ok del cuadro de diálogo


  12. Para crear un formulario de diseño con múltiples columnas, en la ventana Structure seleccione el componente af:panelFormLayout. El componente Panel Form Layout se encuentra en la primera faceta o first facet del componente af:panelSplitter

  13. Abra Property Inspector y establezca el valor de la propiedad MaxColumns a 3 y la propiedad Rows a 4. El editor visual cambia inmediatamente el diseño del formulario de entrada.


  14. Desde en panel Data Controls debajo del nodo findEmployee(Object) | Return; arrastre la colección Return como una tabla hacia la segunda faceta del componente af:panelSplitter La collection object describe la estructura or the Web Service response to display in the table.


  15. Opcionalmente, reordenar los atributos de la exhibición de la tabla. Ignore selección de filas, el filtrado y clasificación por ahora.


  16. En el dialogo "Edit Action Binding"no hay nada que hacer. Observe el campo "Value" del argumento arg0 del método findEmployee(Object), que apunta a la variable de iterador creado al generar el formulario de búsqueda. Cierre el dialogo presionando Ok.


  17. Para evitar actualizaciones completa de la página en la búsqueda de empleados, es necesario configurar el comportamiento Partial Page Refresh (PPR). Para ello, seleccione el botón Submit del formulario de búsqueda y establecer su propiedad PartialSubmit a "true".


  18. Seleccione la tabla de resultados y busque su propiedad PartialTriggers. La propiedad PartialTriggers permite que un componente ADF Faces pueda escuchar un cambio en otro componente (por ejemplo, botón presionado).

  19. Haga click en el icono flecha abajo "" al final de la propiedad PartialTriggers y seleccione la opción Edit del menú contextual.

    Oracle JDeveloper soporta referencia a componentes de interfaz de usuario para escuchar, y evitar errores que pueden ocurrir con los componentes que figuran en el nombramiento de los contenedores.

  20. En el dialogo Edit Property, busque el botón submit. El botón submit no se muestra por su etiqueta Submit en el editor, pero sí su Id de componente. Usted debe encontrar la ubicación del botón en la primera faceta del PanelSplitter, Panel Form Layout footer facet.


    envíelo hacia el área Selected y luego presione OK

  21. Desde el panel Data Controls, arrastre el método findEmployee(Object) hacia la página JSF.


  22. En el diálogo Component Rebinding , seleccione las opciones de propiedades text y disabled ya usted desea mantener la configuración actual de estos.


  23. Presione OK en el dialogo.

  24. Alineado de texto con css



    Para asegurar que todos los criterios de búsqueda sean alineados a la derecha en los campos de entrada de texto, se requiere un poco de CSS. Mantenga la tecla CTRL presionada y haga click en todos los componentes que figuren en Panel Form Layout. El mejor lugar de hacer esto es la ventana Structure.

  25. Abra el panel Property Inspector, navegue a la propiedad ContentStyle y agregue:
    text-align:right;

    La propiedad ContentStyle asegura que el CSS se aplica directamente al área del valor del componente input.


  26. Seleccione la página EmployeeSearch.jspx y elija Run del menú contextual.


  27. Escriba valores en el campo del formulario de búsqueda, como se muestra en la siguiente captura, y pulse en Submit. La tabla debe cargar con los datos consultados del WS.


  28. Observe el campo de búsqueda y las etiquetas de encabezado de la tabla, que se leen en el Data Control UI Hints que ha creado antes. Mueva el ratón sobre un campo de búsqueda y espere a que aparezca un texto de ayuda -tool tip- que también se lee de la configuración del DataControl

Separador

Una ventaja de utilizar el WS Data Control es que le permite definir sus propias reglas de validación. Como por ejemplo, validación de rango o validación de patrones, verificación de correo electrónico,..etc. Así que vamos a agregar validación al proyecto. ¿Qué tal un modelo de validación que asegure que el ingreso del número de departamento –DepartmentID- se encuentre entre 10 y 999?

Siga estas instrucciones para agregar sus propias reglas de validación de validación al proyecto.

1.
  1. En el proyecto WsDcModel, seleccione la opción arg0 contenida en el paquete WsSampleBaceDC.findEmployees.params.

  2. Haga double click en la entrada arg0 para abrir el editor de atributos.


  3. Seleccione la entrada departmentId y click en el ícono edit.

  4. En el dialogo Edit Attribute, seleccione la entrada Validation y presione el botón New.

    Zoom Captura.


  5. De la lista desplegable, seleccione Regular Expression como Rule Type y en el campo Enter Regular Expression, copie y pegue esta cadena de caracteres
            ^[+]?[1-9]\d{1,2}(\.\d{1,2})?%?$

    Zoom Captura.


  6. Ahora, seleccionela pestaña Failure Handling. Aquí especificamos un mensaje de error, que también puede ser traducido a diferentes idiomas.

  7. Agregue un mensaje como el ejemplo que sigue, informando que el valor proporcionado debe estar entre 10 y 999. Asegúrese de agregar {departmentId} en algún lugar de su texto.


  8. Para ver por qué y cómo funciona esto, vaya al proyecto ViewController ->Web Content y haga doble click en la página EmployeeSearch.jspx para abrirla en el editor o simplemente selecciónela. En la ventana de Structure seleccione el componente input text departmentId | f: validador y luego abra el inspector de propiedades. Observe que el enlace –Binding- del atributo bindings ADF apunta a departmentId, y éste al atributo validator.


  9. Vuelva a ejecutar la página de búsqueda y escriba 1200 en el campo departmentId.

    Pulse submit y observe el mensaje de error arrojado por la capa de enlace.


  10. La bandera {departmentId} se convierte en una variable que le permite añadir la información del atributo en su mensaje. En este ejemplo queremos decirle al usuario que el valor que se ha introducido no es válido. Para esta extensión departmentId en el campo Expression.



Como último ejercicio en este práctico, se agrega la funcionalidad de tabla de filtro y clasificación de la tabla de resultados.

1.
  1. Seleccione el componente table en la ventana Structurey abra el panel Property Inspector.

  2. En Property Inspector, click en ícono "lápiz" para lanzar la configuración de los componentes


  3. En el dialogo Edit Table Column, seleccione las opciones Sorting y Filtering. La opción Filtering añade un enlace de búsqueda en el archivo de configuración PageDef y hace referencia a ella desde la propiedad de la tabla QueryListsner

    Espere por favor.


  4. Pulse el botón OK y ejecute la página EmployeeSearch.jspx


  5. En el buscador, ingrese 50 para el Department Id y pulse el botón Submit
  6. Para probar el filtrado de datos, escriba ST_CLERK en el campo JOB_ID.
  7. Pulse la tecla ENTER para filtrar la tabla.
  8. Haga click en el ícono Sort( de ordenar) en la cabecera de la columna MAIL para ordenar el resultado de la consulta y filtrar.

    Puede ir probando filtros...



En este práctico, usted creó un Servicio Web basado en un formulario de búsqueda que utiliza entradas de argumentos complejos como criterios de búsqueda. Para ello, ha realizado las siguientes tareas fundamentales:


Autor: Frank Nimphius.

Fuente (PDF): http://www.oracle.com/technetwork/developer-tools/adf/learnmore/index-101235.html

Traducción y adaptación: E-mail | Roselen

Si te gustó este material, por favor haz click aquí  para hacerlo público.

Si sos desarrollador web, esto te interesa y si no lo sos..., pues también te interesa!


Leer
El botón +1 es una forma rápida de indicar que algo es muy interesante o merece la pena que otras personas lo vean. Haz clic en el botón +1 para decir públicamente que te gusta algo. Tus +1 pueden ayudar a tus amigos y contactos, o a otros usuarios, a encontrar los mejores resultados cuando buscan en Internet.



Tema relacionado:


Un completo tutorial de Oracle Application Development Framework


Curso completo de Oracle ADF en español dividido en diez capitulos

Pajaro Loco

En este tutorial se explica paso a paso cómo crear una aplicación Java EE Web end-to-end utilizando Oracle JDeveloper y Oracle ADF Business Components. La aplicación usa varias tecnologías Java EE, incluyendo ADF Faces y JavaServer Faces (JSF); también utiliza ADF Business Components (ADF BC).

Finalidad: Aprender a utilizar JSF en una aplicación interfaz de usuarios y en una aplicación control de navegación; como también aprender a utilizar ADF Business Components para interactuar con la base de datos y business logic.

A continuación se muestra una breve descripción de cada uno de los capitulos.

Instalando la base de datos

Esta sección describe todos los pasos y requisito previos a realizar antes de empezar a construir su propia aplicación.

En este capítulo se describe cómo generar un modelo de datos (Data Model), lo que vendria a representar esquema de base de datos, usando ADF Business Components.

¿Quieres saber más? Checkea el Capitulo 1 de Oracle ADF

Desarrollo del Modelo de datos.

En este capítulo se describe cómo generar un modelo de datos (Data Model), lo que vendria a representar esquema de base de datos, usando ADF Business Components.

¿Quieres saber más? Checkea el Capitulo 2 de Oracle ADF

Definición de Flujos y Normas de las páginas JSF.

En este capítulo se describe como crear y definir los perfiles de cada una de las páginas JSF; como así también, especificar la navegación entre ellas.

¿Quieres saber más? Checkea el Capitulo 3 de Oracle ADF

Presentación y empaquetado del modelo de datos.

Este capítulo describe cómo definir las consultas SQL que comprende el modelo de datos de la aplicación, usando ADF view objects. Una view object u objeto vista es un componente que nos simplifica la tarea al trabajar con las filas de los datos de la interfaz de usuario.

¿Quieres saber más? Checkea el Capitulo 4 de Oracle ADF

Desarrollar la página principal de la aplicación.

Este capítulo describe cómo crear la página SRList. Esta página es una simple página de muestra y viene a ser algo así como el centro de la aplicación SRTutorial (más conocido como Home); la cual permite a los usuarios ver la información sobre las solicitudes de servicios.

¿Quieres saber más? Checkea el Capitulo 5 de Oracle ADF

Desarrollar una página Master-Detail.

En este capítulo, usted desarrolla una página maestra-detalle para que muestre una solicitud de servicio y su historial. Desde esta página, los usuarios podrán ver la historia de una solicitud de servicio. También podrán agregar notas detalladas de la solicitud de servicio.

¿Quieres saber más? Checkea el Capitulo 6 de Oracle ADF

Implementar capacidades de Transacciones.

Este capítulo describe cómo construir las páginas que trabajan en conjunto para crear una solicitud de servicio. El proceso de solicitud de servicio implica tres páginas principales: una para especificar el producto y su problema, una para confirmar los valores a ingresar, y una que se encargue de mostrar el ID de esa solicitud de servicio.

¿Quieres saber más? Checkea el Capitulo 7 de Oracle ADF

Desarrollo de una página de búsqueda(Search Page).

Este capítulo describe cómo construir una páginas de búsqueda (Search Page) utilizando JavaServer Faces y ADF components.

¿Quieres saber más? Checkea el Capitulo 8 de Oracle ADF

Desarrollo de una página de edición(Edit Page).

Este capítulo describe cómo construir una páginas de edición SREdit (Edit Page). En la aplicación SRDemo, esta página es la que permite editar las solicitudes de servicios todos los usuarios Gerentes y Técnicos.

¿Quieres saber más? Checkea el Capitulo 9 de Oracle ADF

Habilitar Seguridad e implementar Oracle Application Server 10g.

En este capitulo, usted implementa la seguridad de la aplicación. También puede usar JDeveloper para crear un archivo deployable J2EE Web que contiene su aplicación y algunos descriptores de despliegue requerido.

¿Quieres saber más? Checkea el Capitulo 10 de Oracle ADF


Home Mail Icono Comentarios Arriba Arriba


Un café y muy pronto mucho más sobre Oracle ADF.

¡Hasta el próximo practico!




FIN