CoreTable (1)

Vamos a dedicar este tutorial al uso del componente Table del framework ADF. Se encuentra en la librería:

	oracle.adf.view.faces.component.core.data.CoreTable 

El componente Table se usa para mostrar datos de manera ordenada. Este componente permite la selección de datos única y multiple, ordenación de campos por las columnas, así como más funcionalidades que iremos viendo a lo largo del manual.

Los valores que acepta este componente son CollectionModel, aunque nosotros podemos darle como valor un List o un SortableModel y él mismo se encargará de convertirlo en el tipo CollectionModel.

Para renderizar correctamente este componente, debemos asociarle unos hijos, que serán de tipo Column. Cada Column representará una columna de la tabla.

Podemos ver como deberíamos anotar una tabla en el fichero JSF en el siguiente ejemplo:

    <af:table …>
        <af:column …/>
        <af:column …/>
    </af:table>

A cada columna, podemos darle como valores de los hijos, cualquier componente que queramos que sea mostrado. Normalmente este componente será un OutputText que mostrará la información necesaria en cada momento:

    <af:table …>
       <af:column …>
          <af:outputText …/>
       </af:column>
    </af:table>

Las tablas tienen asociados una serie de facet en los cuales podemos colocar distintos componentes para darle un aspecto y funcionalidades distintos a las tablas según lo que añadamos. Vamos a ver uno a uno cuales son estos facets:

  • Actions : En este facet podemos añadir botones que aparecerán en la cabecera de la tabla y que son usados normalmente para realizar operaciones con los datos de las filas que tengamos seleccionadas.
  • DetailStamp : Se nos habilitará una columna extra donde aparecera un desplegable que controlará que aparezcan o desaparezcan los componentes asociados a dicho facet.
  • Footer : Los componentes añadidos a este facet se mostrarán en el pie de la tabla.
  • Header : Los componentes añadidos a este facet se mostrarán en la cabecera de la tabla.
  • Selection : A este facet le podemos añadir dos tipos de componentes, TableSelectOne o TableSelectMany que habilitan una columna extra donde dependiendo de cual componente hayamos añadido la tabla podrá ser de selección única o simple.

Un ejemplo completo de tabla sería el siguiente:

    <af:table emptyText="No items were found" banding="row"
        bandingInterval="1" binding="#{backing_untitled1.table1}"
        id="table1" rows="3" var="row"
        value="#{backing_untitled1.listaManuales}">
       
        <af:column sortable="false" headerText="Titulo"
            binding="#{backing_untitled1.column1}" id="column1">
            <af:outputText value="#{row.titulo}"
                binding="#{backing_untitled1.outputText1}"
                id="outputText1"/>
        </af:column>
       
        <af:column sortable="false" headerText="Autor"
            binding="#{backing_untitled1.column2}" id="column2">
            <af:outputText value="#{row.autor}"
                binding="#{backing_untitled1.outputText2}"
                id="outputText2"/>
        </af:column>
       
        <af:column sortable="false" headerText="Formato"
            binding="#{backing_untitled1.column3}" id="column3">
            <af:outputText value="#{row.formato}"
                binding="#{backing_untitled1.outputText3}"
                id="outputText3"/>
        </af:column>

       
        <f:facet name="detailStamp">
            <af:commandButton text="commandButton 1"
                binding="#{backing_untitled1.commandButton1}"
                id="commandButton1" blocking="true"/>
        </f:facet>
           
        <f:facet name="selection">
            <af:tableSelectMany text="Select items and …"
                binding="#{backing_untitled1.tableSelectMany1}"
                id="tableSelectMany1" required="false"/>
        </f:facet>
      
        <f:facet name="actions">
            <af:commandButton text="commandButton 2"
                binding="#{backing_untitled1.commandButton2}"
                id="commandButton2"/>
        </f:facet>
       
        <f:facet name="header">
            <af:outputText value="Cabecera"
                binding="#{backing_untitled1.outputText4}"
                id="outputText4"/>
        </f:facet>

        <f:facet name="footer">
            <af:outputText value="Pie de tabla"
                binding="#{backing_untitled1.outputText5}"
                id="outputText5"/>
        </f:facet>
    </af:table>

