miércoles, 23 de julio de 2008

07. Otros Layouts

  • 'fit': Este layout al parecer permite hacer que los elementos abarquen todo el área cliente del contenedor, así que, sólo se muestra el primer elemento que se especifique en la estructura de items del contenedor.


  1.         table.mante tr td.azul, span.azul {background:url("../cls_img/gradiente6.png");border-right:none;}

  2.         table.mante tr td.rojo, span.rojo {background:url("../cls_img/gradiente9.png");border-right:none;}

  3.         table.mante tr td.negro, span.negro {background:url("../cls_img/gradiente8.png");border-right:none;}

06. Accordion Layout

Esta distribución permite distribuir los elementos de un contenedor, de forma que sólo uno de ellos está desplegado, y los demás elementos están colapsados.

Aquí un ejemplo:
    <script type="text/javascript">
        Ext.onReady(function() {

            var item1 = new Ext.Panel({
                title: 'Accordion Item 1',
                html: 'Unod',
                cls:'empty'
            });

            var item2 = new Ext.Panel({
                title: 'Accordion Item 2',
                html: 'Dos',
                cls:'empty'
            });

            var item3 = new Ext.Panel({
                title: 'Accordion Item 3',
                html: 'Tres',
                cls:'empty'
            });

            var item4 = new Ext.Panel({
                title: 'Accordion Item 4',
                html: 'Cuatro',
                cls:'empty'
            });

            var item5 = new Ext.Panel({
                title: 'Accordion Item 5',
                html: 'Cinco',
                cls:'empty'
            });

            var viewport = new Ext.Viewport({
                layout:'accordion',
                layoutConfig:{animate:true},
                items:[item1, item2, item3, item4, item5]
            }
);
        });
    </script>

Al ejecutar la página, se ve así:
  • Se ha establecido la propiedad 'layout' del contenedor, a 'accordion'.
  • Se ha establecido la propiedad 'layoutConfig' con una estructura, que tiene como una de sus propiedades a 'animate', que debe establecerse a true si se quiere que el colapso sea animado.

05. Table Layout

En esta distribución podemos ordenas los elementos de un contenedor como si fuera una tabla html. El ancho de las columnas y la altura de las filas, depende del ancho y alto de los elementos que están dentro de cada celda. Es posible utilizar las propiedades rowspan y colspan, tal como se hacen en las tablas html.

Aquí un código de ejemplo:
    <style type="text/css">
        #main-panel td {
            padding:5px;
        }
    </style>
    <script type="text/javascript">
        Ext.onReady(function() {
            var panel = new Ext.Panel({
                id:'main-panel',
                baseCls:'x-plain',
                renderTo: Ext.getBody(),
                layout:'table',
                layoutConfig: {columns:3},
                // applied to child components
                defaults: {frame:true, width:200, height: 200},
                items:[{
                    title:'Item 1'
                },{
                    title:'Item 2'
                },{
                    title:'Item 3'
                },{
                    title:'Item 4',
                    width:410,
                    colspan:2
                },{
                    title:'Item 5'
                },{
                    title:'Item 6'
                },{
                    title:'Item 7',
                    width:410,
                    colspan:2
                },{
                    title:'Item 8'
                }]
            }
);
        });
    </script>
  • Notar que no se ha utilizado el objeto Panel envés de Viewport, al parecer Panel genera una tabla real, a la cual se puede aplicar la hoja de estilos que hace referencia a un tag de celda de tabla (td).
  • Se ha establecido la propiedad 'layout' a 'table'.
  • Se ha establecido la propiedad 'layoutConfig' con una estructura que indica que debe haber 3 columnas.
  • Hay una propiedad llamada 'renderTo' que tiene el valor Ext.getBody() que no lo he podido interpretar, pero que parece ser necesario para que funcione esta distribución.
  • La propiedad 'default' del contenedor sirve para establecer las propiedades por defecto que van a tener los elementos que contiene. Se le pasa una estructura con los valores de las propiedades.
  • En los elementos (ítems) podemos ver como se utiliza la propiedad 'colspan' para que el elemento abarque otras celdas. También se puede utilizar 'rowspan'.
