Catalis en Mozilla

Esta página tiene algún interés histórico, pero ha quedado obsoleta a partir de la decisión ---en 2007--- de utilizar Ext JS para resolver los problemas de compatibilidad entre navegadores en la nueva versión de Catalis.

Lo que sigue son algunas notas sobre la adaptación de Catalis para que funcione sobre Mozilla y Firefox, manteniendo al mismo tiempo compatibilidad con Internet Explorer 6. Este trabajo fue realizado durante febrero-marzo de 2005. Se puede acceder a un demo de la (todavía inconclusa) versión compatible con Mozilla desde el sitio de Catalis.

Problemas

Los principales problemas sobre los que se debió trabajar son:

DOCTYPE: pasamos de

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

(que activa el quirks mode tanto en Mozilla como en IE6), a

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

para así tener algo parecido a standards mode en ambos navegadores. Con esta decisión, queda excluido IE 5.5 como plataforma para Catalis.

CSS: hubo que realizar ajustes en las dimensiones (width, height) de varios elementos, para corregir los valores que sólo tenían sentido para IE en quirks mode. Se agregó una hoja de estilo catalis-ie.css que sólo es “vista” por IE (usando un comentario condicional). Algunos casos de posicionamiento absoluto no pudieron ser resueltos de manera totalmente satisfactoria, en general debido al comportamiento anómalo de IE.

XML: mediante la biblioteca Sarissa, que permite emular en Mozilla las funciones selectNodes() y selectSingleNode() de IE, pudimos conservar en gran medida el código original para acceder a porciones de documentos XML.

Ventanas de diálogo modales y popups: dado que Mozilla no cuenta con un equivalente a showModalDialog(), recurrimos a simModal.js, una solución cross-browser tomada del libro JavaScript & DHTML Cookbook, de O'Reilly. Esto requirió modificar el código en todas las llamadas a ventanas modales, el código de cada una de las ventanas, y el código que procesa el resultado entregado desde éstas. Tampoco cuenta Mozilla con un equivalente de createPopup().

Textareas de altura dinámica: la solución original para IE deja de funcionar cuando IE pasa a standards mode. Por lo tanto, hubo que reemplazarla por una solución que funcionalmente es un poco inferior, pero que anda bien en ambos navegadores.

Eventos: el hecho de que Mozilla e IE hayan implementado diferentes modelos de eventos (del W3C y de Microsoft, respectivamente), obliga a revisar y corregir la mayoría de los event handlers de la aplicación. Algunas de las principales diferencias son: uso del objeto global window.event (IE), capturing & bubbling (W3C) vs. bubbling (IE), event.target (W3C) vs. event.srcElement (IE).

Foco: algunos elementos que en IE pueden recibir foco, no pueden hacerlo en Mozilla; por ejemplo, el DIV con los campos de datos y el DIV con la visualización detallada del registro en la pantalla de búsquedas. La rueda del mouse no funciona sobre estos elementos. Aún no tenemos una solución.

Detalles de Javascript: la función split() produce resultados diferentes:

"^aUno^bDos^cTres".split(/\^/) => ["aUno","bDos","cTres"] (IE)

"^aUno^bDos^cTres".split(/\^/) => ["","aUno","bDos","cTres"] (Mozilla)

Es decir, la presencia del delimitador (en este caso, el carácter ^) en un extremo de la cadena, genera en Mozilla un string vacío en el extremo correspondiente del array resultante. Esa situación es bastante común en Catalis, con los delimitadores ^ y \n (newline). En algunos casos, tiene el efecto de generar un error; quedan muchos casos por revisar.

En Mozilla, los botones en los formularios tienen un comportamiento por defecto: submit. Por lo tanto, hubo que revisar el código para detectar y eliminar efectos no deseados producidos por ese tipo de submits accidentales.

La revisión a nivel de CSS estimuló la realización de algunos cambios en el marcado (HTML), eliminando algunas tablas innecesarias y reemplazándolas según el caso por DIVs o listas (UL, LI).

Queda pendiente el manejo de URLs largas dentro de un textarea.

Herramientas

Trabajar en la depuración del código sobre Mozilla ha resultado mucho más cómodo que sobre IE, al contar con las herramientas que mencionamos a continuación, en orden de utilidad:

Javascript console

DOM inspector

Javascript debugger

Enlaces relacionados

Migrate apps from Internet Explorer to Mozilla: How to make Internet Explorer-specific Web applications work in Mozilla-based browsers. Un artículo aparecido en ibm.com (26 de julio de 2005).