Mostrando entradas con la etiqueta jspx. Mostrar todas las entradas
Mostrando entradas con la etiqueta jspx. Mostrar todas las entradas

lunes, 11 de agosto de 2014

Pasar un valor desde la pagina de diseño al ProcessScope con setActionListener

Descripción: En este artículo vamos a explicar cómo pasar un valor desde la página de diseño o vista de diseño al processScope. Para ello utilizaremos el componente setActionListener.
Nota: Este artículo está escrito para Oracle ADF 10g. La filosofía es similar para 11g, y más adelante veremos un artículo.

Para explicar este mecanismo vamos a utilizar un ejemplo en el que al pulsar un botón (commandButton) se pasará un valor al processScope, y se mostrará este valor en pantalla.

Colocamos en la página el commandButton con el que trabajaremos y le pondremos una etiqueta.
Vamos a ponerle como etiqueta: Asignar 3.

A continuación añadimos un componente setActionListener desde la paleta de componentes, como hijo del commandButton.

vista estructura de la pagina
vista estructura



se arrastra el componente desde el Component Palette
se arrastra el componente desde el Component Palette



Al arrastrarlo sobre el commandButton en la pestaña de Estructura, veremos que se nos abre una ventana de diálogo con el título "Insert SetActionListener".

datos necesarios para el setActionListener





Nos solicita dos valores:
From: Que sirve para indicar el valor de origen. Por ejemplo, si el valor proviene de una variable en un bean, de un processScope, de un valor que está en el binding, etc. También se puede colocar valores literales, por ejemplo, valores enteros, strings, etc.

To: El destino donde se guardará dicho valor. Puede ser una variable en un bean, el processScope, binding, etc. Aquí no podemos utilizar literales.

En la parte derecha tenemos unos botones con el título "Bind...", que nos abre un cuadro en el cual podemos buscar el elemento que queremos utilizar.






Buscamos el componente processScope, que estará en JSF Managed Beans / processScope.
Si no queremos buscarlo siempre podemos escribirlo directamente

#{processScope}

Hemos dicho que el processScope se puede ver como un array asociativo.
Si queremos crear una variable en el processScope basta con utilizarla directamente.
En nuestro ejemplo
#{processScope.valorGuardado}

asistente expresión del lenguaje
asistente expresión del lenguaje





Vamos a asignar un 3 al campo From, y luego en el To a la variabla valorGuardado dentro del processScope.


setActionListener campos from y to
setActionListener campos from y to


Vamos a crear otro botón que asigne un 4, y lo llamaremos Asignar 4.
Y a este botón le añadiremos un setActionListener que pasará el valor 4, a #{processScope.valorGuardado}

Con lo que cada vez que pulsemos un botón, estaremos pasando un valor.

Para este botón, he añadido el setActionListener, pulsando el botón derecho en el componente, e indicando en el menú contextual lo que queremos añadir. Tal como aparece en la siguiente imagen.

Añadiendo setActionListener desde el menú contextual
Añadiendo setActionListener desde el menú contextual






Finalmente para que podamos ver el valor que tiene actualmente processScope.valorGuardado, añadiremos un outputText que se actualizará cuando se refresque la página.
Nota: Este refresco ocurrirá porque el commandButton suele tener este efecto a menos que pongamos un partialSubmit.

Mostraremos el valor del processScope, simplemente escribiendo en el atributo value #{processScope.valorGuardado}


vista resultado
vista resultado

vista resultado
vista resultado




Conclusión:
Como hemos visto, el processScope es un mecanismo sencillo para guardar valores que queramos utilizar en otras páginas, sin tener que recurrir a un bean. De hecho en este ejemplo, no hemos tenido que utilizar código para poder guardar el valor o mostrarlo.



viernes, 1 de agosto de 2014

Ejemplo de Maquetación. Parte 3

Descripción: En este artículo vamos a centrar un aftable, utilizando el componente tableLayout.También veremos cómo presentar los resultados con colores alternados en el aftable con el atributo banding.

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


En el artículo anterior nos habíamos quedado la página tenía el siguiente aspecto:

vista de la página resultado



Si nos ponemos a jugar con el porcentaje del ancho de la tabla (width), vemos que ésta se encuentra alineada en el lado izquierdo de la página.

Si queremos centrarla podemos utilizar el componente afh:tableLayout.
El componente tableLayout, recuerda mucho al elemento Table del HTML, en el que el contenido se coloca dentro de elementos <TD>, que su vez estaban dentro de elementos <TR>.
En este caso utiliza otros componentes afh:rowLayout y afh:cellFormat. 

vista estructura página



Como podemos observar hemos añadido los elementos afh:tableLayout, afh:rowLayout y afh:cellFormat, y también se ha colocado dentro de este último elemento nuestra tabla.
Si observamos el resultado, la página se nos queda como sigue:


