SlideShare une entreprise Scribd logo
1  sur  48
Télécharger pour lire hors ligne
Inspiring Conference 2014
TYPO3 Neos
Node Kingdom
Inspiring Conference 2014
Dominique Feyer
Cofounder of ttree ltd + medialib.tv ltd
Inspiring Conference 2014
What’s next
Short introduction to Structured Content
Think about content
Your first custom Node Type
A bit more advanced example
Inspiring Conference 2014
Let’s start with
some definitions
Inspiring Conference 2014
What’s a Kingdom ?
A really nice place to live in
Where a king take care of each citizen
A really romantic vision, no ?
Inspiring Conference 2014
Do you see the magic ?
Inspiring Conference 2014
What’s a Node ?
A node is a small piece of content
Content is your first class citizen
Can be structured
Nodes can contain other node
Inspiring Conference 2014
Entity or Node
A different way to interact with content
In Neos, try to focus on Node
- Inline editing, Workspace, Content Dimension
- FlowQuery & EEL, Import / Export, …
!
Standard Doctrine Entity can be used for specific needs
Inspiring Conference 2014
We are not 

Page Centric
Inspiring Conference 2014
It’s not a 

Page Tree
It’s a 

Document Tree
Inspiring Conference 2014
A Page is just a
specific Document
A document can
be anything
Inspiring Conference 2014
When did you need a
new Document Type
You need an URL to access this content
- Customer
- Project Reference
- People
- Blog post, News, …
Inspiring Conference 2014
Do you remember
your first jQuery
plugin ?
That was maybe not « yours »
What about JavaScript internals ?
Inspiring Conference 2014
Keep your 

content clean
As an editor
I need special formatting for some paragraph
Inspiring Conference 2014
Inspiring Conference 2014
Inspiring Conference 2014
How it’s done ?
A new Node Type based on the default Text Node Type
A small piece of TypoScript
Inspiring Conference 2014
Please define

Node Type
A Node Type define the structure of a node
A Node Type can have Super Type (inheritance)
The structure of a node can change
Inspiring Conference 2014
Add a Node Type
'Ttree.OfficialWebsite:Teaser':
superTypes:
- 'TYPO3.Neos.NodeTypes:Text'
ui:
label: Teaser
inspector:
groups:
theme:
label: Theme
position: 5
properties:
reverse:
type: boolean
ui:
label: 'Gray Theme'
reloadIfChanged: true
inspector:
group: theme
Inspiring Conference 2014
A short TypoScript
prototype(Ttree.OfficialWebsite:Teaser) >
prototype(Ttree.OfficialWebsite:Teaser) < prototype(TYPO3.Neos.NodeTypes:Text) {
attributes.class = ${node.properties.reverse ? 'teaser teaser-reverse' : 'teaser'}
}
Inspiring Conference 2014
A bit more advanced
As a client
I need to display a list of persons on my website
Each person has their own profile
I need to be able to insert person address and a link to
the profile on any page
Inspiring Conference 2014
What’s a Person
Your first 

Abstract Node Type
'Ttree.InspiringConf:Schema.Person':
abstract: true
ui:
inspector:
groups:
person:
label: 'Person'
position: 1
properties:
personName:
type: string
ui:
label: 'Name'
reloadIfChanged: TRUE
inspector:
group: person
Inspiring Conference 2014
Your second 

Abstract Node Type
What’s a
Postal
Address
'Ttree.InspiringConf:Schema.PostalAddress':
abstract: true
ui:
inspector:
groups:
postalAddress:
label: 'Postal Address'
position: 2
properties:
postalAddressStreetAddress:
type: string
ui:
label: 'Street Address'
reloadIfChanged: TRUE
inspector:
group: postalAddress
postalAddressPostalCode:
type: string
ui:
label: 'Postal Code'
reloadIfChanged: TRUE
inspector:
group: postalAddress
postalAddressLocality:
type: string
ui:
label: 'Locality'
reloadIfChanged: TRUE
Inspiring Conference 2014
Document 

