Programación web, aplicaciones móviles , y mi tierra en general

Para esta ocasión mostrare una  de las soluciones que desarrolle hace varios meses atrás y que la implemente en un proyecto que aún estoy trabajando,  y que  por falta de tiempo aun no había posteado, me refiero a la  paginación o Paging  de registros usando ADF Business Components, en la versión anterior a jdeveloper la versión 10, el componente table trae implícita la paginación, de modo que paginar datos no es mayor problema usando esta versión,  sin embargo en  la versión 11g  nuestros af:table no soportan la paginación, por lo que uno de los caminos es usar los tables de la versión anterior es decir los tables de trinidad perdiendo mucho de las capacidades que nos ofrece los af:table, sin embargo otro camino más atrayente es crear nuestra propia paginación y presentar los datos de la forma que se nos ocurra.

Notas del Autor: Antes de iniciar deben saber que el ejemplo que voy a usar lo he tomado de mi aplicación de tesis, así que ciertamente solo voy hacer hincapié en la información y código necesario para entender como paginar los datos usando el foreach, aunque he tomado como ejemplo una view object ya creada será fácil entender el siguiente ejemplo, claro ustedes deben tener cierta experiencia en el uso de jdeveloper y ADF Business Components.

Paginación usando foreach

Cuando paginamos datos usando un foreach, en realidad estamos manipulando los punteros de inicio y fin de dicho foreach, antes de mostrar el código pertinente al foreach, debemos partir del escenario del Modelo de la aplicación, partimos  de una view object llamada RedTabEntrevistaInvitacionVO, la tarea será presentar los registros de 5 en 5. Usando un tree binding definido en el page definition de la pagina jspx.



Para paginar los datos, primero obtenemos el número total de registros de la view object, para ello en la clase java de la view object debemos crear el siguiente método:

  /*
   * Retorna el numero de registros total estimado en la view object
   */
  public long getCount()
  {
     return  getEstimatedRowCount();
    }

Incluimos este método la sección Client Interfase de nuestra view object

Lo segundo será crear un Bean en el proyecto ViewController, creamos la clase java y la incluimos en la sección managed Beans del archivo de configuración adfc-config.xml

El bean a crear es el siguiente

public class InvEntrevistasBean  implements Serializable  {
  long totalRows; // número de registros totales el valor se obtiene desde el viewobject
   int totalPages; //numero de paginas
  int ROWS_PER_PAGE = 5; //numero de registros a presentar
  int punteroActual=1;  // la pagina actual
  int puntBegin;  //puntero de inicio del foreach
  int puntEnd;   //puntero de fin del foreach
  public InvEntrevistasBean()
{}
}

Luego arrastramos El método getcount de la viewobject del Data control al archivo adfc-config.

Luego en el Property Inspector seleccionando el método getcount en pantalla definimos al campo totalRows del Bean InvEntrevistasBean para que recoja el valor retornado por el metodo getCount

El método seteo del campo totalRows es el siguiente, incluyo varios métodos usados para el cálculo de la paginación usados en seguida de obtener el número de registros a paginar.

  public void setTotalRows(long totalRows) {
    this.totalRows = totalRows;
    calcularNumeroPaginas();
    iraInicio();
  }
  // calcula el número de páginas en base al numero de total de registro y el número de registro por pagina
  private void calcularNumeroPaginas()
  {
    long tPag = (long)Math.ceil( (double)totalRows / (double)ROWS_PER_PAGE);
    Long intg=new Long(tPag);
    totalPages= intg.intValue();
    }
  //   setea los valores del puntero de la pagina al inicio

  public void iraInicio()
  {
    punteroActual=1;
      getTextoIntervaloActual();
    }

  /*
   * Este método setea los punteros de inicio y fin usados por el foreach para presentar los registros en cada pagina
   * el cálculo se realiza en base al valor del puntero actual de la pagina, el numero de registros por pagina
   * y el número total de páginas, además devuelve un cadena que contiene un valor informativo del rango actual
   * en el formato 1 a 5 de 10 registros,
   */
  public String getTextoIntervaloActual()
  {
      Long tr= new Long(totalRows);
      Integer tinicio= new Integer (1);
      Integer tfin   =new Integer(ROWS_PER_PAGE);

      if(getPunteroActual()>1)
      {
        int tmp1=0; int tmpin=0;
        if(getPunteroActual() == totalPages)
        {    tmp1=tr.intValue();
              tmpin= (getPunteroActual() -1) *ROWS_PER_PAGE;
        }
        else {
          tmp1= ROWS_PER_PAGE * getPunteroActual();
          int q= ROWS_PER_PAGE -1;
          tmpin=tmp1 -q;
          }
        tfin= tmp1; tinicio= tmpin;
      }
      if(totalPages ==1)
      {
        tfin=tr.intValue();
        }
      String _textorangoactual= tinicio.toString()+" a "+ tfin.toString()+ " de " + tr.toString();
      puntBegin= tinicio-1;
      puntEnd=tfin-1;
      return _textorangoactual;
    }
  public void setPunteroActual(int punteroActual) {
    this.punteroActual = punteroActual;
  }

  public int getPunteroActual() {
    return punteroActual;
  }

