Louder Developer Zone
Articles, Tutorials and Tips from the community and Louder developers

Compatibilidad con JQuery, MooTools, ExtCore y Prototype en Kumbia Enterprise

Publish at Thursday, March 11, 2010
By Core Developers - Louder

La versión 1.71 de Kumbia Enterprise mejora considerablemente el soporte para Javascript. Históricamente solo era posible usar Prototype+Scriptaculous y el framework en general estaba escrito para solo soportar este framework javascript.

Hoy en día hay más frameworks Javascript que ofrecen ventajas y funcionalidades interesantes y que al usarlos podía hacer que dejara de funcionar algunos helpers ó componentes del framework.

No queriamos que usar un framework Javascript fuera camisa de fuerza, es decir, que solo se pudiese usar uno en especifico y que el desarrollador tuviera que adaptarse a él, ó, en el caso contrario, dejar de usar alguna funcionalidad de Kumbia Enterprise porque no se adaptara al framework escogido.

El framework javascript "Base"

Kumbia Enterprise ahora incluye un mini-framework javascript llamado "Base". Su objetivo no es reinventar la rueda volviendo a hacer toda la funcionalidad que ya tienen otros frameworks javascript. Su meta más bien, es ofrecer una capa de abstracción al framework javascript que haya escogido el desarrollador de tal forma que Kumbia Enterprise pueda acceder de manera uniforme a las funciones de cada framework.

"Base" representa la misma idea que se implementó en componente ActiveRecord el cuál permite usar diferentes bases de datos (MySQL, Oracle, Informix, SQL Server, etc) usando el mismo código, ni depender de la implementación SQL de cada motor.

Uso del Javascript en Kumbia Enterprise

Anteriormente se podia visualizar en la vista views/index.phtml de cada aplicación como se incluía el framework Javascript y se creaba la variable $Kumbia usando un archivo externo:

<?php

	//Se incluía Prototype+Scriptaculous
	echo Tag::javascriptLibrary("framework/scriptaculous/protoculous");

	//Se incluían los javascript basicos del KEF
	echo Tag::javascriptBase();

Lo que generaba el siguiente HTML:

<script type="text/javascript" src="/hfos/javascript/core/framework/scriptaculous/protoculous.js"></script>
<script type="text/javascript" src="/hfos/javascript/core/base.js"></script>
<script type="text/javascript" src="/hfos/javascript/core/validations.js"></script>
<script type="text/javascript" src="/hfos/javascript/core/main.php?app=default&module=&path=%2Finstance%2F&controller=index&action=index&id="></script>

Lo anterior tenia algunos inconvenientes:

  • Se usaba un archivo externo main.php para crear la variable $Kumbia y esto impactaba en el rendimiento de la aplicación
  • Se cargaba el archivo validations.js aún cuando no se requería en cada petición

Como se puede usar el Javascript ahora

El Javascript incluye mejoras en varios sentidos, todos en miras a ofrecer una mayor libertad para usar plugins y librerias de terceros asi como el rendimiento de las aplicaciones.

Incluir el framework Javascript que se desee

Kumbia Enterprise ahora incluye los 4 principales frameworks para javascript como parte de su distribución. Podemos escoger el que más nos guste ó el que necesitemos. A continuación listamos los frameworks disponibles. Sus descripciones son tomadas de la Wikipedia que se enlaza también:

  • Prototype
  • Se orienta al desarrollo sencillo y dinámico de aplicaciones web. Es usado por defecto en frameworks como Ruby On Rails ó Symphony. Licencia MIT
  • JQuery
  • Permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones, etc. Licencia MIT
  • ExtCore Una libreria multi-navegador para construir páginas web dinámicas. Licencia MIT
  • MooTools Es un framework web orientado a objetos para JavaScript, de código abierto, compacto y modular. Licencia MIT

Los frameworks se escogieron por ser los más usados y completos actualmente. El min-framework "Base" que mencionamos anteriormente permite aprovechar la funcionalidad más común de estos frameworks de manera uniforme sin reescribir código.

Importar el framework en la aplicación

