https://wiki.kumbiaphp.com/api.php?action=feedcontributions&user=Oyepez003&feedformat=atomKumbiaPHP Framework Wiki - Contribuciones del usuario [es]2024-03-29T14:53:04ZContribuciones del usuarioMediaWiki 1.34.1https://wiki.kumbiaphp.com/index.php?title=Integrando_KumbiaPHP_con_jQuery4PHP&diff=2879Integrando KumbiaPHP con jQuery4PHP2010-07-29T03:54:43Z<p>Oyepez003: /* Y listo */</p>
<hr />
<div>== Introducción ==<br />
<br />
[http://jquery4php.sourceforge.net/ jQuery4PHP] es una librería que<br />
simplifica la creación de aplicaciones de internet enriquecidas (Rich<br />
Internet Applications por sus siglas en ingles,<br />
[http://es.wikipedia.org/wiki/Rich_Internet_Application RIA] ).<br />
Utiliza la potencia de [http://www.jquery.com/ jQuery] y los widgets<br />
de [http://jqueryui.com/ jQueryUI] para hacer que las vistas de<br />
nuestras aplicaciones sean mucho mas amigables mejorando la<br />
experiencia del usuario.<br />
<br />
<br />
La intención de este tutorial es demostrar como KumbiaPHP puede<br />
integrarse sencillamente con cualquier librería de terceros y lo<br />
fácil que puede ser crear aplicaciones web 2.0 con jQuery4PHP.<br />
<br />
Vamos a basarnos en el tutorial [[Hola_Mundo_KumbiaPHP_Framework|Hola<br />
Mundo]] de KumbiaPHP, recuerda que el proyecto en ese tutorial fue<br />
llamado '''kumbiaphp''' quedando la<br />
[[KumbiaPHP_Framework_Versión_1.0_Spirit#Nueva_Estructura_de_Directorios|estructura<br />
de directorios]] de la siguiente forma:<br />
<br />
kumbiaphp/<br />
|-- app<br />
|-- core<br />
|-- index.php<br />
<br />
== Descargar jQuery4PHP ==<br />
<br />
Descargamos la última versión de jQuery4PHP.<br />
<br />
Existen varios formatos como descargar la librería (.zip y .tar.gz). Vamos<br />
a descargar la versión que trae jQuery, jQueryUI y el código fuente de<br />
los ejemplos (Showcase) llamada "source-exampales.zip" desde<br />
[http://sourceforge.net/projects/jquery4php/ aqui].<br />
<br />
== Adaptándose a la Estructura de Directorios de KumbiaPHP ==<br />
<br />
EL segundo paso es ordenar los archivos que descargamos a la forma que<br />
KumbiaPHP establece.<br />
<br />
Descomprimimos el archivo "source-examples.zip" y la siguiente<br />
estructura será el resultado:<br />
<br />
source-examples/<br />
|-- lib<br />
|-- public_html<br />
<br />
La carpeta '''lib''' contiene el código fuente de jQuery4PHP.<br />
<br />
La carpeta '''public_html''' contiene los scripts de jQuery, jQueryUI<br />
y el codigo del "Showcase" de jQuery4PHP que en este caso no nos<br />
interesa para nada.<br />
<br />
<br />
=== Adaptando jQuery y jQueryUI ===<br />
<br />
Pasamos los archivos de jQuery y jQueryUI a los directorios<br />
javascripts y css de nuestro proyecto kumbiaphp. También pasamos el<br />
archivo jquery-ui-utilities.css, Este ultimo archivo aunque no es<br />
obligatorio contiene estilos necesarios para que algunos ejemplos se<br />
vean igual a los del Showcase de jQuery4PHP.<br />
<br />
<br />
'''javascript:'''<br />
<br />
Pasamos de la carpeta de jQuery4PHP "source-examples/public_html/js"<br />
al directorio de nuestra aplicacion "kumbiaphp/app/public/javascript"<br />
los archivos '''jquery.min.js''' y<br />
'''jquery-ui-1.8.2.custom.min.js'''.<br />
<br />
<br />
'''css:'''<br />
<br />
jQuery4PHP viene con un theme propio llamado "'''yepsua'''" y esta<br />
incluido en el .zip que descargamos. Para este ejemplo vamos a usar este<br />
theme pero puedes reemplazarlo por cualquiera que te guste o<br />
[http://jqueryui.com/themeroller/ crear] el tuyo propio. Pasamos la<br />
carpeta '''yepsua''' y el archivo '''jquery-ui-utilities.css''' que se<br />
encuentran en el directorio "source-examples/public-html/styles" al<br />
directorio "kumbiaphp/app/public/css"<br />
<br />
=== Adaptando jQuery4PHP ===<br />
<br />
- Creamos una carpeta llamada jquery4php en el directorio de nuestro<br />
proyecto "kumbiaphp/core/vendors" y dentro de ella copiamos el contenido de la<br />
carpeta "lib" de jQuery4PHP "source-examples/lib"<br />
<br />
La estructura de KumbiaPHP y jQuery4PHP integrados seria así:<br />
<br />
kumbiaphp/<br />
|-- app<br />
|-- core<br />
|-- vendors<br />
|-- jquery4php/YepSua/Labs/RIA/jQuery4PHP<br />
|-- index.php<br />
<br />
<br />
- Creamos una carpeta llamada jquery4php en el directorio<br />
"kumbiaphp/core/libs" y dentro de ella un archivo llamado jquery4php.php<br />
con el siguiente código:<br />
<br />
<source lang="php"><br />
<?php<br />
require_once CORE_PATH . 'vendors/jquery4php/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php';<br />
YsJQueryAutoloader::register();<br />
</source><br />
<br />
<br />
Aqui estamos importando todas las clases necesarias de jQuery4PHP<br />
usando la clase '''YsJQueryAutoloader'''<br />
<br />
Desde la próxima sección utilizaremos el mismo código del tutorial<br />
Hola Mundo de KumbiaPHP con algunas modificaciones sobre todo en la vista, para detalle sobre este código puedes<br />
consultar ese [[Hola_Mundo_KumbiaPHP_Framework|tutorial]].<br />
<br />
== El controlador ==<br />
<br />
'''saludo_controller.php''' Es el nombre del controlador usado en la<br />
aplicación Hola Mundo y contiene el siguiente código:<br />
<br />
<source lang="php"><br />
<?php<br />
class SaludoController extends ApplicationController {<br />
public function hola($nombre) {<br />
Load::lib('jquery4php'); <br />
$this->fecha = date("Y-m-d H:i");<br />
$this->nombre = $nombre;<br />
}<br />
}<br />
</source><br />
<br />
Un contralador con una accion '''hola'''<br />
<br />
== La vista ==<br />
<br />
<br />
'''''(Aqui comienza jQuery4PHP)'''''<br />
<br />
Ahora vamos a ver el código para la vistas de la acción '''hola'''.<br />
<br />
Creamos un archivo llamado hola.phtml en el directorio kumbiaphp/app/views/saludo/hola.phtml <br />
<br />
'''hola.phtml:'''<br />
<source lang="php"><br />
<?php echo YsUIDialog::initWidget('dialogId','style="display:none" title="Integrando KumbiaPHP con jQuery4PHP"') ?><br />
<br><br />
<p>Hola <?php echo $nombre ?></p><br />
<?php echo $fecha ?><br />
<?php echo YsUIDialog::endWidget() ?> <br />
<br />
<?php<br />
echo<br />
YsJQuery::newInstance()<br />
->execute(<br />
YsUIDialog::build('#dialogId')<br />
->_modal(true)<br />
->_show(YsUIConstant::SLIDE_EFFECT)<br />
->_beforeclose(new YsJsFunction('alert("Adios")'))<br />
->_buttons(array(<br />
'Ok' => new YsJsFunction('alert("Hola jQuery4PHP")'),<br />
'Close' => new YsJsFunction(YsUIDialog::close('this')))<br />
)<br />
);<br />
?><br />
</source><br />
<br />
== El template ==<br />
<br />
Ahora debemos importar los archivos .js y .css de jQuery y jQueryUI.<br />
<br />
Abrimos la plantilla por defecto de KumbiaPHP '''default.phtml''' que se<br />
encuentra en el directorio "kumbiaphp/app/views/templates" y agregamos<br />
las siguientes lineas.<br />
<br />
<source lang="php"><br />
...<br />
<?php echo stylesheet_link_tag('bienvenida') ?><br />
<br />
<?php echo stylesheet_link_tag('yepsua/jquery-ui-1.8.2.custom') ?><br />
<?php echo stylesheet_link_tag('jquery-ui-utilities') ?><br />
<?php echo javascript_include_tag('jquery.min') ?><br />
<?php echo javascript_include_tag('jquery-ui-1.8.2.custom.min') ?><br />
<br />
<?php echo stylesheet_link_tag('style') ?><br />
<?php echo stylesheet_link_tag('exception') ?><br />
...<br />
</source><br />
== Y listo ==<br />
<br />
Al abrir la direccion "http://localhost/kumbiaphp/saludo/hola/KumbiaPHP" nos<br />
debería mostrar el mensaje en un jQueryUI dialogo.<br />
<br />
[[Archivo:jquery4php_ui_dialog.jpg|1000px|thumb|center|KumbiaPHP y jQuery4PHP]]<br />
<br />
<br />
Ahora puedes copiar y pegar el código del Showcase de jQuery4PHP en<br />
las vistas de kumbiaphp y deberían funcionar todos los ejemplos en tu<br />
aplicación.<br />
<br />
Para cualquier información o duda sobre jQuery4PHP o este tutorial puedes unirte al [http://groups.google.com/group/jquery4php grupo de google] o utilzar el [https://sourceforge.net/projects/jquery4php/forums foro] en sourceforge.net<br />
<br />
[[Categoría:Tutoriales KumbiaPHP]]<br />
[[Categoría:jQuery]]</div>Oyepez003https://wiki.kumbiaphp.com/index.php?title=Archivo:Jquery4php_ui_dialog.jpg&diff=2878Archivo:Jquery4php ui dialog.jpg2010-07-29T03:50:37Z<p>Oyepez003: Integracion KumbiaPHP con jQuery4PHP</p>
<hr />
<div>Integracion KumbiaPHP con jQuery4PHP</div>Oyepez003https://wiki.kumbiaphp.com/index.php?title=Integrando_KumbiaPHP_con_jQuery4PHP&diff=2876Integrando KumbiaPHP con jQuery4PHP2010-07-27T15:27:41Z<p>Oyepez003: /* Descargar jQuery4PHP */</p>
<hr />
<div>== Introducción ==<br />
<br />
[http://jquery4php.sourceforge.net/ jQuery4PHP] es una librería que<br />
simplifica la creación de aplicaciones de internet enriquecidas (Rich<br />
Internet Applications por sus siglas en ingles,<br />
[http://es.wikipedia.org/wiki/Rich_Internet_Application RIA] ).<br />
Utiliza la potencia de [http://www.jquery.com/ jQuery] y los widgets<br />
de [http://jqueryui.com/ jQueryUI] para hacer que las vistas de<br />
nuestras aplicaciones sean mucho mas amigables mejorando la<br />
experiencia del usuario.<br />
<br />
<br />
La intención de este tutorial es demostrar como KumbiaPHP puede<br />
integrarse sencillamente con cualquier librería de terceros y lo<br />
fácil que puede ser crear aplicaciones web 2.0 con jQuery4PHP.<br />
<br />
Vamos a basarnos en el tutorial [[Hola_Mundo_KumbiaPHP_Framework|Hola<br />
Mundo]] de KumbiaPHP, recuerda que el proyecto en ese tutorial fue<br />
llamado '''kumbiaphp''' quedando la<br />
[[KumbiaPHP_Framework_Versión_1.0_Spirit#Nueva_Estructura_de_Directorios|estructura<br />
de directorios]] de la siguiente forma:<br />
<br />
kumbiaphp/<br />
|-- app<br />
|-- core<br />
|-- index.php<br />
<br />
== Descargar jQuery4PHP ==<br />
<br />
Descargamos la última versión de jQuery4PHP.<br />
<br />
Existen varios formatos como descargar la librería (.zip y .tar.gz). Vamos<br />
a descargar la versión que trae jQuery, jQueryUI y el código fuente de<br />
los ejemplos (Showcase) llamada "source-exampales.zip" desde<br />
[http://sourceforge.net/projects/jquery4php/ aqui].<br />
<br />
== Adaptándose a la Estructura de Directorios de KumbiaPHP ==<br />
<br />
EL segundo paso es ordenar los archivos que descargamos a la forma que<br />
KumbiaPHP establece.<br />
<br />
Descomprimimos el archivo "source-examples.zip" y la siguiente<br />
estructura será el resultado:<br />
<br />
source-examples/<br />
|-- lib<br />
|-- public_html<br />
<br />
La carpeta '''lib''' contiene el código fuente de jQuery4PHP.<br />
<br />
La carpeta '''public_html''' contiene los scripts de jQuery, jQueryUI<br />
y el codigo del "Showcase" de jQuery4PHP que en este caso no nos<br />
interesa para nada.<br />
<br />
<br />
=== Adaptando jQuery y jQueryUI ===<br />
<br />
Pasamos los archivos de jQuery y jQueryUI a los directorios<br />
javascripts y css de nuestro proyecto kumbiaphp. También pasamos el<br />
archivo jquery-ui-utilities.css, Este ultimo archivo aunque no es<br />
obligatorio contiene estilos necesarios para que algunos ejemplos se<br />
vean igual a los del Showcase de jQuery4PHP.<br />
<br />
<br />
'''javascript:'''<br />
<br />
Pasamos de la carpeta de jQuery4PHP "source-examples/public_html/js"<br />
al directorio de nuestra aplicacion "kumbiaphp/app/public/javascript"<br />
los archivos '''jquery.min.js''' y<br />
'''jquery-ui-1.8.2.custom.min.js'''.<br />
<br />
<br />
'''css:'''<br />
<br />
jQuery4PHP viene con un theme propio llamado "'''yepsua'''" y esta<br />
incluido en el .zip que descargamos. Para este ejemplo vamos a usar este<br />
theme pero puedes reemplazarlo por cualquiera que te guste o<br />
[http://jqueryui.com/themeroller/ crear] el tuyo propio. Pasamos la<br />
carpeta '''yepsua''' y el archivo '''jquery-ui-utilities.css''' que se<br />
encuentran en el directorio "source-examples/public-html/styles" al<br />
directorio "kumbiaphp/app/public/css"<br />
<br />
=== Adaptando jQuery4PHP ===<br />
<br />
- Creamos una carpeta llamada jquery4php en el directorio de nuestro<br />
proyecto "kumbiaphp/core/vendors" y dentro de ella copiamos el contenido de la<br />
carpeta "lib" de jQuery4PHP "source-examples/lib"<br />
<br />
La estructura de KumbiaPHP y jQuery4PHP integrados seria así:<br />
<br />
kumbiaphp/<br />
|-- app<br />
|-- core<br />
|-- vendors<br />
|-- jquery4php/YepSua/Labs/RIA/jQuery4PHP<br />
|-- index.php<br />
<br />
<br />
- Creamos una carpeta llamada jquery4php en el directorio<br />
"kumbiaphp/core/libs" y dentro de ella un archivo llamado jquery4php.php<br />
con el siguiente código:<br />
<br />
<source lang="php"><br />
<?php<br />
require_once CORE_PATH . 'vendors/jquery4php/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php';<br />
YsJQueryAutoloader::register();<br />
</source><br />
<br />
<br />
Aqui estamos importando todas las clases necesarias de jQuery4PHP<br />
usando la clase '''YsJQueryAutoloader'''<br />
<br />
Desde la próxima sección utilizaremos el mismo código del tutorial<br />
Hola Mundo de KumbiaPHP con algunas modificaciones sobre todo en la vista, para detalle sobre este código puedes<br />
consultar ese [[Hola_Mundo_KumbiaPHP_Framework|tutorial]].<br />
<br />
== El controlador ==<br />
<br />
'''saludo_controller.php''' Es el nombre del controlador usado en la<br />
aplicación Hola Mundo y contiene el siguiente código:<br />
<br />
<source lang="php"><br />
<?php<br />
class SaludoController extends ApplicationController {<br />
public function hola($nombre) {<br />
Load::lib('jquery4php'); <br />
$this->fecha = date("Y-m-d H:i");<br />
$this->nombre = $nombre;<br />
}<br />
}<br />
</source><br />
<br />
Un contralador con una accion '''hola'''<br />
<br />
== La vista ==<br />
<br />
<br />
'''''(Aqui comienza jQuery4PHP)'''''<br />
<br />
Ahora vamos a ver el código para la vistas de la acción '''hola'''.<br />
<br />
Creamos un archivo llamado hola.phtml en el directorio kumbiaphp/app/views/saludo/hola.phtml <br />
<br />
'''hola.phtml:'''<br />
<source lang="php"><br />
<?php echo YsUIDialog::initWidget('dialogId','style="display:none" title="Integrando KumbiaPHP con jQuery4PHP"') ?><br />
<br><br />
<p>Hola <?php echo $nombre ?></p><br />
<?php echo $fecha ?><br />
<?php echo YsUIDialog::endWidget() ?> <br />
<br />
<?php<br />
echo<br />
YsJQuery::newInstance()<br />
->execute(<br />
YsUIDialog::build('#dialogId')<br />
->_modal(true)<br />
->_show(YsUIConstant::SLIDE_EFFECT)<br />
->_beforeclose(new YsJsFunction('alert("Adios")'))<br />
->_buttons(array(<br />
'Ok' => new YsJsFunction('alert("Hola jQuery4PHP")'),<br />
'Close' => new YsJsFunction(YsUIDialog::close('this')))<br />
)<br />
);<br />
?><br />
</source><br />
<br />
== El template ==<br />
<br />
Ahora debemos importar los archivos .js y .css de jQuery y jQueryUI.<br />
<br />
Abrimos la plantilla por defecto de KumbiaPHP '''default.phtml''' que se<br />
encuentra en el directorio "kumbiaphp/app/views/templates" y agregamos<br />
las siguientes lineas.<br />
<br />
<source lang="php"><br />
...<br />
<?php echo stylesheet_link_tag('bienvenida') ?><br />
<br />
<?php echo stylesheet_link_tag('yepsua/jquery-ui-1.8.2.custom') ?><br />
<?php echo stylesheet_link_tag('jquery-ui-utilities') ?><br />
<?php echo javascript_include_tag('jquery.min') ?><br />
<?php echo javascript_include_tag('jquery-ui-1.8.2.custom.min') ?><br />
<br />
<?php echo stylesheet_link_tag('style') ?><br />
<?php echo stylesheet_link_tag('exception') ?><br />
...<br />
</source><br />
== Y listo ==<br />
<br />
Al abrir la direccion "http://localhost/kumbiaphp/saludo/hola/KumbiaPHP" nos<br />
debería mostrar el mensaje en un jQueryUI dialogo.<br />
<br />
Ahora puedes copiar y pegar el código del Showcase de jQuery4PHP en<br />
las vistas de kumbiaphp y deberían funcionar todos los ejemplos en tu<br />
aplicación.<br />
<br />
Para cualquier información o duda sobre jQuery4PHP o este tutorial puedes unirte al [http://groups.google.com/group/jquery4php grupo de google] o utilzar el [https://sourceforge.net/projects/jquery4php/forums foro] en sourceforge.net<br />
<br />
[[Categoría:Tutoriales KumbiaPHP]]<br />
[[Categoría:jQuery]]</div>Oyepez003https://wiki.kumbiaphp.com/index.php?title=Integrando_KumbiaPHP_con_jQuery4PHP&diff=2875Integrando KumbiaPHP con jQuery4PHP2010-07-27T14:42:09Z<p>Oyepez003: /* Adapando jQuery y jQueryUI */</p>
<hr />
<div>== Introducción ==<br />
<br />
[http://jquery4php.sourceforge.net/ jQuery4PHP] es una librería que<br />
simplifica la creación de aplicaciones de internet enriquecidas (Rich<br />
Internet Applications por sus siglas en ingles,<br />
[http://es.wikipedia.org/wiki/Rich_Internet_Application RIA] ).<br />
Utiliza la potencia de [http://www.jquery.com/ jQuery] y los widgets<br />
de [http://jqueryui.com/ jQueryUI] para hacer que las vistas de<br />
nuestras aplicaciones sean mucho mas amigables mejorando la<br />
experiencia del usuario.<br />
<br />
<br />
La intención de este tutorial es demostrar como KumbiaPHP puede<br />
integrarse sencillamente con cualquier librería de terceros y lo<br />
fácil que puede ser crear aplicaciones web 2.0 con jQuery4PHP.<br />
<br />
Vamos a basarnos en el tutorial [[Hola_Mundo_KumbiaPHP_Framework|Hola<br />
Mundo]] de KumbiaPHP, recuerda que el proyecto en ese tutorial fue<br />
llamado '''kumbiaphp''' quedando la<br />
[[KumbiaPHP_Framework_Versión_1.0_Spirit#Nueva_Estructura_de_Directorios|estructura<br />
de directorios]] de la siguiente forma:<br />
<br />
kumbiaphp/<br />
|-- app<br />
|-- core<br />
|-- index.php<br />
<br />
== Descargar jQuery4PHP ==<br />
<br />
Descargamos la última versión de jQuery4PHP.<br />
<br />
Existen varios formatos como descargar la librería (zip y rar). Vamos<br />
a descargar la versión que trae jQuery, jQueryUI y el código fuente de<br />
los ejemplos (Showcase) llamada "source-exampales.zip" desde<br />
[http://sourceforge.net/projects/jquery4php/ aqui].<br />
<br />
== Adaptándose a la Estructura de Directorios de KumbiaPHP ==<br />
<br />
EL segundo paso es ordenar los archivos que descargamos a la forma que<br />
KumbiaPHP establece.<br />
<br />
Descomprimimos el archivo "source-examples.zip" y la siguiente<br />
estructura será el resultado:<br />
<br />
source-examples/<br />
|-- lib<br />
|-- public_html<br />
<br />
La carpeta '''lib''' contiene el código fuente de jQuery4PHP.<br />
<br />
La carpeta '''public_html''' contiene los scripts de jQuery, jQueryUI<br />
y el codigo del "Showcase" de jQuery4PHP que en este caso no nos<br />
interesa para nada.<br />
<br />
<br />
=== Adaptando jQuery y jQueryUI ===<br />
<br />
Pasamos los archivos de jQuery y jQueryUI a los directorios<br />
javascripts y css de nuestro proyecto kumbiaphp. También pasamos el<br />
archivo jquery-ui-utilities.css, Este ultimo archivo aunque no es<br />
obligatorio contiene estilos necesarios para que algunos ejemplos se<br />
vean igual a los del Showcase de jQuery4PHP.<br />
<br />
<br />
'''javascript:'''<br />
<br />
Pasamos de la carpeta de jQuery4PHP "source-examples/public_html/js"<br />
al directorio de nuestra aplicacion "kumbiaphp/app/public/javascript"<br />
los archivos '''jquery.min.js''' y<br />
'''jquery-ui-1.8.2.custom.min.js'''.<br />
<br />
<br />
'''css:'''<br />
<br />
jQuery4PHP viene con un theme propio llamado "'''yepsua'''" y esta<br />
incluido en el .zip que descargamos. Para este ejemplo vamos a usar este<br />
theme pero puedes reemplazarlo por cualquiera que te guste o<br />
[http://jqueryui.com/themeroller/ crear] el tuyo propio. Pasamos la<br />
carpeta '''yepsua''' y el archivo '''jquery-ui-utilities.css''' que se<br />
encuentran en el directorio "source-examples/public-html/styles" al<br />
directorio "kumbiaphp/app/public/css"<br />
<br />
=== Adaptando jQuery4PHP ===<br />
<br />
- Creamos una carpeta llamada jquery4php en el directorio de nuestro<br />
proyecto "kumbiaphp/core/vendors" y dentro de ella copiamos el contenido de la<br />
carpeta "lib" de jQuery4PHP "source-examples/lib"<br />
<br />
La estructura de KumbiaPHP y jQuery4PHP integrados seria así:<br />
<br />
kumbiaphp/<br />
|-- app<br />
|-- core<br />
|-- vendors<br />
|-- jquery4php/YepSua/Labs/RIA/jQuery4PHP<br />
|-- index.php<br />
<br />
<br />
- Creamos una carpeta llamada jquery4php en el directorio<br />
"kumbiaphp/core/libs" y dentro de ella un archivo llamado jquery4php.php<br />
con el siguiente código:<br />
<br />
<source lang="php"><br />
<?php<br />
require_once CORE_PATH . 'vendors/jquery4php/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php';<br />
YsJQueryAutoloader::register();<br />
</source><br />
<br />
<br />
Aqui estamos importando todas las clases necesarias de jQuery4PHP<br />
usando la clase '''YsJQueryAutoloader'''<br />
<br />
Desde la próxima sección utilizaremos el mismo código del tutorial<br />
Hola Mundo de KumbiaPHP con algunas modificaciones sobre todo en la vista, para detalle sobre este código puedes<br />
consultar ese [[Hola_Mundo_KumbiaPHP_Framework|tutorial]].<br />
<br />
== El controlador ==<br />
<br />
'''saludo_controller.php''' Es el nombre del controlador usado en la<br />
aplicación Hola Mundo y contiene el siguiente código:<br />
<br />
<source lang="php"><br />
<?php<br />
class SaludoController extends ApplicationController {<br />
public function hola($nombre) {<br />
Load::lib('jquery4php'); <br />
$this->fecha = date("Y-m-d H:i");<br />
$this->nombre = $nombre;<br />
}<br />
}<br />
</source><br />
<br />
Un contralador con una accion '''hola'''<br />
<br />
== La vista ==<br />
<br />
<br />
'''''(Aqui comienza jQuery4PHP)'''''<br />
<br />
Ahora vamos a ver el código para la vistas de la acción '''hola'''.<br />
<br />
Creamos un archivo llamado hola.phtml en el directorio kumbiaphp/app/views/saludo/hola.phtml <br />
<br />
'''hola.phtml:'''<br />
<source lang="php"><br />
<?php echo YsUIDialog::initWidget('dialogId','style="display:none" title="Integrando KumbiaPHP con jQuery4PHP"') ?><br />
<br><br />
<p>Hola <?php echo $nombre ?></p><br />
<?php echo $fecha ?><br />
<?php echo YsUIDialog::endWidget() ?> <br />
<br />
<?php<br />
echo<br />
YsJQuery::newInstance()<br />
->execute(<br />
YsUIDialog::build('#dialogId')<br />
->_modal(true)<br />
->_show(YsUIConstant::SLIDE_EFFECT)<br />
->_beforeclose(new YsJsFunction('alert("Adios")'))<br />
->_buttons(array(<br />
'Ok' => new YsJsFunction('alert("Hola jQuery4PHP")'),<br />
'Close' => new YsJsFunction(YsUIDialog::close('this')))<br />
)<br />
);<br />
?><br />
</source><br />
<br />
== El template ==<br />
<br />
Ahora debemos importar los archivos .js y .css de jQuery y jQueryUI.<br />
<br />
Abrimos la plantilla por defecto de KumbiaPHP '''default.phtml''' que se<br />
encuentra en el directorio "kumbiaphp/app/views/templates" y agregamos<br />
las siguientes lineas.<br />
<br />
<source lang="php"><br />
...<br />
<?php echo stylesheet_link_tag('bienvenida') ?><br />
<br />
<?php echo stylesheet_link_tag('yepsua/jquery-ui-1.8.2.custom') ?><br />
<?php echo stylesheet_link_tag('jquery-ui-utilities') ?><br />
<?php echo javascript_include_tag('jquery.min') ?><br />
<?php echo javascript_include_tag('jquery-ui-1.8.2.custom.min') ?><br />
<br />
<?php echo stylesheet_link_tag('style') ?><br />
<?php echo stylesheet_link_tag('exception') ?><br />
...<br />
</source><br />
== Y listo ==<br />
<br />
Al abrir la direccion "http://localhost/kumbiaphp/saludo/hola/KumbiaPHP" nos<br />
debería mostrar el mensaje en un jQueryUI dialogo.<br />
<br />
Ahora puedes copiar y pegar el código del Showcase de jQuery4PHP en<br />
las vistas de kumbiaphp y deberían funcionar todos los ejemplos en tu<br />
aplicación.<br />
<br />
Para cualquier información o duda sobre jQuery4PHP o este tutorial puedes unirte al [http://groups.google.com/group/jquery4php grupo de google] o utilzar el [https://sourceforge.net/projects/jquery4php/forums foro] en sourceforge.net<br />
<br />
[[Categoría:Tutoriales KumbiaPHP]]<br />
[[Categoría:jQuery]]</div>Oyepez003https://wiki.kumbiaphp.com/index.php?title=Integrando_KumbiaPHP_con_jQuery4PHP&diff=2874Integrando KumbiaPHP con jQuery4PHP2010-07-27T04:26:31Z<p>Oyepez003: Integrando KumbiaPHP con jQuery4PHP</p>
<hr />
<div>== Introducción ==<br />
<br />
[http://jquery4php.sourceforge.net/ jQuery4PHP] es una librería que<br />
simplifica la creación de aplicaciones de internet enriquecidas (Rich<br />
Internet Applications por sus siglas en ingles,<br />
[http://es.wikipedia.org/wiki/Rich_Internet_Application RIA] ).<br />
Utiliza la potencia de [http://www.jquery.com/ jQuery] y los widgets<br />
de [http://jqueryui.com/ jQueryUI] para hacer que las vistas de<br />
nuestras aplicaciones sean mucho mas amigables mejorando la<br />
experiencia del usuario.<br />
<br />
<br />
La intención de este tutorial es demostrar como KumbiaPHP puede<br />
integrarse sencillamente con cualquier librería de terceros y lo<br />
fácil que puede ser crear aplicaciones web 2.0 con jQuery4PHP.<br />
<br />
Vamos a basarnos en el tutorial [[Hola_Mundo_KumbiaPHP_Framework|Hola<br />
Mundo]] de KumbiaPHP, recuerda que el proyecto en ese tutorial fue<br />
llamado '''kumbiaphp''' quedando la<br />
[[KumbiaPHP_Framework_Versión_1.0_Spirit#Nueva_Estructura_de_Directorios|estructura<br />
de directorios]] de la siguiente forma:<br />
<br />
kumbiaphp/<br />
|-- app<br />
|-- core<br />
|-- index.php<br />
<br />
== Descargar jQuery4PHP ==<br />
<br />
Descargamos la última versión de jQuery4PHP.<br />
<br />
Existen varios formatos como descargar la librería (zip y rar). Vamos<br />
a descargar la versión que trae jQuery, jQueryUI y el código fuente de<br />
los ejemplos (Showcase) llamada "source-exampales.zip" desde<br />
[http://sourceforge.net/projects/jquery4php/ aqui].<br />
<br />
== Adaptándose a la Estructura de Directorios de KumbiaPHP ==<br />
<br />
EL segundo paso es ordenar los archivos que descargamos a la forma que<br />
KumbiaPHP establece.<br />
<br />
Descomprimimos el archivo "source-examples.zip" y la siguiente<br />
estructura será el resultado:<br />
<br />
source-examples/<br />
|-- lib<br />
|-- public_html<br />
<br />
La carpeta '''lib''' contiene el código fuente de jQuery4PHP.<br />
<br />
La carpeta '''public_html''' contiene los scripts de jQuery, jQueryUI<br />
y el codigo del "Showcase" de jQuery4PHP que en este caso no nos<br />
interesa para nada.<br />
<br />
<br />
=== Adapando jQuery y jQueryUI ===<br />
<br />
Pasamos los archivos de jQuery y jQueryUI a los directorios<br />
javascripts y css de nuestro proyecto kumbiaphp. También pasamos el<br />
archivo jquery-ui-utilities.css, Este ultimo archivo aunque no es<br />
obligatorio contiene estilos necesarios para que algunos ejemplos se<br />
vean igual a los del Showcase de jQuery4PHP.<br />
<br />
<br />
'''javascript:'''<br />
<br />
Pasamos de la carpeta de jQuery4PHP "source-examples/public_html/js"<br />
al directorio de nuestra aplicacion "kumbiaphp/app/public/javascript"<br />
los archivos '''jquery.min.js''' y<br />
'''jquery-ui-1.8.2.custom.min.js'''.<br />
<br />
<br />
'''css:'''<br />
<br />
jQuery4PHP viene con un theme propio llamado "'''yepsua'''" y esta<br />
incluido en el .zip que descargamos. Para este ejemplo vamos a usar este<br />
theme pero puedes reemplazarlo por cualquiera que te guste o<br />
[http://jqueryui.com/themeroller/ crear] el tuyo propio. Pasamos la<br />
carpeta '''yepsua''' y el archivo '''jquery-ui-utilities.css''' que se<br />
encuentran en el directorio "source-examples/public-html/styles" al<br />
directorio "kumbiaphp/app/public/css"<br />
<br />
<br />
=== Adaptando jQuery4PHP ===<br />
<br />
- Creamos una carpeta llamada jquery4php en el directorio de nuestro<br />
proyecto "kumbiaphp/core/vendors" y dentro de ella copiamos el contenido de la<br />
carpeta "lib" de jQuery4PHP "source-examples/lib"<br />
<br />
La estructura de KumbiaPHP y jQuery4PHP integrados seria así:<br />
<br />
kumbiaphp/<br />
|-- app<br />
|-- core<br />
|-- vendors<br />
|-- jquery4php/YepSua/Labs/RIA/jQuery4PHP<br />
|-- index.php<br />
<br />
<br />
- Creamos una carpeta llamada jquery4php en el directorio<br />
"kumbiaphp/core/libs" y dentro de ella un archivo llamado jquery4php.php<br />
con el siguiente código:<br />
<br />
<source lang="php"><br />
<?php<br />
require_once CORE_PATH . 'vendors/jquery4php/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php';<br />
YsJQueryAutoloader::register();<br />
</source><br />
<br />
<br />
Aqui estamos importando todas las clases necesarias de jQuery4PHP<br />
usando la clase '''YsJQueryAutoloader'''<br />
<br />
Desde la próxima sección utilizaremos el mismo código del tutorial<br />
Hola Mundo de KumbiaPHP con algunas modificaciones sobre todo en la vista, para detalle sobre este código puedes<br />
consultar ese [[Hola_Mundo_KumbiaPHP_Framework|tutorial]].<br />
<br />
== El controlador ==<br />
<br />
'''saludo_controller.php''' Es el nombre del controlador usado en la<br />
aplicación Hola Mundo y contiene el siguiente código:<br />
<br />
<source lang="php"><br />
<?php<br />
class SaludoController extends ApplicationController {<br />
public function hola($nombre) {<br />
Load::lib('jquery4php'); <br />
$this->fecha = date("Y-m-d H:i");<br />
$this->nombre = $nombre;<br />
}<br />
}<br />
</source><br />
<br />
Un contralador con una accion '''hola'''<br />
<br />
== La vista ==<br />
<br />
<br />
'''''(Aqui comienza jQuery4PHP)'''''<br />
<br />
Ahora vamos a ver el código para la vistas de la acción '''hola'''.<br />
<br />
Creamos un archivo llamado hola.phtml en el directorio kumbiaphp/app/views/saludo/hola.phtml <br />
<br />
'''hola.phtml:'''<br />
<source lang="php"><br />
<?php echo YsUIDialog::initWidget('dialogId','style="display:none" title="Integrando KumbiaPHP con jQuery4PHP"') ?><br />
<br><br />
<p>Hola <?php echo $nombre ?></p><br />
<?php echo $fecha ?><br />
<?php echo YsUIDialog::endWidget() ?> <br />
<br />
<?php<br />
echo<br />
YsJQuery::newInstance()<br />
->execute(<br />
YsUIDialog::build('#dialogId')<br />
->_modal(true)<br />
->_show(YsUIConstant::SLIDE_EFFECT)<br />
->_beforeclose(new YsJsFunction('alert("Adios")'))<br />
->_buttons(array(<br />
'Ok' => new YsJsFunction('alert("Hola jQuery4PHP")'),<br />
'Close' => new YsJsFunction(YsUIDialog::close('this')))<br />
)<br />
);<br />
?><br />
</source><br />
<br />
== El template ==<br />
<br />
Ahora debemos importar los archivos .js y .css de jQuery y jQueryUI.<br />
<br />
Abrimos la plantilla por defecto de KumbiaPHP '''default.phtml''' que se<br />
encuentra en el directorio "kumbiaphp/app/views/templates" y agregamos<br />
las siguientes lineas.<br />
<br />
<source lang="php"><br />
...<br />
<?php echo stylesheet_link_tag('bienvenida') ?><br />
<br />
<?php echo stylesheet_link_tag('yepsua/jquery-ui-1.8.2.custom') ?><br />
<?php echo stylesheet_link_tag('jquery-ui-utilities') ?><br />
<?php echo javascript_include_tag('jquery.min') ?><br />
<?php echo javascript_include_tag('jquery-ui-1.8.2.custom.min') ?><br />
<br />
<?php echo stylesheet_link_tag('style') ?><br />
<?php echo stylesheet_link_tag('exception') ?><br />
...<br />
</source><br />
== Y listo ==<br />
<br />
Al abrir la direccion "http://localhost/kumbiaphp/saludo/hola/KumbiaPHP" nos<br />
debería mostrar el mensaje en un jQueryUI dialogo.<br />
<br />
Ahora puedes copiar y pegar el código del Showcase de jQuery4PHP en<br />
las vistas de kumbiaphp y deberían funcionar todos los ejemplos en tu<br />
aplicación.<br />
<br />
Para cualquier información o duda sobre jQuery4PHP o este tutorial puedes unirte al [http://groups.google.com/group/jquery4php grupo de google] o utilzar el [https://sourceforge.net/projects/jquery4php/forums foro] en sourceforge.net<br />
<br />
[[Categoría:Tutoriales KumbiaPHP]]<br />
[[Categoría:jQuery]]</div>Oyepez003