Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Head Start Into TypoScript 2.0 -- Inspiring Conference 2014 in Kolbermoor

A Head Start Into TypoScript 2.0 -- Inspiring Conference 2014 in Kolbermoor

While TypoScript 2.0 shares the name with its ancestor from TYPO3 CMS, it has been a completely re-thought language focusing on extensibility and consistency. During this talk, we'll explain how to use this language, show its building blocks and advanced features. We will highlight the different parts of TypoScript, such as EEL and FlowQuery and we'll especially focus on patterns that make your TypoScript more extensible and easy to maintain.

#TYPO3 #TYPO3Neos #TYPO3Flow

Sebastian Kurfürst

March 28, 2014
Tweet

More Decks by Sebastian Kurfürst

Other Decks in Technology

Transcript

  1. Syntax # prototypes
 prototype(Bar) < prototype(Content) 
 # instantiation
 foo

    = Bar
 # processors
 [email protected] = ${'<h1>' + value + '</h1>'}
 # data types
 string = "my string"
 number = 42
 eelExpression = ${[1, 2, 3]}
 boolean = TRUE
  2. prototype(Acme:Slideshow) < prototype(TYPO3.Neos:Content) { @process.wrap = ${'<div class="slideshow">' + value

    + '</div>'} } ! # Instantiation mySlideshow = Acme:Slideshow Prototype Based Language
  3. Tree-Prototype Based # global prototype(Image).maximumWidth = … ! # local

    prototype(TwoColumn).prototype(Image).maximumWidth = … TwoColumn Image Image
  4. ${'<div class="wrapper">' + object.value + '</div>'}
 # columnLayout == 33-66


    # iterator.index == 0…1
 ${'span-' + 
 Math.round((String.split(columnLayout, '-')[iterator.index]) / 100 * 12))
 }
 # -> span-4
 # -> span-8 
 ${(iterator.index == 0 ? 'class="first"' : '')} Eel
  5. croppedText = ${String.substr(this.text, 10, 10)} firstCharacter = ${String.charAt(this.text, 0)} plainText

    = ${String.stripTags(this.text)} firstFewWords = ${String.cropAtWord(this.text, 200, '…')} firstFewSentences = ${String.cropAtSentence(this.text, 200)} ! roundedValue = ${Math.round(1.412, 1)} # == 1.4 ! speedMode = ${Configuration.setting('Foo.Bar.speedMode')} ! currentDate = ${Date.format(Date.now(), 'd-m-Y')} currentYear = ${Date.year(Date.now())} ! reversedArray = ${Array.reverse(['a', 'b', 'c'])} Additional Helpers in Eel
  6. FlowQuery ${q(node).children()} ${q(node).find('[instanceof TYPO3.Neos.NodeTypes:Text]')} ${q(node).children().get(0)} API resembles that of jQuery

    ${q(node).parents()} ${q(node).parents().count()} ${q(node).is('[instanceof TYPO3.Neos.NodeTypes:Page]')} ${q(node).is('[title ^= "Welcome"]')} ${q(node).is('[title ^= "Welcome"], [description ^= "Welcome"]')}
  7. newestArticle = ${q(ElasticSearch.query(site).nodeType('Acme:Article')
 .sortDesc('datePublished').limit(1).execute()).get(0)}
 newestArticleImage = ${q(this.newestArticle).property('image')}
 newestArticleTitle = ${q(this.newestArticle)


    .parents('[instanceof TYPO3.Neos:Page]')
 .first().property('title')}
 newestArticleTeaserText = ${String.cropAtWord(q(this.newestArticle)
 .parents('[instanceof TYPO3.Neos:Page]')
 .first().property('teaser'), 200, '…')} prototype(Acme:ArticleTeaser) < prototype(Template) { } Define a TypoScript Object
  8. /root root is a TYPO3.TypoScript:Case Object, which (most importantly)… !

    1. delegates rendering to /[requestFormat] 2. renders /page as fallback
  9. root { printLayout { condition = ${request.arguments.print} renderPath = '/print'

    } ! @cache.entryIdentifier.print = ${request.arguments.print} } ! print = … /root
  10. prototype(TYPO3.Neos.NodeTypes:MultiColumn) { attributes.class = ${'row-fluid columns-' + q(node).property('layout')} columns.iterationName =

    'iterator' } prototype(TYPO3.Neos.NodeTypes:MultiColumn) { @override.columnLayout = ${q(node).property('layout')} ! prototype(TYPO3.Neos.NodeTypes:MultiColumnItem) { ! @override.columnSize = ${Math.round( String.split(columnLayout, '-')[iterator.index] / 100 * 12)} ! attributes.class = ${'span' + columnSize} } } Bootstrap 2
  11. prototype(TYPO3.Neos.NodeTypes:MultiColumn) { attributes.class = ${'row'} columns.iterationName = 'iterator' } prototype(TYPO3.Neos.NodeTypes:MultiColumn)

    { @override.columnLayout = ${q(node).property('layout')} ! prototype(TYPO3.Neos.NodeTypes:MultiColumnItem) { ! @override.columnSize = ${Math.round( String.split(columnLayout, '-')[iterator.index] / 100 * 12)} ! attributes.class = ${'large-' + columnSize + ' columns'} } } Zurb Foundation 5
  12. [email protected] = … ! ! ! ! [email protected] = …

    Processors - Ordering Syntax Magic Numbers
  13. [email protected] { expression = … @position = 1 } !

    [email protected] { expression = … @position = 100 } Processors - Ordering Syntax Encouraged
  14. Processors - Ordering Syntax • start 100 • end •

    handles • after handles • 10 • 20 • before handles • start • end 100 see PositionalArraySorter class