O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Fun with fluid (TYPO3camp RheinRuhr 2019)

521 visualizações

Publicada em

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

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Fun with fluid (TYPO3camp RheinRuhr 2019)

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

×