Bloget

Este post va dedicado a todas aquellas personas que, como yo, hemos realizado webs y nos hemos tenido que pegar (a veces literalmente) cabezazos contra la pared porque en IE, al no regirse por los standares,  no se ve la web igual que con otros navegadores. ¡Con lo rebonica que se ve en FIREFOX!

Pues bien, para todos los que sufrimos y, a la vez, no tenemos más remedio que soportar la desidia de cambiar código para que en Internet Explorer el diseño de la web no varíe demasiado, voy a mostraros algún truco en CSS para programar sólo para él.

Es posible que muchos lo conozcais y también es posible que para otros sea algo nuevo que puede aportar grandes cosas a su desarrollo, se trata de los “Hacks”. Esta solución la propuso Edwardson Tan y consiste en hacer que sólo Internet Explorer interprete ciertas instrucciones CSS. Hay varias formas de realizar esto:

1) Para que lo lean todos los exploradores salvo Internet Explorer:

#miCapa {

margin-top: 5px;

}

html>body #miCapa {

margin-top: 1px;

}

Internet Explorer no interpreta “html>body” mientras que el resto de navegadores sí, por lo que el último   bloque será el que aplicará Firefox, Opera, etc.

2) Para que sólo lo lea Internet Exporer:

#miCapa {

margin-top: 1px;

*margin-top: 5px;

}

Sólo Internet Explorer sabrá que tiene que utilizar un margen superior de 5px.

Rizando el rizo, también podemos diferenciar entre IE6 e IE7 ya que tampoco funcionan de la misma manera:

#miCapa {

margin-top: 1px;

*margin-top: 5px;   //IE 7

_margin-top: 7px;   //IE6

}

Internet Explorer 6 es el único que procesa correctamente el guión bajo “_”, también se podría utilizar una barra invertida de esta manera “mar\gin-top: 7px” . IE5 e IE6 son los únicos que son capaces de escapar la barra invertida dentro del nombre de una propiedad en un CSS.

Compártelo

Hace un tiempo me encontré con la necesidad de crear un ComboBox en Gwt-Ext que dentro pudiera tener muchos resultados mostrados en forma de árbol, lo que, en un alarde de originalidad, he llamado “TreeComboBox”.

La forma de crearlo es fácil, aunque hay que darle un par de vueltas para conseguir el resultado que deseamos. Lo primero que debemos hacer es crear el ComboBox donde queremos visualizar el árbol:

ComboBox cb = new ComboBox();

cb.setEditable(false);
cb.setMinChars(0);
cb.setMode(ComboBox.LOCAL);
cb.setStore(new SimpleStore(”", new Object[] {”"}));
cb.setListAlign(”tl-bl”);
cb.setListWidth(250);
cb.setTpl(”<tpl for=’.'><div style=’height:200px’><div id=’”+cb.getId()+”‘></div></div></tpl>”);

Como podemos ver, creamos un ComboBox normalmente, cabe resaltar varias cosas:

• STORE: El Store se crea vacío ya que el Combo se va a nutrir del árbol.
• LISTALIGN y LISTWIDTH: Valores para el desplegable, se alinea a la izquierda y abajo con un ancho de 250px.
• TPL: Quizá el más importante, este template podeis copiarlo tal cual, pero la parte más importante es el ID del div (<div id=’”+cb.getId()+”‘>) porque es el identificador que utilizaremos para renderizar el árbol.

Posteriormente se ha de crear el árbol (para ver ejemplos visitar las demos de Gwt-ext) al que llamaremos INSIDETREE para tener la referencia.

Una vez realizados estos pasos veremos la forma de mantenerlos linkados:

cb.addListener(new ComboBoxListenerAdapter() {
public void onExpand(ComboBox comboBox) { insideTree.render(comboBox.getId()); }
});

Con este código conseguimos que, cuando se expanda el combo, se renderice el árbol dentro (”insideTree.render(comboBox.getId());”), fácil, ¿no?

Para tener un control sobre lo seleccionado en el árbol se debe añadir el siguiente código. Además con el click en el árbol podemos lanzar en el evento select del Combo en el caso de que lo necesitemos para que funcione como un ComboBox normal.

insideTree.addListener(new TreePanelListenerAdapter() {
public void onClick(TreeNode node, EventObject e) {
if(node.isLeaf()) {

//HACER LO NECESARIO CON LOS DATOS
collapse(); //CERRAMOS LA LISTA
fireEvent(”select”); // LANZAMOS EL EVENTO SELECT (Si se requiere)
}
}
});

Compártelo