Integrar KumbiaPHP Spirit con jQuery

De KumbiaPHP Framework Wiki
{{#if:Information icon4.png |}}

{{#if:

|}}
Information icon4.pngEste Artículo cumple con todos los requererimientos de los Kumbieros.
 {{{imageright}}}


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 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 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 KumbiaPHP.

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

jQuery(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)
				});
	
});

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 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. 

<!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 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>

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, Ver detalles de la Nueva Pantalla de Bienvenida de KumbiaPHP

Eso lo cambiaremos por una petición donde no se cargara todo el Template sino solo el 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') ?>

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

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

<!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>

.

Obtenido de «https://wiki.kumbiaphp.com/index.php?title=Integrar_KumbiaPHP_Spirit_con_jQuery&oldid=3032»