El desarrollo de aplicaciones dinmicas Web con Oracle ADF Parte 1: Crear una aplicacin Web de fusin y construccin de los servicios de negocio Paso 1: Crear una aplicacin Web de fusin Paso 2: Crear los servicios de negocio Parte 2: Desarrollo de la interfaz de usuario Parte 3: Mejora de la interfaz de usuario El desarrollo de aplicaciones dinmicas Web con Oracle ADF En este tutorial se muestra cmo crear una aplicacin web ricos que interacta con una base de datos. Usted va a utilizar Oracle JDeveloper 11 g versin 11.1.2.0.0 y el marco de Oracle ADF para construir la aplicacin, y en el proceso que va a trabajar con los componentes de Oracle ADF de negocios, Oracle ADF Faces Rich Client componentes y flujos de trabajo de Oracle ADF . Leer ms ...

Propsito

Duracin 2 horas

Aplicacin

La aplicacin que se crea se muestra informacin sobre los departamentos y empleados. Crear varias pginas JSF que le permiten consultar y actualizar los datos en la base de datos. Para ver la solicitud completa va a crear, haga clic en el botn Descargar para descargar una postal de la aplicacin final, y luego descomprimirlo en la carpeta de MYWORK JDeveloper.

Parte 1: Crear una aplicacin Web y construccin de la fusin del Servicio de Negocio Cuando se trabaja en JDeveloper, a organizar su trabajo en proyectos dentro de una aplicacin. JDeveloper proporciona varias aplicaciones de plantilla que puede utilizar al crear una aplicacin y proyectos. Las aplicaciones de plantillas estn preconfigurados con un conjunto bsico de las tecnologas que se necesitan para el desarrollo de los distintos tipos de aplicaciones y crear su entorno de trabajo mediante la seleccin de la plantilla que mejor se adapte a sus necesidades. A continuacin, puede configurarlo para aadir cualquier otra tecnologa que va a utilizar.

En la primera parte de este tutorial vamos a crear una aplicacin Web nueva fusin y construir componentes de negocio reutilizables que tendrn acceso a la base de datos. Usted va a utilizar la tecnologa de Oracle ADF Negocios Componentes para mapear objetos Java a las tablas existentes en su base de datos. Paso 1: Crear una aplicacin Web de fusin Inicio JDeveloper seleccionando Inicio> Programas> Oracle Fusion Middleware 11.1.2.0.0> JDeveloper 11.1.2.0.0 Studio

1. En el cuadro de dilogo Seleccionar funciones, seleccione Developer Studio y haga clic en Aceptar.

La formacin, que se basa en el papel del usuario, permite que el entorno JDeveloper para adaptar s mismo. Para ello, la eliminacin de elementos innecesarios de los mens, las preferencias, la nueva galera, e incluso los campos individuales en los dilogos. Leer ms ... Incluso puede controlar la configuracin de los valores por defecto para los campos en los dilogos dentro de la herramienta. Cuando empiece a JDeveloper, se le pedir que elija un papel que

describe cmo se va a utilizar JDeveloper. Si usted elige un papel de "Desarrollador Java" y "de bases de datos" y "Desarrollo de personalizacin", obtendr una experiencia totalmente diferente! Si un cuadro de dilogo le preguntar si desea importar las preferencias de una instalacin anterior de JDeveloper, haga clic en NO. Cerca de la punta de la ventana el da. 2. Una vez cargado, el IDE JDeveloper aparece. La primera vez que se abre JDeveloper, se muestra la pgina de inicio. Se puede volver a invocar a la pgina de inicio ms tarde seleccionando Ayuda> Pgina de inicio. Observe las distintas opciones disponibles para ayudarle a aprender acerca de JDeveloper. Despus de explorar algunas de estas opciones, cierre la pgina de inicio haciendo clic en la X en su ficha (la X aparece al pasar el ratn sobre la pestaa).

3. Haga clic en el enlace de nueva aplicacin en el navegador de aplicacin.

4. En la Nueva Galera, seleccione la aplicacin Web de fusin (ADF) y haga clic en Aceptar.

5. JDeveloper cargas de las caractersticas necesarias para una aplicacin web de fusin y la Fusin Crear aplicaciones Web (ADF) lanza el asistente. En el nombre de su pgina de la aplicacin de la HRSystem asistente tipo, como el nombre. Si es necesario, puede cambiar la ruta del directorio para crear sus archivos en otra ubicacin. En el mbito de aplicacin prefijo de paquete establecer el valor de ser demo y haga clic en Siguiente.

6. En el nombre de su pgina del proyecto asegurar que el nombre del proyecto es el modelo (por defecto). Tenga en cuenta que ADF de Componentes de Negocios y Java se enumeran como las caractersticas del proyecto de una aplicacin Web de fusin.

Haga clic en Siguiente. 7. Configure la pgina de configuracin de Java le permite definir un paquete por defecto, una ruta de cdigo fuente de Java y un directorio de salida. Haga clic en Siguiente para aceptar los valores por defecto.

8. En el segundo nombre de su pgina del proyecto, asegrese de que el nombre del proyecto es ViewController. Desplcese por la lista de las caractersticas del proyecto para ver los tipos de tecnologas que se pueden utilizar con una aplicacin Web de fusin.

Haga clic en Siguiente.

9. En la pgina Configurar ajustes de Java aceptar los valores predeterminados y haga clic en Finalizar para crear la aplicacin Web y proyectos de fusin.

10. La aplicacin HRSystem y los dos proyectos se muestra en el Navegador de aplicaciones a la izquierda de la pantalla.

Ntese tambin la lista de verificacin en la parte derecha de la pantalla. Leer ms ... Esta lista se muestra por defecto cuando una aplicacin Web de fusin se crea. Est diseado como una gua para llevarlo a travs de las tareas involucradas en la construccin de este tipo de aplicacin. Los prximos pasos que muestran cmo la lista de verificacin podra ser utilizado durante el desarrollo de una aplicacin. Paso 2: Crear el Servicio de Negocios 1. En la vista general lista de verificacin, haga clic en Conectar a un paso de bases de datos.

2. El paso se expande mostrando informacin til, como requisitos previos necesarios para la realizacin de la tarea y las instrucciones detalladas sobre cmo realizar la tarea. Haga clic en el botn Crear una conexin a la base.

3. Indique las siguientes propiedades para la nueva conexin que est creando:

