Symfony forms

Forms!
1
Monday, October 14, 13

Symfony Forms
•

Tipos de formularios

2

Symfony Forms
•
•

Formatos de datos

3

Symfony Forms
•
•
•

Formatos de datos
Creación

4

Symfony Forms
•
•
•
•

Formatos de datos
Creación
Renderizado

5

Symfony Forms
•
•
•
•
•

Formatos de datos
Creación
Renderizado
Submit

6

Symfony Forms
•
•
•
•
•
•

Formatos de datos
Creación
Renderizado
Submit
Eventos

7

Objetivo

http://www.ﬂickr.com/photos/edgarjediza/2404477249/

Y no...

http://fun.mee.is/wp-content/uploads/funny-sleep-positon-01.jpg


10

•

Describen el elemento a mostrar

11

•
•

Existen solamente una vez en la aplicación

12

•
•
•

Existe un tipo base: form

13

•
•
•
•

Se pueden heredar

14

•
•
•
•
•

Se pueden heredar
Inyectar dependencias si y solo si son comunes a todas las
instancias

15

•
•
•
•
•


•

Symfony incorpora muchos campos built-in

Se pueden heredar
Inyectar dependencias si y solo si son comunes a todas las
instancias

16

Grupos de campos

Campos texto
text

textarea

integer

money

number

password

percent

collection

email
search

Campos button
button

url

checkbox
datetime

time

choice

entity

country

language

locale

timezone

hidden

birthday
Campos choice

currency
17

reset

submit

ﬁle

radio

Otros campos

Campos date & time
date

repeated

Tipos de formularios propios
<?php
namespace IsmaAmbrosiMyBundleForm;
use SymfonyComponentFormAbstractType;
class MyFormType extends AbstractType
{
    public function getName()
    {
        return 'my_form';
    }
}

18

<?php
use SymfonyComponentFormFormBuilderInterface;
{
    /**
     * Construye el formulario
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        # Agrega un campo text para ingresar el nombre
        $builder->add('name', 'text');
    }
    public function getName(){...}
}


Tipos de formularios propios asociados a una entidad
<?php
use SymfonyComponentOptionsResolverOptionsResolverInterface;
{
    {
        $builder->add('name');
        $builder->add('last_name');
    }
    public function setDefaultOptions(OptionsResolverInterface $resolver)
    {
        $resolver->setDefaults(array('data_class' => 'IsmaAmbrosiMyBundleEntityUser'));
    }
}


Tipos de formularios propios asociados a una entidad
<?php

<?php


namespace IsmaAmbrosiMyBundleEntity;

use SymfonyComponentOptionsResolverOptionsResolverInterface;

use DoctrineORMMapping as ORM;

/**
* @ORMEntity
{
*/
class User
    {
{
        $builder->add('name');
    /**
        $builder->add('last_name');
    }
     * @ORMColumn(type="string", length=100)
     */
    public function setDefaultOptions(OptionsResolverInterface $resolver)
    private $name;
    {
        $resolver->setDefaults(array('data_class' => 'IsmaAmbrosiMyBundleEntityUser'));
    /**
    }
}


     * @ORMColumn(type="string", length=100)
     */
    private $lastName;
}


¡Se pueden crear como servicios!


Tipos de formularios propios como servicios

•


Puedo inyectar dependencias


•
•


Puedo conﬁgurar un logger exclusivo


•
•
•


Puedo testear mi aplicacion sin depender de ellos


•
•
•
•


Puedo testear mi aplicacion sin depender de ellos
Y más...

Instancias de Formularios
•
•
•

Existen una o más veces en la aplicación
Los datos pueden cambiar luego de su creación
Son creados a partir del tipo de formulario

27

Formatos de datos

28

Formatos de datos

• Formato del modelo (model format)
• Formato de la vista (view format)
• Formato normalizado (normalized format)
29

Formatos de datos
Model format

Formato que existe en nuestro modelo.
Ej: Tal cual querémos que sea persistido por nuestro ORM

30

Formatos de datos
View format

Tal cual va a ser mostrado al usuario en los elementos de nuestra vista.

Ej: Un objeto DateTime se transforma en un array("year" => 2013, "month" => 10, "day" => 12)

31

Formatos de datos
Normalized format

Formato intermedio entre la vista y el modelo.

Se recomienda que este formato guarde cuanta información sea posible.

32

Formatos de datos
Al crear el formulario

Model data

Normalized
data

33

View data

Formatos de datos

Model data

Normalized
data

34

View data

Formatos de datos
Submit

Model data

Normalized
data

35

View data

Formatos de datos
Submit

new User

Model data

Normalized
data

36

View data

$_POST

Creación

37

Creación
<?php
namespace IsmaAmbrosiMyBundleController;
use IsmaAmbrosiMyBundleFormMyFormType;
use SymfonyBundleFrameworkBundleControllerController;
class DefaultController extends Controller
{
    public function indexAction()
    {
        $form = $this->createForm(new MyFormType(), $data, $options);
        # MyFormType definido como servicio
        $form = $this->createForm('my_form_type', $data, $options);
    }
}

38

Creación
{
    $form = $this->createForm('my_form_type', $data, $options);
}

{
    $form = $this->get('form.factory')->create(new MyFormType(), $data, $options);
    $form = $this->get('form.factory')->create('my_form_type', $data, $options);
}

39

Renderizado

40

Renderizado
Creamos la vista del formulario para enviarla al template
<?php
namespace IsmaAmbrosiMyBundleController;
use IsmaAmbrosiMyBundleFormMyFormType;
use SymfonyBundleFrameworkBundleControllerController;
class DefaultController extends Controller
{
    {
        return $this->render('IsmaAmbrosiMyBundle:Default:index.html.twig', array(
            'form' => $form->createView()
        ));
    }
}
41

Renderizado
Mostrando el formulario dentro de un tag form
<form action="/post" method="post">
{{ form_widget(form) }}
<button type="submit">Submit</button>
</form>

42

Renderizado
Mostrando cada elemento del formulario
{{ form_row(form.name) }}
{{ form_row(form.last_name) }}
{{ form_rest(form) }}
</form>

43

Renderizado
Mostrando cada elemento del formulario
{{ form_row(form.name) }}
{{ form_row(form.last_name) }}
{{ form_rest(form) }}
</form>

44

Muestra los elementos
restantes

Renderizado
Utilizando las funciones de Symfony
{{ form_start(form) }}
{{ form_errors(form) }}
<div>
{{ form_label(form.name) }}
{{ form_errors(form.name) }}
{{ form_widget(form.name) }}
</div>
<div>
{{ form_label(form.last_name) }}
{{ form_errors(form.last_name) }}
{{ form_widget(form.last_name) }}
</div>
{{ form_end(form) }}

45

Renderizado
Utilizando las funciones de Symfony
{{ form_start(form) }}
{{ form_errors(form) }}
<div>
{
{{ form_label(form.name) }}
    $form = $this->createForm(new MyFormType(), $data, array(
{{ form_errors(form.name) }}
        'action' => '/post', # URL donde el formulario va a ser enviado
{{ form_widget(form.name) }}
        'method' => 'POST' # PUT, DELETE, PATCH, GET
</div>
    ));
<div>
    return $this->render('IsmaAmbrosiMyBundle:Default:index.html.twig', array(
{{ form_label(form.last_name) }}
{{ form_errors(form.last_name) }}
));
{{ form_widget(form.last_name) }}
}
</div>
{{ form_end(form) }}

46

Renderizado
Utilizando templates php
<?php echo $view['form']->row($form['name']) ?>
<?php echo $view['form']->row($form['last_name']) ?>
</form>

47

Submit

48

Submit
Submit

49

Submit
Submit

Bind

50

Submit
Submit

Bind

Validación

51

Submit
Éxito

Submit

Bind

Validación

Error

52

Submit
Éxito

Submit

Bind

Validación

Persistencia del modelo
Mensaje de éxito
Status 2xx

Error
Mensaje de error
Status 400
53

Submit
¿Código?

54

Submit
    public function postAction(Request $request)
    {
        $form->handleRequest($request);
        if (!$form->isValid()) {
            throw new BadRequestHttpException('Error');
        }
        # Persistir entidades
        # Mensajes
        # etc.
        return new Response('Success');
    }

55

Submit
submit
bind

error

    {
            throw new BadRequestHttpException('Error');
        }
        # Persistir entidades
        # Mensajes
        # etc.

éxito

        return new Response('Success');
    }

56

validación

Submit
{
    $form = $this->createForm(new MyFormType());
        $this->render('IsmaAmbrosiMyBundle:Default:index.html.twig', array(
        ));
    }
    $manager = $this->getDoctrine()->getManager();
    $manager->persist($form->getData());
    $manager->flush();
    return $this->redirect('/');
}

57

Submit
Internamente crea
la instancia de User
{
    $form = $this->createForm(new MyFormType());
        $this->render('IsmaAmbrosiMyBundle:Default:index.html.twig', array(
        ));
    }
    $manager = $this->getDoctrine()->getManager();
    $manager->persist($form->getData());
    $manager->flush();
    return $this->redirect('/');
}