Un nuevo helper se ha incorporado para hacer esta tarea más sencilla, su uso es el siguiente:

<?php

	//Incluir Prototype
	Tag::addJavascriptFramework("prototype");

	//Incluir Prototype+Scriptaculous
	Tag::addJavascriptFramework("protoculous");

	//Incluir JQuery
	Tag::addJavascriptFramework("jquery");

	//Incluir ExtCore
	Tag::addJavascriptFramework("ext");

	//Incluir MooTools
	Tag::addJavascriptFramework("mootools");

El uso es muy sencillo, lo que hace internamente es generar un tag html llamado script que incluye la libreria indicada.

Incluir otro contenido Javascript

Los helpers Tag::javascriptInclude y Tag::javascriptLibrary permitian incluir de forma inmediata un recurso javascript externo en una vista cualquiera:

<?php

	//Incluir public/javascript/miapp/validaciones.js
	echo Tag::javascriptInclude("miapp/validaciones");

Estos helpers funcionaban perfectamente cuando se queria que la etiqueta SCRIPT se insertara en esa posición de la vista.

Incluir Javascript de forma más organizada

Kumbia Enterprise v.1.71 incluye los nuevos helpers Tag::addJavascript y Tag::javascriptSources que permiten agregar de manera más organizada los javascripts durante una petición.

Tag::javascriptSources debe ser llamado donde se requiera que aparezcan todos los javascripts agregados con Tag::addJavascript. Este último no imprime nada donde sea invocado solo agrega el javascript indicado a una lista interna que es procesada finalmente por Tag::javascriptSources.

Tag::javascriptSources es usualmente colocado en la vista principal del sistema views/index.phtml, de esta forma recibe todos los javascript agregados por los layouts, partials y vistas. De está forma la vista principal podría quedar así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Título de la Aplicación</title>
  <?php

  	//Agregar framework JQuery y mostrar los recursos agregados
	Tag::addJavascriptFramework("jquery");
	echo Tag::javascriptSources();

  	//Agregar recursos CSS
	Tag::stylesheetLink("style");
	echo Tag::stylesheetLinkTags();

  ?>
 </head>
 <body>
    <?php View::getContent(); ?>
 </body>
</html>

Si por ejemplo en una vista se hubiese agregado otro javascript así:

echo Tag::javascriptInclude("menu");

Entonces la salida al explorador sería la siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>Título de la Aplicación</title>
	<script type="text/javascript" src="/javascript/core/framework/jquery/jquery.js"></script>
	<script type="text/javascript" src="/javascript/core/menu.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/style.css" />
 </head>
 <body></body>
</html>

Como se puede observar el menu.js se incluyo en la cabecera del documento HTML sin importar que este fue agregado desde una vista diferente a la vista principal. El concepto es mismo que maneja las hojas de estilo CSS con los helpers Tag::stylesheetLink y Tag::stylesheetLinkTags.

Más adelante explicaremos como usar el mini-framework "Base" para crear aplicaciones Javascript un poco más portables.

Conclusiones

Gracias al framework "Base" es posible usar cualquiera de los frameworks mencionados y poder seguir usando helpers como Tag::linkToRemote, Tag::formRemote y componentes dependientes de javascript como StandardForm sin problema alguno.

Kumbia Enterprise tiene una política de compatibilidad hacia atrás, de esta forma se puede entender que los cambios a continuación son opcionales y que las aplicaciones actuales no se ven afectadas por estos nuevas mejoras. Se recomienda al desarrollador revisar la viabilidad para implementar estos cambios ya que mejoran la eficiencia de las aplicaciones.

Tell friends about this article on social networks:



blog comments powered by Disqus

Previous: Migrar a Kumbia Enteprise de manera sencilla Next: Envio de correos en Kumbia Enterprise con Gmail

Colaborate

Colaborate

We invite you to submit articles and tutorials to the Developer Zone.

Archive

  • Mayo 2009

Maybe you are interested

Added value to your Business.

Become a Solution Partner Louder Now.

Bring to the Open-Source retroactively..

Learn more about Shared Louder Labs