Nombre de conexin

HRConn

Nombre de usuario

hr

Contrasea

hr

4. Introduzca la adecuada configuracin de Oracle JDBC para que apunte al destino adecuado, el puerto y el SID de la base de datos. Haga clic en el botn Probar conexin para comprobar que puede conectarse correctamente.

5. 6. Haga clic en Aceptar. 7. Haga clic en la flecha hacia abajo para reducir el tamao de conectarse a un paso de bases de datos.

8. En la lista de verificacin, establecer el estado de la Conexin a una base de datos paso a Hecho.

9. Haga clic en los Servicios de Servicios de Proteccin de paso para expandirla, haga clic en el botn Ir a la sub-pasos.

10. En la lista de sub-pasos, haga clic en los objetos de entidad Crear y Asociaciones subpaso.

11.

Haga clic en los objetos de entidad y el botn Crear asociaciones.

12. En el Proyecto de Seleccin de dilogo Accin, seleccione el proyecto de modelo y haga clic en Aceptar.

13. En el cuadro de dilogo Iniciar Negocio Componentes del Proyecto seleccione la conexin HRConn si no est ya seleccionado. Haga clic en Aceptar.

14. Los componentes de negocio de asistente Crear tablas lanza. En la pgina de la entidad objetos, haga clic en el botn Consulta para examinar el diccionario de datos y ver las tablas disponibles.

15. Seleccione la tablas Departamentos y Empleados de la lista disponible y haga clic en la flecha derecha para mover la seleccin a la lista de seleccionados. Este paso crea objetos actualizables entidad en base a las tablas seleccionadas.

Haga clic en Siguiente para continuar. 16. En la entidad con sede Ver pgina Objetos de los departamentos se mueven asistente, (HR.DEPARTMENTS) y empleados (hr.employees) a la lista de seleccionados. Este paso crea juego y ver los objetos DepartmentsView EmployeesView para realizar consultas sobre los objetos de entidad que acaba de crear.

Haga clic en Siguiente para continuar. 17. En la consulta basada en Ver pginas Objetos, haga clic en el botn Buscar y luego mover los trabajos a la lista de seleccionados. Este paso crea un objeto de vista de slo lectura que se consulta la tabla Jobs. Haga clic en Siguiente para continuar.

18. En la pgina del mdulo de aplicaciones, haga clic en Finalizar para crear los componentes de negocio en el proyecto de modelo.

19. En la lista de verificacin, establecer el estado de los objetos de entidad Crear y paso Asociaciones de Hecho.

20.

Haga clic en el botn Paso 3 Cierre.

21. Haga clic en el vnculo Volver al lista de verificacin y establecer el estado de los Servicios de Proteccin de Servicios paso a Hecho

22. En el Navegador de aplicaciones botn derecho del ratn y seleccione Ejecutar AppModule para invocar el probador de mdulo de la aplicacin. Este es

un pequeo giro basado en la aplicacin que le permite probar los componentes de negocio ADF que acaba de crear.

23. En la ventana de Oracle Business Explorador de componentes, haga doble clic en el nodo EmpDeptFkLink1 para mostrar el departamento y los datos de los empleados. Navegar entre los registros utilizando el botn Siguiente y el aviso automtico de sincronizacin maestro-detalle.

24. Haga clic en el botn Ver especificar criterios (icono de los prismticos) en la barra de herramientas principal, introducir criterios de bsqueda para los datos. Especifique 1700 en el campo LocationID y haga clic en el botn Buscar para ejecutar la consulta.

25. La forma ahora slo muestra los departamentos en esta ubicacin. Use el botn Siguiente para desplazarse a travs de los departamentos en 1700 Location.

Tiene que eliminar el valor del parmetro de los criterios de bsqueda para acceder a todos los departamentos de nuevo. 26. Cierre la ventana de Oracle Business Component Browser, y de nuevo en JDeveloper, haga clic en Guardar todo el icono en la barra de men JDeveloper, o seleccione Archivo> Guardar todo en el men. Parte 2: Desarrollo de la interfaz de usuario JavaServer Faces (JSF) es un estndar de la tecnologa Java EE que simplifica el desarrollo Web. En esta parte del tutorial crear una pgina JSF para acceder a los componentes de negocio que cre en la parte anterior. Leer ms ... Paso 1: Crear una pgina JSF 1. Haga clic derecho en el nodo del proyecto ViewController en el Navegador de aplicaciones y seleccione Nuevo ...

La parte web de la aplicacin est desarrollada en un proyecto independiente llamado el proyecto ViewController, que ha creado en la parte anterior de este tutorial al crear la aplicacin web de fusin. Leer ms ... Mantener una separacin entre la capa de modelo y la interfaz de usuario mediante el desarrollo en proyectos separados, hace que la capa de servicios empresariales reutilizables. 2. En la Nueva Galera, desplcese a JSF / Facelets en el nodo de nivel Web, y elija Pgina en el panel de elementos. Haga clic en Aceptar.

3. En el cuadro de dilogo Crear JSF, cambiar el nombre de la pgina para DeptEmpPage.jsf, asegrese de que el tipo de documento botn de radio est ajustado a Facelets, y en la pestaa Diseo de pgina seleccionar la plantilla de pgina y seleccione el botn de radio Oracle Tres Diseo de columna.

Haga clic en Aceptar. 4. La pgina muestra en el Editor de Diseo. La plantilla tiene tres columnas, pero slo se necesitan dos en la pgina, por lo que eliminar la tercera. Coloca el cursor en la seccin ms a la derecha llamada final y haga clic para seleccionar Eliminar.

Con af: pageTemplate seleccionado en el panel Estructura, en el inspector de propiedades, establezca la propiedad startColumnSize a 350.

5. Aadir algunos componentes de diseo para la pgina. En la paleta de componentes, expanda el grupo de diseo de componentes y localizar el componente Accordion Panel Interactivo en los contenedores y los encabezados de seccin. Arrastre en la faceta de inicio de su pgina.

6. Seleccione af: s howDetailItem (el acorden del panel que acaba de agregar a la pgina en el paso anterior) en la ventana de la estructura y en el inspector de propiedades, cambie su propiedad de texto a los departamentos.

7. Haga clic con el acorden de nuevos departamentos y elija Insertar despus del artculo Mostrar detalles - Departamentos> Mostrar detalles del artculo. Esta es otra de acorden a su pgina.

