Digital First: Loading

Sulu
und
Symfony
forms:
Schnelleres
Styling
und
Layouting
mit
Twig

massiveart-blog-sulu-stickermanager
massiveart-blog-sulu-stickermanager

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.

Einfaches Form Theming mit Symfony Form und Twig

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!

1. Schritt

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.

2. Schritt

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 -%}

3. Schritt

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) }}


Mein Fazit

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.

Diskutieren Sie mit uns auf Facebook und Twitter . Natürlich freuen wir uns auch über ein E-Mail von Ihnen.

Mehr Blogartikel zum Thema:

loading
Nach oben
 

Hallo!
Sie möchten mit uns zusammenarbeiten? 

Welche Themen sind für Sie interessant?

ICH

Erzählen Sie uns doch bitte ganz kurz worum es geht.

ICH

Gerne würden wir mehr darüber erfahren! Wie dürfen wir Sie denn kontaktieren?

Wie dürfen wir Sie denn kontaktieren?


ICH

An welche Addresse sollen wir die Mail schicken?

Unter welcher Nummer sind Sie am besten erreichbar?

Leider sind zur Zeit alle MASSIVE DOVES auf Urlaub ;) Wollen Sie uns alternativ vielleicht eine Telefonnummer oder E-Mail Adresse hinterlassen, unter der Sie erreichbar sind?

ICH

Bitte geben Sie eine gültige E-mail Adresse ein.


Verraten Sie uns noch Ihren Namen?

ICH

Zum Schluss noch etwas Bürokratie #DSGVO:

Vielen Dank für Ihre Anfrage! Wir werden uns so rasch wie möglich bei Ihnen melden.

Es ist etwas schiefgelaufen.
Bitte lade die Seite neu und versuch es noch einmal.