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

miércoles, 17 de septiembre de 2014

Obtener un valor de la tabla en un bean 11g

Descripción: En este artículo veremos cómo obtener un valor de una fila (row) de una tabla (aftable) a través de un bean. Tomaremos el valor de un atributo (attribute) y lo mostraremos en pantalla.

Nota: Puedes Descargar el ejemplo para que puedas hacer pruebas.

En este ejemplo veremos cómo mostrar un valor de una fila seleccionada en un aftable.

En primer lugar tenemos que haber creado la tabla en nuestra página.
En el ejemplo arrastraremos una view a la página de diseño (design) y se cree la tabla que muestre los datos.

vista diseño aftable
vista diseño aftable



Podemos mirar en la Page Data Binding Definition (lo que en 10g se llamaba Página de definición), cómo es la estructura de datos que se carga en la página y que contiene la tabla.

vista Page data binding definition
vista page Data Binding Definition
vista codigo Page Data Binding Definition
vista código de Page Data Binding Definition


 
Nota: La utilidad de esta información es que si en algún momento no sabemos cómo se llaman los atributos (campos) de una tabla, podamos ir a consultarlo.
Esto a veces es necesario cuando los datos no se muestran correctamente, y pueden tener como origen, en que no se ha incluido los atributos necesarios.



Tomar el valor del Page Data Binding Definition en un bean


El siguiente código devuelve el valor que se encuentra en un binding.

método para recoger un valor del binding

Vamos a explicar el código parte por parte:


        BindingContext bindingContext = BindingContext.getCurrent();
        BindingContainer bindings = bindingContext.getCurrentBindingsEntry();



En esta parte del código estamos haciendo referencia al binding vigente en este momento.
Es decir, de la página actual que se esté mostrando.
Si este código se utiliza en otras páginas será el page data definition correspondiente.


DCIteratorBinding iteratorBinding = (DCIteratorBinding) bindings.get("DepartmentsViewIterator");


Se recoge con esta instrucción el iterator que se encuentra en el binding. Este iteratorBinding, corresponde con el iterator que vimos en la página de definición.
Se recoge este iteratorBinding pues es el que gobierna el aftable, y el que nos va a indicar qué dato se encuentra seleccionado en ese momento.


        if (iteratorBinding != null)
        {
            Row currentRow = iteratorBinding.getCurrentRow();
            if (currentRow != null)
            {
                resultado = (String) currentRow.getAttribute("DepartmentName");   
            }
        }

Primero se pregunta si el itertorBinding es null.
Es importante esto porque puede que el valor que contiene la variable iteratorBinding lo sea.
Algunas de las causas por las que puede ser null:
- Que se haya escrito mal el nombre del iterator.

- Que en el momento en que se llama al iterator, éste no exista.



Es muy típico encontrarse con un nullPointerException por estas causas, por lo que se recomienda hacer siempre esta comprobación.

Una vez comprobado esto con el if , lo que se hace es obtener la fila actual. 
Para ello recurrimos al método getCurrentRow().

Otra vez, volvemos s hacer la consulta de si el valor obtenido con el getCurrentRow() es null o no.
Puede ser que no hubiera ningún elemento seleccionado.


 resultado = (String) currentRow.getAttribute("DepartmentName");   

Con esta estructura, tomamos el valor (attribute), de la fila (row) actual y que hemos guardado en currentRow.

Con esto ya tendremos en el bean el valor, y podemos utilizarlo como queramos.
En este ejemplo, lo que se hizo fue mostrar en pantalla dicho valor, y para ello, se creó un método get, con el fin de poner el valor dentro de un outputText.





Al ejecutar el ejemplo, se nos muestra la tabla con los distintos campos (attributes), y al seleccionar una fila, y luego, pulsar el botón "Actualizar", aparece al lado de éste el nombre del Departamento seleccionado.

Puedes descargar el ejemplo en este enlace: Descargar Ejemplo obtener Valor tabla
La página del ejemplo es vistaDepartamentos.jspx.

