Fun with fluid_t3dd186. WHAT’S FLUID?
XML based templating engine
Born when making FLOW3 and Phoenix (now
FLOW and NEOS)
Now standalone project
24/06/2018 Fun with Fluid 6
9. INLINE VS BLOCKS
<f:if condition="{field1}">
<f:then>
<f:if condition="{field2} == 'big'">
<f:then>
<f:form.textfield name="plaap" class="big" value="{field1}" />
</f:then>
<f:else>
<f:form.textfield name="plaap" class="small" value="{field1}" />
</f:else>
</f:if>
</f:then>
<f:else>
<f:if condition="{field2} == 'big'">
<f:then>
<f:form.textfield name="plaap" class="big" value="" />
</f:then>
<f:else>
<f:form.textfield name="plaap" class="small" value="" />
</f:else>
</f:if>
</f:else>
</f:if>
24/06/2018 Fun with Fluid 9
15. OPTIONAL RENDERING
<f:variable name="allowedext” value=”{odt:
'docstuff', ods: 'docstuff', odp: 'docstuff'
....}" />
<f:render
section="{allowedext.{file.extension}}"
optional=”1” arguments="{url: file.url}"
/>
24/06/2018 Fun with Fluid 15
16. OPTIONAL RENDERING
<f:alias map="{allowedext: {0: 'odt', 1: 'ods',
2: 'odp' ......}}">
<f:for each="{allowedext}" as="ext">
<f:if condition="{ext} == {file.extension}">
<f:render section="docstuff"
arguments="{file.url}"/>
</f:if>
</f:for>
</f:alias>
24/06/2018 Fun with Fluid 16
18. CHECK OPTION
Form with attached options
Each option a checkbox
Determine if checkbox is set
24/06/2018 Fun with Fluid 18
19. CHECK OPTION
<f:for each=”{options} as=”option”>
<f:form.checkbox
checked=”{f:if(
condition:'{formOption.uid} ==
{option.uid}',
then: 1) -> f:for(each: formOptions,
as:'formOption')}”
/>
</f:for>
24/06/2018 Fun with Fluid 19
21. RECURSION
Dog pedigree
Dog → litter → parents(dog)
Display previous generations
Recursive partials
Fluid calculation
24/06/2018 Fun with Fluid 21
23. RECURSION
<table><tr><td rowspan=”2”>{dog.name}</td>
<td class="dad">
<f:if condition="{dog.litter} && {dog.litter.dad} && ({level} >
1)">
<f:render partial="Dog/Pedigree"
arguments="{dog:dog.litter.dad, level:'{level} - 1'}" />
</f:if>
</td></tr><tr><td class=”mom”>
<f:if condition="{dog.litter} && {dog.litter.mom} && ({level} >
1)">
<f:render partial="Dog/Pedigree"
arguments="{dog:dog.litter.mom, level:'{level} - 1'}" />
</f:if>
</td></tr></table>
24/06/2018 Fun with Fluid 23
29. INLINE PARTIAL
<f:spaceless>
<f:if condition="{hasMenu} == 1 && {count} == 2">4</f:if>
<f:if condition="{hasMenu} == 1 && {count} == 3">3</f:if>
<f:if condition="{hasMenu} == 1 && {count} == 4">2</f:if>
<f:if condition="{hasMenu} == 0 && {count} == 2">6</f:if>
<f:if condition="{hasMenu} == 0 && {count} == 3">4</f:if>
<f:if condition="{hasMenu} == 0 && {count} == 4">3</f:if>
</f:spaceless>
24/06/2018 Fun with Fluid 29
33. CACHING TEMPLATES
<table><tr><td rowspan=”2”>{dog.name}</td>
<td class="dad">
<f:if condition="{dog.litter} && {dog.litter.dad} && ({level} >
1)">
<f:render partial="Dog/Pedigree"
arguments="{dog:dog.litter.dad, level:'{level} - 1'}" />
</f:if>
</td></tr><tr><td class=”mom”>
<f:if condition="{dog.litter} && {dog.litter.mom} && ({level} >
1)">
<f:render partial="Dog/Pedigree"
arguments="{dog:dog.litter.mom, level:'{level} - 1'}" />
</f:if>
</td></tr></table>
24/06/2018 Fun with Fluid 33
34. CACHING TEMPLATES
$arguments63['partial'] = 'Dog/Pedigree';
// Rendering Array
$array65 = array();
$array66 = array (
);$array65['dog'] = $renderingContext->getVariableProvider()->getByPath('dog.litter.dad',
$array66);
$output67 = '';
$array68 = array (
);
$output67 .= $renderingContext->getVariableProvider()->getByPath('level', $array68);
$output67 .= ' - 1';
$array65['level'] = $output67;
$array69 = array (
);$array65['origlevel'] = $renderingContext->getVariableProvider()->getByPath('origlevel',
$array69);
$arguments63['arguments'] = $array65;
$output62 .= TYPO3FluidFluidViewHelpersRenderViewHelper::renderStatic($arguments63,
$renderChildrenClosure64, $renderingContext);
24/06/2018 Fun with Fluid 34
36. CACHING TEMPLATES
Fluid templates/partials are cached
Some ViewHelpers can’t be cached
Not a big problem, unless there is a huge
block inside
24/06/2018 Fun with Fluid 36
40. CACHING TEMPLATES
<div class="table-fit">
...
<f:for each="{paginatedBackendUsers}"
as="backendUser">
<f:render partial="BackendUser/IndexListRow"
arguments="{demand: demand, backendUser: backendUser,
onlineBackendUsers: onlineBackendUsers, dateFormat:
dateFormat, timeFormat: timeFormat, returnUrl: returnUrl,
compareUserUidList: compareUserUidList}" />
</f:for>
...
</div>
24/06/2018 Fun with Fluid 40