8. Cambiar la propiedad Text para ms informacin.

Esta es otra forma de agregar componentes a una pgina mediante los mens de contexto directamente en el Editor de diseo (en lugar de arrastrar y soltar desde la paleta de componentes). 9. De los componentes de diseo, haga clic y arrastre un componente Panel Splitter en la faceta de centro de la pgina.

10. En el inspector de propiedades, cambie la propiedad Orientacin del divisor de nuevo a la posicin vertical.

11. De los componentes de diseo, arrastre un componente Panel de Coleccin en la primera faceta en la parte superior del separador en su pgina.

Una coleccin de paneles es un componente que los componentes de los agregados de la coleccin como la mesa, TreeTable y el rbol de pantalla estndar / aplicacin de mens, barras de herramientas y elementos de la barra de estado. 12. Utilizacin de la ventana Estructura, arrastre un componente Panel de pestaas en la segunda faceta del divisor de la pgina.

13. Haga doble clic en el DeptEmpPage.jsf en la parte superior de la pgina para verlo en su totalidad. La pgina debe ser similar a la siguiente imagen.

14. Haga clic en el icono de Guardar todo en la barra de men de JDeveloper para guardar su trabajo. Paso 2: Enlazar datos controles a la pgina En este paso se unen los componentes de negocio que ha creado en la parte 1 de este tutorial para la interfaz de usuario. Usted hace esto con slo arrastrar y soltar las operaciones, detrs de las escenas de la capa de modelo ADF se encarga de la unin de los datos para usted. 1. En el Editor de Diseo, haga clic en el acorden Departamentos para expandirlo.

2. En el Navegador de aplicaciones ampliar el acorden de datos controles, y en el que se expanda AppModuleDataControl para exponer los servicios de negocio que ha definido en la primera parte de este tutorial.

3. Arrastre el control DepartmentsView1 datos en el acorden Departamentos en tu pgina JSF. Cuando se le pida para elegir el tipo de componente que desea crear, elija Forma> ADF de slo lectura del formulario.

4. En el Formulario de editar campos de dilogo, marque la casilla de verificacin controles incluyen la navegacin y haga clic en Aceptar.

5. En los controles de datos acorden ampliar DepartmentsView1 para exponer los campos que contiene, as como el control relacionado con EmployeesView3 para los empleados de cada departamento. Tenga en cuenta que estos son los "detalles" a los empleados por el "maestro" departamentos - estn vinculados, por lo que los empleados que se ven en este objeto de la vista son los que pertenecen al departamento en particular que usted est mirando.

6. Arrastre el control EmployeesView3 datos en la coleccin de paneles que cre en la primera faceta de la PanelSplitter. Cree que como un alimentador automtico de documentos de slo lectura tabla.

7. En el cuadro de dilogo Editar columnas, seleccione la fila nica en la seleccin de la fila, y seleccione las casillas de clasificacin y filtrado. Haga clic en Aceptar.

8. Arrastre el control EmployeesView3 datos de nuevo pero esta vez en ShowDetailItem en el componente de panelTabbed en la segunda faceta de la panelSplitter. Cree que como un formulario de ADF.

9. En el Formulario de editar campos de dilogo, active la casilla Enviar casilla botn de verificacin. Usando su ratn y la tecla Shift seleccionar la parte inferior tres campos de la lista: CommissionPct ManagerID, DepartmentID y eliminarlos pulsando en el botn Eliminar en la esquina superior derecha del cuadro de dilogo. Haga clic en Aceptar.

10. Haga clic en Guardar todos los icono en la barra de men JDeveloper para guardar su trabajo. Haga clic derecho en la pgina y seleccione Ejecutar. Esto compilar el proyecto, construirlo, y el lanzamiento de la integracin de WebLogic Server para ejecutarlo. Luego de un navegador Web abre para mostrar la pgina. Usted puede seguir el progreso de estos pasos en la ventana de registro en JDeveloper.

11. Una vez que la pgina se muestra en el navegador, cambiar el tamao del rea de la pgina utilizando el divisor para mostrar los datos del departamento. A continuacin, utilice el botn Siguiente para desplazarse a travs de los departamentos. Tenga en cuenta que los datos de los empleados los cambios correspondientes en la tabla y el formulario de debajo.

12.

Cierre la ventana del navegador. Paso 3: Especificar los servicios de negocio

En estos pasos a perfeccionar los servicios de negocio mediante la adicin de reglas de validacin, el formato y los valores por defecto. 1. En el Navegador de aplicaciones bajo el modelo de proyecto, busque el objeto entidad Empleados y haga doble clic en l para abrirlo para su edicin.

2. En la ventana employees.xml, haga clic en la lengeta atributos y busque el atributo sueldo, y seleccionarlo. Desplcese hacia abajo en la pgina de la ficha de reglas de validacin y haga clic en el icono Agregar para agregar una nueva regla de validacin.

3. En el cuadro de dilogo Agregar regla de validacin de elegir van desde la cada de Tipo de regla de la lista desplegable. Tenga en cuenta los distintos tipos de otras normas se pueden definir aqu. En el campo del operador asegurarse de que el valor se establece entre, y de tipo 0 para el valor mnimo y 99.000 para los campos de valor mximo.

4. Haga clic en la ficha Tratamiento de la falta de definicin de un mensaje de error que aparece cuando se supera la validacin. En el campo Tipo de mensaje de texto un mensaje de error como "fuera de Salario rango de 0 a 99.000" y haga clic en Aceptar.

5. A continuacin, agregue un valor por defecto para el campo de la fecha de contratacin - de modo que cuando un nuevo empleado se crea por defecto la fecha de contratacin a la fecha actual. En la ventana employees.xml, busque el atributo HireDate, y seleccionarlo. En la seccin Valor del inspector de propiedades, busque el valor predeterminado de la propiedad Tipo y elija Expresin, a continuacin, establecer la propiedad Valor predeterminado para adf.currentDate. Esto asegurar que el valor por defecto para un nuevo registro est establecido en la fecha de hoy.

6. Tambin puede especificar los atributos de la interfaz de usuario Consejos para controlar la forma en que mostrar por defecto en las formas y las pginas que los utilizan. En este paso se agrega una mscara de formato por defecto para el campo de la fecha de contratacin. Tambin puede especificar las etiquetas y descripcin ayuda aqu. En la seccin de la interfaz de usuario Sugerencias del inspector de propiedades, busque la propiedad Tipo de formato y seleccione Fecha Simple.