Para los botones de Siguiente y Anterior necesarios para la navegación en la página puedes usar los siguientes métodos que se pueden definir en el atributo action listener de cada botón:

  // Se ejecuta justo cuando se presiona el botón siguiente, el botón
//debe tener un atributo PUNTEROSIGUIENTE
//que contenga el numero de la página siguiente

  public void siguienteAvisos_ActionListener(ActionEvent actionEvent) {
    //Obtengo el mapa de atributos del listener del evento action
    Map attributes = actionEvent.getComponent().getAttributes();
    //Obtengo el valor del puntero siguiente del mapa de atributos
    String punt = attributes.get( "PUNTEROSIGUIENTE" )+ "";
    Integer tp=new Integer(punt);
    int vp=tp.intValue();
    vp=vp+1;
    if(vp<= totalPages)
    {

      //cambio el valor del puntero siguiente
      setPunteroActual(vp);
      getTextoIntervaloActual();
    }
  }

    //  Se ejecuta justo cuando se presiona el botón anterior, el botón
  // debe tener un atributo PUNTEROANTERIOR
  //  que contenga el numero de la página anterior
     public void anteriorAvisos_ActionListener(ActionEvent actionEvent) {
    //Obtengo el mapa de atributos del listener del evento action
    Map attributes = actionEvent.getComponent().getAttributes();
    //Obtengo el valor del puntero siguiente del mapa de atributos
    String punt = attributes.get( "PUNTEROANTERIOR" )+ "";
    Integer tp=new Integer(punt);
    int vp=tp.intValue();
    if(vp >1)
    {
      vp=vp-1;
    //cambio el valor del puntero siguiente
    setPunteroActual(vp);
      getTextoIntervaloActual();
    }
  }
    // Se ejecuta justo cuando se presiona el botón para refrescar la
  // página, el botón debe tener un atributo PUNTEROACTUAL
  // que contenga el numero de la página  actual

  public void currentAviso_ActionListener(ActionEvent actionEvent) {
    //Obtengo el mapa de atributos del listener del evento action
    Map attributes = actionEvent.getComponent().getAttributes();
    //Obtengo el valor del puntero siguiente del mapa de atributos
    String punt = attributes.get( "PUNTEROACTUAL" )+ "";

    Integer tp=new Integer(punt);
    int vp=tp.intValue();
    setPunteroActual(vp);
    getTextoIntervaloActual();
  }

Para controlar la visibilidad de los botones anterior y siguiente se usa los siguientes métodos

  public boolean isVisibleSiguiente()
  {
    if(getPunteroActual()< totalPages)
    {
    return true;
    }
    return false;
  }

  public boolean isVisibleAnterior()
  {
    if(getPunteroActual()> 1)
    {
    return true;
    }
    return false;
  }

Una vez definido el bean debemos crear un iterator de la view object de donde vamos a obtener los registros para ello nos ubicamos en el page definition de la página y creamos el iterator necesario

Luego creamos en el mismo page definition un tree binding del iterator creado, podemos decidir que campos deseamos presentar

El page definition tendrá el siguiente aspecto:

Luego de ello nos ubicamos en la página jspx y definimos el foreach de modo que los valores de los punteros de inicio y fin sean los punteros definidos en el Bean, y accedemos al tree binding de la siguiente manera:

