1. TYPO3 Phoenix
Content model and
TypoScript
Tuesday 26 June 12

2. Christian Müller
TYPO3 Freelancer
TYPO3 Phoenix and FLOW3
Core Team Member
Book and Music Freak
twitter: daskitsunet
christian.mueller@typo3.org
Tuesday 26 June 12

3. Phoenix?
• Next generation Content Management
System from the TYPO3 community
• build on top of FLOW3 as framework
• Content Repository approach
• Aloha editor
• alpha, estimated arrival later this year
Tuesday 26 June 12

4. Content Model
Tuesday 26 June 12

5. Nodes
Tuesday 26 June 12

6. are
• hierarchical structure
• actual content is schema less
• representing pages, content elements or
anything else you want to include in the
tree
Tuesday 26 June 12

7. can be
site root
page
content section
content element
representation of
domain models
Tuesday 26 June 12

8. can be
site root
page
and just anything
content section you want them to be!
content element
representation of
domain models
Tuesday 26 June 12

9. are addressed by
nodePaths
/sites/typo3org/home/subpage/main/text1
Tuesday 26 June 12

10. are addressed by
nodePaths
/sites/typo3org/home/subpage/main/text1
site root
Tuesday 26 June 12

11. are addressed by
nodePaths
/sites/typo3org/home/subpage/main/text1
site root
pages
Tuesday 26 June 12

12. are addressed by
nodePaths
/sites/typo3org/home/subpage/main/text1
site root section
pages
Tuesday 26 June 12

13. are addressed by
nodePaths
/sites/typo3org/home/subpage/main/text1
site root section
pages content
Tuesday 26 June 12

14. Context
Tuesday 26 June 12

15. is
• an environment a node exists in
• for example a workspace
Tuesday 26 June 12

16. therefor
• same node can exist in multiple contexts
Tuesday 26 June 12

17. typo3.org
en_EN en_EN en_EN
homepage section:main maincontent
Lorem ipsum dolor sit amet
en_EN en_EN
section:side sidecontent
Lorem ipsum dolor sit amet
de_DE de_DE
section:side sidecontent
Lorem ipsum dolor sit amet
Tuesday 26 June 12

18. typo3.org
en_EN en_EN en_EN
homepage section:main maincontent
Lorem ipsum dolor sit amet
“live” workspace
typo3.org
en_EN en_EN en_EN
homepage section:main maincontent
Lorem ipsum dolor sit amet
“user-christian” workspace
Tuesday 26 June 12

19. typo3.org
en_EN en_EN en_EN
homepage section:main maincontent
Lorem ipsum dolor sit amet
“live” workspace
typo3.org
en_EN en_EN en_EN
homepage section:main maincontent
Some real content text here
“user-christian” workspace
Tuesday 26 June 12

20. content configuration
'TYPO3.TYPO3:Text':
superTypes: ['TYPO3.TYPO3:ContentObject']
group: 'General'
icon: 'Images/Icons/White/text.png'
label: 'Text'
properties:
headline:
label: string
default: 'Enter headline here'
text:
label: string
default: '<p>Enter text here</p>'
inlineEditableProperties: ['headline', 'text']
Tuesday 26 June 12

21. TypoScript 2
• Convention over Configuration
• no TypoScript in database
• Sub directories as in Node Hierarchy to
add extension templates
Tuesday 26 June 12

22. What do we want to
do with TypoScript?
Tuesday 26 June 12

23. containers ou
rende r tput
pro
re pe
rti
t
nde
es
wr
nd i
ap
r
es
exte
nod
od
c on
n
con
te
es
of
figu
nt
re o
s
up
utput
s
es
ro
nu
tn od
g
me
lec
r
se
de
filter nodes
r
de
n re
n
Tuesday 26 June 12 re

24. Boils down to
• mainly dealing with nodes
• but not always involving a node
• nodes can be rendered multiple times
• flexibility needed
• hierarchical access to nodes
Tuesday 26 June 12

25. Inspirations
• TypoScript v4: extensibility, stdWrap
• Fluid: HTML Templating
• JavaScript: Prototype-based inheritance
• jQuery: selecting nodes, fluent interface
• CSS: set-based API; Selector Syntax
• XPath: Traversal Operations
Tuesday 26 June 12

26. Out-Of-Band
Rendering
• Rendering single content elements
• needs: side-effect-free language
• needs: compact addressing
• Node Path: /sites/flow3org/
home[TYPO3.TYPO3:Page]
• TypoScript Path: page/body
Tuesday 26 June 12

27. Page
TypoScript 2
page = TYPO3.TYPO3:Page
page.body.templatePath = 'resource://My.Site/Private/ ↵
Templates/Page/Default.html'
page.body.sectionName = 'body'
TypoScript
page = PAGE
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/templates/default.html
page.10.workOnSubpart = body
page.10.marks …
Tuesday 26 June 12

28. Content
TypoScript 2
page.body.sections.main = TYPO3.TYPO3:Section
page.body.sections.main.nodePath = 'main'
TypoScript
page.10.marks.maincontent = CONTENT
page.10.marks.maincontent.table = tt_content
page.10.marks.maincontent.select.where = colPos = 0
(page.10.marks.maincontent < styles.content.get)
Tuesday 26 June 12

29. Menu
TypoScript 2
page.body.parts {
menu = TYPO3.TYPO3:MenuRenderer
}
TypoScript
page.10.marks.menu = HMENU
page.10.marks.menu {
1 = TMENU
1.wrap = <ul class=”nav”>|</div>
1.NO.wrapItemAndSub = <li>|</li>
1.CUR = 1
1.CUR.wrapItemAndSub = <li class=”current”>|</li>
}
Tuesday 26 June 12

30. FlowQuery
Tuesday 26 June 12

31. FlowQuery
• Selector syntax like jQuery for TYPO3
• working with a context (usually a node)
${context.property('text')}
Tuesday 26 June 12

32. Traversal
// return first node in subnode with path
// ‘left’
${context.children('left').first()}
${context.children().filter('left').first()}
// return collection of all parents (rootline)
${context.parents()}
Tuesday 26 June 12

33. Processors
Tuesday 26 June 12

34. are
• replacing stdWrap
• usable everywhere
• easy to create by yourself
prototype(TYPO3.TYPO3:Text).headline <<
1.wrap(prefix: '-', suffix: '-')
Tuesday 26 June 12

35. Thank you!
Questions?
twitter: @daskitsunet
email: christian.mueller@typo3.org
Tuesday 26 June 12