Establecer la propiedad Formato dd / MMM / yyyy.

7. Ejecutar la pgina de nuevo para poner a prueba las mejoras que ha hecho.

8. Prueba el campo HireDate. Tenga en cuenta que tan pronto como haga clic en el campo se le proporciona un ejemplo del formato de la fecha (como lo define).

9. Intente actualizar el campo de uno de los empleados con una fecha no vlida, como 11/11/123 y observe el mensaje de error al hacer clic en el botn Enviar.

Utilice el icono de reloj / calendario al lado del campo para mostrar un calendario emergente y elija una fecha vlida.

10. Actualizar el campo Salario de un valor que va a romper la validacin que ha creado anteriormente (por ejemplo, -9) y haga clic en el botn Enviar para ver el mensaje de error que ha creado.

11. Navegue hasta el departamento 50 y observe que ahora puede visualizar los datos en la tabla de empleados. Haga clic en uno de los encabezados de columna en la tabla para ordenar los datos en la tabla.

12. Haga clic en un encabezado de la columna de la tabla y arrastre para cambiar su posicin en la tabla.

El orden de las columnas nuevas se ve de la siguiente manera:

13. En el campo Filtro por encima de la columna LastName%, tipo B y pulse Intro para filtrar la tabla para mostrar slo aquellos empleados cuyo apellido comienza con la letra B.

14. Experimentar con los otros mens y los botones de la tabla para ver una funcionalidad adicional. Una vez que termine, cierre el navegador y volver a JDeveloper. Paso 4: Mejorar la pgina JSF En los prximos pasos a mejorar la interfaz de usuario mediante la modificacin de la tabla de empleados para agregar la capacidad de hacer la seleccin de columnas, reordenando los campos de la ficha del empleado ms detalles, y por la unin de los componentes de negocio para una representacin grfica. Usted hace esto con slo arrastrar y soltar las operaciones - detrs de las escenas de la capa de modelo ADF se encarga de la vinculacin de datos para usted. 1. Haga clic en la pestaa DeptEmpPage.jsf para volver a la pgina en el Editor de Diseo. Seleccione la tabla Empleados en el Editor de Diseo o en el panel Estructura. Establezca la propiedad seleccin de columnas de la tabla a solo.

2. En la ventana Estructura de seleccionar el panelFormLayout que rodea los detalles del empleado campos de la ficha showDetailItem.

3. En el inspector de propiedades, establezca la propiedad filas a 5.

Al ejecutar la pgina en un paso posterior se ver que los campos de la ficha estn dispuestos en dos columnas. Leer ms ... Observe que puede controlar el diseo de los objetos dentro de un contenedor de diseo mediante el establecimiento de las propiedades del contenedor. 4. A continuacin se agrega una representacin grfica de los datos a la pgina, esto se hace utilizando la visualizacin de datos ADF conjunto de componentes JSF. En el Editor de Diseo, haga clic en el acorden Ms informacin para expandirla.

A continuacin, arrastre el control EmployeesView3 datos en el acorden Ms informacin y crear como un grfico.

En el grfico se puede visualizar como imgenes estticas PNG o un componente de Flash interactiva. Leer ms ... A controlar estos comportamientos a travs de las propiedades del componente grfico. 5. En la Galera de componentes elegir Pie de la lista de los grficos a la izquierda y Pie de nuevo como el tipo de grfico. En el panel inferior, seleccione el diseo tercio de inicio rpido.

A continuacin, haga clic en el botn Aceptar. 6. En el cuadro de dilogo Crear grfico Pie elegir Salario en el campo de Pie y arrastrar y soltar en el campo LastName sectores. Haga clic en Aceptar.

7. Haga clic en Guardar todos los icono en la barra de men JDeveloper para guardar su trabajo y luego haga clic derecho dentro de la pgina y seleccione Ejecutar en el men contextual.

8. Navegue hasta el departamento 50. Debido a que se establece la seleccin de columna a una sola, tenga en cuenta los comportamientos adicionales para la tabla que estn disponibles una vez que elija una columna - tales como la congelacin y resumen. Seleccione una columna, haga clic en el botn de congelacin. Ahora usa la barra de desplazamiento horizontal para ver las columnas ms a la derecha.

9. En el departamento de 50 ampliar el acorden Ms informacin y notificacin de la grfica y el emergente que aparece cuando se ciernen sobre l con el ratn.

10. Desplcese a la pestaa de showDetailItem1, y observe cmo los campos se han reorganizado en dos columnas.

Cuando termine, cierre el navegador y volver a JDeveloper. Paso 5: Agregar una mayor complejidad a los Servicios de Negocios

En este paso se agrega un servicio de nuevos negocios para la aplicacin para mostrar un subconjunto de los campos de la tabla empleados, junto con el nombre de departamento de la tabla de departamentos. Tambin agregar un campo calculado para calcular el salario anual de un empleado y una lista de valores de campo para los nombres de departamento. Oracle ADF de Componentes de Negocios le permite crear los componentes actualizables complejos de una manera declarativa. 1. En el Navegador de aplicacin haga clic en el paquete de demo.model y elija Objeto en Nueva vista.

2. En la pgina Nombre del objeto Crear vista asistente, escriba EmpDetails como el nombre de la entidad y retener a objeto como origen de datos por defecto.

Haga clic en Siguiente. 3. En la pgina de la entidad objetos del asistente primero seleccione los empleados y la lanzadera hacia la derecha, a continuacin, seleccione la entidad Departamentos y aadir tambin que el panel Seleccionado. Tenga en cuenta que slo los empleados de la entidad tiene la casilla de verificacin actualizable comprobado - los departamentos de la entidad se utiliza para leer los datos solamente.

Haga clic en Siguiente. 4. En la pgina Atributos del asistente, traslado de los atributos siguientes empleados en el panel Seleccionado: Empleado, Nombre, Apellido, Correo electrnico, Salario, Fecha de contratacin JobId. Y de la entidad departamentos, servicio de transporte los siguientes atributos en el panel Seleccionado: DepartmentName DepartmentID,.

Haga clic en Finalizar para completar la creacin del objeto de la vista. 5. A continuacin se agrega un atributo calculado al objeto vista - un atributo que se muestra el salario anual del empleado. En la aplicacin Navigator, haga doble clic EmpDetails para abrirlo.