Artículos relacionados:
- Crear una tabla de Datos con aftable en 11g

jueves, 4 de septiembre de 2014

Crear una tabla de datos con AFTable en 11g

Descripción: En este artículo veremos cómo crear un listado de datos, con el componente aftable a partir de un View Existente, en 11g.

Nota: Existe otro artículo titulado "Añadir un listado" que realiza la misma operación en 10g.

La diferencia a la hora de realizar ambas operaciones en ambas versiones apenas es apreciable. Si lo sabes hacer para una versión, lo sabes hacer en en la otra.

Para poder crear una tabla de datos o un listado de datos con un afTable, de forma gráfica, es necesario haber creado antes la view, así como incluir dicha view en un Application Module.
Importante: Si no se ha incluido el ViewObject en un Application Module, no podremos realizar esto.

Si vamos al Model obsevamos que ya hemos creado la el ViewObject.
En caso de no haberlo creado puede verse el proceso en el artículo Crear un ViewObject en 11g.

vista en el model del viewobject
vista en el Model del viewobject


Para poder crear el listado de datos con un aftable, debemos ir al Data Controls (antiguo Data Control Palette en 10g), y buscar dentro del Appmodule la view que queremos utilizar.

vista viewobject en data controls
vista del viewObject en Data Controls

Seleccionamos el viewObject del cual queremos tener el listado / tabla, y lo arrastramos a la página donde queremos insertarlo (vista de diseño jspx o jsff).

Al soltar el elemento ahí, se nos muestra un menú contextual en el cual se nos pregunta sobre la forma en que queremos utilizar el componente que hemos arrastrado.

menu opciones para utilizar el viewobject
menú contextual con opciones de cómo utilizar el viewobject


Una vez seleccionado para este ejemplo el ADF Table, se nos abre una ventana en la cual:
-  Podemos decidir qué columnas del viewObject queremos mostrar,
-  el orden de dichos campos dentro de un registro o fila
-  si permitiremos seleccionar filas (una o varias a la vez)
- Si se va permitir filtrar los resultados
- Si se va a permitir ordenar por valores de los campos

opciones del aftable a crear
opciones del aftable

Al terminar este paso, podremos guardar lo que hemos hecho y ejecutar la págian para ver el resultado.

vista aftable en funcionamiento
aftable en funcionamiento




Puedes amplicar más información 
- Creating ADF Databounds tables (documentación oficial) 

Artículos relacionados en este blog: 
- Crear un ViewObject en 11g
- Crear una Entity en 11g
- Añadir una tabla (listado) (ADF 10g)
- Mostrar todos los elementos de una tabla (aftable)
- Mostrar un número diferente de elementos de una tabla (aftable)
- Colores alternados para una tabla aftable (banding)

martes, 5 de agosto de 2014

Refrescar componente con PartialSubmit y PartialTriggers

Descripción: En este artículo se va a explicar cómo realizar el refresco de un componente sin necesidad de refrescar toda la página, con el atributo partialSubmit y PartialTriggers.

Nota: Puedes descargar el ejemplo para hacer tus propias pruebas.Dentro del proyecto "PaginaBuscador.jspx" Descargar Ejemplo

Para realizar este refresco ADF incluye en sus componente AJAX que permite enviar datos al servidor y recibirlos sin la necesidad de refrescar una pantalla completa.

Utilizaremos para explicarlo un ejemplo en el que tenemos, una tabla (aftable), en el que actualmente disponemos un botón que realiza un refresco.






En este proceso de uso de partialTriggers, se hace referencia al atributo id del componente que genera el cambio.
Por ejemplo, queremos que cuando se seleccione un elemento en la tabla, se cambia el valor que tiene el OutputText, y muestre el valor de la columna LastName de la fila seleccionada.