<!-- INICIO ANUNCIOS DE PROFESIONALES RECIENTES -->

                <af:panelGroupLayout layout="scroll">
                  <af:panelGroupLayout layout="horizontal" halign="center"
                                       valign="middle">
                    <h:panelGrid columns="1" cellpadding="1" cellspacing="1"
                                 style="text-align:left;"
                                 rowClasses="bottomAlign">
                      <af:forEach varStatus="stat"
                                  begin="#{pageFlowScope.InvEntrevistasBean.puntBegin}"
                                  end="#{pageFlowScope.InvEntrevistasBean.puntEnd}">
                        <af:panelGroupLayout layout="vertical"
                                             styleClass="boxgris"
                                             inlineStyle='background-repeat:repeat-x; background-image:url("../images/box/bk-platinum.jpg");'>
                <af:panelBorderLayout>
                  <f:facet name="start"/>
                  <f:facet name="bottom">
                    <af:panelGroupLayout layout="horizontal">
                      <af:outputFormatted value="#{bindings.EntrevistaInvitacion.children[stat.index].Codigo}"/>
                      <af:spacer width="10" height="10"/>
                      <af:outputFormatted value="#{res['entrevista.fechavisita']} #{bindings.EntrevistaInvitacion.children[stat.index].FechaCreacion}"
                                          styleClass="avisobajo"/>
                    </af:panelGroupLayout>
                  </f:facet>
                  <f:facet name="end"/>
                  <f:facet name="top">
                    <af:panelGroupLayout>
                      <af:outputFormatted value="#{res['entrevista.ofrecidapor']}: "/>
                      <af:outputFormatted value="#{bindings.EntrevistaInvitacion.children[stat.index].EmpresaDescripcion}"
                                          styleClass="naranja"
                                          inlineStyle="font-size:13px; font-weight:bold;"/>
                    </af:panelGroupLayout>
                  </f:facet>
                  <af:panelBorderLayout>
                    <f:facet name="start"/>
                    <f:facet name="bottom"/>
                    <f:facet name="end">
                      <af:panelGroupLayout styleClass="boxgris"
                                           layout="vertical">

                          <af:outputFormatted value="#{res['entrevista.fechayhora']}"
                                              inlineStyle="font-weight:bold;"/>
                          <af:spacer width="10" height="10"/>
                          <af:outputFormatted value="#{bindings.EntrevistaInvitacion.children[stat.index].Fecha}"/>
                        <af:spacer width="200" height="10"/>
                        <af:outputFormatted value="#{bindings.EntrevistaInvitacion.children[stat.index].Hora} : #{bindings.EntrevistaInvitacion.children[stat.index].Minutos} Horas"/>
                        </af:panelGroupLayout>

                    </f:facet>
                    <f:facet name="top"/>
                    <af:panelGroupLayout layout="horizontal">
                      <af:outputFormatted value="#{res['entrevista.direccion']}"
                                          styleClass="avisomediano"
                                          inlineStyle="font-weight:bold;"/>
                      <af:outputFormatted value="#{bindings.EntrevistaInvitacion.children[stat.index].PaisName} - #{bindings.EntrevistaInvitacion.children[stat.index].ProvinciaName}- #{bindings.EntrevistaInvitacion.children[stat.index].CiudadName}"/>
                      <af:spacer width="10" height="10"/>
                      <af:outputFormatted value="#{bindings.EntrevistaInvitacion.children[stat.index].Direccion}"/>
                      <br/>
                      <af:outputFormatted value="#{res['entrevista.edificioydepartamento']}"
                                          inlineStyle="font-weight:bold; font-size:11px;"/>
                      <af:outputFormatted value=" Edificio:  #{bindings.EntrevistaInvitacion.children[stat.index].Edificio}"/>
                      <af:spacer width="10" height="10"/>
                      <af:outputFormatted value=" Oficina:  #{bindings.EntrevistaInvitacion.children[stat.index].Oficina}"/>
                    </af:panelGroupLayout>
                    <af:panelGroupLayout>
                      <af:outputFormatted value="#{res['entrevista.datoscontacto']}"
                                          styleClass="avisomediano"
                                          inlineStyle="font-weight:bold;"/>
                      <af:spacer width="10" height="10"/>
                      <af:outputFormatted value="#{bindings.EntrevistaInvitacion.children[stat.index].Contacto}"/>
                      <af:spacer width="10" height="10"/>
                      <af:outputFormatted value="Email: #{bindings.EntrevistaInvitacion.children[stat.index].Email}"/>
                      <af:spacer width="10" height="10"/>
                      <af:outputFormatted value="Telefono:   #{bindings.EntrevistaInvitacion.children[stat.index].Telefono}"/>
                    </af:panelGroupLayout>
                    <br/>  <br/>
                    <af:panelGroupLayout>
                      <af:outputFormatted value=" #{res['entrevista.notas']} "
                                          styleClass="avisomediano"
                                          inlineStyle="font-weight:bold;"/>
                      <af:spacer width="10" height="10"/>
                      <af:outputFormatted value=" #{bindings.EntrevistaInvitacion.children[stat.index].Notas}"/>
                    </af:panelGroupLayout>
                  </af:panelBorderLayout>
                  <af:panelGroupLayout layout="vertical"/>
                </af:panelBorderLayout>
              </af:panelGroupLayout>
                      </af:forEach>
                    </h:panelGrid>
                  </af:panelGroupLayout>
                </af:panelGroupLayout>

              <!-- FIN DE ANUNCIOS DE PROFESIONALES RECIENTES -->

