mancormedia.com

Cuando el armado de sitios web era absolutamente propiedad de las tablas, imagenes y estilos incrustados en el código HTML, sufrí mucho. Eran los días en que no comprendí porque existía esa cosa llamada Front-End. Desafortunadamente para mis momentos de ocio, este tema merecía ser estudiado y comprendido para no depender de otra persona en caso que me soliciten realizar tal honerosa tarea. Armar un diseño.

En este post vamos a mostrar un Layout simple que puede tener muchos usos, dependiendo sea el caso de la aplicación. Solo estamos usando un archivo HTML y una hoja de estilos CSS. La manera como vamos a combinar estas 2 tecnologías es simple. Tuve la oportunidad de trabajar para, segun yo, una de las mejores empresas interactivas del país y porque no decirlo, de la región. Cuando comencé me di cuenta que de lo poco que sabía había aun mas poco que servía es por eso que mi primera recomendación es:

• Prejuicios afuera

Esto esta destinado a quienes no tengan muchos conocimientos o conocimientos básicos del tema. Si eres un superincreibleprogramadordelinfierno, probablemente te aburras y maldigas este blog. Como tal situación no es la idea por la cual comenzamos a hacer esto, entonces les recomiendo que tengan en cuenta esto. Disclaimer avisado, recomendaciones señaladas ocupémonos de lo nuestro: “Armar un Layout simple”.

Lo primero que necesitamos es crear un archivo HTML.

Dreamweaver

La ventaja de usar Dreamweaver es que la creación, importación, edición, modificación y todo tipo de manipulación en diseño Web es sumamente mas facil y menos miserable con DreamWeaver. Muchos ya lo usaron y continuarán haciéndolo. Yo recomiendo que si pueden afrontar el precio de esta dichosa herramienta, lo adquieran sin dudarlo. Realmente tiene demasiadas buenas opciones y se pueden hacer cosas impresionantemente mas rápido que prescindiendo de él. Si les interesa probar dreamweaver y tener todas sus opciones por 30 gloriosos días, descargenlo de aquí.

Primero lo primero

Voy a recomendar hacer lo que, la persona que me enseño a hacerlo hace. Primero dibujar lo que queremos hacer para tener una idea visual de lo que necesitamos y, de esta manera , será mucho mas facil plasmarlo en algun otro lado. Esta super técnica de “primero dibuja, luego programa” es sumamente útil para absolutamente todo, crear una base de datos, un Layout, una estructura de algun sistema.. etc..


Nuestro diseño tendrá el siguiente boceto:

CSS

De hecho este es un tema que no domino mucho pero se algunas cosas que pueden ser de gran utilidad. Lo que siempre pensé es que se debía escribir el estilo de algo que se deseaba modificar. Tuve que hacer un diseño que funcione en todos los exploradores mas usados, es decir, Firefox 3, Opera, Safari, Internet Explorer y la BASURA de Internet Explorer 6. Lamentablemente para todos IE6 es el explorador de internet mas usado en el planeta tierra, ocupando mas del 70% del total de exploradores usados.
Es por esta razón que debemos asegurarnos que cualquier cosa que hagamos se vea bien en todos los exploradores.

Le pregunté a alguien que realmente sabe del tema y Giancarlo de Giancarlospot.com me enseño algo sumamente interesante: existe herencia en css y tambien se puede programar la hoja de estilos (css) de la siguiente manera :

div.data{
	width:950px;
	background-color:#ffffff;
	padding: 0px 20px 10px 10px;
	position:absolute;
	font-family:tahoma;
	font-size:12px;
}

Esto es una clase simple y sencilla para una cap (div) cuyo parámetro “class” es igual a “data”

<div class="data">Contenido de la capa</div>

Esto quiere decir que se puede hacer una hoja de estilos heredando propiedades de cada clase en dicha hoja de estilos. Por ejemplo, en el caso anterior esa clase solo y únicamente servirá para un DIV cuya clase sea “data”. Esto no podrá ser aplicado a alguna otro componente, solo a un div con dicho nombre.

Lo que queremos hacer es un diseño en donde las capas que lo conforman hereden sus propiedades a las capas que tienen dentro y asi podremos tener un diseño con poco HTML y siendo estructurado por una hoja de estilos. También evitamos el hecho de usar los estilos en los componentes dentro del código HTML, algo así:

<div style="width:950px;background-color:#ffffff;padding: 0px 20px 10px
 10px;position:absolute;font-family:tahoma;font-size:12px;"></div>

Esto no sólo complica el leer código html sino que también lo desordena y para que diablos vamos a hacer eso si es que podemos usar CSS?
Aqui va mas del css:

