Edición de «Integrar KumbiaPHP Spirit con jQuery»

En el siguiente ejemplo veremos como se puede integrar KumbiaPHP Framework versión 1.0 con jQuery de forma rápida y sencilla para explotar las bondades que ofrece jQuery como framework de JavaScript. Se estima que en la versión 1.1 de KumbiaPHP los helpers para el manejo de ajax estaran migrado hacia jQuery.

==Instalar jQuery==
Lo primero es descargar la versión mas actual de jQuery, en este caso la versión [http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js 1.3.2], una vez descargada se colocaran las librerias en el directorio '''[app]/public/javascript/jquery/'''

==application.js==
Este archivo ha sido creado para hacer mas simple el manejo de jQuery dentro de KumbiaPHP. En su momento haremos un plugin exclusivo para KumbiaPHP.

Creamos el archivo application.js y lo ubicamos en el directorio '''[app]/public/javascript/kumbia/''' con el siguiente contenido.

<source lang=javascript>
jQuery(document).ready(function($) {
	
	$("a.jsShow").live('click' , function(event) {
				event.preventDefault();
				$(this.rel).show();
				});
	
	$("a.jsHide").live('click', function(event) {
				event.preventDefault();
				$(this.rel).hide();
				});
	
	$("a.jsToggle").live('click', function(event) {
				event.preventDefault();
				$(this.rel).toggle();
				});
    
	$("a.jsRemote").live('click', function(event) {
				event.preventDefault();
				$(this.rel).load(this.href)
				});
	
});
</source>

Este archivo cuenta con una serie de '''class''' utiles para el manejo de AJAX.

#'''jsRemote''' hace peticiones al servidor, es decir carga una action en KumbiaPHP y su vista si asi nuestra lógica lo indicara.
#'''jsHide'''  Oculta un objeto del DOM.
#'''jsShow'''  Muestra el objeto del DOM oculto.
#'''jsShow'''  Muestra/Oculta un Objeto del DOM.

==Incluir jQuery y application.js en el template==

Ahora se necesita incluir estas librerias en el [[KumbiaPHP_Framework_Versi%C3%B3n_1.0_Spirit#views.2Ftemplates.2F|Template]] para que comiencen a realizar su trabajo y esto se aprecia en la líneas 7 y 8, muy importante el orden en la que se incluyen ya que el archivo application.js depende de jQuery por ende estas deben estar cargadas para cuando este archivo iniciado.

<source lang=php line>
<!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=<?php echo APP_CHARSET ?>' />
  <title>KumbiaPHP web &amp; app Framework</title>
  <?php echo stylesheet_link_tag('bienvenida') ?>
  <?php echo javascript_include_tag('jquery/jquery-1.3.2.min') ?>
  <?php echo javascript_library_tag('application') ?>
  <?php echo stylesheet_link_tag('style') ?>
  <?php echo Kumbia::stylesheet_link_tags(); ?>
</head>
<body>
    <div id='content'>
        <div id='head'>
            <h1 id='logo'>KumbiaPHP</h1><div id='info-app'>web &amp; app Framework versión <?php echo Kumbia::KUMBIA_VERSION ?></div>
            
            <div class='alignright'>
                <p id='config'>
                    <span class='app'><?php echo APP ?></span> 
                    <?php echo link_to('status/', 'Config', 'title: Ver configuración de '.APP) ?>
                </p>
             </div>
        </div>

        <?php View::content(); ?>
        
        <?php View::partial('kumbia/footer') ?>
    </div>
</body>
</html>
</source>