58

Obtiene la entidad

Eventos

59

Eventos
•
•

Permiten construir el formulario basandose en los datos

•

Permiten conﬁgurar el modelo en base a los datos recibidos

Permiten construir el formulario basandose en el estado de la
aplicación

60

Eventos
Eventos lanzados por el EventDispatcher

•
•
•
•
•

PRE_SET_DATA (form.pre_set_data)
POST_SET_DATA (form.post_set_data)
PRE_SUBMIT (form.submit)
SUBMIT (form.bind)
POST_SUBMIT (form.post_bind)

61

Eventos
PRE_SET_DATA

•

Permite modificar los datos asignados al formulario desde
nuestro modelo.

•
•

Permite modificar el formulario en base a los datos del modelo
Permite modificar el formulario en base al estado de mi
aplicación

62

Eventos
PRE_BIND

Nos permite acceder y modiﬁcar los datos tal cual
fueron enviados por el navegador en el submit.

63

Eventos
BIND

Nos permite modiﬁcar los datos en su estado
normalizado.

64

Eventos
POST_BIND

Nos permite acceder a los datos de la vista y modiﬁcar
los datos que ya fueron asignados al modelo.

65

Eventos

Model data

Normalized
data

POST_SET_DATA

PRE_SET_DATA

66

View data

Eventos
Submit

Model data

POST_BIND

Normalized
data

BIND

67

View data

PRE_BIND

Resumen

68

Resumen
Vista
1. Creamos el formulario basado en un tipo
2. Creamos la vista para ese formulario
3. Mostramos el template

69

Resumen
Submit
1. Creamos el formulario basado en un tipo
2. Enlazamos el $request
3. Validamos
1. Error
1. Mostramos el formulario indicando errores
2. Retornamos STATUS 400
2. Éxito
1. Persistimos entidades
2. Mensaje de éxito (Ej: Redirección a un listado)

70

¿Preguntas?

71

¡Gracias!

72

Symfony forms

Más contenido relacionado

Similar a Symfony forms

Symfony forms