div.data div.leftPanel{ /* div leftPanel dentro del div Data*/
	padding:5px 10px 0px 5px;
	float:left;
	width:200px;
	background-color:#ffffff;
	margin: 5px 5px 5px 5px;
}
div.data div.leftPanel a{ /*etiqueta a dentro del Div leftPanel dentro de data*/
	color:#999999;
	font-weight:bold;
	text-decoration:none;
}
div.data div.leftPanel a:hover{ /* Evento hover de la etiqueta a*/
	border-top:dashed 1px #cccccc;
	border-bottom:dashed 1px #cccccc;
}

Este código tiene mas cosas interesantes! para comenzar tenemos la clase “div.data div.leftPanel”. Esto quiere decir que esta clase afecta solamente a la capa (div) que tenga class=”leftPanel” y que este dentro de la capa que tenga como class a data, entendiendolo mas facil :

<div class="data" >
<div class="leftPanel">
<a>Esto sería afectado</a>
</div>
</div>

De esta manera podemos hacer que las etiquetas hereden sucesivamente sus estilos a otras etiquetas que se encuentren dentro de ellas. Esta manera me pareció mucho mas ordenada y adecuada. De hecho tiene un inconveniente y es que si no se hace de manera ordenada puedes perder la hilación de la estructura al ver el código. La “Clasitis” puede llegar a ser un problema pero si somos ordenados y hacemos las cosas de la manera mas meticulosa , estoy seguro que los resultados hablarán por si solos.

Puedes experimentar la aplicación aquí y descargar los archivos aquí.

Saludos a todos.

javier

Usando Extjs desde hace algun tiempo, no era tan descabellado pensar que se necesitaría meter un componente como una grilla dentro de un tab panel, window panel o solamente un panel comun y corriente. En este Post vamos a repazar como hacerlo y, para este ejemplo vamos a hacerlo con nuestro amigo el Tab Panel.

Estuve haciendo una aplicación para la que fue necesario mostrar 2 grills con información diferente dentro de una misma pagina. Tenía que tener información de cierto tipo pero separada en 2 categorías, vamos a llamarlas : Categoría A y Categoría B.

Esto significaba una excelente oportunidad para hacer uso del tab panel. Lo que vamos a hacer es usar el incomparable Extjs para generar, dentro de una capa, un tab panel con 2 tabs y una grilla diferente para cada tab. Lo interesante de este simple ejemplo es que cada grilla va a tener información diferente y la manera de cargar dicha data puede ser via XML, llamando a un php para que envíe JSON o simplemente llenar un arreglo con data estática. Para este ejemplo utilizaremos las maravillas de php con json y lo mostraremos en la segunda parte de este tutorial!!!

Lo primero que necesitamos es hechar a andar nuestra aplicación con Ext, si aun no lo tienes o no sabes de que estamos hablando descargalo aqui. Para los que conocen Ext a la perfección, este ejemplo resultará demasiado simple para su vasta sabiduría y, por consiguiente puede no gustarles. Si este es el caso entonces… lo lamento.

No vamos a explicar como funciona Ext desde cero ya que esta totalemente fuera del alcance y enfoque de este tutorial. Pero mas adelante explicaremos como se utilizan algunas de sus interesantes características.

Primero lo primero

Realmente, lo primero que debemos hacer es construir el Tab panel. Para esto, solamente necesitamos crear un documento html, poner una capa (div) dentro, ponerle ID a la capa, llamar a las librerías necesarias para que nuestro amigo Ext funcione increiblemente y por último, construir nuesto sumamente positivo TabPanel.

El código de todo lo puedes descargar aqui, pero te recomiendo que sigas leyendo para que sepas que cosa modificar a menos que seas alguien mas positivo aun y puedas entender el código. Si eres uno de ellos entonces… Felicitaciones!

<script type="text/javascript"><pre lang="javascript"><script type="text/javascript"><script language="javascript" type="text/javascript">
Ext.onReady(function(){	
	// Se instancia tabs2 y se construye como un TabPanel
	var tabs2 = new Ext.TabPanel({ 
        activeTab: 0, //El tab activo será el primero
        width:677,  // Configuramos ancho
        height:350, // Configuramos alto
        plain:true,
        defaults:{autoScroll: true}, //Autoscroll en true
		// Se añaden los Items que en este caso seran 2
		items:[{	
				html:"Estamos aqui",
				title: "Categoria 1"
		},{
				html: "<a>Estamos aqui</a>",
				title: "Categoria B"			
		}]
		//items:[grid, grid2]
    });//Renderizamos el tabpanel en la capa 'tabpanel'
		tabs2.render('tabpanel');  
});
</script>