Aquí se puede ver el resultado:

04. Column Layout

Esta distribución alinea los elementos de izquierda a derecha, y de arriba a abajo, pudiendo especificar el ancho de cada uno de los elementos, ya sea con la propiedad 'width', que es fijo, o 'columnWidth', que es un ancho relativo al contenedor. Se pueden combinar elementos con anchos fijos y relativos pero debe tenerse cuidado, porque si no se hace acuadamente puede dar resultados inesperados.
    <style type="text/css">
        .x-column-layout-ct .x-panel {margin-bottom:5px;}
    </style>
    <script type="text/javascript">
    Ext.onReady(function(){
       var viewport = new Ext.Viewport(
            {
                layout:'column',
                items:[{
                    columnWidth:.33,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px 0px 5px 5px',
                    items:[{
                        title:'Panel 1',
                        html:'Cuerpo 1'
                    }]
                },{
                    columnWidth:.33,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px 0px 5px 5px',
                    items:[{
                        title:'Panel 2',
                        html:'Cuerpo 2'
                    }]
                },{
                    columnWidth:.34,
                    baseCls:'x-plain',
                    bodyStyle:'padding:5px',
                    items:[{
                        title:'Panel 3.1',
                        html:'Cuerpo 3.1'
                    },{
                        title:'Panel 3.2',
                        html:'Cuerpo 3.2'
                    }]
                }]
            })
    }
);
    </script>
Al ejecutar la página, se ve así:
  • Hay que tener en cuenta que para que el diseño salga bien, debemos establecer algunos márgenes de separación utilizando estilos, por eso se utiliza una hoja de estilos para establecerlos.
  • Es recomendable utilizar un contenedor dentro de otro contenedor antes de aplicarlo a la columnas, de esta forma podremos separar las columnas utilizando estilos.
  • La propiedad baseCls nos permite dar un estilo sin bordes a los contenedores de los paneles.

03. Border Layout

Este Layout nos permite distribuir los elementos de un contenedor alineándolos a los bordes superior, inferior, izquierdo, derecho y al centro, de forma similar al layout de Java Swing.
    <script type="text/javascript">
        Ext.onReady(function() {
            var viewport = new Ext.Viewport({
                layout:'border',
                items:[
                    {
                    region:'west',
                    margins:'5 5 5 5',
                    cls:'empty',
                    bodyStyle:'background:#f1f1f1',
                    html:'Panel',
                    width:200,
                    title:'Mi Sector',
                    split:true
                },{
                    region:'center',
                    margins:'5 0 5 0',
                    cls:'empty',
                    bodyStyle:'background:#f1f1f1',
                    html:'Panel'
                },{
                    region:'east',
                    margins:'5 5 5 5',
                    cls:'empty',
                    bodyStyle:'background:#f1f1f1',
                    html:'Panel',
                    width:200
                }]
            }
);
        });
    </script>
En ese código:
  • Se ha establecido el 'layout' a 'border'
  • Los elementos que componen el contenedor tiene establecido la propiedad 'region', que puede tener los siguiente valores:
    • 'west': Oeste (izquierda)
    • 'east': Este (derecha)
    • 'south': Sur (abajo)
    • 'north': Norte (arriba)
    • 'center': Centro
  • Se entiende que establecer un ancho o alto a un elemento ubicado en el centro no lo va afectar, pues se rige por la distribución del contenedor
  • Los anchos o los altos son fijos para los que están alineados al oeste, este, sur o norte, cuando se cambia de tamaño a la ventana.
  • Se ha utilizado la propiedad 'margin' en los elementos, para establecer los márgenes de arriba derecha abajo e izquierda respectivamente, para que no estén tan pegados.
  • Se ha establecido la propiedad 'cls' para establecer la clase al cual pertenece el contenido de los elementos, esto es utilizado para establecer estilos.
  • Se ha establecido la propiedad 'bodyStyle' para aplicar directamente un estilo al contenido de los elementos.
  • Una propiedad interesante es 'split' que debe establecerse a true para permitir que el usuario pueda cambiar el tamaño del sector en tiempo de ejecución. Esta propiedad sólo hace efecto en los sectores que están en los bordes.
