Symfony Forms in Detail

@el_stoffel Web Summer Camp 2019 Symfony Forms in Detail

@el_stoffel Web Summer Camp 2019 Christopher Hertel Consultant & Trainer
@ SensioLabs Symfony Certified Developer Symfony User Group Berlin Christian Flothmann Software Developer @ SensioLabs Symfony Core & Docs Member

@el_stoffel Web Summer Camp 2019 Workshop Agenda Form Component Basic
Glue Code Building a Form Extension Points Recap

@el_stoffel Web Summer Camp 2019 Basics Times Workshop 9.30 –
12.30 coffee break 10.50 – 11.10 Repository: //github.com/chr-hertel/product-crud

@el_stoffel Web Summer Camp 2019 Getting Started $ cd /var/www/html/symfony/forms
$ git pull $ composer install $ symfony serve -d Open in browser: //localhost:8000/

@el_stoffel Web Summer Camp 2019 $ bin/console --version Symfony 4.3.4
(env: dev, debug: true)

@el_stoffel Web Summer Camp 2019 Coding Challenges Defined goals Make
tests green Rescue branches Merge branches to get new code and challenges

@el_stoffel Web Summer Camp 2019 $ bin/check Code Quality Helper
Yaml, Twig and PHP linting Code style and static code analysis PHPUnit testsuite Composer and schema validation

@el_stoffel Web Summer Camp 2019 Form Component

@el_stoffel Web Summer Camp 2019 Form DependencyInjection Validator HttpKernel Console
Security HttpFoundation Routing Intl Serializer Messenger Config Mime 56325 40958 32511 26474 24935 24466 23711 18558 17970 16729 16267 12665 12416 Largest Symfony Component Source: symfony/symfony:master on 08/20/19

@el_stoffel Web Summer Camp 2019 "Make simple cases simple, make
complex cases possible" Bernhard Schussek

@el_stoffel Web Summer Camp 2019 [email protected] Hello World Lorem ipsum
…

@el_stoffel Web Summer Camp 2019 Foundation OptionsResolver Component Form Component
Core Validation DI CSRF Doctrine Twig PHP Templating Extensions View Source: http://webmozarts.com/2012/03/06/symfony2-form-architecture/ EventDispatcher Component PropertyAccess Component

@el_stoffel Web Summer Camp 2019 Basic Glue Code

@el_stoffel Web Summer Camp 2019 Controller

@el_stoffel Web Summer Camp 2019

@el_stoffel Web Summer Camp 2019 FormType

@el_stoffel Web Summer Camp 2019 Template

@el_stoffel Web Summer Camp 2019 Controller Handles Request Creates Form
Triggers Processing Creates Response Template Renders Form Additional Markup FormType Describes Structure Configures Options ?

@el_stoffel Web Summer Camp 2019 Challenge 1 – Contact Form

@el_stoffel Web Summer Camp 2019 $ git merge contact/01-base Challenge
1 – Contact Form Implement App\Contact\Dto Implement App\Controller\ContactController::contact implement template templates/contact.html.twig Implement App\Form\ContactType See Challenges.md

@el_stoffel Web Summer Camp 2019 $ git checkout contact/solution Got
stuck? commit or stash your changes

@el_stoffel Web Summer Camp 2019 Building a Form

@el_stoffel Web Summer Camp 2019 Controller Incoming HTTP Request FormFactory
FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … Config FormBuilder

FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … Config FormBuilder Form

FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … Config FormBuilder Form handleRequest(…) submit(…) Request Handler Data

FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … FormBuilder Form handleRequest(…) submit(…) Request Handler Data // … Config

FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … FormBuilder Form handleRequest(…) submit(…) Request Handler Data // … buildView(…) finishView(…) Config createView() FormView

@el_stoffel Web Summer Camp 2019 Extension Points

@el_stoffel Web Summer Camp 2019 FormType

@el_stoffel Web Summer Camp 2019 FormType describes structure has options

@el_stoffel Web Summer Camp 2019 FormType describes structure has options
inheritance possible extensible changes behavior

@el_stoffel Web Summer Camp 2019 FormTypeExtension

