Creando un CRUD sencillo con Symfony y Smartwig

[apicito]

Estoy tratando de hacer un ejemplo de crud sencillo con Smartwig con
idea de ir aprendiendo yo y despues poner el ejemplo con un pequeño
manual a disposición de los que están empezando.
Estoy trabajando con Symfony 2.0.15 + vendors y he instalado los
bundles:
[doctrine-fixtures]
git=https://github.com/doctrine/data-fixtures.git
[DoctrineFixturesBundle]
git=https://github.com/doctrine/DoctrineFixturesBundle.git
target=/bundles/Symfony/Bundle/DoctrineFixturesBundle
version=origin/2.0
[doctrine-extensions]
git=https://github.com/beberlei/DoctrineExtensions.git
[IdeupSimplePaginatorBundle]
git=https://github.com/javiacei/IdeupSimplePaginatorBundle
target=/bundles/Ideup/SimplePaginatorBundle
[YepsuaSmarTwigBundle]
git=http://github.com/oyepez003/YepsuaSmarTwigBundle.git
target=/bundles/Yepsua/SmarTwigBundle

He creado un bundle con "php app/console generate:bundle"
y una entidad con "app/console generate:doctrine:entity"
he creado la base de datos y las tablas con "doctrine:schema" y "app/
console doctrine:schema:update --force"
y he creado un crud "app/console generate:doctrine:crud"
y unas fixtures para tener unos datos para el desarrollo

Ahora estoy trantado de sustituir las llamadas autogeneradas por
botones smartwig que mantengan la página y solo actualicen un div
(<div id="successTarget">) donde están el listado de articulos y los
formularios del crud.

Pongo el código del index.html.twig que lista los articulos:

{% extends '::base.html.twig' %}
{% block body %}
<div id="successTarget">
<h1>Listado de Articulos</h1>
<table class="records_list">
<thead>
<tr>
<th>Id</th>
<th>Descripcion</th>
<th>Precio</th>
<th>Stock</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for entity in entities %}
<tr>
<td>{{ entity.id }}</td>
<td>{{ entity.descripcion }}</td>
<td>{{ entity.precio }}</td>
<td>{{ entity.stock }}</td>
<td>
{% ajax_form action=path('articulo_show', { 'id':
entity.id })
method="POST"
update="#successTarget" %}
{% ui_button type="submit" value="ver" %}
{% end_ajax_form %}
</td>
<td>
{% ajax_form action=path('articulo_edit', { 'id':
entity.id })
method="POST"
update="#successTarget" %}
{% ui_button type="submit" value="Editar" %}
{% end_ajax_form %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{{ simple_paginator_render('articulo', null, {
'container_class': 'paginador',
'previousPageText': 'Anterior',
'nextPageText': 'Siguiente',
'currentClass': 'actual',
'firstPageText': 'Primera',
'lastPageText': 'Última'
}) }}
{% ajax_form action=path('articulo_new')
method="POST"
update="#successTarget" %}
{% ui_button type="submit" value="Nuevo" %}
{% end_ajax_form %}
</div>

Esto funciona bien ya que al llamar a los métodos cambia el contenido
del div y no modifica la url. Pero tengo un problema: En el {% for
entity in entities %} que crea el listado de artículos solo me salen
como botones ajax los del primer artículo, es decir los del primer
<tr>, y el de nuevo artículo, los demas me aparecen como botones html
normales.

Aguien puede ayudarme con esto?.

[oyepez003]

Hola apicito

Que bueno que estes probando SmarTwig.

Es raro lo que te esta pasando.

Lo unico que se me ocurre es que por algun motivo el id de los botones dentro del for no estan cambiando en cada iteracion.

Lo que puedes hacer es lo siguiente:

Dejar los botones como html normales y darle un nombre a la clase.

<input type="submit" class="btnSubmit" value="Ver" />

Y al final de todo tu codigo haces:

{% ui_button builtIn=".btnSubmit" builtBy="document" builtByEvent="ready"  %}

Asi deberia funcionar:

Cualquier duda por aqui estaremos.

Saludos.

P.D. Voy a tratar e probar lo que comentas para solventarlo.

[oyepez003]

Realice una prueba haciendo lo que dices apicito:

Dentro de un for crear varios botones y esta solo renderizando el primer Boton.

Asi que estaremos resolviendo este bug lo mas pronto posible.

Saludos cordiales.

El viernes, 8 de junio de 2012 07:25:54 UTC-4:30, apicito escribió:

[apicito]

La solución que me propones no consigo hacer que funcione. El boton no
hace nada imagino ue la razón es que no le estoy enviando el id del
articulo que quiero ver.
Con la opción del bucle he tratado de darle un id distinto a cada
boton en cada vuelta del for pero no he conseguido que cogiera un id
distinto para cada fila: Ver-1, Ver-2,... Lo he probado de varias
formas, por ejemplo:
{% ui_button type="submit" value="ver-"~entity.id %}

[apicito]

Quería decir:
{% ui_button type="submit" value="Ver" id="ver-"~entity.id %}

[oyepez003]

SI cuando tengamos la solucion a este bug lo informaremos por aqui.

Gracias por tus pruebas que son de gran valor para el bundle y para la comunidad.

Saludos cordiales.

[oyepez003]

Ayer subimos al repositorio la solucion a este bug.

Para que funcionen los widgets dentro de un bucle iterativo for, while etc los widgets deben tener un id unico:

Por ejemplo:

{% for i in 1.. 10 %}

  {% ui_button value="Send" id="btn"~i %}  

{% endfor}

Saludos a todos.

Omar Yepez

[Jakala]

Buenas:

Si me permitis, seria mejor que utilizarais, dentro del bucle for, el elemento loop.index (ya que viene con el twig, y normalmente se suele recorrer un array de objetos, para crear un id unico creo que seria la mejor opcion).

buen trabajo el que estais haciendo, el bundle tiene un monton de cosas interesantes. Felicidades!

[apicito]

Perfecto!!!
Ahora funciona correctamente.
Te comento un problema que ya se me dió cuando instalé smartwig la
primera vez y que se repitió ahora al hacer el update:
en el Deps tengo:
[YepsuaSmarTwigBundle]
git=http://github.com/oyepez003/YepsuaSmarTwigBundle.git
target=/bundles/Yepsua/SmarTwigBundle
Al hace update con bin/vendors install --reinstall
me da este error:
PHP Warning: include_once(): Failed opening '/var/www/Almacen/app/../
vendor/bundles/Yepsua/SmarTwigBundle/vendor/YepSua/Labs/RIA/jQuery4PHP/
YsJQueryAutoloader.php' for inclusion (include_path='.:/usr/share/php:/
usr/share/pear') in /var/www/Almacen/app/autoload.php on line 51
Miro el directorio vendor/bundles/Yepsua/SmarTwigBundle/vendor/ y veo
que está vacio, por lo que tengo que descargarme
Download jQuery4PHP from https://github.com/oyepez003/jQuery4PHP/downloads
y descomprimirlo en ese directorio y entonces todo funciona bien.
¿No debería tener algo más en el Deps para que actualizara tambien
esta parte?.
Saludos.

[oyepez003]

Gracias Jakala

Espero que les sea util el bundle y claro hay que darle merito tambien a todos los que contribuyen con la libreria jQuery, jQueryUI y sus plugins.

Lo de usar loop.index es muy buena idea ... sea cual sea la forma que lo hagan lo importante es que sus widgets dentro de un bucle debe tener un id diferente entre ellos.

apicito con respecto al tema de instalacion... creo que la mejor forma de instalar el bundle es como submodulo de git.

git clone --recursive https://github.com/oyepez003/YepsuaSmarTwigBundle.git vendor/bundles/Yepsua/SmarTwigBundle

Este comando clona el repositorio de SmarTwig y su dependencia con jQuery4PHP.

De todos modos si quieres usar el archivo deps entonces tambien debes colocar la dependencia de jQuery4PHP.

Algo asi como:

[jQuery4PHP]
  git=http://github.com/oyepez003/jQuery4PHP.git
  target=/bundles/Yepsua/SmarTwigBundle/vendor

Saludos cordiales.

[apicito]

El otro día, cuando dije que funcionaba correctamente, solo comprobé
que renderizaba bien los botones dentro del bucle, pero ahora probando
la aplicación veo que las llamadas:

<td>
{% ajax_form action=path('articulo_edit', { 'id':
entity.id })
method="POST"
update="#successTarget" %}
{% ui_button type="submit" value="Editar"

id="Editar"~entity.id %}
{% end_ajax_form %}
</td>
no las hace a través de ajax sino quere fresca toda la página. O por
lo menos es mi impresión.
Sin embargo el boton de registro nuevo, fuera del bucle, con este
codigo:

{% ajax_form action=path('articulo_new')
method="POST"
update="#successTarget" %}

{% ui_button type="submit" value="Nuevo" id="Nuevo" %}
{% end_ajax_form %}
si que funciona a través de ajax y solo refresca el div
"successTarget".
No sé si estoy haciendo algo mal o se trata de un bug.

On 10 jun, 06:14, oyepez003 <oyepez...@gmail.com> wrote:
> Gracias Jakala
>
> Espero que les sea util el bundle y claro hay que darle merito tambien a
> todos los que contribuyen con la libreria jQuery, jQueryUI y sus plugins.
>
> Lo de usar loop.index es muy buena idea ... sea cual sea la forma que lo
> hagan lo importante es que sus widgets dentro de un bucle debe tener un id
> diferente entre ellos.
>
> apicito con respecto al tema de instalacion... creo que la mejor forma de
> instalar el bundle es como submodulo de git.
>
> git clone --recursivehttps://github.com/oyepez003/YepsuaSmarTwigBundle.gitvendor/bundles/Yepsua/SmarTwigBundle
>
> Este comando clona el repositorio de SmarTwig y su dependencia con
> jQuery4PHP.
>
> De todos modos si quieres usar el archivo deps entonces tambien debes
> colocar la dependencia de jQuery4PHP.
>
> Algo asi como:
>
> [jQuery4PHP]

>   git=http://github.com/oyepez003/jQuery4PHP.git<http://github.com/oyepez003/YepsuaSmarTwigBundle.git>

>   target=/bundles/Yepsua/SmarTwigBundle/vendor
> Saludos cordiales.
>
> El sábado, 9 de junio de 2012 12:25:56 UTC-4:30, apicito escribió:
>
>
>
>
>
>
>
>
>
> > Perfecto!!!
> > Ahora funciona correctamente.
> > Te comento un problema que ya se me dió cuando instalé smartwig la
> > primera vez y que se repitió ahora al hacer el update:
> > en el Deps tengo:
> > [YepsuaSmarTwigBundle]
> >   git=http://github.com/oyepez003/YepsuaSmarTwigBundle.git
> >   target=/bundles/Yepsua/SmarTwigBundle
> > Al hace update con bin/vendors install --reinstall
> > me da este error:
> > PHP Warning:  include_once(): Failed opening '/var/www/Almacen/app/../
> > vendor/bundles/Yepsua/SmarTwigBundle/vendor/YepSua/Labs/RIA/jQuery4PHP/
> > YsJQueryAutoloader.php' for inclusion (include_path='.:/usr/share/php:/
> > usr/share/pear') in /var/www/Almacen/app/autoload.php on line 51
> > Miro el directorio vendor/bundles/Yepsua/SmarTwigBundle/vendor/ y veo
> > que está vacio, por lo que tengo que descargarme

> > Download jQuery4PHP fromhttps://github.com/oyepez003/jQuery4PHP/downloads

> ...
>
> leer más »

[oyepez003]

Hola apicito, el ajax_form tambien es un widget asi que intenta colocarle un id a cada ajax_form a ver si funciona.

Por que se debe colocar un id.... por que smartwig verifica si tu pasaste el atributo id al widget, si no pasaste el atributo el lo genera, pero al estar dentro de un for el id autogenerado siempre es el mismo.

Mas adelante veremos como solucionar esto pero por ahora y lo recomendable siempre darle "id" al widget.

Saludos.

[apicito]

Correcto, ahora funciona.

> ...
>
> leer más »

[apicito]

Bueno, hasta aquí he llegado. No he conseguido hacer funcionar el CRUD
como pretendía. Tambien lo he intentado con JQuery $Ajax a pelo pero
tampoco.
Mis conocimientos de Symfony2 y Jquery no son suficientes, por lo que
he decidido trabajar un tiempo con Sf2 y aprenderme bien como funciona
y, más adelante, volver a intentar hacer una aplicación SDI (Single
document Interface). Mientras tanto supongo que aparecerá el grid de
smartwig y algún manual o ejemplos.
Gracias por la ayuda y seguiremos viendonos por aquí.

> > > > > > >>> > > > Estoy tratando de hacer un ejemplo decrudsencillo con

> > > > > > >>> > > > y he creado uncrud"app/console generate:doctrine:crud"

> > > > > > >>> > > > y unas fixtures para tener unos datos para el desarrollo
>
> > > > > > >>> > > > Ahora estoy trantado de sustituir las llamadas
> > > autogeneradas
> > > > > por
> > > > > > >>> > > > botones smartwig que mantengan la página y solo actualicen
> > > un
> > > > > div
> > > > > > >>> > > > (<div id="successTarget">) donde están el listado de
> > > articulos
> > > > > y
> > > > > > >>> los
> > > > > > >>> > > > formularios delcrud.
>
> > > > > > >>> > > > Pongo el código del index.html.twig que lista los
> > > articulos:
>
> > > > > > >>> > > > {% extends '::base.html.twig' %}
> > > > > > >>> > > > {% block body %}
> > > > > > >>> > > > <div id="successTarget">
> > > > > > >>> > > >     <h1>Listado de Articulos</h1>
> > > > > > >>> > > >     <table class="records_list">
> > > > > > >>> > > >         <thead>
> > > > > > >>> > > >             <tr>
> > > > > > >>> > > >                 <th>Id</th>
> > > > > > >>> > > >                 <th>Descripcion</th>

> > > > > > >>> > > >                ...
>
> leer más »

[oyepez003]

Saludos Apicito.

Gracias por tu esfuerzo en tratar de hacer un CRUD con Sf2 y la libreria, en los proximos dias subireos a github la version con los componentes Grid, TreeView, FullCalendar etc.

Ahora, mi recomendacion para crear los CRUD es utilizar el bundle LyraAdminBundle ya que este utiliza jquery y jqueryUI para crear la UI igual que YepsuaSmarTwigBundle.... cabe destacar que LyraAdminBundle actualmente esta probado para la version 2.0.x.

Despues de todo esto crearemos un proyecto muy basico para demostrar las funcionalidades de SmarTwig y lo subiremos a github o mejor aun liberamos el showcase.

Saludos cordiales.

[apicito]

Esto son muy buenas noticias!!!
Esperaré a los nuevos componentes y al crud de ejemplo. Mientras
tanto voy a trabajar un poco con symfony2 para tener mejor preparada
esta parte.
Un saludo.

On 15 jun, 00:18, oyepez003 <oyepez...@gmail.com> wrote:
> Saludos Apicito.
>
> Gracias por tu esfuerzo en tratar de hacer un CRUD con Sf2 y la libreria,
> en los proximos dias subireos a github la version con los componentes Grid,
> TreeView, FullCalendar etc.
>
> Ahora, mi recomendacion para crear los CRUD es utilizar el bundle

> LyraAdminBundle <https://github.com/mgiagnoni/LyraAdminBundle> ya que este

> ...
>
> leer más »