Este es el resultado del ejemplo:
  • Otra propiedad interesante es 'collapsible' que permite colapsar un sector, debemos establecer su valor a true. Parece que es necesrio establecer también la propiedad 'title' del sector, porque allí es donde aparece el botón para colapsar. Así se vería la pantalla utilizando estra propiedad:
Lo que todavía no se, es, si se pueden establecer porcentajes envés de un ancho fijo.

02. Anchor Layout

Los Layouts son las formas en la que un contenedor distribuye a los elementos que están contenidos en él. Puede hacerse una analogía con los layouts que utiliza java para distribuir sus componentes.

El Anchor Layout permite:
  • Distribuir el ancho de los elementos en relación al ancho del contenedor utilizando un porcentaje o un número negativo.
  • Distribuir la altura de los elementos en relación a la altura del contenedor utilizando un porcentaje o un número negativo.
Por ejemplo, veamos el siguiente código:
    <script type="text/javascript">
        Ext.onReady(function() {
            var viewport = new Ext.Viewport({
                layout:'anchor',
                items:[{
                    title:'Item 1',
                    html:'Uno',
                    anchor:'50% -20'
                }]
            });
        }
);
    </script>
Da el siguiente resultado:
Vemos que si cambiamos el tamaño de la ventana, automáticamente se redimensionan los elementos. Otro ejemplo:
    <script type="text/javascript">
        Ext.onReady(function() {
            var viewport = new Ext.Viewport({
                layout:'anchor',
                items:[{
                    title:'Item 1',
                    html:'Uno',
                    anchor:'100% 30%'
                },{
                    title:'Item 2',
                    html:'Dos',
                    anchor:'-200 70%'
                }
]
            });
        });
    </script>
Nos da el siguiente resultado:
Podemos ver que:
  • Hemos estatablecido el Layaout (distribución) del Viewport por medio de la propiedad 'layout', en este caso hemos puesto 'anchor'.
  • Hemos establecido la propiedad 'anchor' de los elementos que están dentro del Viewport. Esta propiedad tiene dos valores: El primer valor indica un porcentaje respecto al ancho del contenedor o un valor negativo que indica cual es el margen derecho que debe mantenerse. El segundo valor indica un porcentaje respecto al alto del contenedor o un valor negativo que indica cual es el margen inferior que debe mantenerse.

martes, 22 de julio de 2008

01. Introducción

Después de haber visto una serie de frameworks javascript, entre ellos: prototype, JQuery, scriptaculous, Mootools, Dojo, Qooxdoo, ExtJS entre otros. Definitivamente de todos ellos, los que más destacan son Qooxdoo y ExtJS.

Aunque al inicio pensé buscar un framework javascript sólo para simplificar y estandarizar el código para todos los navegadores y poner algunos efectos a las páginas; en realidad pueden hacer mucho más. Los dos últimos frameworks mencionados tienen además una serie de controles (denominados también widgets) que permiten implementar características interesantes, entre las que resaltan:
  • Posibilidad de dividir la pantalla en paneles resizables (layouts).
  • Posibilidad de incluir temas.
  • Inclusión de controles de entrada de datos especiales como spinner, calendar
  • Inclusión de controles que soportan validación de datos.
  • Posibilidad de asignar tooltips a los controles.
  • Poder diseñar menús drop-down y contextuales.
  • Agrupar controles en tabs (pestañas).
  • Rejilla (grid).
  • TreeView.
  • ListView.
  • Combos editables.
  • Listas con Imágenes.
  • Diálogos modales de ventanas (simuladas) y reales (divs).
  • Ventanas.
  • Posibilidad de crear nuevos controles y de extender la funcionalidad de los ya existentes.