6. Haga clic en la lengeta y los atributos de la lista desplegable elija Nuevo atributo.

7. En el nuevo objeto Ver SalarioAnual tipo de atributo de dilogo como el nombre para el nuevo atributo y haga clic en Aceptar.

8. En la pestaa Detalles en la parte inferior de la lista de atributos, establezca las propiedades siguientes para el atributo SalarioAnual: Campo Nombre Valor AnnualSalary

Tipo

Number

Valor predeterminado

Expression (Checked)

Valor

Salary * 12

9. . 10. En los pasos siguientes se agrega una lista de valores para un campo basado en un conjunto de valores almacenados en otra tabla. En este caso se crea una lista de valores de ttulos de trabajo posible en base a la tabla de trabajos. En el editor de EmpDetails.xml clic en la ficha Atributos de los dedos y seleccione el atributo Id de Tarea. Haga clic en la ficha Lista de valores en la parte inferior de la lista de atributos.

11. En la ficha Lista de Valores haga clic en el botn Agregar para crear una lista de valores.

12. En la lista de Crear Valores de dilogo, haga clic en el signo ms verde a la derecha del campo de la lista de orgenes de datos. En el cuadro de dilogo Ver descriptores de acceso, JobsView lanzadera en el panel de vista de acceso.

Haga clic en Aceptar.

13. De vuelta en la lista de Crear Valores de dilogo, elija JobId como el atributo de lista.

14. Sin embargo en la lista de Crear Valores de dilogo haga clic en la pestaa de la interfaz de usuario Sugerencias y seleccione Cuadro combinado con lista de valores como el tipo de lista predeterminado y luego traslado el atributo Ttulo del trabajo en el panel Seleccionado.

Haga clic en Aceptar. Guarde su trabajo. 15. Si ahora se aade el nuevo objeto que ha creado para el modelo de datos. En el Navegador de aplicaciones, haga doble clic para abrirlo AppModule para la edicin y elegir el modelo de datos de lengeta.

16. Haga clic en el objeto de vista EmpDetails y transporte que en el panel Modelo de Datos. Guarde su trabajo.

17. Utilice el Explorador de Componentes de Negocio para probar la nueva funcionalidad que acaba de incorporarse a travs del objeto de la vista EmpDetails. En el Navegador de aplicaciones botn derecho del ratn y seleccione Ejecutar AppModel para invocar el probador.

18.

Haga doble clic en el objeto de vista EmpDetails1.

19. Tenga en cuenta que el nuevo campo calculado SalarioAnual se muestra, junto con DepartmentID y DepartmentName. Ninguno de los que aqu se pueden actualizar.

20. Use la lista desplegable para el campo Id de Tarea para elegir un nuevo trabajo.

21.

El campo se rellena con el nuevo trabajo.

22. Cierre la ventana del Explorador de Componentes de Negocio sin confirmar los cambios. Parte 3: Mejora de la interfaz de usuario

Aplicaciones Web por lo general tienen ms de una pgina en ellos. En esta parte del tutorial que agregar otra pgina - una pgina de bsqueda - a su aplicacin y uso del alimentador automtico de documentos de trabajo Diagrammer de flujo para definir las reglas de navegacin entre las dos pginas. A continuacin utilizar las funciones del Marco de ADF Faces para aadir funcionalidades extra a las pginas. Finalmente se crea un fragmento de pgina reutilizables y agregarlo a la pgina DeptEmpPage. Leer ms ... Esta es la pgina de bsqueda de la aplicacin.

Paso 1: Crear un flujo de pgina 1. En el Navegador de la aplicacin, busque el archivo adfc-config en la pgina de los flujos de los nodos del proyecto ViewController. Haga doble clic en l para abrirlo en el editor. Aqu es donde usted va a definir la navegacin de la aplicacin.

2. Arrastre el archivo DeptEmpPage.jsf desde el Navegador de aplicaciones en el vaco adfc-config diagrama.

3. Desde la paleta de componentes de arrastrar y soltar un componente de vista en el diagrama de ADF-config, y cambiar el nombre de la consulta. Esto representa la nueva pgina JSF que est a punto de crear.

4. Desde la paleta de componentes seleccionar caso de control de flujo y luego haga clic en el DeptEmpPage y arrastre una lnea a la pgina de consulta.

El nombre de este goQuery lnea.

5. Desde la paleta de componentes seleccionar otro caso de control de flujo y luego crear un flujo contrario de la pgina de consulta a la DeptEmpPage. El nombre de este reflujo.

6. Haga doble clic en la vista de consulta en el diagrama para crear la nueva pgina. En el cuadro de dilogo Crear JSF aceptar el botn predeterminado Facelets radio, y con el botn de inicio rpido diseo seleccionado, haga clic en Examinar.

7. En la Galera de componentes, conservar el valor predeterminado Una categora de columna, escriba y el diseo, pero revise la casilla de verificacin Aplicar Temas en el panel de Opciones.

Haga clic en Aceptar y de nuevo en Aceptar para crear la pgina. 8. Para agregar la funcionalidad de bsqueda a los empleados a la pgina, abrir el acorden controles de datos, y localizar EmpDetails1. (Si usted no ve que haga clic en el botn Actualizar).

9. Ampliar el control de datos EmpDetails1 y expanda el nodo nombre Criterios debajo de ella. Seleccione todos los atributos Queriable y arrastrarlo a la nueva pgina query.jsf. Cree que como una consulta> Panel de consulta ADF.

10. En los datos de los controles acorden, seleccione el control EmpDetails1 de datos y arrastre en la zona centro de la pgina debajo de la componente de consulta. Cree que como una forma> Formulario de ADF.

En los formularios de edicin de detalles, ver tanto los controles de navegacin son los y las casillas de verificacin Enviar Incluye botn. Haga clic en Aceptar.

11. Con la panelFormLayout an seleccionado, utilice el inspector de propiedades para establecer la propiedad filas a 5.

12. En la ventana Estructura de localizar en el botn Enviar, haga clic derecho y seleccionar Insertar despus af: comando: Botn - Botn para enviar>.

13. En el inspector de propiedades cambiar el texto del nuevo botn a la espalda y de la propiedad Accin de seleccionar de nuevo de la lista desplegable. Esto hace que el botn para realizar la navegacin que se definen en el diagrama de flujo de la pgina.

