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.

30c0b6f50f67163bee8500aa4115d126?s=128

Sebastian Kurfürst

October 05, 2012
Tweet

Transcript

  1. A Technical Overview

  2. Sebastian Kurfürst Christopher Hlubek @skurfuerst sandstorm|media @hlubek networkteam

  3. Our Goal get a feeling for the Neos components &

    how to use them
  4. Flow Fluid Neos TYPO3CR Setup Form Eel FlowQuery TypoScript Expose

  5. Complexity?

  6. Reusable use stand-alone or in combination

  7. Focussed one goal per component

  8. Components fit well together

  9. Flow Fluid Neos TYPO3CR Setup Form Eel FlowQuery TypoScript Expose

  10. Installation 1

  11. None
  12. Goal Provide an extensible setup wizard for Flow applications Setup

    Tool TYPO3.Setup Refe- rence extensible setup steps uses Form package usable standalone
  13. 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
  14. Stand-alone usage possible See the Form Guide for some usage

    examples
  15. Bonus Feature: Form Builder

  16. Flow Fluid Neos TYPO3CR Setup Form Eel FlowQuery TypoScript Expose

    Fluid Setup Form
  17. Content Repository 2

  18. 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
  19. 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
  20. 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
  21. 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']
  22. 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
  23. 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
  24. Content Rendering 3

  25. Screenshot Demo- Website (TODO) Simplified for the examples

  26. Routing NodeController TypoScript View /homepage.html TYPO3CR Node /sites/demo/homepage@live assign(NodeInterface $node)

    Content Rendering
  27. 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); } }
  28. 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
  29. 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> </f:section> Rendering a Static Page
  30. None
  31. 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 } }
  32. 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
  33. TODO add image of Acme.Demo package (ugly) -> then add

    new image for Phoenix Demo Site
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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"
  39. 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
  40. 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())
  41. 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
  42. Backend Modules 4

  43. None
  44. 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
  45. 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
  46. still un-styled!

  47. still un-styled!

  48. still un-styled!

  49. None
  50. Flow Fluid Neos TYPO3CR Setup Form Eel FlowQuery TypoScript Expose

  51. Neos RequireJS EmberJS Aloha VIE CreateJS Hallo Frontend Editing

  52. Thank You!

  53. ??? ? ? ? ? ? ? ? ? ?

    ?
  54. None