En los siguientes pasos vamos a ir viendo los elementos que se van nombrando:
Ponemos en el campo Id de la tabla (aftable) el valor idTable. Así cuando queramos referirnos a la tabla como "disparador" del cambio, utilizaremos el Id que le hemos dado.



Si queremos también que el botón seleccionar pueda ser "disparador", haríamos lo mismo, pondríamos un valor en el atributo Id.
Nota: En 11g, no es necesario este paso, porque ya pone un valor por defecto a este atributo. De hecho todos los elementos de la página suelen tener un id asignado. Se recomienda eso sí, personalizarlo para que sea más fácil programarlo.


En esta imagen, hemos indicado que el botonSeleccionar sea el disparador del outputText. Si queremos que sea la tabla, podemos añadir el id de la tabla.
Nota: partialTriggers permite más de un disparador.

Al botón Seleccionar le podemos indicar que cuando sea pulsado, no haga un submit en el que refresque toda la página sino que lo haga parcialmente. Para ello usamos el atributo partialSubmit.



Con esto, el botón que se encuentra en la tabla, actualizaría el OutputText con el valor que tuviera la tabla en ese momento.

Si queremos que el cambio se haga sin necesidad de pulsar el botón, sino simplemente con la selección de un elemento de la tabla, utilizaremos el atributo autosubmit, que se encuentra dentro del facet Selection, en el elemento af:tableSelectOne.







No olvidar, que si hacemos esto del autosubmit, debemos indicar en el campo partialTriggers del botón, el valor "idTable", si no, no hará caso al cambio que se ha producido en la tabla.

lunes, 4 de agosto de 2014

Mostrar el valor seleccionado en un aftable

Descripción: En este artículo veremos cómo tomar el valor seleccionado en una tabla (aftable) y mostrarlo en pantalla. Para ello usaremos bindings.

Partimos de una página donde hay un buscador, y un aftable que muestra los resultados de la búsqueda.





Para mostrar el elemento seleccionado utilizaremos un OutputText.

incluir outputText para mostrar valor seleccionado
incluir outputText para mostrar valor seleccionado


Pero claro para poder mostrar el valor seleccionado en una tabla, no podemos tomar el valor directamente de ésta, sino a través del binding.
Para ello, debemos ir a la página de definición y crear un atributeValue.

crear attributeValue en pagina definicion
se crea un attributeValue




Dentro del bloque bindings, se selecciona con el botón derecho y en el menú contextual seleccionamos Insert inside bindings, y luego atributeValues.

Al hacerlo se nos muestra la siguiente ventana.

attribute binding editor
attribute binding editor



Seleccionamos el campo que queremos mostrar. En este caso el apellido (LastName).

En el outputText, solo tenemos que indicar que en el atribute Value, vamos a tomar el valor del binding.
#{bindings.LastName}

Lo podemos hacer pulsando la opción "bind to data" que está justo encima, y que nos abrirá un cuadro para crear la expresión del lenguaje que irá.

asistente expresiones para tomar el valor del binding
asistente Expresiones


Nota: Es posible que en la parte izquierda no aparezca el valor que hemos creado con el atributeValue. En ese caso puedes probar a guardarlo todo, comprobar que se ha creado el atributeValue correctamente. Si está creado y no aparece en el cuadro, bastará con cerrar la página y volverla a abrir.

Podemos añadir, si queremos, un texto que acompañe al valor que seleccionamos.

atributo value
añadimos un texto en el atributo Value



Ya podemos ejecutar la página y ver el resultado:



vista resultado



Como comprobamos, podemos seleccionar varios elementos, y no cambiar el texto inferior. Sólo cuando se pulsa el botón "Seleccionar", se produce el refresco de la pantalla, y en ese momento, también se refresca con el valor que ha pasado al binding.

En el próximo artículo veremos cómo refrescar el valor, sin necesidad de estar pulsando el botón seleccionar, a través del atributo autosubmit, partialsubmit y con el atributo Partialtriggers.