14. A continuacin, aadir las operaciones de transaccin a la pgina para que pueda cometer y deshacer los cambios. En la Paleta de Control de Datos de ampliar el mdulo de aplicacin de nivel de nodo de operaciones para localizar el compromiso y las operaciones de desmantelamiento. Arrastre la operacin de confirmacin en la ventana de la estructura antes de que el primer botn. Cuando se le pida elegir un destino para colocar el botn ADF.

15.

Repita los mismos pasos para la operacin de reversin.

16. En el inspector de propiedades, para la reversin y de los botones Confirmar, restablecer la propiedad de movilidad reducida a los valores predeterminados para que los dos botones de siempre seleccionables.

17. Haga doble clic en la ficha Query.jsf para maximizar la pgina en el Editor de Diseo. Su pgina debe tener el siguiente aspecto:

18. Haga clic en la pestaa DeptEmpPage.jsf para volver a la pgina. Una forma rpida de desplazarse para presentar este o cualquier otro es mediante el uso de la caja de bsqueda global en la parte superior derecha de JDeveloper y escribiendo el nombre del archivo all.

A continuacin, haga clic en el nombre del archivo para abrirlo en el editor. 19. En el diseo de pginas, ampliar el acorden Departamentos. Desde la paleta de componentes, seleccione un componente Button y arrstrelo en el acorden departamentos entre los botones Primero y Anterior. Alternativamente, usted puede hacer clic en el botn En primer lugar y elegir despus de insertar el botn> para agregar el nuevo botn.

20. El inspector de propiedades cambiar el texto del botn para consultas y para la accin goQuery tipo de propiedad o seleccionarlo de la lista desplegable si est disponible. Esto hace que el botn para realizar la navegacin que se definen en el diagrama de flujo de la pgina.

21. Haga clic en Guardar todos los icono en la barra de men JDeveloper para guardar su trabajo, a continuacin, haga clic derecho en la pgina DeptEmpPage.jsf y seleccione Ejecutar.

22. Cuando la pgina se abre en su navegador haga clic en el botn Buscar para ir a la pgina nueva. En la pgina de bsqueda avanzada, haga clic para mostrar criterios de bsqueda detallada.

23. En el campo Nombre aceptar el valor predeterminado se inicia con, y el tipo de la letra G. Pulse Buscar. El formulario de abajo muestra el registro de Guy Himuro.

24. Experimentar con la forma, el ahorro de los criterios de bsqueda, crear consultas ms complejas y actualizacin de datos para los empleados. Tenga en cuenta cmo esta forma muestra una vista de los datos que coincide con la definicin del objeto de la vista que ha creado - incluyendo la informacin para el nombre de Departamento, as como una lista de valores para la Identificacin de empleo y el salario anual del empleado. Tambin puede hacer cambios a los datos y commit y rollback de sus transacciones, segn sea necesario. Cuando haya terminado de cerrar la ventana del navegador. Paso 2: Utilice parcial Actualizar pgina

En los prximos pasos que se familiaricen con algunas de las caractersticas del Marco de ADF Faces. A mejorar sus pginas con la funcionalidad adicional Ajax aprovechar las caractersticas de desarrollo declarativo que ofrece componentes de ADF Faces. En el sub-pasos prximos se utiliza la parte de la pgina de actualizacin que ofrece la capacidad de ADF Faces. Leer ms ... Los requisitos de aplicacin significa que es necesario agregar una actualizacin automtica en el campo SalarioAnual cada vez que el campo Salario se actualiza. Usted no quiere que toda la pgina para actualizar cuando esto sucede, por lo que el uso parcial actualizacin de la pgina para actualizar slo los campos que han cambiado. 1. Abra el archivo query.jsf en el Editor de diseo, si no est ya abierto. Seleccione el campo Salario. En el inspector de propiedades establecer el valor de la propiedad ID en sal.

2. Tambin en el inspector de propiedades, expanda el nodo de comportamiento y establezca la propiedad AutoSubmit en True.

3. En la ventana Estructura de ubicar el campo SalarioAnual. (Otra opcin para llegar a este campo es hacer doble clic en la pestaa query.jsf para maximizar la ventana y luego ubicar el campo en el Editor de Diseo). Busque la propiedad PartialTriggers en la seccin de comportamiento y haga clic en la flecha de su derecho a elegir Editar.

4. En el cuadro de dilogo Edit Property localizar el campo Salario y la lanzadera hacia la derecha con la flecha azul. Haga clic en Aceptar.

5. Haga clic en Guardar todos los icono en la barra de men JDeveloper para guardar su trabajo, y ejecutar DeptEmpPage.jsf.

6. Cuando la pgina se abre, haga clic en el botn Buscar en el panel de Departamentos.

7. En la bsqueda de pgina de bsqueda para los empleados cuyo nombre empieza con A%.

Tenga en cuenta el salario y los valores anuales de los sueldos.

8. Actualizar el campo Salario y luego la pestaa fuera de l. Observe el cambio inmediato en el campo SalarioAnual vez que deje el campo Salario. Sin embargo, este es el nico campo que se actualiza (no toda la pgina).

9. Cerrar el navegador. Paso 3: Utilice el comportamiento ADF AutoSuggest El AF: componente autoSuggestBehavior muestra una lista desplegable de temas sugeridos cuando el usuario escribe en un componente de entrada. Leer ms ... Para utilizar la funcionalidad de auto-sugiere de manera declarativa, necesita una lista basada en modelos de valores en el modelo de proyecto, que ser la base para la lista de suggestedItems. A principios de que ha aadido una lista de valores para el campo JobId lo que en este ejemplo, se utiliza ese campo. 1. En la pgina de consulta, seleccione el campo Id de Tarea.

2. En la paleta de componentes, expanda el nodo de operaciones, y localizar Auto Sugiera comportamiento en la seccin Comportamiento. Arrastre y suelte el Auto Sugiera operacin de comportamiento en el campo Id de Tarea.

3. En la insercin automtica de dilogo Sugerir comportamiento tipo caja # {} bindings.JobId.suggestedItems. Haga clic en Aceptar.

4. Guarde su trabajo y ejecute la pgina de consulta.

5. Escriba 121 en el campo de empleado, y haga clic en el botn Buscar. En el registro de Adn Fripp actualizar el campo JobId por 's' escribiendo en l. Una serie de trabajos que comienzan con 's' se sugieren.

