Fluid für Frontend-Entwickler

2.557 Aufrufe

Veröffentlicht am

K

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.557
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
12
Aktionen
Geteilt
0
Downloads
7
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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 …

×