Fluid für Frontend-Entwickler

2,524 views
2,382 views

Published on

K

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,524
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Fluid für Frontend-Entwickler

  1. 1. fluidfürFrontend-Entwickler
  2. 2. fluid• Tag based templating• Valides X(HT)ML• Definierter Funktionsumfang
  3. 3. Terminologie• Viewhelper = Fluid Tags• Layout = äußerer Rahmen• Partial = kleines Bröckchen ;)• Template besteht z.B. aus einem Layout, eigenen Tags und Partials• Controller = größere Einheit, z.B. Suchen, Buchen• Action = Aktion in einer Einheit, z. B. Ergebnisliste oder Kalenderansicht
  4. 4. View Helper• Kernstück Viewhelper – Definieren verfügbare Tags – Liegen unter typo3/sysext/fluid/Classes/ViewHelpers – Am Anfang der Datei meist Beispiele zur Verwendung – Eigene Viewhelper unter ext/Classes/ViewHelpers
  5. 5. View Helper• Zum Formatieren: z.B. Datum oder Währung• Zum Berechnen: z.B. Calculate oder Round• Für Links: z.B. Email oder Page• Für Formulare: z.B. Radio oder Submit• Für Bedingungen: z.B. If• Für Schleifen: z.B. For oder Cycle
  6. 6. Widgets• Kleine eigenständige wiederkehrende Schnipsel• Zum Beispiel Paginator
  7. 7. Daten• Daten kommen aus PHP• Entwickler muss am Anfang des Templates verfügbare Variablen ausgeben• Variablen können über den debug- ViewHelper betrachtet werden
  8. 8. Wie fange ich an?• Design in HTML umsetzen• Stellen kennzeichnen die dynamisch sind• Variablen einfügen – Verfügbare Variablen über f.debug anzeigen• Viewhelper einbauen• Alle Deutschen Wörter mit dem translate- ViewHelper ersetzen
  9. 9. Beispiele• Schleifen & Bedingungen – For each Eier as Ei → aufschlagen – If Eier.erfolgreich.getrennt? → then Eischnee, else → Rührei
  10. 10. Inline-Schreibweise• <f:if condition=”{important}”> <f:then> red </f:then> </f:if>• {f:if(condition:{important}, then:red)}•
  11. 11. Beispiele - Translator• <x:translate key="searchform_travellers_label" arguments=”{adults.count}” />• Sprachdatei unter: Resources/Private/Language/Brand/Contr oller/Action.xml oder locallang.xml• Variablen im Label:
  12. 12. Inline-Schreibweise• <x:translate key="{f:if(condition:{sud.adults} > 1,then:searchform_travellers_label,else: searchform_travellers_label_single)}" arguments="{adults:sud.adults}" />
  13. 13. Hands on• Lets look at some code …

×