Sulu und Symfony forms: Schnelleres Styling und Layouting mit Twig

Wenn es ein Element gibt, das sowohl den Nutzer als auch den Entwickler zum Gähnen bringt, dann ist es das Formular: Endlos auszufüllen und mühsam zu programmieren. Denn für jedes Template muss eine extra Struktur angelegt werden – zum Beispiel für ein Login-, Registrierungs- und Profil-Formular. Das kann zeitintensiv werden.

Und dann kam das Projekt Stickermanager.com – inklusive facettenreicher Formular-Anforderungen. Auf der Suche nach einer Lösung habe ich mich intensiv mit dem Thema Symfony Form Theming und Twig beschäftig. Mein Fazit? Schnelles Programmieren und effizientes Managen dank modularem Ansatz.

Symfony Form und Twig basiert auf einem modularen Ansatz. Statt in jedem Template einzeln die Struktur aufzubauen, wird diese an einem Ort gebündelt und kann dann variabel eingesetzt werden. Da fängt die Usability bereits bei der Entwicklung an. Gerade beim Styling von Checkboxen, Radiobuttons oder Dropdowns ist dieser Ansatz ein großer Vorteil. Denn Browser geben nativ nur wenige Möglichkeiten zum Styling vor. 

Den größten Vorteil hat man bei folgenden Darstellungen:

• mehrere, einheitliche Formulare
• ein und dasselbe Formular mit unterschiedlichen Layouts 

Das Keyword hierzu lautet: Form theming. Und so funktioniert's!

Mit Symfony Forms werden Formulare in sogenannte Widgets unterteilt. Diese bilden unterschiedliche Input-Types der Formularfelder ab. Zuerst muss das Theme – in welchem die HTML-Struktur der Felder definiert wird – dem Twig-Template zugewiesen werden:

{% form_theme form 'formform_div_layout.html.twig' %}

Symfony bietet mit Version 3.0 mittlerweile 5 Standard Themes an
. Je nach benötigtem Layout des Formulars gibt es jetzt zwei Möglichkeiten, um den HTML-Code aufzubauen.

Nach der Definition der Formularfelder im FormController wird das Formular mit dem definierten Theme gerendert und über ein Form-Object dem jeweiligen Template übergeben.


Diese Variante empfehle ich dann, wenn man ein Formular mehrfach mit unterschiedlichen Layouts einsetzen möchte. Hierzu sollte man:

• für jedes Formular ein extra Theme erstellen
• den jeweiligen HTML-Aufbau der einzelnen FormWidgets definieren

Um die HTML-Struktur des Formulars zu verändern, werden die einzelnen Formularfelder im Theme aufgebaut (siehe Standard Themes). Zusätzlich zu der Unterteilung in Rows und Widgets – für jeden Input-Type – können Formularfelder auch über die "id" spezifisch strukturiert werden:

{%- block checkbox_widget -%}
    
     {% if value == '' %}
    
     {% else %}
        

 
                  
                
 
                
 {{ label|trans({}, translation_domain) }}
 
   
            
        
     {% endif %}

{%- endblock checkbox_widget -%}

{%- block _thisIsMyId_row -%}
    {{ form_widget(form) }}
{%- endblock _thisIsMyId_row -%}

Hierzu holt man sich die einzelnen Formularfelder in Form von Widgets. Die HTML-Struktur wird dann wie üblich direkt im Template aufgebaut. Anschließend regelt man das Styling der Formular-Felder über die in den Standard-Themes vergebenen Klassen.

   
   


      {{ form_widget(form.liveswap) }}

      {{ form_errors(form.liveswap) }}

   

Sind mehrere Formulare im Einsatz, heißt für mich die Lösung Symfony Form-Theming. So wird das einheitliche Strukturieren enorm vereinfacht. Durch den modularen Aufbau ist die Template-Struktur viel übersichtlicher, als mit einem typischen HTML-Aufbau. Für mich ist Symfony Form-Theming mit Twig in jedem Fall die bessere Lösung.