fluidfürFrontend-Entwickler
fluid• Tag based templating• Valides X(HT)ML• Definierter Funktionsumfang
Terminologie• Viewhelper = Fluid Tags• Layout = äußerer Rahmen• Partial = kleines Bröckchen ;)• Template besteht z.B. aus ...
View Helper• Kernstück Viewhelper  – Definieren verfügbare Tags  – Liegen unter    typo3/sysext/fluid/Classes/ViewHelpers ...
View Helper• Zum Formatieren: z.B. Datum oder  Währung• Zum Berechnen: z.B. Calculate oder Round• Für Links: z.B. Email od...
Widgets• Kleine eigenständige wiederkehrende  Schnipsel• Zum Beispiel Paginator
Daten• Daten kommen aus PHP• Entwickler muss am Anfang des Templates  verfügbare Variablen ausgeben• Variablen können über...
Wie fange ich an?•   Design in HTML umsetzen•   Stellen kennzeichnen die dynamisch sind•   Variablen einfügen    – Verfügb...
Beispiele• Schleifen & Bedingungen  – For each Eier as Ei → aufschlagen  – If Eier.erfolgreich.getrennt? → then Eischnee, ...
Inline-Schreibweise• <f:if condition=”{important}”>    <f:then>      red    </f:then>  </f:if>• {f:if(condition:{important...
Beispiele - Translator• <x:translate  key="searchform_travellers_label"  arguments=”{adults.count}” />• Sprachdatei unter:...
Inline-Schreibweise• <x:translate  key="{f:if(condition:{sud.adults} >  1,then:searchform_travellers_label,else:  searchfo...
Hands on• Lets look at some code …
Nächste SlideShare
Wird geladen in …5
×

Fluid für Frontend-Entwickler

2.587 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.587
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
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 …

×