@el_stoffel Web Summer Camp 2019 FormTypeExtension manipulate existing form types
implement extensions across multiple types

Triggers Processing Creates Response Template Renders Form Additional Markup FormType Describes Structure Configures Options ?

Triggers Processing Creates Response Template Renders Form Additional Markup FormType Describes Structure Configures Options Configures Behavior

@el_stoffel Web Summer Camp 2019 Using FormTypes to configure behavior
of Form handling

…

FormType buildForm(…) FormRegistry Core Extension Doctrine Extension DI Extension … FormBuilder Form handleRequest(…) submit(…) Request Handler Data // … buildView(…) finishView(…) Config createView() FormView

@el_stoffel Web Summer Camp 2019 createForm handleRequest [email protected] Hello World
Lorem ipsum …

@el_stoffel Web Summer Camp 2019 createForm handleRequest [email protected] 'Hallo World'
'This is a test' Hallo Welt This is a test

@el_stoffel Web Summer Camp 2019 createForm handleRequest [email protected] 'Hallo World'
'This is a test' setData submit Hallo Welt This is a test

@el_stoffel Web Summer Camp 2019 DataMapper

@el_stoffel Web Summer Camp 2019 Default Data Mapping

@el_stoffel Web Summer Camp 2019 PropertyPath Data Mapping

@el_stoffel Web Summer Camp 2019 And now?

… setData submit Data Mapper

@el_stoffel Web Summer Camp 2019 DataMapper maps data between model
and form registered in FormType often combined with empty_data option

@el_stoffel Web Summer Camp 2019 Challenge 2 – Category Form

@el_stoffel Web Summer Camp 2019 $ git merge category/01-base $
bin/console doctrine:schema:update --force Challenge 2 – Category Form

@el_stoffel Web Summer Camp 2019 $ git merge category/01-base $
bin/console doctrine:schema:update --force Challenge 2 – Category Form Implement App\Form\CategoryType Catch CategoryException and convert to FormError See Challenges.md

@el_stoffel Web Summer Camp 2019 $ git checkout category/solution Got

… setData submit Data Mapper

@el_stoffel Web Summer Camp 2019 DataTransformer

… setData submit Data Transformer

@el_stoffel Web Summer Camp 2019 DataTransformer converts data between representations
registered in FormType model data to normalized data normalized data to model data view data to normalized data normalized data to view data ModelTransformer ViewTransformer

@el_stoffel Web Summer Camp 2019 Challenge 3 – Product Form

@el_stoffel Web Summer Camp 2019 $ git merge product/01-base Challenge
3 – Product Form Implement App\Form\SkuType using DataTransformer Implement App\Form\ProductType using DataMapper See Challenges.md

@el_stoffel Web Summer Camp 2019 $ git checkout product/solution Got

… setData submit Data Transformer

@el_stoffel Web Summer Camp 2019 FormEvents

@el_stoffel Web Summer Camp 2019 Form::setData Form::submit FormEvents::PRE_SET_DATA FormEvents::POST_SET_DATA FormEvents::PRE_SUBMIT
FormEvents::POST_SUBMIT Transformer Model -> Normalized Normalized -> View Mapper mapDataToForms Transformer View -> Normalized Normalized -> Model Mapper mapFormsToData FormEvents::SUBMIT

@el_stoffel Web Summer Camp 2019 FormEvents interact with Form or
data dynamically registered in FormType PRE_SET_DATA POST_SET_DATA PRE_SUBMIT SUBMIT Form::setData Form::submit POST_SUBMIT

@el_stoffel Web Summer Camp 2019 More Advanced Extension Points FormTypeGuesserInterface
FormExtensionInterface . . .

@el_stoffel Web Summer Camp 2019 Recap: Extending Forms

@el_stoffel Web Summer Camp 2019 Recap: Extending Forms FormType is
starting point to configure Form and FormView FormTypeExtension to extend given or multiple FormTypes Transformer to transform data between Model and View Mapper to control where data is coming and going FormEvents to manipulate Form and data dynamically

@el_stoffel Web Summer Camp 2019 Thank you! Questions?

Symfony Forms in Detail

Symfony Forms in Detail

More Decks by Christopher Hertel

Other Decks in Programming

Featured

Transcript