Diferencia entre revisiones de «Integrar KumbiaPHP Spirit con jQuery»

De KumbiaPHP Framework Wiki
(Página creada con '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 ...')
 
 
(No se muestran 20 ediciones intermedias de 9 usuarios)
Línea 1: Línea 1:
−
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.
+
{{cleanupbox
 +
|image=[[Archivo:Information_icon4.png|45px]]
 +
|texto ='''Este Artículo cumple con todos los requererimientos de los Kumbieros.'''<br />
 +
}}
 +
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==
 
==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/'''
+
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==
 
==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.
+
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.
 
Creamos el archivo application.js y lo ubicamos en el directorio '''[app]/public/javascript/kumbia/''' con el siguiente contenido.
  
 
<source lang=javascript>
 
<source lang=javascript>
−
jQuery(document).ready(function($) {
+
jQuery(function($) {
 
 
 
$("a.jsShow").live('click' , function(event) {
 
$("a.jsShow").live('click' , function(event) {
Línea 37: Línea 44:
 
Este archivo cuenta con una serie de '''class''' utiles para el manejo de AJAX.
 
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.
+
*'''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.
+
*'''jsHide'''  Oculta un objeto del DOM.
−
#'''jsShow'''  Muestra el objeto del DOM oculto.
+
*'''jsShow'''  Muestra el objeto del DOM oculto.
−
#'''jsShow'''  Muestra/Oculta un Objeto del DOM.
+
*'''jsToggle'''  Muestra/Oculta un Objeto del DOM.
  
 
==Incluir jQuery y application.js en el template==
 
==Incluir jQuery y application.js en el template==
Línea 56: Línea 63:
 
   <?php echo javascript_library_tag('application') ?>
 
   <?php echo javascript_library_tag('application') ?>
 
   <?php echo stylesheet_link_tag('style') ?>
 
   <?php echo stylesheet_link_tag('style') ?>
−
   <?php echo Kumbia::stylesheet_link_tags(); ?>
+
   <?php echo stylesheet_link_tags(); ?>
 
</head>
 
</head>
 
<body>
 
<body>
Línea 78: Línea 85:
 
</html>
 
</html>
 
</source>
 
</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]] .

Revisión actual del 21:53 12 dic 2010

{{#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[editar]

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[editar]

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[editar]

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[editar]

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»