Node Type
Extend the TYPO3.Neos:Document
Extend your abstract nodes
Add a content collection
'Ttree.InspiringConf:Person':
superTypes:
- 'TYPO3.Neos:Document'
- 'Ttree.InspiringConf:Schema.PostalAddress'
- 'Ttree.InspiringConf:Schema.Person'
ui:
label: 'Person'
icon: 'icon-user'
group: inspiringCon
childNodes:
profile:
type: 'TYPO3.Neos:ContentCollection'
Inspiring Conference 2014
TypoScript
prototype(TYPO3.Neos:PrimaryContent).TtreeInspiringConfPerson {
condition = ${q(node).is('[instanceof Ttree.InspiringConf:Person]')}
type = 'Ttree.InspiringConf:Person'
@position = 'start'
}
prototype(Ttree.InspiringConf:Person) < prototype(TYPO3.TypoScript:Template) {
templatePath = 'resource://Ttree.InspiringConf/Private/Templates/NodeTypes/Perso
!
attributes = TYPO3.TypoScript:Attributes {
class = 'person-profile-page'
data-ttree-region = ${node.properties.postalAddressRegion}
data-ttree-country = ${node.properties.postalAddressCountry}
}
!
personName = ${node.properties.personName}
postalAddressStreetAddress = ${node.properties.postalAddressStreetAddress}
postalAddressCountry = ${node.properties.postalAddressCountry}
postalAddressPostalCode = ${node.properties.postalAddressPostalCode}
postalAddressLocality = ${node.properties.postalAddressLocality}
postalAddressRegion = ${node.properties.postalAddressRegion}
…
Inspiring Conference 2014
You say PrimaryContent ?
Use it only one time in your page
Neos know where to render the main content
Don’t use it for your sidebar
prototype(TYPO3.Neos:PrimaryContent).TtreeInspiringConfPerson {
condition = ${q(node).is('[instanceof Ttree.InspiringConf:Person]')}
type = 'Ttree.InspiringConf:Person'
@position = 'start'
}
Inspiring Conference 2014
Let’s preparing the view …
Will be rendered in your PrimaryContent area
!
prototype(Ttree.InspiringConf:Person) < prototype(TYPO3.TypoScript:Template) {
templatePath = 'resource://Ttree.InspiringConf/Private/Templates/NodeTypes/Pers
!
attributes = TYPO3.TypoScript:Attributes {
class = 'person-profile-page'
data-ttree-region = ${node.properties.postalAddressRegion}
data-ttree-country = ${node.properties.postalAddressCountry}
}
!
personName = ${node.properties.personName}
postalAddressStreetAddress = ${node.properties.postalAddressStreetAddress}
postalAddressCountry = ${node.properties.postalAddressCountry}
postalAddressPostalCode = ${node.properties.postalAddressPostalCode}
postalAddressLocality = ${node.properties.postalAddressLocality}
postalAddressRegion = ${node.properties.postalAddressRegion}
!
profile = TYPO3.Neos:ContentCollection {
nodePath = 'profile'
}
}
Inspiring Conference 2014
The Fluid template
{namespace neos=TYPO3NeosViewHelpers}
<div{attributes -> f:format.raw()}>
<div itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">{personName}</h1>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress
<span itemprop="streetAddress">
{postalAddressStreetAddress}
</span> |
<span itemprop="addressCountry">{postalAddressCountry}</span>,
<span itemprop="postalCode">{postalAddressPostalCode}</span>,
<span itemprop="addressLocality">{postalAddressLocality}</span>,
<span itemprop="addressRegion">{postalAddressRegion}</span>
</span>
</div>
!
<div class="customer-profile">
{profile -> f:format.raw()}
</div>
</div>
Inspiring Conference 2014
The final
rendering
Inspiring Conference 2014
Link to the
profile from any
page ?
Inspiring Conference 2014
Inspiring Conference 2014
What about a new
node type ?
As an editor
I need to insert on any page a contact address
Inspiring Conference 2014
Node Type
'Ttree.InspiringConf:ContactAddress':
superTypes:
- 'TYPO3.Neos:Content'
nodeLabelGenerator: 'TtreeInspiringConfDomainModelPersonNodeLabelGenerator'
ui:
label: 'Contact Address'
group: 'inspiringCon'
inspector:
groups:
document:
label: 'Address'
position: 1
properties:
person:
type: reference
ui:
label: 'Person'
reloadIfChanged: true
inspector:
group: 'document'
editorOptions:
nodeTypes:
- 'Ttree.InspiringConf:Person'
Inspiring Conference 2014
TypoScript
prototype(Ttree.InspiringConf:ContactAddress) >
prototype(Ttree.InspiringConf:ContactAddress) < prototype(TYPO3.Neos:Content) {
templatePath = 'resource://Ttree.InspiringConf/Private/Templates/NodeTypes/ContactAdd
!
person = ${node.properties.person}
hasPerson = ${node.properties.person ? TRUE : FALSE}
!
attributes = TYPO3.TypoScript:Attributes {
class = 'person-profile-inline'
style = 'background: #CCC; padding: 10px; margin-bottom: 10px;'
data-ttree-region = ${this.person.properties.postalAddressRegion}
data-ttree-country = ${this.person.properties.postalAddressCountry}
}
!
personName = ${this.person.properties.personName}
postalAddressStreetAddress = ${this.person.properties.postalAddressStreetAddress}
postalAddressCountry = ${this.person.properties.postalAddressCountry}
postalAddressPostalCode = ${this.person.properties.postalAddressPostalCode}
postalAddressLocality = ${this.person.properties.postalAddressLocality}
postalAddressRegion = ${this.person.properties.postalAddressRegion}
}
Inspiring Conference 2014
Template{namespace neos=TYPO3NeosViewHelpers}
<div{attributes -> f:format.raw()}>
<f:if condition="{hasPerson}">
<f:then>
<div itemscope itemtype="http://schema.org/Person">
<div style="font-weight: bold;" itemprop="name">{personName}</div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddres
<div itemprop="streetAddress">
{postalAddressStreetAddress}
</div>
<div>
<span itemprop="addressCountry">{postalAddressCountry}</span> -
<span itemprop="postalCode">{postalAddressPostalCode}</span>
<span itemprop="addressLocality">{postalAddressLocality}</span>
</div>
</div>
</div>
</f:then>
<f:else>
<strong>
Please select a Person<br/>
in the Inspector
</strong>
</f:else>
</f:if>
</div>
Inspiring Conference 2014
Inspiring Conference 2014
nodeLabelGenerator: 'TtreeInspiringConfDomainModelPersonNodeLabelGenerator'
Custom node label,
but why ?
Inspiring Conference 2014
class PersonNodeLabelGenerator extends DefaultNodeLabelGenerator {

 public function getLabel(AbstractNodeData $nodeData, $crop = TRUE) {

 
 if ($nodeData->hasProperty('person') === TRUE && $nodeData->getProperty('person

 
 
 $label = 'Link to: ' . strip_tags($nodeData->getProperty('person')->
getProperty('personName'));

 
 } else {

 
 
 $label = parent::getLabel($nodeData, FALSE);

 
 }

 
 if ($crop === FALSE) {

 
 
 return $label;

 
 }
!

 
 $croppedLabel = TYPO3FlowUtilityUnicodeFunctions::substr($label, 0, 
NodeInterface::LABEL_MAXIMUM_CHARACTERS);

 
 return $croppedLabel . (strlen($croppedLabel) < strlen($label) ? ' …’ : '');

 }
}
Inspiring Conference 2014
class PersonNodeLabelGenerator extends DefaultNodeLabelGenerator {

 public function getLabel(AbstractNodeData $nodeData, $crop = TRUE) {

 
 if ($nodeData->hasProperty('person') === TRUE && $nodeData->getProperty('person

 
 
 $label = 'Link to: ' . strip_tags($nodeData->getProperty('person')->
getProperty('personName'));

 
 } else {

 
 
 $label = parent::getLabel($nodeData, FALSE);

 
 }

 
 if ($crop === FALSE) {

 
 
 return $label;

 
 }
!

 
 $croppedLabel = TYPO3FlowUtilityUnicodeFunctions::substr($label, 0, 
NodeInterface::LABEL_MAXIMUM_CHARACTERS);

 
 return $croppedLabel . (strlen($croppedLabel) < strlen($label) ? ' …’ : '');

 }
}
Inspiring Conference 2014
class PersonNodeLabelGenerator extends DefaultNodeLabelGen

 public function getLabel(AbstractNodeData $nodeData, $cr

 
 if ($nodeData->hasProperty('person') === TRUE && $no

 
 
 $label = 'Link to: ' . strip_tags($nodeData->getPrope
getProperty('personName'));

 
 } else {

 
 
 $label = parent::getLabel($nodeData, FALSE);

 
 }

 
 if ($crop === FALSE) {

 
 
 return $label;

 
 }
!

 
 $croppedLabel = TYPO3FlowUtilityUnicodeFunction

 
 return $croppedLabel . (strlen($croppedLabel) < strlen($

 }
}
Inspiring Conference 2014
Lazy mode
pseudo live
demonstration
Inspiring Conference 2014
Inspiring Conference 2014
We, as a community, are currently
redefining the future of CMS
Thanks
Inspiring Conference 2014
Fork me on Github

https://github.com/dfeyer/Ttree.InspiringConf
Follow us @ttreeagency
Follow me @dfeyer
Questions

Contenu connexe

Similaire à Inspiring conference 2014 - Node Kingdom

Synapse india reviews on drupal 7 entities (stanford)
Synapse india reviews on drupal 7 entities (stanford)Synapse india reviews on drupal 7 entities (stanford)
Synapse india reviews on drupal 7 entities (stanford)Tarunsingh198
 
Mind The Gap - Mapping a domain model to a RESTful API - OReilly SACon 2018, ...
Mind The Gap - Mapping a domain model to a RESTful API - OReilly SACon 2018, ...Mind The Gap - Mapping a domain model to a RESTful API - OReilly SACon 2018, ...
Mind The Gap - Mapping a domain model to a RESTful API - OReilly SACon 2018, ...Tom Hofte
 
MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express
MIKE Stack Introduction - MongoDB, io.js, KendoUI, and ExpressMIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express
MIKE Stack Introduction - MongoDB, io.js, KendoUI, and ExpressCharlie Key
 
Simplifying & accelerating application development with MongoDB's intelligent...
Simplifying & accelerating application development with MongoDB's intelligent...Simplifying & accelerating application development with MongoDB's intelligent...
Simplifying & accelerating application development with MongoDB's intelligent...Maxime Beugnet
 
MongoDB and Spring - Two leaves of a same tree
MongoDB and Spring - Two leaves of a same treeMongoDB and Spring - Two leaves of a same tree
MongoDB and Spring - Two leaves of a same treeMongoDB
 
Drupal 7 entities & TextbookMadness.com
Drupal 7 entities & TextbookMadness.comDrupal 7 entities & TextbookMadness.com
Drupal 7 entities & TextbookMadness.comJD Leonard
 
Building rednoseday.com on Drupal 8
Building rednoseday.com on Drupal 8Building rednoseday.com on Drupal 8
Building rednoseday.com on Drupal 8Peter Vanhee
 
Semantic MediaWiki Workshop
Semantic MediaWiki WorkshopSemantic MediaWiki Workshop
Semantic MediaWiki WorkshopDan Bolser
 
Boost Your Development With Proper API Design
Boost Your Development With Proper API DesignBoost Your Development With Proper API Design
Boost Your Development With Proper API DesignMarcusHeld1
 
Generating Unified APIs with Protocol Buffers and gRPC
Generating Unified APIs with Protocol Buffers and gRPCGenerating Unified APIs with Protocol Buffers and gRPC
Generating Unified APIs with Protocol Buffers and gRPCC4Media
 
content modelling for personalization
content modelling for personalizationcontent modelling for personalization
content modelling for personalizationcleveg
 
Application development with Oracle NoSQL Database 3.0
Application development with Oracle NoSQL Database 3.0Application development with Oracle NoSQL Database 3.0
Application development with Oracle NoSQL Database 3.0Anuj Sahni
 
My Journey into the Terrifying World of Hypermedia
My Journey into the Terrifying World of HypermediaMy Journey into the Terrifying World of Hypermedia
My Journey into the Terrifying World of HypermediaNordic APIs
 
Drupalcon cph
Drupalcon cphDrupalcon cph
Drupalcon cphcyberswat
 
O reilly sacon2018nyc - restful api design - master - v1.0
O reilly sacon2018nyc - restful api design - master - v1.0O reilly sacon2018nyc - restful api design - master - v1.0
O reilly sacon2018nyc - restful api design - master - v1.0Tom Hofte
 
D7 entities fields
D7 entities fieldsD7 entities fields
D7 entities fieldscyberswat
 
Search as main navigation
Search as main navigationSearch as main navigation
Search as main navigationpunkt.de GmbH
 
Bridging the gap between business and technology - Behaviour Driven Developme...
Bridging the gap between business and technology - Behaviour Driven Developme...Bridging the gap between business and technology - Behaviour Driven Developme...
Bridging the gap between business and technology - Behaviour Driven Developme...marcin_pajdzik
 
Content First: A workflow for building Mura sites with content in mind
Content First: A workflow for building Mura sites with content in mindContent First: A workflow for building Mura sites with content in mind
Content First: A workflow for building Mura sites with content in mindDavid Panzarella
 

Similaire à Inspiring conference 2014 - Node Kingdom (20)

Synapse india reviews on drupal 7 entities (stanford)
Synapse india reviews on drupal 7 entities (stanford)Synapse india reviews on drupal 7 entities (stanford)
Synapse india reviews on drupal 7 entities (stanford)
 
Mind The Gap - Mapping a domain model to a RESTful API - OReilly SACon 2018, ...
Mind The Gap - Mapping a domain model to a RESTful API - OReilly SACon 2018, ...Mind The Gap - Mapping a domain model to a RESTful API - OReilly SACon 2018, ...
Mind The Gap - Mapping a domain model to a RESTful API - OReilly SACon 2018, ...
 
MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express
MIKE Stack Introduction - MongoDB, io.js, KendoUI, and ExpressMIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express
MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express
 
Simplifying & accelerating application development with MongoDB's intelligent...
Simplifying & accelerating application development with MongoDB's intelligent...Simplifying & accelerating application development with MongoDB's intelligent...
Simplifying & accelerating application development with MongoDB's intelligent...
 
MongoDB and Spring - Two leaves of a same tree
MongoDB and Spring - Two leaves of a same treeMongoDB and Spring - Two leaves of a same tree
MongoDB and Spring - Two leaves of a same tree
 
MongoDB + Spring
MongoDB + SpringMongoDB + Spring
MongoDB + Spring
 
Drupal 7 entities & TextbookMadness.com
Drupal 7 entities & TextbookMadness.comDrupal 7 entities & TextbookMadness.com
Drupal 7 entities & TextbookMadness.com
 
Building rednoseday.com on Drupal 8
Building rednoseday.com on Drupal 8Building rednoseday.com on Drupal 8
Building rednoseday.com on Drupal 8
 
Semantic MediaWiki Workshop
Semantic MediaWiki WorkshopSemantic MediaWiki Workshop
Semantic MediaWiki Workshop
 
Boost Your Development With Proper API Design
Boost Your Development With Proper API DesignBoost Your Development With Proper API Design
Boost Your Development With Proper API Design
 
Generating Unified APIs with Protocol Buffers and gRPC
Generating Unified APIs with Protocol Buffers and gRPCGenerating Unified APIs with Protocol Buffers and gRPC
Generating Unified APIs with Protocol Buffers and gRPC
 
content modelling for personalization
content modelling for personalizationcontent modelling for personalization
content modelling for personalization
 
Application development with Oracle NoSQL Database 3.0
Application development with Oracle NoSQL Database 3.0Application development with Oracle NoSQL Database 3.0
Application development with Oracle NoSQL Database 3.0
 
My Journey into the Terrifying World of Hypermedia
My Journey into the Terrifying World of HypermediaMy Journey into the Terrifying World of Hypermedia
My Journey into the Terrifying World of Hypermedia
 
Drupalcon cph
Drupalcon cphDrupalcon cph
Drupalcon cph
 
O reilly sacon2018nyc - restful api design - master - v1.0
O reilly sacon2018nyc - restful api design - master - v1.0O reilly sacon2018nyc - restful api design - master - v1.0
O reilly sacon2018nyc - restful api design - master - v1.0
 
D7 entities fields
D7 entities fieldsD7 entities fields
D7 entities fields
 
Search as main navigation
Search as main navigationSearch as main navigation
Search as main navigation
 
Bridging the gap between business and technology - Behaviour Driven Developme...
Bridging the gap between business and technology - Behaviour Driven Developme...Bridging the gap between business and technology - Behaviour Driven Developme...
Bridging the gap between business and technology - Behaviour Driven Developme...
 
Content First: A workflow for building Mura sites with content in mind
Content First: A workflow for building Mura sites with content in mindContent First: A workflow for building Mura sites with content in mind
Content First: A workflow for building Mura sites with content in mind
 

Plus de dfeyer

Liiptalk Neos CMS
Liiptalk Neos CMSLiiptalk Neos CMS
Liiptalk Neos CMSdfeyer
 
Inspiring Conference - architectes.ch case study
Inspiring Conference - architectes.ch case studyInspiring Conference - architectes.ch case study
Inspiring Conference - architectes.ch case studydfeyer
 
Typo3 Neos - Introduction - WebMardi - Lausanne
Typo3 Neos - Introduction - WebMardi - LausanneTypo3 Neos - Introduction - WebMardi - Lausanne
Typo3 Neos - Introduction - WebMardi - Lausannedfeyer
 
Traduction des extensions et du core de TYPO3 CMS avec XLIFF
Traduction des extensions et du core de TYPO3 CMS avec XLIFFTraduction des extensions et du core de TYPO3 CMS avec XLIFF
Traduction des extensions et du core de TYPO3 CMS avec XLIFFdfeyer
 
Développer une solution VOD pour les festivals de cinéma
Développer une solution VOD pour les festivals de cinémaDévelopper une solution VOD pour les festivals de cinéma
Développer une solution VOD pour les festivals de cinémadfeyer
 
TYPO3 Flow a solid foundation for medialib.tv
TYPO3 Flow a solid foundation for medialib.tvTYPO3 Flow a solid foundation for medialib.tv
TYPO3 Flow a solid foundation for medialib.tvdfeyer
 
TYPO3 User Group - Lausanne - 12 novembre 2013
TYPO3 User Group - Lausanne - 12 novembre 2013TYPO3 User Group - Lausanne - 12 novembre 2013
TYPO3 User Group - Lausanne - 12 novembre 2013dfeyer
 
Building a vod portal with the flow @ Inspiring Flow 2013
Building a vod portal with the flow @ Inspiring Flow 2013Building a vod portal with the flow @ Inspiring Flow 2013
Building a vod portal with the flow @ Inspiring Flow 2013dfeyer
 
T3DD11 Inspire people to translate
T3DD11 Inspire people to translateT3DD11 Inspire people to translate
T3DD11 Inspire people to translatedfeyer
 

Plus de dfeyer (9)

Liiptalk Neos CMS
Liiptalk Neos CMSLiiptalk Neos CMS
Liiptalk Neos CMS
 
Inspiring Conference - architectes.ch case study
Inspiring Conference - architectes.ch case studyInspiring Conference - architectes.ch case study
Inspiring Conference - architectes.ch case study
 
Typo3 Neos - Introduction - WebMardi - Lausanne
Typo3 Neos - Introduction - WebMardi - LausanneTypo3 Neos - Introduction - WebMardi - Lausanne
Typo3 Neos - Introduction - WebMardi - Lausanne
 
Traduction des extensions et du core de TYPO3 CMS avec XLIFF
Traduction des extensions et du core de TYPO3 CMS avec XLIFFTraduction des extensions et du core de TYPO3 CMS avec XLIFF
Traduction des extensions et du core de TYPO3 CMS avec XLIFF
 
Développer une solution VOD pour les festivals de cinéma
Développer une solution VOD pour les festivals de cinémaDévelopper une solution VOD pour les festivals de cinéma
Développer une solution VOD pour les festivals de cinéma
 
TYPO3 Flow a solid foundation for medialib.tv
TYPO3 Flow a solid foundation for medialib.tvTYPO3 Flow a solid foundation for medialib.tv
TYPO3 Flow a solid foundation for medialib.tv
 
TYPO3 User Group - Lausanne - 12 novembre 2013
TYPO3 User Group - Lausanne - 12 novembre 2013TYPO3 User Group - Lausanne - 12 novembre 2013
TYPO3 User Group - Lausanne - 12 novembre 2013
 
Building a vod portal with the flow @ Inspiring Flow 2013
Building a vod portal with the flow @ Inspiring Flow 2013Building a vod portal with the flow @ Inspiring Flow 2013
Building a vod portal with the flow @ Inspiring Flow 2013
 
T3DD11 Inspire people to translate
T3DD11 Inspire people to translateT3DD11 Inspire people to translate
T3DD11 Inspire people to translate
 

Dernier

定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一Fs
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
Git and Github workshop GDSC MLRITM
Git and Github  workshop GDSC MLRITMGit and Github  workshop GDSC MLRITM
Git and Github workshop GDSC MLRITMgdsc13
 
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一Fs
 
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)Christopher H Felton
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一Fs
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Sonam Pathan
 
Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Excelmac1
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMartaLoveguard
 
Elevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New OrleansElevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New Orleanscorenetworkseo
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一z xss
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationMarko4394
 

Dernier (20)

定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
Git and Github workshop GDSC MLRITM
Git and Github  workshop GDSC MLRITMGit and Github  workshop GDSC MLRITM
Git and Github workshop GDSC MLRITM
 
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
 
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
A Good Girl's Guide to Murder (A Good Girl's Guide to Murder, #1)
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
定制(Lincoln毕业证书)新西兰林肯大学毕业证成绩单原版一比一
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170
 
Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...Blepharitis inflammation of eyelid symptoms cause everything included along w...
Blepharitis inflammation of eyelid symptoms cause everything included along w...
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 
Magic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptxMagic exist by Marta Loveguard - presentation.pptx
Magic exist by Marta Loveguard - presentation.pptx
 
Elevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New OrleansElevate Your Business with Our IT Expertise in New Orleans
Elevate Your Business with Our IT Expertise in New Orleans
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentation
 

Inspiring conference 2014 - Node Kingdom

  • 2. Inspiring Conference 2014 Dominique Feyer Cofounder of ttree ltd + medialib.tv ltd
  • 3. Inspiring Conference 2014 What’s next Short introduction to Structured Content Think about content Your first custom Node Type A bit more advanced example
  • 4. Inspiring Conference 2014 Let’s start with some definitions
  • 5. Inspiring Conference 2014 What’s a Kingdom ? A really nice place to live in Where a king take care of each citizen A really romantic vision, no ?
  • 6. Inspiring Conference 2014 Do you see the magic ?
  • 7. Inspiring Conference 2014 What’s a Node ? A node is a small piece of content Content is your first class citizen Can be structured Nodes can contain other node
  • 8. Inspiring Conference 2014 Entity or Node A different way to interact with content In Neos, try to focus on Node - Inline editing, Workspace, Content Dimension - FlowQuery & EEL, Import / Export, … ! Standard Doctrine Entity can be used for specific needs
  • 9. Inspiring Conference 2014 We are not 
 Page Centric
  • 10. Inspiring Conference 2014 It’s not a 
 Page Tree It’s a 
 Document Tree
  • 11. Inspiring Conference 2014 A Page is just a specific Document A document can be anything
  • 12. Inspiring Conference 2014 When did you need a new Document Type You need an URL to access this content - Customer - Project Reference - People - Blog post, News, …
  • 13. Inspiring Conference 2014 Do you remember your first jQuery plugin ? That was maybe not « yours » What about JavaScript internals ?
  • 14.
  • 15. Inspiring Conference 2014 Keep your 
 content clean As an editor I need special formatting for some paragraph
  • 18. Inspiring Conference 2014 How it’s done ? A new Node Type based on the default Text Node Type A small piece of TypoScript
  • 19. Inspiring Conference 2014 Please define
 Node Type A Node Type define the structure of a node A Node Type can have Super Type (inheritance) The structure of a node can change
  • 20. Inspiring Conference 2014 Add a Node Type 'Ttree.OfficialWebsite:Teaser': superTypes: - 'TYPO3.Neos.NodeTypes:Text' ui: label: Teaser inspector: groups: theme: label: Theme position: 5 properties: reverse: type: boolean ui: label: 'Gray Theme' reloadIfChanged: true inspector: group: theme
  • 21. Inspiring Conference 2014 A short TypoScript prototype(Ttree.OfficialWebsite:Teaser) > prototype(Ttree.OfficialWebsite:Teaser) < prototype(TYPO3.Neos.NodeTypes:Text) { attributes.class = ${node.properties.reverse ? 'teaser teaser-reverse' : 'teaser'} }
  • 22. Inspiring Conference 2014 A bit more advanced As a client I need to display a list of persons on my website Each person has their own profile I need to be able to insert person address and a link to the profile on any page
  • 23. Inspiring Conference 2014 What’s a Person Your first 
 Abstract Node Type 'Ttree.InspiringConf:Schema.Person': abstract: true ui: inspector: groups: person: label: 'Person' position: 1 properties: personName: type: string ui: label: 'Name' reloadIfChanged: TRUE inspector: group: person
  • 24. Inspiring Conference 2014 Your second 
 Abstract Node Type What’s a Postal Address 'Ttree.InspiringConf:Schema.PostalAddress': abstract: true ui: inspector: groups: postalAddress: label: 'Postal Address' position: 2 properties: postalAddressStreetAddress: type: string ui: label: 'Street Address' reloadIfChanged: TRUE inspector: group: postalAddress postalAddressPostalCode: type: string ui: label: 'Postal Code' reloadIfChanged: TRUE inspector: group: postalAddress postalAddressLocality: type: string ui: label: 'Locality' reloadIfChanged: TRUE
  • 25. Inspiring Conference 2014 Document 
 Node Type Extend the TYPO3.Neos:Document Extend your abstract nodes Add a content collection 'Ttree.InspiringConf:Person': superTypes: - 'TYPO3.Neos:Document' - 'Ttree.InspiringConf:Schema.PostalAddress' - 'Ttree.InspiringConf:Schema.Person' ui: label: 'Person' icon: 'icon-user' group: inspiringCon childNodes: profile: type: 'TYPO3.Neos:ContentCollection'
  • 26. Inspiring Conference 2014 TypoScript prototype(TYPO3.Neos:PrimaryContent).TtreeInspiringConfPerson { condition = ${q(node).is('[instanceof Ttree.InspiringConf:Person]')} type = 'Ttree.InspiringConf:Person' @position = 'start' } prototype(Ttree.InspiringConf:Person) < prototype(TYPO3.TypoScript:Template) { templatePath = 'resource://Ttree.InspiringConf/Private/Templates/NodeTypes/Perso ! attributes = TYPO3.TypoScript:Attributes { class = 'person-profile-page' data-ttree-region = ${node.properties.postalAddressRegion} data-ttree-country = ${node.properties.postalAddressCountry} } ! personName = ${node.properties.personName} postalAddressStreetAddress = ${node.properties.postalAddressStreetAddress} postalAddressCountry = ${node.properties.postalAddressCountry} postalAddressPostalCode = ${node.properties.postalAddressPostalCode} postalAddressLocality = ${node.properties.postalAddressLocality} postalAddressRegion = ${node.properties.postalAddressRegion} …
  • 27. Inspiring Conference 2014 You say PrimaryContent ? Use it only one time in your page Neos know where to render the main content Don’t use it for your sidebar prototype(TYPO3.Neos:PrimaryContent).TtreeInspiringConfPerson { condition = ${q(node).is('[instanceof Ttree.InspiringConf:Person]')} type = 'Ttree.InspiringConf:Person' @position = 'start' }
  • 28. Inspiring Conference 2014 Let’s preparing the view … Will be rendered in your PrimaryContent area ! prototype(Ttree.InspiringConf:Person) < prototype(TYPO3.TypoScript:Template) { templatePath = 'resource://Ttree.InspiringConf/Private/Templates/NodeTypes/Pers ! attributes = TYPO3.TypoScript:Attributes { class = 'person-profile-page' data-ttree-region = ${node.properties.postalAddressRegion} data-ttree-country = ${node.properties.postalAddressCountry} } ! personName = ${node.properties.personName} postalAddressStreetAddress = ${node.properties.postalAddressStreetAddress} postalAddressCountry = ${node.properties.postalAddressCountry} postalAddressPostalCode = ${node.properties.postalAddressPostalCode} postalAddressLocality = ${node.properties.postalAddressLocality} postalAddressRegion = ${node.properties.postalAddressRegion} ! profile = TYPO3.Neos:ContentCollection { nodePath = 'profile' } }
  • 29. Inspiring Conference 2014 The Fluid template {namespace neos=TYPO3NeosViewHelpers} <div{attributes -> f:format.raw()}> <div itemscope itemtype="http://schema.org/Person"> <h1 itemprop="name">{personName}</h1> <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress <span itemprop="streetAddress"> {postalAddressStreetAddress} </span> | <span itemprop="addressCountry">{postalAddressCountry}</span>, <span itemprop="postalCode">{postalAddressPostalCode}</span>, <span itemprop="addressLocality">{postalAddressLocality}</span>, <span itemprop="addressRegion">{postalAddressRegion}</span> </span> </div> ! <div class="customer-profile"> {profile -> f:format.raw()} </div> </div>
  • 30. Inspiring Conference 2014 The final rendering
  • 31.
  • 32.
  • 33. Inspiring Conference 2014 Link to the profile from any page ?
  • 35. Inspiring Conference 2014 What about a new node type ? As an editor I need to insert on any page a contact address
  • 36. Inspiring Conference 2014 Node Type 'Ttree.InspiringConf:ContactAddress': superTypes: - 'TYPO3.Neos:Content' nodeLabelGenerator: 'TtreeInspiringConfDomainModelPersonNodeLabelGenerator' ui: label: 'Contact Address' group: 'inspiringCon' inspector: groups: document: label: 'Address' position: 1 properties: person: type: reference ui: label: 'Person' reloadIfChanged: true inspector: group: 'document' editorOptions: nodeTypes: - 'Ttree.InspiringConf:Person'
  • 37. Inspiring Conference 2014 TypoScript prototype(Ttree.InspiringConf:ContactAddress) > prototype(Ttree.InspiringConf:ContactAddress) < prototype(TYPO3.Neos:Content) { templatePath = 'resource://Ttree.InspiringConf/Private/Templates/NodeTypes/ContactAdd ! person = ${node.properties.person} hasPerson = ${node.properties.person ? TRUE : FALSE} ! attributes = TYPO3.TypoScript:Attributes { class = 'person-profile-inline' style = 'background: #CCC; padding: 10px; margin-bottom: 10px;' data-ttree-region = ${this.person.properties.postalAddressRegion} data-ttree-country = ${this.person.properties.postalAddressCountry} } ! personName = ${this.person.properties.personName} postalAddressStreetAddress = ${this.person.properties.postalAddressStreetAddress} postalAddressCountry = ${this.person.properties.postalAddressCountry} postalAddressPostalCode = ${this.person.properties.postalAddressPostalCode} postalAddressLocality = ${this.person.properties.postalAddressLocality} postalAddressRegion = ${this.person.properties.postalAddressRegion} }
  • 38. Inspiring Conference 2014 Template{namespace neos=TYPO3NeosViewHelpers} <div{attributes -> f:format.raw()}> <f:if condition="{hasPerson}"> <f:then> <div itemscope itemtype="http://schema.org/Person"> <div style="font-weight: bold;" itemprop="name">{personName}</div> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddres <div itemprop="streetAddress"> {postalAddressStreetAddress} </div> <div> <span itemprop="addressCountry">{postalAddressCountry}</span> - <span itemprop="postalCode">{postalAddressPostalCode}</span> <span itemprop="addressLocality">{postalAddressLocality}</span> </div> </div> </div> </f:then> <f:else> <strong> Please select a Person<br/> in the Inspector </strong> </f:else> </f:if> </div>
  • 40. Inspiring Conference 2014 nodeLabelGenerator: 'TtreeInspiringConfDomainModelPersonNodeLabelGenerator' Custom node label, but why ?
  • 41. Inspiring Conference 2014 class PersonNodeLabelGenerator extends DefaultNodeLabelGenerator { public function getLabel(AbstractNodeData $nodeData, $crop = TRUE) { if ($nodeData->hasProperty('person') === TRUE && $nodeData->getProperty('person $label = 'Link to: ' . strip_tags($nodeData->getProperty('person')-> getProperty('personName')); } else { $label = parent::getLabel($nodeData, FALSE); } if ($crop === FALSE) { return $label; } ! $croppedLabel = TYPO3FlowUtilityUnicodeFunctions::substr($label, 0, NodeInterface::LABEL_MAXIMUM_CHARACTERS); return $croppedLabel . (strlen($croppedLabel) < strlen($label) ? ' …’ : ''); } }
  • 42. Inspiring Conference 2014 class PersonNodeLabelGenerator extends DefaultNodeLabelGenerator { public function getLabel(AbstractNodeData $nodeData, $crop = TRUE) { if ($nodeData->hasProperty('person') === TRUE && $nodeData->getProperty('person $label = 'Link to: ' . strip_tags($nodeData->getProperty('person')-> getProperty('personName')); } else { $label = parent::getLabel($nodeData, FALSE); } if ($crop === FALSE) { return $label; } ! $croppedLabel = TYPO3FlowUtilityUnicodeFunctions::substr($label, 0, NodeInterface::LABEL_MAXIMUM_CHARACTERS); return $croppedLabel . (strlen($croppedLabel) < strlen($label) ? ' …’ : ''); } }
  • 43. Inspiring Conference 2014 class PersonNodeLabelGenerator extends DefaultNodeLabelGen public function getLabel(AbstractNodeData $nodeData, $cr if ($nodeData->hasProperty('person') === TRUE && $no $label = 'Link to: ' . strip_tags($nodeData->getPrope getProperty('personName')); } else { $label = parent::getLabel($nodeData, FALSE); } if ($crop === FALSE) { return $label; } ! $croppedLabel = TYPO3FlowUtilityUnicodeFunction return $croppedLabel . (strlen($croppedLabel) < strlen($ } }
  • 44. Inspiring Conference 2014 Lazy mode pseudo live demonstration
  • 46. Inspiring Conference 2014 We, as a community, are currently redefining the future of CMS Thanks
  • 47. Inspiring Conference 2014 Fork me on Github
 https://github.com/dfeyer/Ttree.InspiringConf
  • 48. Follow us @ttreeagency Follow me @dfeyer Questions