6. Aadir 'a' despus de la 's' y ver la lista de sugerencias de modificacin en consecuencia.

7. Elegir el representante de ventas de las tres opciones restantes, para llenar el campo.

8. Cerrar el navegador sin guardar los cambios. Paso 4: Utilice los mens desplegables y componentes de funcionamiento En este paso se agrega un men desplegable a una pgina y el uso de un par de componentes ADF Faces operacin para agregar las operaciones basadas en Javascript de la pgina - para exportar datos de la tabla en una hoja de clculo Excel y crear una pgina para imprimir. 1. En el archivo de DeptEmpPage.jsf haga clic dentro de la faceta de los mens en la coleccin de paneles que rodean la tabla Empleados. Haga clic derecho y en el men contextual, seleccione Insertar Dentro mens faceta Men>.

2. En el inspector de propiedades, establezca la propiedad de texto de mis opciones.

3. En el inspector de propiedades, expanda el nodo de comportamiento y establezca la propiedad desmontable en true.

4. En la ventana Estructura haga clic en el elemento de men y seleccione Insertar en el interior af: Men - Mi Opciones> elemento del men.

5. En el inspector de propiedades, establezca la propiedad de texto del nuevo elemento de men para exportar a Excel.

6. Con la nueva exportacin a Excel del men an seleccionado en la ventana Estructura, expanda la seccin oyentes del nodo de operaciones de la ADF Faces componentes de la paleta de componentes. Localizar la coleccin de la exportacin de Accin componente de escucha y arrstrelo a la exportacin a la opcin de men de Excel en la ventana Estructura.

7. En la exportacin de dilogo Insertar Listener Coleccin Accin, haga clic en la flecha hacia abajo situada junto al campo ExportedId y seleccione Editar.

8. En el cuadro de dilogo Edit Property navegar a travs de la estructura de la pgina para localizar la tabla - componente t1 y seleccionarla. Haga clic en Aceptar.

9. De la lista desplegable Tipo seleccione excelHTML y haga clic en Aceptar.

10. Agregar otra opcin de men para el men. En la ventana Estructura clic derecho en la exportacin de componentes de mens de Excel y en el men contextual, seleccione Insertar despus af: commandMenuItem - Exportacin a Excel Artculo Men>.

11. Establezca la propiedad Text de esta nueva opcin de men a la pgina de impresin.

12. En la seccin Comportamiento en el nodo de operaciones de la paleta de componentes, seleccione Mostrar para imprimir operacin comportamiento de la pgina para aadir el elemento de men nuevo. Arrastrar y soltar en la nueva opcin de men que ha creado.

13. Haga clic en Guardar todos los icono en la barra de men JDeveloper para guardar su trabajo, a continuacin, seleccione Ejecutar. 14. Cuando la pgina se muestra haga clic en el nuevo men y squelo.

15. A continuacin, invocar cada una de las opciones del men que ha creado, por ejemplo, la exportacin a Excel.

Puede que tenga que aceptar la descarga del archivo en la ventana del navegador para poder acceder al archivo de Excel.

16.

Pruebe la opcin Pgina del men Imprimir.

La pgina est lista para imprimir.

Cierre la ventana del navegador. Paso 5: Agregar componentes de operacin CRUD a su pgina Las tareas prximas examinar algunas de las operaciones de datos que pone a disposicin de JDeveloper para ver los objetos. Leer ms ... Usted ve cmo

agregar una operacin de eliminacin y una operacin de CreateInsert. Cuando el usuario hace clic en el botn CreateInsert para insertar la nueva fila que desea que la tabla de actualizacin para mostrar la nueva fila vaca. Para hacer esto una vez ms el uso de la funcin de regeneracin de parte de la pgina que estaba cubierta en el paso 2 de esta parte del objeto de la vista tutorial.The utiliza una variable se unen para pasar de correo electrnico del empleado en la consulta. 1. Haga clic en la pestaa query.jsf para volver a la pgina de consulta, abriendo el panel Estructura. En los datos de los controles acorden, expanda el nodo EmpDetails1 y el nodo de operaciones por debajo de ella. Seleccione la operacin CreateInsert.

2. Arrastre la operacin CreateInsert en el panel Estructura en el panelGroupLayout en la faceta de pie de pgina del formulario de empleados. Cree que como un botn ADF.

3. En el inspector de propiedades, establezca la propiedad Id para que el botn CreateInsert.

4. Tambin en el inspector de propiedades, expanda el nodo de comportamiento y en la propiedad PartialTriggers elija Editar en la lista desplegable.

5. En la ventana de edicin de desplazamiento a travs de los componentes de la pgina hasta encontrar el botn CreateInsert. Servicio de transporte que en el panel Seleccionado.

Haga clic en Aceptar. Esta accin define el componente CreateInsert como el detonante que har que la tabla se actualice.

6. De la misma manera agregar una operacin de eliminacin por dejar caer la operacin de eliminacin de EmpDetails1 en el panelGroupLayout en el pie de pgina. Como antes, se crea como un botn ADF.

7. Los dos botones de la pantalla en la parte inferior de la pgina de consulta.

8. Guarde su trabajo y luego ejecutar la pgina de consultas. 9. Cuando la pgina se muestra% de tipo F en el campo Apellido y haga clic en el botn Buscar. El primer F% registro de empleado muestra.

10. Haga clic en el botn CreateInsert. La pgina se actualiza y los campos se limpian hacia abajo (excepto para el campo HireDate, que se define por defecto en la fecha actual) para que un nuevo disco puede ser insertado.

Paso 6: Creacin de un servicio de consulta de negocios, slo en base a parmetros En este paso se crea un objeto de vista que permite a los usuarios finales para buscar el nombre de un empleado en base a su direccin de correo electrnico. Leer ms ... El objeto de la vista utiliza una variable se unen para pasar de correo electrnico del empleado en la consulta. 1. En el Navegador de aplicaciones localizar el paquete demo.model y haga clic en l para seleccionar objetos en Nueva vista ....

2. En el asistente Crear objeto Ver establezca la propiedad Name a EmpByEmail y elija el botn de radio de consultas SQL como el origen de datos. Haga clic en Siguiente.

