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 (Ejemplo de maquetación parte 1) vimos lo que pretendíamos hacer así como los primeros pasos para personalizar la página.

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.










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. 



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






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.


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.

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.

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