Artículos relacionados:
- Añadir una tabla (listado)
- Mostrar todos los elementos de una tabla (aftable)
- Refrescar componente con PartialSubmit y PartialTriggers 

lunes, 14 de julio de 2014

Ejemplo Formulario de búsqueda en 11g. Consulta y Resultados

Descripción: En este ejemplo vamos a crear un formulario sencillo de búsqueda (search form) en 11g.
Para ello, tendremos un buscador que nos muestre las personas que trabajan en la empresa.
Más adelante ya veremos la creación de un formulario de búsqueda en 10g.

Dado que existen distintos aspectos que intervienen en la creación de este formulario, lo iremos viendo en varios artículos para que pueda verse con claridad cada paso y no saturarnos.

Nota: Nos ayudaremos en este tutorial del esquema HR. Si lo deseas, puedes descargar el código y hacer pruebas. (No olvides que es para 11g.)

Paso 1. Crear la consulta y los resultados.


La consulta para mostrar los resultados y su filtrado, se hace a través de un ViewObject.

Nota: Puede ver un ejemplo en , de este mismo blog.
En nuestro ejemplo vamos a EmpleadosView, y hacemos doble click, para entrar en el editor y acceder a la consulta que contiene el viewObject.

seleccion viewobject
seleccionamos  ViewObject


query viewobject
query del ViewObject



Es posible que queramos mostrar algún campo adicional a los que ya se encuentran ahí.
Para ello, solo tenemos que indicar el campo que queremos añadir, y también de dónde proviene.
Esto se puede hacer o bien manejando la consulta (query) o bien, gráficamente a través del editor de ViewObject.


Nota: En el artículo Añadir un campo nuevo a un viewobject se puede ver cómo hacerlo.

En el siguiente artículo definiremos las bind variables, y veremos lo que son.

Fuente de referencia:
Create Simple Search form in Oracle ADF de ADFSanthosh