vista página resultado



A primera vista parece que hemos salido perdiendo con el cambio.
Para empezar tenemos que el ancho de la tabla (af:table) ya no ocupa todo el ancho de la página, sino que ha encogido.
La razón es que habíamos definido el ancho (width) de la tabla con el 100%. En la estructura anterior significaba ocupar el 100% del elemento que lo contiene, en ese caso el elemento era el af:panelGroup.
Si éste, hubiera tenido el ancho definido al 50%, nuestra tabla (af:table) hubiera ocupado la mitad del ancho de la pantalla (el 100% ancho definido por el elemento contenedor).

Entonces si queremos ampliar el ancho del elemento contenedor (afh:tableLayout), lo haremos a través de sus propiedades, y cambiando el atributo width.

selecionamos el elemento contenedor afh:tablelayout


En el Inspector Properties cambiamos el ancho (width) a 70%, y también alineamos la tabla, al centro (Halign = center). 


atributos halign y width


Con estos cambios el aspecto de la página es el siguiente:


aspecto de la página



Como podemos observar ya se parece bastante al aspecto que queríamos tener.

Para terminar, vamos a hacer que los resultados de la tabla aparezcan de forma alternada (banding).
Para ello, seleccionamos el af:table que contiene los resultados.

selección af:table en la estructura

Y cambiamos el atributo banding en el inspector properties.

atrubto banding

Como podemos observar, banding, nos permite varias opciones, y eligiremos que los colores alternados se muestren a nivel de filas (row).

También vamos a cambiar el ancho de una de las columnas, para que no aparezcan ambas columnas con el mismo tamaño.
Vamos a poner la columna del FirstName, algo más corta que las del LastName.

cambio ancho columna FirtsName (af:column)


cambio del ancho de la columna

El resultado que nos queda es el siguiente

vista resultado



Con esto termina este ejepmlo de maquetar/perder el miedo a mover objetos, dentro de una página en Oracle ADF. 

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

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

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

viernes, 2 de mayo de 2014

Mostrar un valor de un bean

Resumen: En este post se va a explicar cómo tomar un valor de un bean y mostrarlo en pantalla.
Se puede descargar el siguiente fichero que contiene el ejemplo Descargar Ejemplo.
Aunque las imágenes y el ejemplo son en 11g, los pasos que se van a mostrar son equivalentes para 10g.

En la siguiente imagen podemos ver el bean ejemploBean, que inicialmente está vacío.
Creamos la variable de tipo String cadenaTexto que se utilizará para mostrar el mensaje.
No es necesario que sea una variable de tipo String, puede ser int, o de otro tipo, pero sí debe ser un tipo primitivo. Por ejemplo los Number no se pueden escribir directamente en pantalla, sino a través de llamar a un método que devuelva el contenido en un formato que sí permita mostrarlo.



bean nueva propiedad

Tras crear la variable, se deben crear los accessors (método get y set).
Esto se puede hacer seleccionando con el botón derecho en la propiedad creada, y elegir "generate accessors
" del menú contextual.

Aparte de ser una buena práctica crear los accesors de las propiedades, es obligatorio a la hora de mostrar un valor referirse a través de un método get. Si no es así, no va a mostrar la propiedad ni la va a reconocer cuando lo pongamos en el jspx.


generate accessors

En el proceso de generar accesors
, se nos pregunta sobre qué variables crear (por si se quisiera crear para otras variables), además de si se desea el get y el set.
En este ejemplo marcamos ambos.

generate accessors

Una vez creados los accessors, este es el resultado del bean.

accessors get y set



A continuación vamos al jspx, donde queremos mostrar el valor.
Todo lo que sea presentar información en la pantalla tiene que pasar por el jspx.
Utilizamos para este ejemplo un outputText, y en el atributo Value, ponemos la expresión que nos indica que tomamos el valor el bean.

Probemos a hacer lo siguiente: En el campo Value escribir #{EjemploBean.}.
A continuación del punto, pulsamos Ctrl+Space para que el autocompletar
nos muestre las opciones.
En la siguiente imagen vemos que nos muestra el nombre del método (sin el get), no confundir con el nombre de la variable.


autocomplete jspx

El autocompletar, aparte de ayudarnos a la hora de escribir el código en el jspx, nos indica también si algo no va bien. Por ejemplo en este caso, si el método que esperábamos, no aparece, quiere decir que algo se ha hecho mal en el código, y por eso no lo reconoce.
Por ejemplo, cuando el método get no ha sido creado correctamente, o cuando nos equivocamos al crear un bean (como en el ejemplo crear un bean , donde se crea una clase Java, que no resulta ser un bean).


codigo jspx para mostrar valor del bean

Guardamos todo y ejecutamos la aplicación para ver el resultado.

pagina resultado
vista página resultado

Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter