Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fun with fluid_t3dd18

456 views

Published on

A quick look at some examples of creative solutions in Fluid.

Published in: Software
  • Be the first to comment

Fun with fluid_t3dd18

  1. 1. FUN WITH FLUID 24/06/2018 Fun with Fluid 1
  2. 2. FUN WITH FLUID Jigal van Hemert jigal.van.hemert@typo3.org @jigalvh Creative templating
  3. 3. TOPICS 24/06/2018 Fun with Fluid 3
  4. 4. TOPICS 24/06/2018 4Fun with Fluid 1. What’s Fluid 2. Examples 3. Your examples, questions, discussion
  5. 5. WHAT’S FLUID? A templating solution 24/06/2018 Fun with Fluid 5
  6. 6. 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
  7. 7. EXAMPLES 24/06/2018 Fun with Fluid 7
  8. 8. INLINE INSTEAD OF BLOCKS 24/06/2018 Fun with Fluid 8
  9. 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
  10. 10. 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}')}" /> 24/06/2018 Fun with Fluid 10
  11. 11. INLINE VS BLOCKS  http://www.fluid-converter.com/ 24/06/2018 Fun with Fluid 11
  12. 12. OPTIONAL RENDERING, SOMETIMES... 24/06/2018 Fun with Fluid 12
  13. 13. OPTIONAL RENDERING  Some file types need some extra content 24/06/2018 Fun with Fluid 13
  14. 14. OPTIONAL RENDERING <f:switch expression=”{file.extension}”> <f:case value=”odt”> <f:render section=”docstuff” arguments=”{file:file.url}” /> </f:case> .... </f:switch> 24/06/2018 Fun with Fluid 14
  15. 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. 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
  17. 17. OPTION, CHECKED OR NOT? 24/06/2018 Fun with Fluid 17
  18. 18. CHECK OPTION  Form with attached options  Each option a checkbox  Determine if checkbox is set 24/06/2018 Fun with Fluid 18
  19. 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
  20. 20. PARENTS, PARENTS, PARENTS, ... 24/06/2018 Fun with Fluid 20
  21. 21. RECURSION  Dog pedigree  Dog → litter → parents(dog)  Display previous generations  Recursive partials  Fluid calculation 24/06/2018 Fun with Fluid 21
  22. 22. 24/06/2018 Fun with Fluid 22
  23. 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
  24. 24. 24/06/2018 Fun with Fluid 24
  25. 25. CLASSY CALCULATIONS 24/06/2018 Fun with Fluid 25
  26. 26. INLINE PARTIAL  Bootstrap grid  Class depends on number of columns and page layout 24/06/2018 Fun with Fluid 26
  27. 27. INLINE PARTIAL <div class="col-md-6 or 4 or 3 or 2"> 24/06/2018 Fun with Fluid 27
  28. 28. INLINE PARTIAL <div class="col-md-{f:render( partial:'Helpers/bootstrapCol', Arguments:'{ hasMenu: hasMenu, count: gallery.count.columns}' )}" > 24/06/2018 Fun with Fluid 28
  29. 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
  30. 30. 24/06/2018 Fun with Fluid 30
  31. 31. CACHE AS CACHE CAN 24/06/2018 Fun with Fluid 31
  32. 32. CACHING TEMPLATES  Fluid templates are cached 24/06/2018 Fun with Fluid 32
  33. 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. 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
  35. 35. CACHING TEMPLATES  Fluid templates/partials are cached  Some ViewHelpers can’t be cached 24/06/2018 Fun with Fluid 35
  36. 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
  37. 37. CACHING TEMPLATES  Paginate VH in its own partial 24/06/2018 Fun with Fluid 37
  38. 38. CACHING TEMPLATES <f:render partial="BackendUser/PaginatedListWidget" arguments="{_all}" /> 24/06/2018 Fun with Fluid 38
  39. 39. 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> 24/06/2018 Fun with Fluid 39
  40. 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
  41. 41. FURTHER READING 24/06/2018 Fun with Fluid 41
  42. 42. FURTHER READING  https://github.com/TYPO3/Fluid  https://docs.typo3.org/typo3cms/ ExtbaseGuide/Fluid/Index.html  https://docs.typo3.org/typo3cms/ ExtbaseFluidBook/8-Fluid/Index.html 24/06/2018 Fun with Fluid 42
  43. 43. FURTHER READING  Keeping up-to-date: https://typo3.org/help/documentation/what s-new/ 24/06/2018 Fun with Fluid 43
  44. 44. SHOW YOUR SOLUTION OR CHALLENGE 24/06/2018 Fun with Fluid 44
  45. 45. THANK YOU! 24/06/2018 Fun with Fluid 45

×