Post on 12-May-2015
TYPO3 Phoenix Content model and
TypoScript
Tuesday 26 June 12
Christian Müller
twitter: daskitsunetchristian.mueller@typo3.org
TYPO3 Freelancer
TYPO3 Phoenix and FLOW3 Core Team Member
Book and Music Freak
Tuesday 26 June 12
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
Content Model
Tuesday 26 June 12
Nodes
Tuesday 26 June 12
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
can besite root
page
content section
content element
representation of domain models
and just anything you want them to be!
Tuesday 26 June 12
can besite root
page
content section
content element
representation of domain models
and just anything you want them to be!
Tuesday 26 June 12
are addressed by nodePaths
/sites/typo3org/home/subpage/main/text1
Tuesday 26 June 12
are addressed by nodePaths
/sites/typo3org/home/subpage/main/text1
site root
Tuesday 26 June 12
are addressed by nodePaths
/sites/typo3org/home/subpage/main/text1
site root
pages
Tuesday 26 June 12
are addressed by nodePaths
/sites/typo3org/home/subpage/main/text1
site root
pages
section
Tuesday 26 June 12
are addressed by nodePaths
/sites/typo3org/home/subpage/main/text1
site root
pages
section
content
Tuesday 26 June 12
Context
Tuesday 26 June 12
is
• an environment a node exists in
• for example a workspace
Tuesday 26 June 12
therefor
• same node can exist in multiple contexts
Tuesday 26 June 12
typo3.org
homepage section:main
section:side
section:side
en_EN
en_ENen_EN
de_DE
maincontenten_EN
sidecontenten_EN
sidecontentde_DE
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Tuesday 26 June 12
typo3.org
homepage section:mainen_ENen_EN
maincontenten_EN
typo3.org
homepage section:mainen_ENen_EN
maincontenten_EN
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
“live” workspace
“user-christian” workspace
Tuesday 26 June 12
typo3.org
homepage section:mainen_ENen_EN
maincontenten_EN
typo3.org
homepage section:mainen_ENen_EN
maincontenten_EN
Lorem ipsum dolor sit amet
Some real content text here
“live” workspace
“user-christian” workspace
Tuesday 26 June 12
'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']
content configuration
Tuesday 26 June 12
TypoScript 2
• Convention over Configuration
• no TypoScript in database
• Sub directories as in Node Hierarchy to add extension templates
Tuesday 26 June 12
What do we want to do with TypoScript?
Tuesday 26 June 12
render containers output properties
render nodes
rend
er g
roup
s of n
odes
select nodes
wrap contentconfigure output
filter nodes
exte
nd it
rend
er m
enus
Tuesday 26 June 12
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
• 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
Inspirations
Tuesday 26 June 12
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
Pagepage = TYPO3.TYPO3:Pagepage.body.templatePath = 'resource://My.Site/Private/ ↵Templates/Page/Default.html'page.body.sectionName = 'body'
TypoScript 2
page = PAGEpage.10 = TEMPLATEpage.10.template = FILEpage.10.template.file = fileadmin/templates/default.htmlpage.10.workOnSubpart = bodypage.10.marks …
TypoScript
Tuesday 26 June 12
Content
page.body.sections.main = TYPO3.TYPO3:Sectionpage.body.sections.main.nodePath = 'main'
TypoScript 2
page.10.marks.maincontent = CONTENTpage.10.marks.maincontent.table = tt_contentpage.10.marks.maincontent.select.where = colPos = 0
(page.10.marks.maincontent < styles.content.get)
TypoScript
Tuesday 26 June 12
Menu
page.body.parts { menu = TYPO3.TYPO3:MenuRenderer}
TypoScript 2
page.10.marks.menu = HMENUpage.10.marks.menu {1 = TMENU1.wrap = <ul class=”nav”>|</div>1.NO.wrapItemAndSub = <li>|</li>1.CUR = 11.CUR.wrapItemAndSub = <li class=”current”>|</li>
}
TypoScript
Tuesday 26 June 12
FlowQuery
Tuesday 26 June 12
FlowQuery
• Selector syntax like jQuery for TYPO3
• working with a context (usually a node)
${context.property('text')}
Tuesday 26 June 12
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
Processors
Tuesday 26 June 12
are
• replacing stdWrap
• usable everywhere
• easy to create by yourself
prototype(TYPO3.TYPO3:Text).headline << 1.wrap(prefix: '-', suffix: '-')
Tuesday 26 June 12
Thank you!Questions?
twitter: @daskitsunetemail: christian.mueller@typo3.org
Tuesday 26 June 12