miércoles, 30 de julio de 2014

Ejemplo de maquetación. Parte 2

Descripción: En este artículo vamos a continuar dando formato a la página de buscador, en 10g.

En el artículo anterior () vimos lo que pretendíamos hacer así como los primeros pasos para personalizar la página.

Nota: Puedes descargar el ejemplo completo en este enlace: Descargar Ejemplo

Nos habíamos quedado en el este punto:

vista buscador
vista buscador

Miremos a la tabla af:table, y vamos a quitar el texto que acompaña al botón que se encuentra en la parte superior izquierda (Select and).
Para ello debemos ir en la estructura al elemento facet-selection, y dentro a af:tableSelectOne. Quitamos de ahí el texto.

cambio elemento tableSelectOne
cambia elemento tableSelectOne

se quita el texto en af:tableSelectOne
se quita el texto en af:tableSelectOne

Ahora nos queda colocar los elementos el panelForm y el aftable dentro de una estructura que permita disponer de ellos de forma vertical y algo más centrada.

Para ello tenemos el componente PanelGroup, que permite agrupar componentes y maquetarlos según la orientación que nos interese.
Añadimos el PanelGroup dentro del h:form.

añadimos elemento panelGroup
añadimos elemento panelGroup



Una vez colocado el componente, tenemos que arrastrar, primero el panelForm, y luego el afTable.
En un componente de este tipo, cada elemento que arrastremos se colocará al final de los que ya se encuentren. Por esta razón lo hacemos en este orden.

Nota: Si nos equivocamos, bastará con arrastrar el componente al lugar que nos interese.

elementos dentro del panelGroup
elementos dentro del panelGroup

Indicamos la orientación de los elementos que están dentro del panelGroup con el atributo Layout.

atributo Layout del PanelGroup



vista como queda la estructura



También vamos a aumentar el ancho del aftable (width) al 100% para que ocupe todo el ancho de la página.
Nota: Este porcentaje debemos entenderlo como el porcentaje del espacio dentro del cual se encuentra el objeto af:table. 

cambiar atributo width del aftable


Al ejecutar la aplicación este es el aspecto que presenta.

aspecto de la aplicación




En el siguiente artículo vamos a mejorar la personalización de la tabla af:table. Utilizaremos el elemento afh:TableLayout, así como centraremos la tabla y veremos el atributo banding para presentar los resultados con colores alternados.

Artículos relacionados:
- Ejemplo de maquetación de una página (Parte 1)
- Ejemplo de Maquetación. Parte 3

martes, 29 de julio de 2014

Ejemplo de maquetación de una página (Parte 1)

Descripción: En este artículo vamos a ver cómo mejorar el aspecto de una página en Oracle ADF 10g. Tomaremos como ejemplo un formulario de búsqueda (search form).
No es un ejemplo sobre maquetación, sino que está orientado a perder el miedo a la hora de trabajar con la estructura de la página.

Nota: Puedes descargar el ejemplo completo en este enlace: Descargar Ejemplo

En este artículo vamos a modificar la maquetación de una página con el fin de mejorar el aspecto de ésta.
No es un artículo específico de maquetación, sino para dos cosas:

- Manejarnos con la pestaña de estructura de la página jspx, y operar a través de ahí.
- Empezar a conocer las opciones que nos ofrece ADF para personalizar la aplicación.

Para ayudarnos a entender lo que se quiere hacer, se puede hacer como en esos anuncios para adelgazar: El ANTES, y el DESPUÉS.

ANTES
DESPUÉS


Vamos a ir viendo cada uno de los cambios que vamos haciendo para que podamos comprenderlos.

En primer lugar podemos ver ese botón de búsqueda que está aislado a la izquierda, justo encima del listado de resultados.
Lo normal suele ser colocarlo debajo del formulario.
Es más, podemos ver ese botón como parte del formulario, así que debemos moverlo a una situación más cercana a éste.

Para ello, vamos a hablar de los facets.
Los componentes tienen aspectos específicos que son propios de ese componente. Los aftables tienen los suyos, así como en este caso el Panel Form tiene su propio facet.
Este facet se llama footer (pie), y como podemos imaginar, es la parte inferior del componente Panel Form

Una cosa a tener en cuenta es que los facets, no están visibles en el panel de Estructura. Eso no significa que no existan, simplemente que hasta que no se usan no se ponen. Supongo que si se pusieran todos, aunque fueran vacíos se llenaría la vista de estructura y ésta sería impracticable.
Por eso en el ejemplo, se selecciona el componente, y éste se inserta en el panel de estructura (Structure tab).

