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:
- Utw??rz plik
fields.html.twig
w katalogusrc/TwojBundle/Resources/views/Forms
- 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:
- 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) }}
. - Ustawiamy zmiennÄ? type by okre??liÄ? jaki typ widgetu bÄ?dzie renderowany.
- Ustawiamy tablicÄ? atrybut??w przekazanych do widgeta. DodajÄ?Ä? poprzez filtr
merge
kolejny wpis do tablicy o ile w zmiennejerrors
znajdujÄ? siÄ? b??Ä?dy (sprawdza to wyra??enie ternarne). - Wy??wietlamy blok widgetu.
- Zamykamy blok, kt??ry w??a??nie nadpisywali??my.
- Nadpisujemy blok text_widget, czyli ten kt??ry jest u??ywany do wy??wietlenia pola Text z formularza po wywo??aniu metody
- 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' %}
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
.