Vamos a conocer ahora más propiedades que tienen asociadas los componentes Table:

  • Banding : Indica si queremos que haya una separación de color entre las diferentes filas o columnas. Los valores aceptados son : none, column o row.
  • BandingInterval : El intervalo con el que se mostrará la separación de color explicada anteriormente.
  • EmptyText : Texto que aparecerá cuando la tabla no contenga ningun resultado.
  • Rows : El número de filas que apareceran en la tabla. Si hubiera más resultados que filas definidas, la tabla paginará automaticamente los resultados según el valor que le hayamos seteado. Si le damos el valor 0 se mostrarán todos los resultados sin ningún tipo de paginación.
  • Sortable : Indica si la columna es ordenable o no.
  • SortProperty : Acepta como parámetro el valor de un String o una expresión EL, que corresponderá a la propiedad por la que queremos que se organice la tabla (Ej. Ascendente, Descendente, etc).
  • Var : nombre con el que vamos a referenciar los valores de la tabla cuando le demos valor a las propiedades en los elementos Column. Es decir, si a la propiedad le hemos dado el valor "row" cuando vayamos a acceder a un valor de la tabla desde un Column se haría del siguiente modo:

            <af:outputText value="#{row.formato}" />

Como hemos comentado antes, las tablas aceptan varios tipos de valores, los cuales se encargará de convertir a CollectionModel, para nuestro ejemplo vamos a crear una lista de objetos del tipo List y se la asociaremos a la tabla para que sean mostrados por pantalla:

    public List<Manuales> getListaManuales(){
       
        List<Manuales> listaManuales = new ArrayList<Manuales>();
       
        Manuales manual = new Manuales();
       
        manual.setTitulo("Tablas");
        manual.setFormato("HTML");
        manual.setAutor("nuevascreaciones");
       
        listaManuales.add(manual);
       
        manual = new Manuales();
               
        manual.setTitulo("JSF");
        manual.setFormato("Word");
        manual.setAutor("nuevascreaciones");
               
        listaManuales.add(manual);
               
        manual = new Manuales();
               
        manual.setTitulo("ADF");
        manual.setFormato("PDF");
        manual.setAutor("nuevascreaciones");
               
        listaManuales.add(manual);
       
        return listaManuales;

    }

Este resultado es el que le asociamos a la propiedad value de la tabla:

    <af:table emptyText="No items were found" banding="row"
        bandingInterval="1" binding="#{backing_untitled1.table1}"
        id="table1" rows="3" var="row"
        value="#{backing_untitled1.listaManuales}">

Ahora sólo bastaría crear 3 columnas en nuestra tabla, que se encarguen de mostrarnos los valores de la lista. Como vimos antes, primero debemos setear un valor a la propiedad var y desde los outputText que están asociados como hijos en los column acceder a las propiedades de la lista:

    <af:column sortable="false" headerText="Formato"
        binding="#{backing_untitled1.column3}" id="column3">
        <af:outputText value="#{row.formato}"
            binding="#{backing_untitled1.outputText3}"
            id="outputText3"/>
    </af:column>

Si ejecutásemos ahora nuestra página, nos debería de aparecer algo parecido a lo siguiente:

CoreTable
Los componentes Table llevan también asociadas unas propiedades para capturar los eventos referentes a las filas de la table. Estos son el SelectionListener, Disclosure Listener, etc. Con ellos, podemos acceder a las filas y realizar su tratamiento de manera individual. Esto se realiza de igual manera que con cualquier otro componente. Debemos asociar al Listener el evento que tenemos en el BackingBean que reciba como parámetro el correspondiente Event.

Existen métodos del componente para acceder al elemento seleccionado, como es el getSelectedRowData() que nos devuelve la fila marcada. Éste y otros métodos serán estudiados con más detalles en futuros manuales.

Tags: ,

Comments are closed.