Your SlideShare is downloading. ×
0
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Fluid für Frontend-Entwickler
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Fluid für Frontend-Entwickler

2,051

Published on

K

K

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

No Downloads
Views
Total Views
2,051
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. fluidfürFrontend-Entwickler
  • 2. fluid• Tag based templating• Valides X(HT)ML• Definierter Funktionsumfang
  • 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. 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. 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. Widgets• Kleine eigenständige wiederkehrende Schnipsel• Zum Beispiel Paginator
  • 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. 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. Beispiele• Schleifen & Bedingungen – For each Eier as Ei → aufschlagen – If Eier.erfolgreich.getrennt? → then Eischnee, else → Rührei
  • 10. Inline-Schreibweise• <f:if condition=”{important}”> <f:then> red </f:then> </f:if>• {f:if(condition:{important}, then:red)}•
  • 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. 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. Hands on• Lets look at some code …

×