Edición de «Integrar KumbiaPHP Spirit con jQuery»

En el siguiente ejemplo veremos como se puede integrar [http://www.kumbiaphp.com KumbiaPHP] Framework versión 1.0 con [http://jquery.com/ jQuery] de forma rápida y sencilla para explotar las bondades que ofrece este framework de javascript. 
 Se estima que en la versión 1.o de KumbiaPHP los helpers para el manejo de ajax estarán 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 librerías en el directorio:

'''[app]/public/javascript/jquery/'''

==application.js==
Este archivo ha sido creado para hacer mas simple el manejo de jQuery dentro de [http://www.kumbiaphp.com 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.
*'''jsToggle'''  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('kumbia/application') ?>
  <?php echo stylesheet_link_tag('style') ?>
  <?php echo 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>

== Veamos un Ejemplo ==

Ahora veremos un ejemplo para apreciar de formas precisa lo que podemos hacer. El ejemplo estará en base al mismo Template que viene en la instalación de KumbiaPHP donde se muestra la bienvenida y la petición AJAX irá específicamente para mostrar la página de status (link Config).

Antes de continuar veamos el comportamiento al hacer click en el link '''''Config''''', [http://www.kumbiaphp.com/blog/2009/05/31/spirit_estrena_nueva_bienvenida/ Ver detalles de la Nueva Pantalla de Bienvenida de KumbiaPHP]

Eso lo cambiaremos por una petición donde no se cargara todo el [[KumbiaPHP_Framework_Versión_1.0_Spirit#views.2Ftemplates.2F|Template]] sino solo el [[KumbiaPHP_Framework_Versión_1.0_Spirit#views.2Ftemplates.2F|View]]

Los cambios son triviales solo se le indicara al link '''''Config''''' que ahora enviara una petición asíncrona y actualizara un objeto del DOM (en este caso un DIV), entonces son dos cambios.

Agregamos dos elementos al helpers '''link_to''' un rel y una class, ambos tienen un significado.

'''rel:''' indica el objeto del DOM a actualizar, en este caso sera el id '''mi-div'''.

'''class:''' Es quien activa el evento en jQuery, en este caso esa class realiza una petición asíncrona.

 <?php echo link_to('status/', 'Config', 'title: Ver configuración de '.APP, 'rel: #mi-div', 'class: jsRemote') ?>

 <pre><div id="mi-div"><?php View::content(); ?></div></pre>

Quedando el Template '''[app]/views/templates/default.phtml''' de la siguiente forma con los cambios de arriba aplicados.

<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, 'rel: #mi-div', 'class: jsRemote') ?>
                </p>
             </div>
        </div>

        <div id="mi-div"><?php View::content(); ?></div>
        
        <?php View::partial('kumbia/footer') ?>
    </div>
</body>
</html>
</source>

[[Categoría:Tutoriales KumbiaPHP]]
[[Categoría:jQuery]] .