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.

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
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
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
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!
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. ??? ? ? ? ? ? ? ? ? ? ?