[T3CON12CA] Content Model and TypoScript in TYPO3 Phoenix

TYPO3 Phoenix Content model and

TypoScript

Tuesday 26 June 12

Christian Müller

twitter: [email protected]

TYPO3 Freelancer

TYPO3 Phoenix and FLOW3 Core Team Member

Book and Music Freak

Tuesday 26 June 12

mailto:[email protected]


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

are addressed by nodePaths

/sites/typo3org/home/subpage/main/text1

Tuesday 26 June 12



site root

Tuesday 26 June 12



site root

pages

Tuesday 26 June 12



site root

pages

section

Tuesday 26 June 12



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



Tuesday 26 June 12

typo3.org

homepage section:mainen_ENen_EN

maincontenten_EN

typo3.org


maincontenten_EN



“live” workspace

“user-christian” workspace

Tuesday 26 June 12

typo3.org


maincontenten_EN

typo3.org


maincontenten_EN


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: [email protected]

Tuesday 26 June 12



[T3CON12CA] Content Model and TypoScript in TYPO3 Phoenix

Technology

Transcript of [T3CON12CA] Content Model and TypoScript in TYPO3 Phoenix