Fun with fluid_t3dd18

FUN WITH FLUID
24/06/2018 Fun with Fluid 1

FUN WITH FLUID
Jigal van Hemert
jigal.van.hemert@typo3.org
@jigalvh
Creative templating

TOPICS

TOPICS
24/06/2018 4Fun with Fluid
1. What’s Fluid
2. Examples
3. Your examples, questions, discussion

WHAT’S FLUID?
A templating solution

WHAT’S FLUID?
 XML based templating engine
 Born when making FLOW3 and Phoenix (now
FLOW and NEOS)
 Now standalone project

EXAMPLES

INLINE
INSTEAD OF
BLOCKS

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>

INLINE VS BLOCKS
<f:form.textfield
name="plaap"
class="{f:if(
condition: '{field2}=='big'',
then: 'big',
else: 'small')}"
value="{f:if(condition: '{field1}',
then: '{field1}')}"
/>

INLINE VS BLOCKS
 http://www.fluid-converter.com/

OPTIONAL
RENDERING,
SOMETIMES...

OPTIONAL RENDERING
 Some file types need some extra content

OPTIONAL RENDERING
<f:switch expression=”{file.extension}”>
<f:case value=”odt”>
<f:render section=”docstuff”
arguments=”{file:file.url}” />
</f:case>
....
</f:switch>

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}"
/>

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>

OPTION,
CHECKED OR NOT?

CHECK OPTION
 Form with attached options
 Each option a checkbox
 Determine if checkbox is set

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>

PARENTS, PARENTS,
PARENTS, ...

RECURSION
 Dog pedigree
 Dog → litter → parents(dog)
 Display previous generations
 Recursive partials
 Fluid calculation

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)">
arguments="{dog:dog.litter.mom, level:'{level} - 1'}" />
</f:if>
</td></tr></table>

CLASSY
CALCULATIONS

INLINE PARTIAL
 Bootstrap grid
 Class depends on number of columns and
page layout

INLINE PARTIAL
<div class="col-md-6 or 4 or 3 or 2">

INLINE PARTIAL
<div class="col-md-{f:render(
partial:'Helpers/bootstrapCol',
Arguments:'{
hasMenu: hasMenu,
count: gallery.count.columns}'
)}"
>

INLINE PARTIAL
<f:spaceless>
<f:if condition="{hasMenu} == 1 && {count} == 2">4</f:if>
</f:spaceless>

CACHE AS CACHE CAN

CACHING TEMPLATES
 Fluid templates are cached

CACHING TEMPLATES
<table><tr><td rowspan=”2”>{dog.name}</td>
<td class="dad">
<f:if condition="{dog.litter} && {dog.litter.dad} && ({level} >
1)">
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)">
arguments="{dog:dog.litter.mom, level:'{level} - 1'}" />
</f:if>
</td></tr></table>

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);

CACHING TEMPLATES
 Fluid templates/partials are cached
 Some ViewHelpers can’t be cached

CACHING TEMPLATES
 Fluid templates/partials are cached
 Some ViewHelpers can’t be cached
 Not a big problem, unless there is a huge
block inside

CACHING TEMPLATES
 Paginate VH in its own partial

CACHING TEMPLATES
<f:render
partial="BackendUser/PaginatedListWidget"
arguments="{_all}"
/>

CACHING TEMPLATES
<f:be.widget.paginate
objects="{backendUsers}"
as="paginatedBackendUsers"
configuration="{itemsPerPage: 50, insertBelow:
1}">
<f:render
partial="BackendUser/PaginatedListWidgetBody"
arguments="{_all}" />
</f:be.widget.paginate>

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>

Fun with fluid_t3dd18

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Fun with fluid_t3dd18