insertar facet de panel Form

facet en la vista de estructura

Ya con el facet a la vista, se arrastra el botón al facet que lo va a contener.

botón de búsqueda dentro del facet

Podemos ver el cambio en nuestra aplicación.

vista resultado




El aspecto ha mejorado un poco. El botón de búsqueda se encuentra más cerca del cuadro de búsqueda que antes, que parecía estar perdido.


Ahora vamos a separar el cuadro de búsqueda del botón.

Para ello, vamos a utilizar el objeto ObjectSpacer que lo que añade es un separador en forma de imagen transparente.

componente ObjectSpacer en Component Palette

Al arrastrar el componente a la pestaña de estructura, lo podemos colocar justo debajo del componente inputText.

objectSpacer dentro del Panel Form


Nota sobre alineación de objetos
Hay objetos que alinean los objetos uno debajo de otro, como es el caso del Panel Form. Hay otros objetos que tienen un comportamiento distinto o incluso que podemos definirlo a través de un atributo.

Podemos ver el resultado de este cambio cuando ejecutamos la aplicación (o si pulsamos F5, aunque en ocasiones puede dar problemas).

vista ejecución buscador
vista resultado


Faltaría cambiar un par de detalles del buscador, la etiqueta que acompaña al campo de búsqueda (inputText) , y el texto que hay en el botón de búsqueda (commandButton).

Para ello vamos al cuadro de inspector properties, y cambiamos el atributo Value del inputText, y ponemos el nombre del campo (Nombre).

Para cambiar el texto en el commandButton, modificamos el atributo Label.

seleccion commandButton Structure tab
seleccionamos commandButton en Structure



atributo Label de commandButton
cambio en el CommandButton con el atributo Label

Este es el aspecto que tiene nuestro buscador. 

vista resultado buscador
vista resultado buscador


En cuando se coge el ritmo de dónde está cada cosa, el hacer estas tareas es bastante más rápido.

En el próximo artículo completaremos el ejemplo para que se pueda tener un aspecto más presentable de nuestro buscador.

Artículos Relacionados:
- Ejemplo de maquetación de una página. Parte 2.
- Ejemplo de Maquetación. Parte 3

lunes, 28 de julio de 2014

Error JBO-30003: Fallo del pool de aplicaciones

Descripción: En este artículo vamos a ver cómo resolver un error con el código JBO-30003, así como algunas de sus causas.
En inglés el error aparece como jbo-30003 the application pool failed to checkout an application module

Si se nos presenta un error con un código similar al siguiente:

JBO-30003: Fallo del pool de aplicaciones (model.PlantillaAppModuleLocal) al bloquear un módulo de aplicación debido a la siguiente excepción: oracle.jbo.JboException: JBO-29000: JBO-29000: JBO-29000: JBO-26061: Error al abrir la conexión JDBC. at  oracle.jbo.common.ampool.ApplicationPoolImpl.doCheckout(ApplicationPoolImpl.java:2002)

vista mensaje error
vista mensaje de error




Una de las causas de este error se encuentr en que la aplicación no puede acceder a la base de datos.

Entre las posibles causas se encuentran:

- Datos de conexión (cadena de conexión) incorrectos.

- La base de datos no está funcionando.

- Desconexión entre el lugar donde se encuentra la aplicación, y la base de datos (fallo de la red, puertos cerrados, etc).

Si el problema nos ocurre ejecutando la aplicación desde el JDeveloper podemos comprobar si la conexión que tenemos definida funciona o no, y qué mensaje de error nos muestra.




gestor de conexiones
gestor conexiones (connections navigator)



mensaje error conexión
mensaje error de conexión


Basta con comprobar si la base de datos está en funcionamiento (hablar con el administrador), así como que hay acceso hacia la base de datos.

Documento de Interés
Para más información sobre errores JBO y cómo resolverlos existen unos listados con los mensajes de errores, con sus causas y soluciones.




Puedes seguir el blog por Blogger Twitter

jueves, 24 de julio de 2014

Crear formulario búsqueda en 10g. Parte 3. Creando la página

Descripción: En este artículo vamos mostrar cómo crear la página con el formulario de búsqueda (search form) en 10g a partir del view object y bind variables creados en los artículos anteriores.

Puedes descargar el ejemplo completo en este enlace: Descarga del ejemplo (10g)

Para incluir el formulario de bússqueda debemos ir a Data Controls y seleccionar la View en la cual queremos tanto buscar como mostrar los resultados.

