Case

Webdeveloper przygotowa?? nam HTML do strony zawierajÄ?cej formularz.Przy b??Ä?dzie walidacji pola formularza. Pole to ma otrzymaÄ? dodatkowo klasÄ? CSS error. Je??eli to nie zostanie zaimplementowane, to kleint bÄ?dzie w??ciek??y, szef da po premii. A webdeveloper co ciÄ??? psd2html bÄ?dzie mieÄ? ciÄ? za Lamera!

#RozwiÄ?zanie: 1 (Ugly)

Jest to proste, jednak wrzuca nam logikÄ? do template??w TWIG’a. Przez co tracimy na czytelno??ci plik??w TWIG. Templaty „tyjÄ?” przez ciÄ?g??e wklejanie tego samego kodu.

1
2

#form.html.twig
{% if form.pole.get('errors') is not empty %}

1
2
3

{% else %}
{{ form_widget(form.pole) }}
{% endif %}

Je??eli macie do zaimplementowania formularz, kt??ry posiada 15 p??l i ka??de z nich musi byÄ? wewnÄ?trz takiego warunku. To si??Ä? rzeczy zrobi siÄ? ba??agan i o b??Ä?d bÄ?dzie bardzo ??atwo.

#RozwiÄ?zanie: 2 (pro)

Przy rozwiÄ?zaniu pro przychodzi nam z pomocÄ? symfony2 form theming. A do celu mo??emy doj??Ä? w 3 prostych krokach:

1. Utw??rz plik fields.html.twig w katalogu src/TwojBundle/Resources/views/Forms
2. Edytuj plik fields.html.twig By wyglÄ?da?? w nastÄ?pujÄ?cy spos??b:

   1 2 3 4 5

   {% block text_widget %} {% set type = type|default('text') %} {% set attr = attr|merge({'class': attr.class|default('') ~ (errors|length > 0 ? ' error' : '') }) %} {{ block('field_widget') }} {% endblock %}

   Co robi ten plik? Wyt??umaczÄ? to linia po linii:

   1. Nadpisujemy blok text_widget, czyli ten kt??ry jest u??ywany do wy??wietlenia pola Text z formularza po wywo??aniu metody {{ form_widget(form.pole) }}.
   2. Ustawiamy zmiennÄ? type by okre??liÄ? jaki typ widgetu bÄ?dzie renderowany.
   3. Ustawiamy tablicÄ? atrybut??w przekazanych do widgeta. DodajÄ?Ä? poprzez filtr merge kolejny wpis do tablicy o ile w zmiennej errors znajdujÄ? siÄ? b??Ä?dy (sprawdza to wyra??enie ternarne).
   4. Wy??wietlamy blok widgetu.
   5. Zamykamy blok, kt??ry w??a??nie nadpisywali??my.
3. Do templatea, kt??ry odpowiada za wy??wietlanie formularza, kt??ry mamy w??a??nie ostylowaÄ? musimy dodaÄ? sk??rkÄ? (theme).

   1 2	#naszUberForm.html.twig {% form_theme form 'TwojBundle:Form:fields.html.twig' %}

   {{ form_widget(form.pole) }} …

O ile wykonali??my wszystkie kroki poprawnie to mo??emy cieszyÄ? siÄ? naszym super usability featurem z oznaczaniem p??l formularza, kt??re nie przesz??y walidacji dodatkowÄ? klasÄ? CSS. DziÄ?ki temu pola mogÄ? zmieniÄ? t??o na czerwone lub nadaÄ? czerwony border.

Dokumentacja i Przyk??ady

• MopaBootstrapBundle – plik fields.html.twig
• Dokumentacja Symfony2 – Stylowanie Formularzy
• Pytanie na ten temat ze StackOverflow