3. En el paso 2 del tipo de objeto asistente Crear vista la siguiente consulta: seleccione 'nombre, apellidos de los empleados en el correo electrnico =: p_email El ':' antes de p_email significa que es una variable que se pasa a la consulta. Haga clic en el botn de prueba y explicar para verificar su consulta.

Haga clic en Cerrar y haga clic en Siguiente. 4. En el Paso 3 del asistente Crear objeto Vista, haga clic en el botn Nuevo para definir una variable se unen nuevos. Establezca la propiedad Name a p_email.

Haga clic en la ficha Control de Sugerencias y establecer el texto de la etiqueta de correo electrnico.

5. Haga clic en Siguiente unas cuantas veces ms para aceptar todos los valores predeterminados, hasta llegar al paso 8 del asistente. Aqu comprobar el mdulo de aplicacin Aadir a la casilla de verificacin para incluir la nueva vista en el modelo de datos. Haga clic en el botn Finalizar.

6. Guarde su trabajo y luego ejecute el Explorador de Componentes de Negocio para poner a prueba la nueva vista. Haga doble clic en el nuevo EmpByEmail un punto de vista y cuando se le solicite que inserte un valor para la variable de entrar en esquiar y pulse OK para obtener los resultados de esta direccin de correo electrnico. La ejecucin del Tester de Componentes de Negocio. Leer ms ... Haga clic derecho en el nodo AppModule en el Navegador de aplicaciones y seleccione Ejecutar en el contexto.

7. Para probar otro valor, haga clic en el enlace Editar variables botn.

Cierre el Explorador de Componentes de Negocio. Paso 7: Crear un fragmento de pgina reutilizables En este paso se crea un fragmento de pgina reutilizables. Leer ms ... A continuacin, incrustar el objeto vista que ha creado en el ltimo paso en el fragmento de pgina y, finalmente, se utiliza el fragmento de pgina en la pgina DeptEmpPage 1. En primer lugar crear un flujo de nueva tarea especficamente para esta pgina. En el Navegador de aplicacin haga clic derecho en el proyecto ViewController y seleccione Nuevo ...

2. En el nivel Web> JSF / Facelets categora escoger la tarea Flujo de ADF.

Haga clic en Aceptar. 3. En el cuadro de dilogo Crear tarea de flujo de establecer la propiedad Nombre de archivo para buscar-email-flow.xml. Verifique que la crea como Flujo de Trabajo Limitado y crear con fragmentos de pgina casillas estn marcadas.

Haga clic en Aceptar. 4. En el Editor de Diseo, arrastre un componente Vista desde la paleta de componentes en el diagrama de vaco y el nombre de searchEmail. Slo vas a usar una sola pgina de este flujo, pero usted puede tener limitado los flujos de trabajo con varias pginas y an as su inclusin en otras pginas JSF.

5. Haga doble clic en el nuevo componente de searchEmail fin de crear el fragmento de la pgina para ello. Acepte todos los valores predeterminados en el cuadro de dilogo que muestra y asegrese de que el nombre del archivo es searchEmail.jsff. Esto crea la pgina

como un fragmento de pgina que se pueden incluir en otras pginas JSF. Haga clic en Aceptar.

6. Una pgina en blanco se muestra en el Editor de diseo. Ampliar el acorden de datos controles y, si es necesario, haga clic en el botn Actualizar para asegurarse de que el nuevo EmpByEmail control de datos aparece en la lista.

7. Expanda la nueva EmpByEmail1 vista y el nodo de operaciones por debajo de l. Seleccione la operacin ExecuteWithParams. Usted va a utilizar este operacin para ejecutar la consulta de este punto de vista pasndole el parmetro necesario.

8. Arrastre la operacin ExecuteWithParams a la nueva pgina, y crear como una forma de parmetros ADF ....

9. En el formulario de edicin de dilogo Campos cambiar la etiqueta de presentacin del valor de p_email defecto al correo electrnico. Haga clic en Aceptar.

10. En el Editor de Diseo de la pgina, haga clic en el botn ExecuteWithParams y utilice el inspector de propiedades para cambiar la propiedad Text para encontrar detalles.

11. Desde el acorden controles de datos, arrastre el punto de vista EmpByEmail1 a la pgina debajo del botn. Cree que como una forma> ADF de slo lectura formulario ....

12. Acepte los valores predeterminados presentados en el Formulario de editar campos de dilogo y haga clic en Aceptar. Guarde su trabajo.

La pgina debe tener este aspecto:

13. El nuevo flujo de trabajo limitada ahora contiene un fragmento de pgina, al lado de incluir el total de flujo limitado de tareas dentro de otra pgina JSF. En el Navegador de la aplicacin, busque el archivo DeptEmpPage.jsf y abrirlo en el Editor de diseo, si no est ya abierto. En la seccin de diseo de componentes paleta de arrastrar y soltar un componente de separacin en el acorden a la izquierda de la pgina DeptEmpPage.jsf bajo la forma de Departamentos.

14.

Aadir el nuevo flujo que ha creado como una regin a la pgina existente. Desde el Navegador de aplicaciones de arrastrar y soltar el archivo de bsqueda del correo electrnico flow.xml en el acorden a la izquierda de la pgina debajo de la DeptEmpPage.jsf nuevo separador. Cree que como regin.

15.

Su pgina debe parecerse a la siguiente imagen.

16.

Guarde su trabajo y luego ejecutar la pgina DeptEmpPage.jsf actualizada. Cuando la pgina se muestra en la prueba de la nueva funcionalidad del navegador mediante la introduccin de un valor de correo electrnico en el campo de correo electrnico y pulsar el botn Buscar Detalles.

17.

La informacin que el nombre del empleado es devuelto.

Resumen En este tutorial se construy una pequea aplicacin Web que interacta con una base de datos. Ha aprendido a:

Construccin de los servicios de negocio que proporcionan los datos a la aplicacin Crear un enlace de datos JSF pgina Mejorar la pgina mediante la adicin de las operaciones ms complejas

Aadir una segunda pgina JSF para la aplicacin y crear un diagrama de flujo de la pgina para definir la navegacin entre las pginas Crear un fragmento de pgina reutilizables que contiene un servicio de negocio basado en parmetros Para obtener ms informacin sobre la construccin de aplicaciones ricas de Internet, se refieren a:

"Desarrollo de aplicaciones utilizando herramientas Web Page" en la Gua del usuario para Oracle JDeveloper Interfaz Web del usuario Gua del desarrollador de Oracle ADF