viewobject desde el datacontrol
vista del viewObject en el DataControl




Extendemos el apartado Operations, y desplegamos el que dice ExecuteWithParams.
ExecuteWithParams se aplica a los filtrados realizados a través de parámetros. En este caso, el parámetro es la bind variable que hemos creado a través de la cual enviamos el valor por el que queremos filtrar.

Si arrastramos a la página (vista de código o de diseño), o si arrastramos a la pestaña de estructura (structure tab), podemos ver que se nos muestra un menú contextual en el que se nos pregunta qué queremos crear.
En este caso vamos a crear un ADF Parameter form.

crear ADF parameter form
crear ADF parameter form

Al hacerlo, se nos muestra una ventana para que seleccionemos los parámetros que queremos utilizar en este buscador. También podemos seleccionar qué etiqueta mostrar junto al cuadro de búsqueda así como qué tipo de componente utilizar.
Nota: En ocasiones podemos tener varios criterios de filtrado, y habrá páginas o escenarios en los cuales, un usuario podrá utilizar sólo algunos criterios, y otro usuarios otros distintos. En nuestro ejemplo sólo tenemos un criterio de filtrado por lo que no tenemos esta situación.

configurar campos del buscador
configurar campos del buscador

Una vez creado el formulario de búsqueda, tendremos que añadir el listado de los resultados.
Para ello utilizaremos el componente aftable, que nos permita mostrar en forma de tablas los datos.

Para hacer esto, volvemos a ir a la View en el DataControl, y arrastramos esta vez a la view a la página o al lugar de la estructura donde queremos que se encuentre.
Seleccionamos para esta ocasión que queremos crear un ADF Read-only Table (tabla de sólo lectura).

añadir tabla de resultados de busqueda
añadir tabla con los resultados




Al hacer esto, se nos presenta un cuadro parecido al que vimos para los parámetros del cuadro de búsqueda. Podemos elegir qué columnas de datos mostrar, con qué título en la cabecera y el componente que se utilizará para mostrar los datos en cada celda.

selección de columnas resultados
selección de columnas de resultados




En este ejemplo vamos a mostrar sólo, los campos FirstName y LastName, por lo que eliminamos los otros.

selección de campos y opciones de la tabla (aftable)
selección de campos y opciones de la tabla (aftable)


También seleccionamos que la tabla permita seleccionar elementos, así como ordenar los resultados dependiendo de los valores de cada columna.

Finalmente ejecutamos la tabla y podemos ver cómo queda.
Evidentemente habría que dar unos cuantos retoques para mejorar el aspecto.

vista resultado buscador
vista resultado buscador

Artículos relacionados:
- Crear formulario búsqueda en 10g. Parte 1. ViewObject y Bind Variable
- Crear formulario búsqueda en 10g. Parte 2. bind variable en la consulta



Puedes seguir el blog por Blogger Twitter

miércoles, 23 de julio de 2014

Crear formulario búsqueda en 10g. Parte 2. bind variable en la consulta

Descripción: En este artículo vamos a ver cómo incluir un bind variable en una consulta del viewObject. El ejemplo está hecho para 10g, aunque los conceptos pueden verse también en 11g ().

Puedes descargar el ejemplo completo en este enlace: Descargar ejemplo

En el editor del ViewObject, en apartado SQL Statement, vamos a añadir en el cuadro where, la condición por la que se va a filtrar en el formulario de búsqueda.

Como en el ejemplo vamos a filtrar por el campo first_name, se añadirá la cláusula correspondiente.

incluye bind variable a la query
se añade la condición en la cláusula where



Si observamos, se añade ":" (dos puntos), para indicar en la consulta que estamos con un parámetro(bind variable).

Para comprobar que la consulta es correcta, podemos pulsar el botón Test
Si no pusiéramos los : (dos puntos) en el parámetro, el resultado de la comprobación sería el siguiente:

resultado test query
resultado del Test de la consulta

¿Y si queremos que la consulta no sea sensible a mayúsculas y minúsculas (case sensitive)?

Bastaría con añadir la función UPPER a la cláusula where.

incluye upper consulta
añade UPPER a la consulta


Si volvemos a acomprobar si la consulta ha sido escrita correctamente, podemos pulsar nuevamente el botón Test.

resultado test query
resultado comprobación (test)

En el siguiente artículo veremos, cómo tras modificar la consulta, y añadir el filtro de búsqueda a través del bind variable, creamos la página.