Para presentar en pantalla los botones de anterior y siguiente junto con el texto informativo del rango actual he usado este código

<af:panelGroupLayout halign="right">
        <af:spacer width="25" height="15"/>
        <div class="lineaSubtitulo"></div>
        <af:panelGroupLayout halign="right">
          <af:outputFormatted inlineStyle="color:Teal;"
                              value="#{pageFlowScope.InvEntrevistasBean.textoIntervaloActual}"/>
          <af:spacer width="10" height="10"/>
          <af:outputFormatted value="|" inlineStyle="color:Teal;"/>
          <af:spacer width="10" height="10"/>
          <af:outputFormatted value="#{res.totaldepaginas}  #{pageFlowScope.InvEntrevistasBean.totalPages}"
                              inlineStyle="color:Gray;"/>
        </af:panelGroupLayout>
        <af:spacer width="100" height="1"/>
        <af:panelGroupLayout inlineStyle="width:99%;" halign="right">
         <af:commandLink text="#{ res['anterior']}"
                               actionListener="#{pageFlowScope.InvEntrevistasBean.anteriorAvisos_ActionListener}"
                               rendered="#{pageFlowScope.InvEntrevistasBean.visibleAnterior}"
                               inlineStyle="color:Teal;">
            <f:attribute name="PUNTEROANTERIOR"
                         value="#{pageFlowScope.InvEntrevistasBean.punteroActual}"/>
         </af:commandLink>
          <af:spacer width="20" height="10"/>
          <af:forEach varStatus="punt" begin="1"
                      end="#{pageFlowScope.InvEntrevistasBean.totalPages}">
            <af:spacer width="2" height="3"/>
            <af:commandLink text="#{punt.index}"
                            actionListener="#{pageFlowScope.InvEntrevistasBean.currentAviso_ActionListener}"
                            disabled="#{ punt.index ==  pageFlowScope.InvEntrevistasBean.punteroActual}"
                            inlineStyle="color:Red; font-weight:bold;">
              <f:attribute name="PUNTEROACTUAL" value="#{punt.index}"/>
            </af:commandLink>
            <af:spacer width="2" height="3"/>
            <af:outputText value="|" inlineStyle="color:InactiveCaptiontext;"/>
          </af:forEach>
          <af:spacer width="20" height="10"/>
        <af:commandLink  text="#{res['siguiente']}"
                               actionListener="#{pageFlowScope.InvEntrevistasBean.siguienteAvisos_ActionListener}"
                               rendered="#{ pageFlowScope.InvEntrevistasBean.visibleSiguiente}"
                               inlineStyle="color:Teal;">
            <f:attribute name="PUNTEROSIGUIENTE"
                         value="#{pageFlowScope.InvEntrevistasBean.punteroActual}"/>
            </af:commandLink>
        </af:panelGroupLayout>
      </af:panelGroupLayout>

Les recuerdo que el ejemplo lo he tomado de una aplicación que aun estoy desarrollando así que ciertamente si tienen dudas pueden postear sus preguntas y comentarios, siguiendo con el ejemplo

Puedes descargarte la clase java que uso para la paginacion en

http://rapidshare.com/files/339554660/BeandepaginacionREDEMPLEOS.txt.html