Genial!, en el código de arriba podemos ver varias cosas. Concentrémonos en las primeras lineas. He tratado de comentar las lineas mas relevantes para que puedan mostrar lo que estoy haciendo a medida que vamos progrmando pero he aqui la descripción y meollo del asunto.
La función Ext.onReady() se dispara justo despues de que Ext se haya cargado correctamente. Si Ext no ha cargado, probablemente muestre un mensaje de error y no se pueda continuar. En nuestro caso todo ha marchado de acuerdo con el plan y podemos observar los resultados un poco mas abajo.
No voy a detallar el código HTML y CSS porque sale del enfoque de nuestro tutorial. Mas adelante haremos un tutorial de consejos para html y css. Dicho sea de paso estos 2 temas son sumamente vastos y merecen gran detalle, tiempo, lagrimas, sudor, sangre y demas secreciones para poder ser completamente dominados.
Nosotros volvamos a lo nuesto JAVASCRIPT!!!!

Lo que estamos haciendo es crear un tab panel instanciando una variable tabs2, luego configuramos algunos parametros como ancho, alto, tab por defecto, etc..
La parte interesante esta en Items, ahora Items es el parametro en donde vamos a definir que cosa queremos meter en un panel. En Ext un tabpanel es un Container, dentro de un Container podemos meter un Component o componentes. Para entender esto mejor les recomiendo fuertemente que lean la documentación de Ext. Como me dijeron una vez en los foros ; "Por favor lee la documentacion de los APIS nos hemos tomado mucho tiempo haciendolos".

No me da la gana de leer los apis porque soy "el mas necio"

Si no te gusta leer mucho al menos lee las FAQ (Frequently asked questions) o visita el foro para leer acerca de dudas acerca de los componentes. Una vez mas les recomiendo que lean la documentacion. Esta puede ser encontrada aquí.

Finalmente renderizamos nuesto Tabpanel en la capa que creamos dentro del documento HTML. Nuestra capa puede lucir de esta manera

<div class="tabpanel" id="tabpanel"></div>

Actualmente dentro de nuestro TabPanel existen 2 items. Practicamente son 2 tabs con un título y dentro de ellos un código HTML pequeño. Si observan con atención, verán que el codigo comentado dice

//items:[grid, grid2]

Es esto a lo que queremos llegar, para esto vamos a construir 2 grillas, iguales en este ejemplo pero cargando información diferente.

Segundo paso: Construir los DataGrids

Aqui vamos a instancias 2 datagrids iguales, voy a explicar uno y el otro lo van a hacer ustedes (sino no hay chiste o si?). Para esta parte voy a tomar el ejemplo de "Simple DataGrid" que se encuentra en los ejemplos de Ext. La idea es que se entienda como modificarlos para poder tenerlos dentro de un container que, en este caso será nuestro Tab Panel.
Para crear el o los Datagrids necesitamos 3 cosas indispensables :

• Los Datos
• El DataStore
• El DataGrid

En este código vamos a hacerlo paso a paso para lo que utilizaremos los datos en un arreglo unidimensional común y corriente. Luego crearemos el DataStore que cargará los datos de ese arreglo y mostrara la información en el DataGrid apenas sea llamado por éste. He aqui el código:

//Datos estáticos a mostrar
    var myData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];
 
    // Comenzamos a configurar el DataStore
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);// El Store carga la información del arreglo myData que esta instanciado arriba
 
    // Creamos el DataGrid
    var grid = new Ext.grid.GridPanel({
        store: store, //Aqui estamos cargando el Data Store
        columns: [ // Las columnas
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:350,
        width:600,
        title:'Datagrid 1' // titulo del Data Grid
    });

Este código no funciona Embustero!

Exacto, y esto se debe a que faltan 2 métodos importantes que no incluí para darle énfasis a la estructura de nuestra modestísima aplicación que fue creada por Extjs.com. A decir verdad, este ejemplo es el mas simple de los datagrids y se llama SimpleDatagrid. El aporte que añadimos nosotros es meterlo dentro de un TabPanel para que sea mas interesante.

Lo que estamos haciendo aquí es crear un arreglo con contenido estático, crear un Datastroe, cargando el Datastore con la información del arreglo y por ultimo creando un Datagrid que carga el DataStore como su fuente de datos. No copien el código que esta aquí. Si quieres experimentar la aplicacion y descargarla puedes hacerlo aqui y aqui.

En la aplicación tenemos 2 grillas en 2 tabs. Lo que se debe hacer es crear 2 datagrids con 2 stores y 2 arreglos diferentes. Pusimos el ejemplo de 1 solo datagrid, ahora tu debes hacerlo de tal manera que queden 2 tabs. Si no quieres hacerlo descarga el Zip en el link anterior y revisa el código fuente para que lo veas mejor.

El próximo tutorial mostrará la manera de usar un datastore mas avanzado para cargar los datos desde un php y enviarlos en JSON para que el data grid cargue la información dinamicamente. Para esto necesitaremos un servidor Web que puede ser Apache.

Eso es todo, espero que les sirva y comenten cualquier duda que tengan!

Jmc.