Artículos relacionados:
- Crear formulario de busqueda en 10g. Parte 1. ViewObject y Bind variable.
- Crear formulario de búsqueda en 10g. Parte 3. Creando la página.  
- Ejemplo de formulario de búsqueda 11g (parte 2). Bind Variables

Puedes seguir el blog por Blogger Twitter

martes, 22 de julio de 2014

Crear formulario búsqueda en 10g. Parte 1. ViewObject y Bind Variable

Descripción: En este artículo vamos a ver cómo crear un formulario de búsqueda (search form) en 10g. En esta primera parte veremos cómo se añaden los criterios de búsqueda de la consulta del viewobject con bind variables.
Nota: Si quieres ver la creación del buscador en 11g, puedes hacerlo en el artículo: Ejemplo Formulario de Búsqueda en 11g.

Puedes completo y seguir cada uno de los pasos, así como hacer tus propias pruebas.

Para empezar vamos a añadir al viewObject los criterios por los cuales se va a filtrar los resultados en el formulario de búsqueda que vamos a crear.
Dentro del editor de ViewObject, vamos al apartado Bind Variables.
En este ejemplo vamos a filtrar por el campo FirstName (nombre). 

bind variables editor viewobject
bind variables en el editor del viewObject

El nombre de la variable será p_Nombre. La razón de esta nomenclatura es la de tener una convención de manera que si más adelante se produce un error procedente de los parámetros nos es más fácil detectarlo.

se añade el criterio de búsqueda

Si queremos saber más sobre lo que es un bind variable podemos ver el siguiente artículo del blog SQL Eficiente, se explica con más claridad.
Variables de binding (bind variables)



En el siguiente artículo veremos cómo añadir el bind variable que hemos creado a la consulta.

Fuentes de referencia:

Variables de binding (bind variables) del blog SQL Eficiente


Artículos relacionados
- Crear formulario de busqueda en 10g. Parte 2. Bind variable.
- Crear formulario de búsqueda en 10g. Parte 3. Creando la página. 
- Crear formulario de busqueda en 11g. Consultas y resultados.



Puedes seguir el blog por Blogger Twitter

lunes, 21 de julio de 2014

Consulta case sensitive en view criteria

Descripción: En este artículo vamos a ver cómo hacer una consulta que sea sensible a mayúsculas(case sensitive) en una view criteria.
Nota: Esto es válido para 11g.

En ocasiones nos encontramos que podemos desear hacer búsquedas que distinga mayúsculas de minúsculas, o al revés, que no haga esta distinción.
En el ejemplo anterior, pudimos observar que utilizamos un view criteria, para poder hacer búsquedas sobre el campo FirstName.

Para poder modificar esta propiedad de la consulta, hacemos los siguientes pasos.
Vamos al View Criteria, que se encuentra dentro del ViewObject, en el apartado Query.

seleccion viewcriteria en el viewobject
selección del View Criteria en el viewObject




Seleccionamos la cláusula que queremos que tenga este criterio.
Nota: Es posible que tengamos varios criterios (cláusulas) sobre los cuales filtrar y el que sea sensible o no a las mayúsculas sólo queremos que se aplique a ciertos campos. Por ejemplo, no tendría sentido aplicarlo a un campo numérico.

seleccion cláusula where
selección de la cláusula



Desmarcamos el apartado que dice "Ignore Case", y observamos que también se refleja este cambio en la consulta, en el apartado "View Object Where Clause".

cambio opcion ignore case
cambio en la opción "ignore case"


Solo restaría guardar el ViewObject, para tener guardado nuestro cambio.

Como última nota, recomendaría observar el cambio que se produce a nivel de consulta en este apartado de "where clause", porque nos da una idea de lo que pasa por debajo. No debemos olvidar que lo que se ejecuta al final, es una consulta sql, y en el caso de que esta consulta sea muy compleja la página se nos puede volver lenta.

Artículos relacionados:
- Ejemplo formulario de búsqueda en 11g, parte 3. View Criteria

Puedes seguir el blog por Blogger Twitter

jueves, 17 de julio de 2014

Ejemplo formulario de búsqueda en 11g (parte 4). Creación de la página.

Descripción: En este post vamos a crear el formulario de búsqueda en nuestra página. Tomaremos el View Criteria que habíamos creado anteriormente para añadir el cuadro de búsqueda y veremos las facilidades que nos ofrece 11g a través de sus asistentes para realizarlo.

Nota: Puedes descargar el ejemplo completo para poder hacer prácticas.