Aunque el framework ExtJS no tiene un control spinner (ingreso de números), me ha parecido que es el más completo que hay, destacar sobretodo su Rejilla (grid), que es muy flexible; y además tiene una gran cantidad de controles, que permiten hacer prácticamente cualquiero cosa.

Para empezar, hay que descargarlo desde:

http://extjs.com/products/extjs/download.php?dl=extjs21

  • Descomprimirlo en cualquier sitio.
  • Crear una página HTML y ponerle cualquier nombre.
  • Escribir el siguiente código:
<html>
<head>
    <title>Anchor Layout</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="ext/ext-all.js"></script>

    <script type="text/javascript">
        Ext.onReady(alert("Hola Mundo"));
    </script>
</head>
<body>
</body>
</html>

Explicando:

  • Para establecer la apariencia de los controles, hemos puesto esta línea:

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>

  • Para el soporte de los controles básicos, hemos puesto esta línea:

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

  • Se ha incluido también la librería básica del framework:

<script type="text/javascript" src="ext/ext-all.js"></script>

  • El objeto Ext, es el objeto principal de la librería, siempre debe hacerse referencia a ella.

  • El método onReady llama a la función que se le pasa como parámetro en el momento en que la página carga todos los elementos html y cuando está lista para procesar código javascript. Es mejor que el evento onUpload porque no espera a que se carguen las imágenes. En ese método normalmente se crean los objetos que uno quiere que aparezca desde el inicio. En el ejemplo hemos puesto un alert que se ejecutará cuando se cargue la página

  • Ahora crearemos un objeto Viewport por medio del método Viewport del objeto Ext. El objeto Viewport representa a la página, el contenedor principal y es allí donde pondremos todos los componentes. Modifique el código javascript para que se cree el objeto Viewport cuando se cargue la página.

    <script type="text/javascript">
        Ext.onReady(function() {
            var viewport = new Ext.Viewport();
        }
);
    </script>
  • Si ejecutamos la página, todavía no aparece nada. Pero ahora vamos a añadir un sector (llamémoslo así por ahora), para ello le pasamos una estructura como parámetro a la función que crea el Viewport. En dicha estructura se pasan las propiedades que va a tener el Viewport, por ahora sólo estableceremos una propiedad, que es 'items'. A este parámetro se le asigna los componentes hijos que va a tener el Viewport, que como hemos dicho va ha ser un sector.
    <script type="text/javascript">
        Ext.onReady(function() {
            var viewport = new Ext.Viewport({
                items:[{}]
            }
);
        });
        </script>
  • Hemos añadido un elemento sin propiedades, si ejecuta la página va a poder visualizar una línea en la parte superior. Éste es el sector que se acaba de añadir; la estructura que se la ha pasado como primer ítem '{}' ha sido interpretado como un elemento, en este caso, un sector, este sector puede contener al mismo tiempo otros componentes hijos. Ahora vamos a ver que otras propiedades que tiene el sector.
    <script type="text/javascript">
        Ext.onReady(function() {
            var viewport = new Ext.Viewport({
                items:[{
                    title:'Item 1',
                    html:'wtf',
                    width:600,
                    height:200,
                }
]
            });
        });
        </script>
  • Vamos a agregar otro sector al Viewport
.
    <script type="text/javascript">
        Ext.onReady(function() {
            var viewport = new Ext.Viewport({
                items:[{
                    title:'Item 1',
                    html:'wtf',
                    width:600,
                    height:200,
                },{
                    html:'Hola',
                    html:width:300,
                    html:height:100
                }
]
            });
        });
        </script>
Se vería algo así (hacer click sobre la imagen para ampliarla):