Introduktion til Neos - TYPO3 Camp Danmark

Transcript

1. Friday, March 15, 13
2. Aske Ertmann TYPO3 Neos and Flow Core Team Member aertmann@gmail.com Friday, March 15, 13
3. Friday, March 15, 13
4. νέος /néos/ new, fresh, revolutionary, uncommon Friday, March 15, 13
5. Demo Friday, March 15, 13
6. Flow Fluid Neos TYPO3CR Setup Form Eel FlowQuery TypoScript Expose Friday, March 15, 13
7. Flow Fluid Neos TYPO3CR Setup Form Eel FlowQuery TypoScript Expose Friday, March 15, 13
8. Neos RequireJS Ember.js Aloha VIE Create.js Hallo Frontend Editing Friday, March 15, 13
9. jQuery jQuery UI Twitter Bootstrap Plupload Ember.js Create.js Chosen Codemirror Dynatree Underscore.js Font Awesome jCrop Hallo jQuery popover jQuery Hotkeys spin.js VIE Aloha Backbone RequireJS Friday, March 15, 13
10. What You See Is What You Get Friday, March 15, 13
11. Friday, March 15, 13
12. Friday, March 15, 13
13. Content Repository TYPO3.TYPO3CR Friday, March 15, 13
14. Mål Gem, læs og opdater dybt strukturede indhold på en generel måde. Versioner, oversæt, synkroniser. Content Repository TYPO3.TYPO3CR Friday, March 15, 13
15. Mål Gem, læs og opdater dybt strukturede indhold på en generel måde. Versioner, oversæt, synkroniser. Content Repository TYPO3.TYPO3CR baseret på noder Friday, March 15, 13
16. Mål Gem, læs og opdater dybt strukturede indhold på en generel måde. Versioner, oversæt, synkroniser. Content Repository TYPO3.TYPO3CR baseret på noder hierarkisk struktur Friday, March 15, 13
17. Mål Gem, læs og opdater dybt strukturede indhold på en generel måde. Versioner, oversæt, synkroniser. Content Repository TYPO3.TYPO3CR baseret på noder hierarkisk struktur workspace support Friday, March 15, 13
18. Mål Gem, læs og opdater dybt strukturede indhold på en generel måde. Versioner, oversæt, synkroniser. Content Repository TYPO3.TYPO3CR baseret på noder hierarkisk struktur workspace support oversættelse support Friday, March 15, 13
19. first Text headline Title text main Section screen Image uri screenshot.jpg caption The Login of Neos homepage Page title Neos Demo Page Friday, March 15, 13
20. first Text headline Try Out Neos Today! text Fetch the Download and run it ... user-sebastian main Section screen Image uri screenshot.jpg caption The Login of Neos homepage Page title Neos Demo Page two TwoColumn user-sebastian Friday, March 15, 13
21. first Text headline Title text main Section screen Image uri screenshot.jpg caption The Login of Neos homepage Page title Neos Demo Page two TwoColumn Friday, March 15, 13
22. Node struktur site root page content section content element representation of domain models Friday, March 15, 13
23. /sites/typo3org/home/subpage/main/text1 site root pages section content Node stier Friday, March 15, 13
24. TYPO3CR Content Types TYPO3.Neos.ContentTypes/Configuration/NodeTypes.yaml 'TYPO3.Neos.ContentTypes:Text': superTypes: ['TYPO3.Neos.ContentTypes:ContentObject'] ui: label: 'Text' group: 'General' icon: light: 'Images/Icons/White/doc_lines_stright_icon-16.png' dark: 'Images/Icons/Black/doc_lines_stright_icon-16.png' properties: text: type: string defaultValue: '<p>Enter text here</p>' ui: inlineEditable: true Friday, March 15, 13
25. Brug af 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 Friday, March 15, 13
26. Content Rendering Friday, March 15, 13
27. Content Rendering Friday, March 15, 13
28. Routing /homepage.html Content Rendering Friday, March 15, 13
29. Routing NodeController /homepage.html TYPO3CR Node /sites/demo/homepage@live Content Rendering Friday, March 15, 13
30. Routing NodeController TypoScript View /homepage.html TYPO3CR Node /sites/demo/homepage@live assign(NodeInterface $node) Content Rendering Friday, March 15, 13
31. TypoScript 2 TYPO3.TypoScript Friday, March 15, 13
32. TypoScript 2 TYPO3.TypoScript Friday, March 15, 13
33. Mål Et deklarativt sprog til komponent baserede visninger TypoScript 2 TYPO3.TypoScript Friday, March 15, 13
34. Acme.Demo/Resources/Private/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 af en statisk side Acme.Demo/Resources/Private/Templates/Page.html <f:section name="body"> <h1>A freshly created template for your new site!</h1> </f:section> Friday, March 15, 13
35. Friday, March 15, 13
36. Rendering af en side Acme.Demo/Resources/Private/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 main.nodePath = 'main' } } Friday, March 15, 13
37. 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 af en side Friday, March 15, 13
38. TODO add image of Acme.Demo package (ugly) -> then add new image for Phoenix Demo Site Friday, March 15, 13
39. TYPO3.Neos.ContentTypes/Resources/Private/TypoScript/Root.ts2 Defination af en side Friday, March 15, 13
40. TYPO3.Neos.ContentTypes/Resources/Private/TypoScript/Root.ts2 Defination af en side # Page TS Object prototype(TYPO3.Neos.ContentTypes:Page) < prototype(TYPO3.TypoScript:Template) prototype(TYPO3.Neos.ContentTypes:Page) { templatePath = 'resource://TYPO3.Neos.ContentTypes/Private/Templates/TypoScriptObjects/ PageTemplate.html' body = TYPO3.TypoScript:Template body.title = ${q(node).property('title')} body.nodePath = ${q(node).property('_path')} headerData = TYPO3.TypoScript:Array backendHeader = TYPO3.TypoScript:Template backendHeader.templatePath = 'resource://TYPO3.Neos.ContentTypes/Private/Templates/ TypoScriptObjects/PageHead.html' htmlAttributes = '' } Friday, March 15, 13
41. Refe- rence FlowQuery TYPO3.Eel Friday, March 15, 13
42. Refe- rence q(node).property("title") FlowQuery TYPO3.Eel Friday, March 15, 13
43. Refe- rence q(node).property("title") Goal Provide helper functions for working with TYPO3CR nodes in Eel like jQuery for JavaScript and the DOM. FlowQuery TYPO3.Eel Friday, March 15, 13
44. 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 FlowQuery TYPO3.Eel Friday, March 15, 13
45. 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 FlowQuery TYPO3.Eel Friday, March 15, 13
46. 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 Friday, March 15, 13
47. Flow Query Examples node: context expression result home Page title Home cms Page title CMS desc Conte... neos Page title Neos desc Flow... Friday, March 15, 13
48. Flow Query Examples node: context expression result q(node).property("title“) home Page title Home cms Page title CMS desc Conte... neos Page title Neos desc Flow... Friday, March 15, 13
49. Flow Query Examples node: context expression result "Home" q(node).property("title“) home Page title Home cms Page title CMS desc Conte... neos Page title Neos desc Flow... Friday, March 15, 13
50. Flow Query Examples node: context expression result "Home" q(node).property("title“) home Page title Home cms Page title CMS desc Conte... q(node) .children("[title=CMS]") .property("description") neos Page title Neos desc Flow... Friday, March 15, 13
51. 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... Friday, March 15, 13
52. 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... q(node) .add(q(node).children()) Friday, March 15, 13
53. 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()) Friday, March 15, 13
54. TYPO3.Neos.ContentTypes/Resources/Private/TypoScript/Root.ts2 Brug af FlowQuery Friday, March 15, 13
55. TYPO3.Neos.ContentTypes/Resources/Private/TypoScript/Root.ts2 Brug af FlowQuery # Basic implementation of a flexible MultiColumn element, not exposed directly but inherited by all specific MultiColumn content elements prototype(TYPO3.Neos.ContentTypes:MultiColumn) < prototype(TYPO3.TypoScript:Template) prototype(TYPO3.Neos.ContentTypes:MultiColumn) { templatePath = 'resource://TYPO3.Neos.ContentTypes/Private/Templates/TypoScriptObjects/ MultiColumn.html' layout = ${q(node).property('layout')} columns = TYPO3.TypoScript:Collection columns { collection = ${q(node).children('[instanceof TYPO3.Neos.ContentTypes:Section]')} itemRenderer = TYPO3.Neos.ContentTypes:MultiColumnItem } } Friday, March 15, 13
56. 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' Friday, March 15, 13
57. 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')} } Friday, March 15, 13
58. 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> Friday, March 15, 13
59. 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 Friday, March 15, 13
60. Backend Modules 4 Friday, March 15, 13
61. Friday, March 15, 13
62. 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' Friday, March 15, 13
63. 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 Friday, March 15, 13
64. Expose Admin Interface TYPO3.Expose Refe- rence Friday, March 15, 13
65. Goal Provide a generic and extensible admin interface for all kinds of data. Expose Admin Interface TYPO3.Expose Refe- rence Friday, March 15, 13
66. Goal Provide a generic and extensible admin interface for all kinds of data. Expose Admin Interface TYPO3.Expose Refe- rence Listing and Editing Friday, March 15, 13
67. 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 Friday, March 15, 13
68. 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 Friday, March 15, 13
69. still un-styled! Friday, March 15, 13
70. still un-styled! Friday, March 15, 13
71. still un-styled! Friday, March 15, 13
72. Fede ting i Neos Friday, March 15, 13
73. Inline-editing Friday, March 15, 13
74. Wireframe mode Friday, March 15, 13
75. CMS with a Framework with a CMS Friday, March 15, 13
76. Automatic workspaces / TYPO3CR Friday, March 15, 13
77. Fluid Friday, March 15, 13
78. TypoScript 2 Friday, March 15, 13
79. + alt det fede fra Flow Friday, March 15, 13
80. Built for deployment & distribution & continuous integration Friday, March 15, 13
81. Web service Friday, March 15, 13
82. Form framework Friday, March 15, 13
83. Command-line native Friday, March 15, 13
84. Clean architecture Friday, March 15, 13
85. Authentication integration Friday, March 15, 13
86. Doctrine Friday, March 15, 13
87. Composer Friday, March 15, 13
88. Buzzword compliant DDD / AOP / DI Friday, March 15, 13
89. Multilevel cache prepared for Varnish (et al.) Friday, March 15, 13
90. Migrations / Upgrade path Friday, March 15, 13
91. Browser support Oversættelse Listemodul Publicerings workflow Søgning Rettighedsstyring Neos i dit næste projekt? Friday, March 15, 13
92. Roadmap Media browser Link browser User Interface Design TYPO3 CMS til Neos migrering Oversat User Interface Domain Model Management Module Bruger roller og håndtering Multi-sprog håndtering Søgning 2013 Friday, March 15, 13
93. Start i dag! neos.typo3.org Friday, March 15, 13
94. Join the effort Friday, March 15, 13
95. Friday, March 15, 13