Definiendo el tamaño de las regiones

By: |Published on: May 11, 2009|Categories: Apex|

Una de las características importantes de una aplicación es su apariencia. No es lo mismo, por ejemplo, un reporte que sigue y sigue hacia la derecha, más allá de lo que la pantalla del computador puede mostrar, o bien, que se extienda indefinidamente hacia abajo de la página.

Para evitar esto, y hacer la aplicación más atractiva para el usuario final, podemos utilizar las características de los archivos de estilos (css), de esta manera, podemos definir el tamaño de cada región que tenemos en nuestra página, de manera que podamos acomodar cada una de ellas para rellenar de la mejor manera el espacio con que contamos en pantalla, de acuerdo a una resolución específica.

Utilice el siguiente indicativo para definir y aplicar los tamaños a cada región en sus páginas:

    1. En la cabecera html de la página indicada (la página que desea formatear), incluya el siguiente código:
<style>
   .RegionScroll_tree
     {
      width:200px;
      height:345px;
      overflow:auto;
      border:solid 0px;
     }
   .RegionScroll_report
     {
      width:665px;
      height:320px;
      overflow:auto;
      border:solid 0px;
     }
</style>

En el código anterior estamos definiendo dos tipos de región, una de tipo reporte (RegionScroll_report) con un ancho de 665 pixeles y 320 pi­xeles de altura, que en caso de que el reporte se extienda más allá de estos bordes, agregará barras de deslizamiento en donde sea necesario; laterales para subir y bajar por el reporte, o inferior, para moverse a izquierda o derecha. Además se le indica no agregar un borde a la región. La otra definición es para utilizar en una región de tipo árbol de 200 x 345 pi­xeles (RegionScroll_tree).

    1. En el campo «Cabecera de Región» de la región debe agregar el siguiente código:
          <div class="RegionScroll_report">
    1. Finalmente, en el campo «Pie de página de Región», de la región indicada, agregue:
          </div>

Y eso es todo. Pero para quienes no han comprendido como funciona, les explico cada una de las líneas de definición de estilo:

width:200px; Define el ancho de la región en 200 pixeles
height:345px; Define la altura de la región en 345 pixeles
overflow:auto; Indica que se debe agregar las barras de deslizamiento de manera automática, en caso de que sean necesarias
border:solid 0px Indica dibujar un borde sólido a la región de 0 pixeles (no se dibuja un borde)

Pueden agregar otras características a la región y modificar las anteriores de acuerdo a sus deseos y necesidades (necesitan dar una revisión a algún tutorial de CSS.

Pronto volvemos con una nueva publicación, Estén atentos.

Share This