Otros articulos relacionados:
- Ejemplo de formulario de búsqueda 11g (parte 2). Definir Bind Variables
- Ejemplo formulario de búsqueda (parte 3). View Criteria
- Ejemplo formulario de búsqueda (parte 4). Creación de la página.

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

    viernes, 7 de marzo de 2014

    Guardar datos de una tabla (af:table) 2/2

    En el artículo anterior vimos cómo añadir una tabla ( af:table), sobre la cual queríamos cambiar los datos.
    Sin embargo al intentar guardar los datos éstos nos se guardaban.

    En este artículo vamos a ver en qué momento los datos pasan de nuestra pantalla, donde tenemos los cambios a la aplicación.
    También veremos cómo pasar de la aplicación a la base de datos.

    En ADF existe una cosa que se llama ciclo de vida o lifecycle, en el cual se define los pasos por los que pasa una página antes de mostrarse en pantalla, o tras solicitar que se realice una acción.

    Por eso en el artículo anterior, cambiamos los datos y éstos no cambiaban, o incluso el botón de commit, para que se guardaran los cambios, no estaba activo.


    pantalla resultante ejemplo anterior
    pantalla resultante ejemplo anterior



    Vamos a hacer lo siguiente, vamos a ir al Components Palette, seleccionamos el componente CommandButton, y miramos en la pestaña de estructura (structure) para colocar el botón, dentro del subelemento Table facets, y a su vez dentro de Actions.
    (ya explicamos más adelante lo que son los facets).


    commandButton en facets af:table
    commandButton en facets de af:table


    y en la vista general. No olvidemos que este editor de diseño (Design), no es muy bueno con páginas complejas.


    vista general jdeveloper

    Ejecutamos la página nuevamente.


    vista pagina con nuevo boton
    vista página con el nuevo botón


    Como podemos ver, al colocar el boton dentro del facet action, lo podemos ver tanto al comienzo como al final de la tabla (aunque sólo hemos puesto un botón). Esto nos recuerda a otros componentes de busqueda que hemos visto en otras páginas, por ejemplo en los correos web, donde es fácil encontrar los mismos botones al comienzo y al final del listado de correos.
    No olvidemos que los componentes estan para facilitarnos muchas tareas, y es útil conocer lo que nos ofrece para aprovechar sus características.

    El botón commandButon1 aparece habilitado, y sin embargo el de commit, no lo está.
    Pulsemos el botón que hemos creado (da igual si el del principio o final de la tabla) y observemos lo que pasa.


    vista aplicacion tras pulsar commandbutton
    tras pulsar commandbutton1

    Exactamente eso que estás pensando: Nada.
    Vamos a cambiar al cuadro que aparece como "Steven K." por "Steven" tal como intentábamos en el post anterior.

    cambio de datos en la aplicacion
    vista página tras los cambios


    Ahora el botón de commit se ha habilitado. La razón de esto (y también de que estuviera deshabilitado) la podemos encontrar si seleccionamos el botón en la pestaña de Structure o en el jspx (vista Design). Vamos a continuación a Properties Inspector.
    Si pinchamos un par de veces nos encontraremos con esto:

    property inspector boton commit
    vista property inspector


    En el atributo Disabled vemos:
    #{!bindings.Commit.enabled}

    Esto es una expresión que nos dice, que estará deshabilitado si bindings.commit.enabled es "false".
    Este es un valor interno (ya veremos proximamente estos valores), que indica que la aplicación habilita el commit.
    Como vimos hace un momento, pulsamos el botón commandButton1 y no pasó nada. Por lo que podemos ver que la aplicación cuando detecta un dato nuevo, habilita la posibilidad de guardar los datos.
    Es decir: Una cosa es que la aplicación reconozca que ha habido un cambio en los datos que contiene, y otra cosa es que se decida guardar estos cambios en la base de datos.

    En este ejemplo, si pulsamos el botón "commit", se procedería a guardar los cambios realizados.

    pagina antes pulsar commit
    antes de pulsar "commit"


    En el property inspector podemos ver en la action:
    #{bindings.Commit.execute}

    Ya una vez guardado, podemos parar la aplicación, volver a entrar, y veremos que los cambios siguen estando.

    pantalla resultado
    pantalla resultante


    Puedes descargar el ejemplo en la siguiente dirección Descargar Ejemplo

    miércoles, 5 de marzo de 2014

    Guardar datos de una tabla (af:table) 1/2

    Resumen: En este ejemplo vamos a crear una página en la cual podamos tener una tabla con datos, y que éstos puedan ser editados sobre ésta.
    Hasta ahora, los ejemplos vistos estaban relacionados con consultas, que presentaban los datos. Ahora vamos a ver cómo se comporta el ADF para gestionar modificaciones y guardar los cambios.

    Nota sobre este artículo: este post va a tener varias partes, en la primera lo haremos cometiendo algunos errores comunes a la hora de crear una página de este tipo. Así podremos entender mejor los mecanismos que tiene el ADF para guardar los cambios.

    Para ello vamos a crear una nueva página.

    crear pagina jspx. Applications Navigator
    vista de Applications Navigator


    Seleccionamos JSF Page, y continuamos el asistente hasta el final, sin cambiar nada de las opciones que nos ofrece, ni crear beans.

    galeria componentes
    vista Galería Componentes


    El nombre que pondremos a nuestra página sera tabla_editable.jspx.

    asistente creacion jspx
    asistente creacion jspx




    asistente creacion jspx




    Ya disponemos de nuestra nueva página en blanco.
    Nos vamos al DataControl Palette y arrastramos el objeto ViewObject al bloque central donde se encuentra el jspx, y lo soltamos.
    De las opciones que nos ofrece en el menú contextual escogeremos ADF Table.

    crear la tabla desde dataControlPalette
    en el momento de incluir la tabla desde DataControl Palette



    En el conjunto de opciones, le damos a guardar sin seleccionar ninguna opción de las que nos ofrece (enable selection o sortable).

    Este es el aspecto que presentara nuestra nueva tabla en la página.


    vista jspx con aftable




    Podemos pensar que nos hace falta un botón para Guardar los cambios. Para ello, arrastramos del dataControl Palette la operación (Operations) commit (o confirmar, según el idioma en que lo tengamos configurado).


    datacontrol Palette eligiendo operacion submit


    Lo arrastramos desde el DataControl Palette y elegimos que esa operación se muestre como " ADF Command Button".


    incluir boton submit




    Podemos ver cómo ha quedado nuestro botón en la página.


    aspecto de la pagina jspx


    Guardamos todos los cambios y podemos ejecutar la aplicación.

    Este es el aspecto de nuestra tabla, para que podamos editarla.



    aspecto de la pagina en ejecucion

    Vamos a coger en en este ejemplo el nombre que aparece en la primera línea y vamos a cambiar “Steven K”, por “Steven”.
    Nota: Si en tu base de datos no tienes esto, puedes probar a cambiar otro nombre.

    aspecto de la pagina cambiando los datos


    Como vemos hemos cambiado el nombre, y aparentemente no sucede nada.
    De hecho vamos a avanzar en nuestra tabla, para ver el siguiente bloque de resultados, y luego volver, a ver si nuestro “Steven” contiene los mismos cambios.

    aspecto de la pagina cambiando los datos




    captura datos sin cambiar


    Aparentemente sí contiene los cambios.
    También debemos observar que el botón que habíamos puesto para hacer Commit, ha permanecido desactivado en todo momento.
    Parece que no hacía falta incluirlo y que nuestra estupenda tabla, ya hace el trabajo de guardar los datos por nosotros.
    Podemos pensar que al realizar los cambios en la tabla, éstos cambios se han guardado ya en nuestra base de datos.

    Bien llegados a este punto vamos a hacer dos cosas. Una es refrescar la página con el F5 (sí, eso que siempre digo que no se debe hacer para evitar resultados inesperados).

    aspecto de la pagina boton submit activo
    página tras el refresco (F5)

    Curiosamente tras hacer este refresco de la página, observamos que el botón "Submit" se ha activado: Curioso, ¿no?.

    Los datos siguen aparentemente correctos, y nuestro “Steven” sigue tal cual lo dejamos.

    Bien ahora hagamos lo siguiente.
    Vamos a copiar la url que está en el navegador, y la copias completamente al portapapeles.
    Cierra el navegador, y vuelve a abrirlo para poner la dirección que acabas de guardar.
    (Nota: esto sirve por el tipo de ejemplo que estamos utilizando en otros puede ocasionar problemas).
    Lo escribes, y aparece nuestra tabla, pero también vuelve a aparecer “Steven K”.
    Qué extraño, ¿no habíamos dicho que estaba guardado?

    Podemos pensar que es un efecto (de esos extraños que puede hacer el ADF), por copiar y poner la url.
    Vamos a hacer otra prueba: Parar la aplicación y volverla a arrancar con la página que estamos viendo.
    (que Sí, tu hazme caso y ya verás).

    El resultado es otra vez el mismo:
    El cambio que creíamos haber realizado, realmente no ha sido hecho.

    La razón la desvelaremos en el próximo artículo.

    Puedes descargarte en este enlace el ejemplo Descargar ejemplo


    El por qué de este artículo, es para que puedas entender cómo funciona internamente el ADF y también aprender a detectar ciertos errores al desarrollar aplicaciones que no son visibles.

    También otra de las razones es que la documentación oficial se explica todo esto, pero al mostrarse muy teórico, no se sabe muy bien de lo que está hablando.
    Así que he preferido un caso práctico, para poder hacer "tangible" aquello que nos puede sonar algo nebuloso.

    Artículos relacionados:
    - Guardar datos de una tabla (af:table) 2/2
    Añadir una tabla (listado)