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

A Technical Overview of TYPO3 Neos

A Technical Overview of TYPO3 Neos

Presented at T3CON12DE, we give a technical overview about each of the Neos components and how they work together.

Sebastian Kurfürst

October 05, 2012
Tweet

More Decks by Sebastian Kurfürst

Other Decks in Technology

Transcript

  1. Goal Provide an extensible setup wizard for Flow applications Setup

    Tool TYPO3.Setup Refe- rence extensible setup steps uses Form package usable standalone
  2. Goal Provide a framework for multi-step forms, validation on server-

    and client side, multiple renderings for a form, customizable form elements Form Framework TYPO3.Form Refe- rence multi-steps validation form re-use
  3. first Text headline Try Out TYPO3 Neos Today! text Come

    To Our Booth and try... main Section screen Image uri screenshot.jpg caption The Login of Neos homepage Page title Neos Demo Page Each node identified by node path: /homepage/main/first
  4. user-sebastian first Text headline Try Out Neos Today! text Fetch

    the Download and run it ... main Section screen Image uri screenshot.jpg caption The Login of Neos homepage Page title Neos Demo Page user-sebastian two TwoColumn
  5. first Text headline Try Out Neos Today! text Fetch the

    Download and run it ... main Section screen Image uri screenshot.jpg caption The Login of Neos homepage Page title Neos Demo Page two TwoColumn
  6. TYPO3CR Content Types TYPO3.Phoenix.ContentTypes/Configuration/Settings.yaml TYPO3: TYPO3CR: contentTypes: 'TYPO3.Phoenix.ContentTypes:Text': superTypes: ['TYPO3.Phoenix.ContentTypes:ContentObject']

    group: 'General' label: 'Text' properties: text: label: string default: '<p>Enter text here</p>' 'TYPO3.Phoenix.ContentTypes:ContentObject': superTypes: ['TYPO3.Phoenix.ContentTypes:AbstractNode']
  7. Using TYPO3CR // Setup $contentContext = new \TYPO3\TYPO3CR\Domain\Service\Context('live'); $nodeRepository->setContext($contentContext); $rootNode

    = $contentContext->getWorkspace()->getRootNode(); // Traversing the node tree $testNode = $rootNode->createNode('test'); $fooNode = $testNode->createNode('foo'); $fooNode->setProperty('title', 'Hello World'); $rootNode->getNode('test/foo'); // == $fooNode
  8. Goal Store, read and update deeply structured content in a

    uniform way. Stage it, translate it, synchronize it. Content Repository TYPO3.TYPO3CR Refe- rence based on nodes hierarchical structure workspace support translation support
  9. A look inside the NodeController NodeController.php namespace TYPO3\Neos\Controller\Frontend; class NodeController

    extends \TYPO3\Flow\Mvc\Controller\ActionController { protected $defaultViewObjectName = 'TYPO3\Neos\View\TypoScriptView'; public function showAction(\TYPO3\TYPO3CR\Domain\Model\NodeInterface $node) { // ... $this->nodeRepository->getContext()->setCurrentNode($node); $this->view->assign('value', $node); } }
  10. Acme.Demo/.../TypoScripts/Library/Root.ts2 // Includes TYPO3.Neos/Private/DefaultTypoScript/All.ts2 page = Page page.body { templatePath

    = 'resource://Acme.Demo/Private/Templates/Page.html' sectionName = 'body' } Rendering a Static Page
  11. Rendering a Page Acme.Demo/.../TypoScripts/Library/Root.ts2 // Includes TYPO3.TYPO3/Private/DefaultTypoScript/All.ts2 page = Page

    // ... page.body { templatePath = 'resource://Acme.Demo/Private/Templates/Page.html' sectionName = 'body' parts { menu = Menu breadcrumb = Breadcrumb } sections { main = Section // like CONTENT main.nodePath = 'main' // like colPos = 0 } }
  12. Acme.Demo/Resources/Private/Templates/Page.html {namespace ts=TYPO3\TypoScript\ViewHelpers} <f:section name="body"> <h1>A freshly created template for

    your new site!</h1> <nav class="menu"><ts:renderTypoScript path="parts/menu" /></nav> <nav class="breadcrumb"> <ts:renderTypoScript path="parts/breadcrumb" /> </nav> <div class="content"><ts:renderTypoScript path="sections/main" /></div> </f:section> Rendering a Page
  13. page.body.templatePath = '...' Warning Has very little to do with

    "classic" TypoScript Goal Is a declarative language for composing component-based views built both for planned and unplanned extensibility API not yet stable TypoScript 2 TYPO3.TypoScript Refe- rence
  14. TYPO3.Phoenix.ContentTypes/Configuration/Settings.yaml Rendering this Hierarchical Content Structure prototype(TYPO3.TypoScript:Collection) { } prototype(TYPO3.Phoenix.ContentTypes:Section)

    < prototype(TYPO3.TypoScript:Collection) { ... } prototype(TYPO3.TypoScript:Case).default { @position = 'end' condition = ${true} type = ${q(node).property('_contentType.name')} } collection = ${q(node).children()} itemName = 'node' itemRenderer = TYPO3.TypoScript:Case
  15. Embedded Expression Language Goal Provide an expression language that‘s easy

    to use in a lot of places. Refe- rence subset of JavaScript usable standalone Eel TYPO3.Eel
  16. Eel Expressions name: "TYPO3" values: { inspire: "Share" } a:

    42 context expression result "TYPO3" "Hello, " + name "Hello, TYPO3" name (1 + 2) * 3 9 name == 'TYPO3' true values.inspire "Share" a < 10 || a > 100 false
  17. Eel Expressions values: { inspire: "Share" } count: function node:

    object context expression result 1 count([1, 2, 3]) + 4 7 count(values) node.getProperty("title") "Node title"
  18. Refe- rence q(node).property("title") Goal Provide helper functions for working with

    TYPO3CR nodes in Eel like jQuery for JavaScript and the DOM. influenced by jQuery work with tree structures extensible operations FlowQuery TYPO3.Eel
  19. Flow Query Examples node: context expression result "Home" q(node).property("title“) home

    Page title Home cms Page title CMS desc Conte... "Content ..." q(node) .children("[title=CMS]") .property("description") neos Page title Neos desc Flow... [home, cms, neos] q(node) .add(q(node).children())
  20. Settings.yaml Creating Custom Content Types TYPO3: TYPO3CR: contentTypes: 'Acme.Demo:YouTube': superTypes:

    ['...ContentTypes:Headline'] icon: 'Images/Icons/youtube_icon.png' label: 'YouTube' properties: video: type: string label: 'YouTube embed id' group: 'video' groups: video: label: 'Video' TypoScript prototype(Acme.Demo:YouTube) < prototype(TYPO3.Phoenix.ContentTypes:Headline) { templatePath = '.../YouTube.html' video = ${q(node).property('video')} } YouTube.html YouTube.html {namespace t=TYPO3\TYPO3\ViewHelpers} <t:contentElement node="{context}"> <t:aloha.editable property="title" tag="header"> {title -> f:format.raw()} </t:aloha.editable> <figure class="video"> <iframe src="http://www.youtube.com/embed/ {video}?wmode=transparent" frameborder="0" allowfullscreen></iframe> </figure> </t:contentElement> there will be an editor
  21. TYPO3.TYPO3/Configuration/Settings.yaml Simple Backend Modules TYPO3: TYPO3: modules: administration: submodules: packages:

    label: 'Package Management' controller: '\TYPO3\TYPO3\Controller\Module\Administration\PackagesController' description: "The Package Management ..." icon: 'resource://TYPO3.TYPO3/Public/Images/Icons/Orange/box_icon-24.png' Controllers and Templates Simply Unmodified
  22. Goal Provide a generic and extensible admin interface for all

    kinds of data. Expose Admin Interface TYPO3.Expose Refe- rence Listing and Editing support objects and nodes extensible through TypoScript