Paso 4. Crear el formulario de búsqueda


Para crear el formulario aprovechando lo que nos ofrece Oracle ADF 11g, vamos a Data controls, y observamos dentro EmpleadosView que tenemos un apartado llamado Named Criteria. Ahí encontraremos la nueva View Criteria que habíamos creado en el paso anterior.

ViewCriteria en DataControls
View Criteria en Data Controls



Arrastramos este elemento a la página (vista de diseño), y al hacerlo veremos que se nos muestran unas opciones en el menú contextual que se presenta.

viewcriteria en pagina diseño
arrastramos el View Criteria a la vista de diseño de la página

Podemos observar que aparecen varias opciones para elegir lo que queremos crear. En este caso seleccionamos "ADF Query Panel with Table...".
Las otras opciones podrán ser útiles dependiendo de tipo elemento que queremos mostrar.

Al seleccionar esta opción se nos muestra los campos que se quieren mostrar en la tabla (detalle), podemos dejarlo como está o quitar algunos campos.

vista campos tabla aftable
vista de los campos de la tabla


En nuestro ejemplo, sólo vamos a mostrar los campos FirstName y LastName, por lo que podemos quitarlos del listado.

eliminar campos innecesarios aftable
eliminamos campos para mostrar los necesarios



Ya podemos ver el aspecto que ha quedado en nuestra página.




Si ejecutamos el ejemplo, este va a ser el aspecto que tendrá nuestro formulario de búsqueda (search form) ejemplo.

vista ejecucion buscador
vista ejecución del ejemplo

Como podemos observar, hay cosas que quedarían por pulir, entre ellas el aspecto. Ya iremos viendo estas cuestiones más adelante.



Fuente de referencia:
Create Simple Search form in Oracle ADF de ADFSanthosh
http://adfnote.blogspot.com.es/2013/02/create-simple-search-form-in-oracle-adf.html

Otros artículos relacionados:

- Ejemplo formulario de búsqueda (parte 1). Crear consulta y resultados
- Ejemplo de formulario de búsqueda 11g (parte 2). Definir Bind Variables
- Ejemplo formulario de búsqueda (parte 3). View Criteria


Puedes seguir el blog por Blogger Twitter

miércoles, 16 de julio de 2014

Ejemplo formulario de búsqueda (parte 3). View Criteria

Descripción: Este artículo es la tercera parte de la creación de un formulario de búsqueda en 11g.
En este post vamos a enlazar una bind variable creada anteriormente con el viewcriteria que va a permitirnos filtrar los resultados de un viewObject.

Paso 3. Crear el View Criteria


Un view Criteria (o viewCriteria, a veces lo he visto escrito junto), es un filtro que puede añadirse a un ViewObject. este filtro afectaría a la cláusula WHERE, de la query.

Si quieres leer algo más al respecto se puede ver el siguiente artículo:

por Frank Nimphius en OTN Code Corner

Más adelante incluiremos artículos más profundos sobre ViewCriteria, por lo que interesa es quedarse con la idea general de cómo se crea y cómo funciona.

Debajo de Bind Variables, en el apartado Query del viewObject, tenemos un apartado que dice View Criteria.
Añadimos el nuevo elemento pulsando en el botón "+".

Al hacerlo nos encontramos con la siguiente ventana:

crear viewcriteria
creando view criteria



Añadiendo Criteria, y observando los datos que nos solicitan, nos veremos en una situación similar a esta imagen.

asignar bind variable view criteria
asignar bind variable al view criteria


Al terminar de crearlo, podemos ver lo que se añadirá a la query del viewObject.

edicion del viewcriteria
vista del view Criteria



Para terminar este post, guardemos la View Criteria que hemos creado, y vayamos al DataControls.
Nos encontraremos ahí al nuevo elemento creado.

dataControl Palette con el viewcriteria
DataControl Palette con el View Criteria

En el próximo artículo ya crearemos la página a partir de los elementos que hemos visto en los distintos pasos de este pequeño tutorial sobre cómo crear un formulario de búsqueda.

Artículos de referencia:
Create Simple Search form in Oracle ADF de ADFSanthosh



What's the difference between View Criteria and Where clause?
de Frank Nimphius en OTN Code Corner


Otros artículos relacionados

- Ejemplo formulario de búsqueda (parte 1). Crear consulta y resultados
- Ejemplo de formulario de búsqueda 11g (parte 2). Definir Bind Variables
- Ejemplo formulario de búsqueda (parte 4). Creación de la página.