Editor de operaciones con Prototype

Uno de los proyectos que estoy desarrollando para la Fundación consiste en parte en la definición de fórmulas que están formadas a su vez por una o mas operaciones.

Lo primero que se me vino a la mente fue representarlas con un documento XML que simulara al árbol de precedencia de expresiones de la operción con etiquetas anidadas.  El primer problema que apareció cuando lo discutimos es como hacer el usuario final, no ingeniero de sistemas, pudiera posteriormente y con éxito, implementar sus propias fórmulas.  El XML era una buena solución para la persistencia pero no para la interacción con el humano.

Pensando un poco y revisando los muy pocos antecedentes que encontré en el mercado, realicé un diseño para el editor de fórmulas donde cada fila sería una operación que tendría un nombre como identificador y que podría ser utilizado como atributo o parámetro de cualquier otra operación.  Se establecieron las siguientes operaciones.

  1. Operaciones aritméticas (suma, resta, multiplicación y división).
  2. Valor constante.
  3. Valor definido por el usuario.
  4. Sumatoria.
  5. Función externa.

Quería que la interfaz del editor fuera lo mas dinámica posible y elegí para su implementación el uso de Prototype y Scriptaculous.

La primera versión la implementé a principio de este año y era en realidad, mi primera aproximación a estas librerías de JavaScript por lo que su código no explota todas las ventajas de estas librerías.

Versión 0.1.
Versión 0.1.

Como prototipo fue muy interesante y entretenido de desarrollar.  Los colores por supuesto eran para diferenciar rapidamente los diferentes divs de cada operación.

Durante este mes estuve implementando una nueva versión del editor basado en las conclusiones que obtuvimos al mostrarle al cliente nuestro prototipo.  Algunas funcionalidades del prototipo no fueron incluídas en la siguiente versión (al menos en esta iteración) al no aportar grandes beneficios al resultado final.

  • La mayoría de efectos gráficos (muy interesantes).
  • La posibilidad de reordenar a una operación hacia cualquier fila según el índice especificado.
  • El reordenamiento de parámetros de una función.
  • La especificación del tipo de una operación a medida que se determinan sus elementos.

Esta nueva versión incluye varios cambios a nivel conceptual pero en mayor medida incluye muchas mejoras a nivel de código, lo que la hace ahora compatible con IE7.  En especial gracias a las facilidades que traen consigo estas librerías para trabajar manipulando los elementos DOM sobre clases CSS en lugar de los IDs específicos de los elementos.

Versión 0.2.
Versión 0.2.

Esta nueva versión incluye algunas características como las siguientes.

  • Interfaz de usuario mas limpia y clara.
  • Colores para identificar facilmente el tipo de operación.
  • Fácil reordenamiento de operaciones con sólo arrastrar y soltar las mismas.
  • Agregar operaciones (de un tipo definido) y remover las operaciones seleccionadas.
  • Actualización automática de las opciones de atributos y parámetros tan pronto como se desea su modificación y algún nombre de operación se ha modificado o introducido nuevo.
  • Las funciones pueden tener cero o mas parámetros los cuales pueden ser especificados dinámicamente.

El proyecto que estoy desarrollando es muy interesante y aún falta mucho de su implementación, inclusive en mi imaginación tengo muchas ideas para mejorar a este editor: validadores de datos (que tienen un problema interesante de resolver), asistentes WYSIWYG para los diferentes tipos de valores de datos, buscador de funciones (definidas del lado del servidor), ayuda en línea para las funciones, etc.  Desafortunadamente el editor es sólo una pequeña parte de un cuarto del proyecto por lo que tendré que postergar a estas mejoras para lo que espero sea una próxima iteración.

JavaScript, como todo lo que aprendo y disfruto en la vida, entre mas aprendo, mas me doy cuenta que nada se, sin embargo también he notado que estos frameworks de JavaScript facilitan enormemente el trabajo encapsulando la mayor parte sucia, en particular, facilitandome el trabajo con la independencia de navegadores.

Hasta ahora he probado a MooTools y a Prototype/Scriptaculous con amplio éxito.  Hay muchos otros por experimentar: JQuery, ExtJS, Dojo, YUI, etc.  Como siempre, las ganas sobran, el tiempo es el que falta 😉

Leave a Reply

Your email address will not be published. Required fields are marked *