typo3 neos - the compendium (version 1.0.2)

TYPO3 Neos The Compendium

Patrick LobacherCEO

18.08.2013covering alpha5

Roland SchenkeHead of Web Development

translated into english

(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de

TYPO3 Neos - the Compendium

2

Feedback requested

• Dear Neos Enthusiast!

I try to keep the TYPO3 Neos Compendium on an up-to-date Level. To achieve this I need your Input! If you have ideas regarding Code Examples, FAQ Entries or just want to praise or criticize please do not hesitate to contact me at the following address:

patrick.lobacher [AT] typovision.de

Have fun with the Compendium!Patrick Lobacher & Roland Schenke

Feedback

http://www.typovision.de




3

Changelog

Changelog

Date Modification

2013-08-08 Initial Version / Thanks to Christian Schwerdt for domainFACTORY specific Input

2013-08-09 included proof corrections by Roland Schenke and Michael Oehlhof - Thanks!

2013-08-10 added Nginx-Config - Thanks to Christian Kuhn, Christian Müller and Anja Leichsenring

2013-08-10 added Troubleshoot Section

2013-08-18 translated from german into english by Roland Schenke - Thanks a lot!



(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 4

What isTYPO3 Neos?





5

TYPO3 Neos - the next generation CMS





6

TYPO3 Neos - the next generation CMS





7

The History of TYPO3 Neos starts with TYPO3 CMS

• TYPO3 CMS is a „Enterprise Open Source Content Management Framework“

• TYPO3 CMS exists since 1998 / invented by the Dane Kaspar Skårhøj• approx. 500.000 Installations worldwide / > 5 Mio Downloads• Usage in DE e.g. at > 50% all DAX 500 Enterprises, > 50% all „German

Soccer League“ Clubs, discounter, car rentals, public agencies• > 6.000 Extensions• > 100.000 Developers worldwide• > 1500 Agencies worldwide• funded and backed by the TYPO3 Association

The History of TYPO3 Neos starts with TYPO3 CMS



http://de.wikipedia.org/wiki/Kasper_Sk%C3%A5rh%C3%B8j

http://de.wikipedia.org/wiki/Kasper_Sk%C3%A5rh%C3%B8j



8

The History of TYPO3 Neos: TYPO3 Phoenix

• At the very first T3DD (TYPO3 Developer Days) in 2006, the decision was made to rewrite TYPO3 from scratch.

• Codename: TYPO3 Phoenix (resp. TYPO3 5.0)• some necessary PHP Features were not available at this time• The Project was started by Chiefarchitect Robert Lemke and has been

flanked several months later by Karsten Dambekalns• The "Berlin Manifesto" of 2008 states the differentiation

to the TYPO3 CMShttp://typo3.org/roadmap/berlin-manifesto/

The History of TYPO3 Neos: TYPO3 Phoenix





9

The History of TYPO3 Neos: TYPO3 Flow and Ne0s

• Many base functionalities of a CMS are not specific to a CMS (Session-Handling, Datenbank-Handling, Templating, ...) => therefore outsourcing into an own Framework TYPO3 Flow

• The introduction of Extbase in 2009 made it possible to write TYPO3 CMS extensions which are executable in TYPO3 Flow with minor adjustments

• On 20 October 2011 the Application Framework TYPO3 Flow (once FLOW3) has been released as Final

• TYPO3 Neos ist an Application based on TYPO3 Flow• TYPO3 Neos Alpha 5 in August 2013• First final Version in October 2013 (scheduled)

The History of TYPO3 Neos: TYPO3 Flow and Ne0s





10

The TYPO3 World - since October 2012

• TYPO3 CMS• TYPO3 Flow• TYPO3 Neos• TYPO3 Surf

The History of TYPO3 Neos: Die TYPO3 World




The Architectureof TYPO3 Neos





12

The Architecture of TYPO3 Neos - Backend

The Architecture of TYPO3 Neos - Backend

FluidModern Templating Engine

TYPO3CRContent Repository ( JCR / Sling)

TypoScriptTypoScript 2.0 - next Generation

FormsForm API & Form Builder

ExposeExtensible admin interface

EelEmbedded Expression Language





13

The Architecture of TYPO3 Neos - Frontend

The Architecture of TYPO3 Neos - Frontend

EmberJSJavaScript Web Application Framework

Create.jsWeb Editing Interface

Aloha / HalloHTML5 WYSIWYG Editor

VIE = viejs.orgSemantic Interaction Framework

RequireJSJavaScript file and module loader



http://en.wikipedia.org/wiki/JavaScript

http://en.wikipedia.org/wiki/JavaScript

http://en.wikipedia.org/wiki/Web_application_framework





The Basics ofTYPO3 Flow & Fluid (101)





15

TYPO3 Flow - Base Design

• OOP - Object-Oriented Programming• TDD - Test Driven Development• DDD - Domain Driven Design (Eric Evans)• MVC - Model, View, Controller• AOP - Aspect Oriented Programming (Separation of

Concerns, Cross cutting concerns)• DI - Dependency Injection• ORM - Object Relational Mapping (basied on Doctrine 2,

usage of custom ORM is possible)

TYPO3 Flow - Base Design

Warning:Buzzword Bingo :-)



http://en.wikipedia.org/wiki/Object-oriented_programming

http://en.wikipedia.org/wiki/Object-oriented_programming



16

TYPO3 Flow - Paradigms and Structure

• Packages extend the basis system• Convention over Configuration• Naming of directories and files according to

Ubiquitous Language (e.g. Models)

• Notation of directories, files and classes is UpperCamelCase

• Notation of Properties is lowerCamelCase

TYPO3 Flow - Paradigms and Structure



http://de.wikipedia.org/wiki/Ubiquitous_Computing

http://de.wikipedia.org/wiki/Ubiquitous_Computing



17

TYPO3 Flow - Example: Model

• Entity or Value Object (DDD)• Reflection through

„PHPDoc Annotations“• Validation upon Model• Relations through annotations• ORM can also be

controlled by annotations• Getter and Setter for access

TYPO3 Flow - Domain Model





18

TYPO3 Flow - Example: Repository

• Magic-Methods are available out-of-the-box- findAll()- findBy*propertyName*()- findOneBy*propertyName*()- ...

• Query Manager returns Interfaceof Query

• Query is executed at „usage“of Data

TYPO3 Flow - Repository





19

TYPO3 Flow - Example: Controller

• Dependency Injection through @InjectAnnotation

• Persistence ist automated (at the end of the action)

• Validation is automated (at the beginning of the action)

• Slim-Controller• Methods that get called upon existence

initializeAction()initialize[ActionName]Action()errorAction()

TYPO3 Flow - Controller





20

TYPO3 Fluid - modern templating

• Templating is object oriented• valid XML Code• View Logic in the View!• ViewHelper (Classes)

support the Viewand are arbitrarily reusable

• ViewHelper: forms, links,security, loops like If, formatting, widgets, ...,

TYPO3 Fluid - modern templating




Installationof TYPO3 Neos





22

Requirements of TYPO3 Neos

• Webserver (recommended: Apache 2.x with activated mod_rewrite Module)• PHP 5.3.7 - 5.4.x (the bare minimum PHP 5.3.2 might cause problems)• following funktions must be activated and allowed in PHP: system(), shell_exec(),

escapeshellcmd() und escapeshellarg()• php.ini: memory_limit = 256M or higher• php.ini: xdebug.max_nesting_level = 500 (in case xdebug is used)• php.ini: add the following Options to the end of the file: detect_unicode = Off• php.ini: additionally Magic_Quotes must be deactivated: magic_quotes_gpc = Off• php.ini: the command line of Flow requires a timezone definition:

date.timezone= "Europe/Berlin" (or applicable)• MySQL 5.1.50 - 5.x.x (in principal - every Doctrine DBAL compatible Database can be used)• shell access

Requirements of TYPO3 Neos





23

Installation of TYPO3 Neos - Composer

• Installation is done via „Composer“ (Dependency Manager for PHP) - that‘s the shell access for

cd /path/to/webserver/

curl -sS https://getcomposer.org/installer | php

• This creates the composer.phar file in the current directory• If one would like to use Composer system wide, it can be copied or

moved (this will be assumed in the following)mv composer.phar /usr/local/bin/composer




https://getcomposer.org/installer




24


• Download TYPO3 Neos via Composer:

composer create-project -s alpha --dev typo3/neos-base-distribution TYPO3-Neos

• This takes care of the Installation of TYPO3 Flow, Neos and necessary Modules (incl. 3rd Party like Doctrine 2, Aloha, ...)

• Afterwards one gets directory named TYPO3-Neos, which holds the latest version of Neos

• The installation of Composer under Windows is covered here:http://getcomposer.org/doc/00-intro.md#installation-windows






25

[Alternative:] use git version of TYPO3 Neos

• cloning the latest version of TYPO3 Neos via git:

git clone git://git.typo3.org/Neos/Distributions/Base.git TYPO3-Neos && cd TYPO3-Neos

subsequently these dependencies have to be loaded:

composer install --dev

Installation of TYPO3 Neos - GIT Version





26

Installation of TYPO3 Neos - rights & VirtualHost

• This console command sets the filesystem rights:sudo ./flow flow:core:setfilepermissions shelluser wwwuser wwwgroup

(additional Info: http://docs.typo3.org/flow/TYPO3FlowDocumentation/TheDefinitiveGuide/PartII/Installation.html#file-permissions)

• shelluserThat is the User you‘re logged in on the shell with - can be found out with whoami

• wwwuserThe group the Webserver Process runs with (see file httpd.conf) - under Mac OS X e.g. _www

• wwwgroupThe group the Webserver Process runs with (see file httpd.conf) - under Mac OS X e.g. _wwwwwwuser and wwwgroup might differ if modules like mod_fcgid are used!

Installation of TYPO3 Neos - rights & VirtualHost





27

Installation of TYPO3 Neos - VirtualHost

• Virtual Host Entry (e.g. Apache)NameVirtualHost *:80<VirtualHost *:80> DocumentRoot "/path/to/webserver/TYPO3-Neos/Web/" # during development this line should be kept # commented out, because this changes the Context to # „Production“ - meaning: no Logging, with Caching, ... #Setenv FLOW_CONTEXT Production

ServerName neos.demo <Directory "/path/to/webserver/TYPO3-Neos/Web/"> AllowOverride FileInfo Options=MultiViews </Directory></VirtualHost>

• Entry in /etc/hosts127.0.0.1 neos.demo

Installation of TYPO3 Neos - VirtualHost





28

Installation of TYPO3 Neos - Setup

• Call the Setup routinehttp://neos.demo/setup/






29


• The Password is located in the file at the path shown below.


The file containing the password is deleted afterwards.In case of Oblivion, i.e. it is forgotten, the file

/path/to/webserver/TYPO3-Neos/Data/Persistent/FileBasedSimpleKeyService/SetupKey

is to be deleted and setup called again.





30


• setup of the database• MySQL is preset• the driver can be changed by adjusting

the file:Configuration/Settings.yaml

• If 127.0.0.1 as „DB Host“ does notwork, try to enter localhost instead.






31


• create an administrator account

• User Management provides thepossibility for the creation ofsubsequent user

• that includes adding additional user data

• creation is also possible via console:

./flow typo3.neos:user:create username password firstname lastname






32


• one can import a demo site(recommended)

• or start with a blank website

• as soon as somethingis entered into the form fields,a new site is created






33


• Once the installation cyclesucceeded, the correspondingadvice appears

• If that is not the case, pleasesend me a screenshot of the erroralong with your system configurationto the following address, so I can add a solution to the FAQ

patrick.lobacher [AT] typovision.de






34

Installation of TYPO3 Neos


The Frontend looks like the left-handed image, if the Demo-Site TYPO3.NeosDemoTypo3Org is imported

If an empty site has been created, the following screen is shown





35

Installation of TYPO3 Neos


Access to the Installation:

• Frontendhttp://neos.demo/

• Backendhttp://neos.demo/neos/

• Setuphttp://neos.demo/setup/




Installation on adomainFACTORY Server





37

Installation on a domainFACTORY Server


domainFACTORY Server require a slightly modified Installation

• Credits to: Christian Schwerdt (die Medienagenten oHG)

• An english manual can also be found here:

https://github.com/cschwerdt/TYPO3-NEOS-Install







38



• load Composercurl -s https://getcomposer.org/installer | /usr/local/bin/php5-53STABLE-CLI

• load TYPO3 Neos alpha 5:/usr/local/bin/php5-53LATEST-CLI composer.phar create-project --dev --stability alpha typo3/neos-base-distribution TYPO3-Neos-1.0-alpha5

• Inside the domainFACTORY-Settings the Domain has to be configured to point to the /Web directory inside the /path/to/webserver/.







39



• change the PHP-Path inside the Flow-CLIcd TYPO3-Neos-1.0-alpha5vi flow

The first line has to be changed from

#!/usr/bin/env php

to the following:

#!/usr/local/bin/php5-53STABLE-CLI

Save with

:!wq

or choose any plain text editor you‘re familiar with





40



• adjusting Settings.yaml in Configuration/cd Configuration/cp Settings.yaml.example Settings.yamlvi Settings.yaml

//set database hostdb: 'mysql5.<yourdomain.com>'

//uncomment core: & phpBinaryPathAndFilename//and change phpBinaryPathAndFilename to: core: phpBinaryPathAndFilename: '/usr/local/bin/php5-53STABLE-CLI'

save with:

:wq!





41



• adjusting Settings.yaml in Developmentcd Development/cp Settings.yaml.example Settings.yamlvi Settings.yaml

//set dbname, dbuser, dbpassword:dbname: '<dbname>'user: '<dbuser>'password: '<password>'

save with:

:wq!





42



• Flow Help./flow help

• migrate Database./flow doctrine:migrate

• kickstart a SiteSyntax: ./flow site:kickstart [PackageKey] [SiteName]

./flow site:kickstart Your.Demopage Your.Demopage

• list Sites./flow site:list





43



• add Neos Backend User./flow user:create <username> <password> <firstname> <lastname>

• add Admin Userrole./flow user:addrole <username> Administrator

• Finished :-)




Nginx Configfor TYPO3 Neos





45

Nginx Config for TYPO3 Neos


• Credits to: • Christian Kuhn• Christian Müller• Anja Leichsenring





46



• File /etc/nginx/sites-available/neos.demo (Domain assumed neos.demo)# Upstream to abstract backend connection(s) for phpupstream neos.demo { server unix:/var/run/neos.demo_fpm.sock;} server { server_name neos.demo; root /path/to/webserver/TYPO3-Neos/Web; index index.php; error_log /path/to/webserver/TYPO3-Neos/logs/error_log; access_log /path/to/webserver/TYPO3-Neos/logs/access_log; ## Disable .htaccess and other hidden files location ~ /\. { deny all; access_log off; log_not_found off; } location = /favicon.ico { log_not_found off; access_log off; } location = /robots.txt { allow all; log_not_found off; access_log off; }





47



• File /etc/nginx/sites-available/neos.demo (...continued...) location /_Resources/ {

access_log off; log_not_found off; expires max; break; } location /_Resources/Persistent/ { access_log off; log_not_found off; expires max; rewrite "(.{40})/.+\.(.+)" /_Resources/Persistent/$1.$2 break; rewrite "([a-z0-9]+/(.+/)?[a-f0-9]{40})/.+\.(.+)" /_Resources/Persistent/$1.$2 break; } ### # stop rewriting by existing files | is instead of -> location / { rewrite ".*" /index.php last; } # use this if you want to run other PHP-Applications in TYPO3-Flow/Web directory ### try_files $uri $uri/ /index.php?$args;





48



• File /etc/nginx/sites-available/neos.demo (...last part...) location ~ \.php$ {

fastcgi_index index.php; ### # for FLOW3 <= 1.1.x only | see note #15 on http://forge.typo3.org/issues/8923 ### # fastcgi_param FLOW3_CONTEXT Development; # fastcgi_param FLOW3_CONTEXT Production; # fastcgi_param FLOW3_REWRITEURLS 1; ###

# Make sure that you set the environment vars for new versions \ # of TYPO3-XXXXX(TYPO3-Neos) products properly # see note #15 on http://forge.typo3.org/issues/8923 ### fastcgi_param FLOW_CONTEXT Development; fastcgi_param FLOW_REWRITEURLS 1; fastcgi_split_path_info ^(.+\.php)(.*)$; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; fastcgi_pass neos.domain.tld; include /etc/nginx/fastcgi_params; } }





49



• File /etc/php5/fpm/pool.d/neos.demo.pool.conf

[neos.demo] listen = /var/run/neos.demo.socklisten.owner = neos.demolisten.group = demolisten.mode = 0660 user = neos.demogroup = demo pm = dynamic pm.max_children = 50 pm.start_servers = 5 pm.min_spare_servers = 3pm.max_spare_servers = 10pm.max_requests = 200request_terminate_timeout = 360schdir = /php_admin_value[session.save_path] = "/path/to/webserver/TYPO3-Neos/sessions"# During installation this might not be sufficient, cleaned it up afterwards. # Neos mentions it, add it, restart php-fpm, go on. Sufficient for operation.php_admin_value[open_basedir] = "/path/to/webserver/TYPO3-Neos/:/usr/share/pear:/usr/share/php:/tmp:/usr/local/lib/php:/usr/bin/php"





50



• File Configuration/Settings.yaml

TYPO3: Flow: persistence: backendOptions: dbname: ... user: ... password: ... host: 127.0.0.1 core: subRequestPhpIniPathAndFilename: /etc/php5/cli/php.ini




Upgradeof TYPO3 Neos





52

Upgrade of TYPO3 Neos

Upgrade of TYPO3 Neos

If there is an existing Neos, it can be updated to the latest version quite comfortable using Composer:

cd /path/to/webserver/composer require "typo3/neos:1.0.0-alpha5"composer require "typo3/neosdemotypo3org:1.0.0-alpha5"composer require "typo3/sitekickstarter:1.0.0-alpha5"rm Configuration/PackageStates.php# flush Cache!./flow flow:cache:flush --force

If necessary php composer.phar has to be used!



http://dict.leo.org/#/search=if&searchLoc=0&resultOrder=basic&multiwordShowSingle=on


http://dict.leo.org/#/search=necessary&searchLoc=0&resultOrder=basic&multiwordShowSingle=on




53

Usage of Development Master

Usage of Development Master

If by all means one would like to use the latest (trunk in git lingo) TYPO3 Neos, one can switch to the Development Master

cd /path/to/webserver/composer update# flush Cache!./flow flow:cache:flush --force

If necessary php composer.phar has to be used!








ReleaseNotes





55

Release Notes

Release Notes TYPO3 Neos alpha5 (06.08.2013)

• Live-Validation of Inspector-Fields• Publishing-State is now shown

(green, if everything is published and orange, if there‘s publishing to do)

• access authorisation for Modules have been improved

• Bugfixes: • Multi-Site now work• fixed Redirect to non existend page

• cosmetic changes




Featuresof TYPO3 Neos





57

Features of TYPO3 Neos

• most extensible Enterprise CMF - Content Management Framework• based on the stable TYPO3 Flow Framework, already available in Version 2.0• easy und flexible Content Export/Import• Multi-Domain Support• Multi-Language Support (Version 1.1)• state-of-the-art Technology und Paradigms under the hood (DDD, AOP, RequireJS,

EmberJS, ...)• Intuitive User Interface• Wireframe Mode - Content-Editing without Template• web based Package Management






58


• In-place Content-Editing• own Content Elements (incl. In-place Content-Editing) easily possible• Integration of TYPO3 Flow Applications as Plugins• TypoScript2 / Eel / FlowQuery • Workspaces• Cloud-Ready• Custom Single-Sign-On / Custom Authentification• Audit Logging• Soap/REST/JSON out-of-the-box• TYPO3 Surf for the automatic Deployment (Integration with CI Server like Jenkins)





Structure of the Neosuser interface





60

Features of TYPO3 Neos - Screenshots

Structure of the Admin-InterfaceMenue.g. Content, Workspaces, ...

Page Browser(pagetree)

Editor Markupe.g. alignment, Link, Bold, ...

User-AdministrationLogout and Settings

Publishpublish by clicking the arrow possibility to„auto publish“

Propertiescontent specific properties, e.g. page properties, etc.

Preview Modedisplay of how the page would look live

Wireframe Modedisplay without design





61


Properties PanelContent-Typee.g. Headline,Content Collection,Page, ...

Propertiescontent specific properties, e.g. page properties, etc.





62


functions menu

Contentswitch between the different sites

WorkspacesAdministration of Workspaces

User Management

Package Management

Sites Management





63


administration of WorkspacesPublish Discard

selection of single

changes

declaration of

Node Type

type of change





64


user administrationEdit Delete

RoleView

addnew user





65


user administration - new user

To add a new user simply provide username, password and personal data.





66


User Administration - editing

Here userdata can be edited and extended like a title.

Additionally one can add an arbitrary amount of "electronic addresses" like Email addresses, Skype, etc.

By chosing "primary" one selects the main address.





67


User Administration - InfoThe „Info“ Function gives an overview of all entered data.

A Click on „Delete“ opens a Lightbox, in which the requested action is confirmed and the user warned

about the result.





68


Package Administration DeleteDeactivate& Activate

Freeze& Unfreeze

select

actionson the

selection





69


Site Administration Overview

DeleteDeactivate& Activate

Edit





70


Site Administration - Editing deactivate Domain

delete Domain

edit Domain

addDomain





71


Wireframe-Mode





72


Pagetree

double click to edit the page title

clicking the„+“ Symbol adds

a new page

deletion of a page

Drag&Dropto move pages

single click on the page title to have a preview

on the right

Because of a current bug, one has to manually

refresh the view(reload the browser) to

apply changes.





73


Content Functionsadd a new

Content Elementafter the selected

copyContent Element

cutContent Element

deleteContent Element

disableContent Element





74


Content FunctionsaddLink

remove formatslike bold, italics,hyperlinks, etc.

addTable

add(format free) Clipboard





75


add a Content Element




Internals ofTYPO3 Neos





77

Node Structure

• TYPO3CR Node• Node Name

(serves as Identification)

• Node Type(e.g. Document, Folder, AbstractNode, Content, ContentCollection...)

• Properties(dependent on NodeType)

• easily extendible and easily configurable

Page

Content Section

Content Element

Site root

TYPO3 Neos Internals: Node Structure

Domain Model





78

Node Access

• Access to the Nodes is done through „NodePaths“

TYPO3 Neos Internals: Node Zugriff

/sites/typo3org/home/subpage/main/text1

content

section

pages

site root





79

TypoScript

• TypoScript is a hierarchic, object oriented andprototype based processing language

• Is used by Neos for flexible rendering of content• Objects are e.g. Array, Collection, Case, Menu, Page, Template, Plugin,

Value, ...• Objects have properties that „configure“ the object• TypoScript has access to the respective „Context“ (e.g. pagetree of the

Object „menu“ oder page properties of the object „page“) • There are "processors" that can change the value of properties (similar to

the stdWrap functions of TYPO3 CMS)

TYPO3 Neos Internals: TypoScript



80

TypoScript: Fluid Template<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8"> <f:base/> <meta name="generator" content="TYPO3 Flow" /> <title>Default Template</title> <f:section name="stylesheets"> <link rel="stylesheet" href="../../../Public/Stylesheets/reset.css" media="all" /> </f:section> <f:section name="javascripts"> <script src="../../../Public/JavaScript/main.js"></script> </f:section></head>

<body class="js-off page-landing" id="typo3org"><f:section name="body"> <div class="p t3-reloadable-content" id="page">  <div class="c cl" id="content">  <div class="a" id="aside"> <typoScript:renderTypoScript path="parts/subMenu" />

TYPO3 Neos Internals: TypoScript - Fluid Template



81

TypoScript: Example - Part 1

include: TypoScripts/Library/ContentElements.ts2namespace: TypoScript=TYPO3.TypoScript

page = Pagepage.headerData { stylesheets = Template stylesheets { templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/Page/Default.html' sectionName = 'stylesheets' } javascripts = Template javascripts { templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/Page/Default.html' sectionName = 'javascripts' } title = Template title.templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/TypoScriptObjects/TitleMenu.html' title.items = ${q(node).add(q(node).parents())} title << 1.wrap(prefix:'<title>', suffix: '</title>')}

TYPO3 Neos Internals: TypoScript - Example - Part 1





82

TypoScript: Example - Part 2

page.body { templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/Page/Default.html' sectionName = 'body' parts { mainMenu = Menu mainMenu { entryLevel = 2 templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/TypoScriptObjects/MainMenu.html' maximumLevels = 2 } subMenu = Menu subMenu { entryLevel = 3 templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/TypoScriptObjects/SubMenu.html' maximumLevels = 3 } breadcrumb = Template breadcrumb { templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/TypoScriptObjects/BreadcrumbMenu.html' items = ${q(node).add(q(node).parents())}

TYPO3 Neos Internals: TypoScript - Example - Part 2





83

TypoScript: Processors• Example:

myObject = MyObject { value = 'Rocky' value << 1.wrap(prefix: 'My ', suffix: ' is the best!') } # results in 'My Rocky is the best!'

• additional Processors• crop• date• if, ifEmpty, ifBlank• multiply• override• replace• round• shiftCase• substring• toInteger• trim• wrap

TYPO3 Neos Internals: TypoScript - Prozessoren





84

Eel - Embedded Expression Language• While TypoScript containts Assignments and Processors, with Eel one can form expressions

in the style of myObject.foo = ${q(node).property('bar')}• The Embedded Expression Language (Eel) ist a component to create

Domain Specific Languages (DSL). • Eel provides a comprehensive Syntax to create arbitrary expressions, so the author of the

DSL can focus on the semantics

${foo.bar} // Traversal${foo.bar()} // Method call${foo.bar().baz()} // Chained method call

${foo.bar("arg1", true, 42)} // Method call with arguments${12 + 18.5} // Calculations are possible${foo == bar} // ... and comparisons

${foo.bar(12+18.5, foo == bar)} // and of course also use it inside arguments${[foo, bar]} // Array Literal${{foo: bar, baz: test}} // Object Literal

TYPO3 Neos Internals: Eel - Embedded Expression Language



http://dict.leo.org/#/search=comprehensive&searchLoc=0&resultOrder=basic&multiwordShowSingle=on

http://dict.leo.org/#/search=comprehensive&searchLoc=0&resultOrder=basic&multiwordShowSingle=on



85

FlowQuery• FlowQuery is a kind of jQuery for TYPO3 Flow• FlowQuery provides a way to process content (which is a TYPO3CR Node in Neos) with Eel• There are operations in FlowQuery:• property

access to the properties of a node• filter

filter expressions in „Fizzle“• children

returns all children of a TYPO3CR Node• parents

returns all parents of a TYPO3CR Node• additional operations: add, count, first, get, is, last, ...

TYPO3 Neos Internals: FlowQuery





86

FlowQuery - Examples• amount of comments = amount of child elements of the current node whose name is

"comments", having a property "spam" set to "false"numberOfComments = ${q(node).children('comments').children("[spam = false]").count()}

• breadcrumb menu = current page + all parent pagesbreadcrumb = Templatebreadcrumb { templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/TypoScriptObjects/BreadcrumbMenu.html' items = ${q(node).add(q(node).parents())}}{namespace neos=TYPO3\Neos\ViewHelpers}<f:if condition="{items}"> <ul class="breadcrumbs"> <f:for each="{items}" as="item" reverse="TRUE"> <f:if condition="{item.hiddenInIndex} == 0">

<li> <neos:link.node node="{item}">{item.label}</neos:link.node> </li> </f:if> </f:for>

TYPO3 Neos Internals: FlowQuery - Examples




technical detailsTypoScript





88

TypoScript 2.0 - Übersicht

• because of the usage of TypoScript in TYPO3 CMS, TypoScript in TYPO3 Neos (and so in TYPO3 Flow) is referred to as TypoScript 2.0

• TypoScript is exclusively used for the rendering of content in the frontend (no more backend configuration as known before by TSconfig)

• TypoScript is hierarchic, because it renders hierarchic content• TypoScript ist prototype based (like JavaScript), as it allows to change the properties of

all instances at once• TypoScript is a processing language, because it processes the values in a context and

transforms it into a single return value

Technical Details - TypoScript





89

TypoScript: Objects

• TypoScript is a language to describe TypoScript Objekte• A TypoScript Object has properties• TypoScript Objects have access to a „Context“, which in the end is a list of Variables• TypoScript transforms this Context by using the properties into some output• Typoscript can change this content internally and initiate the rendering of nested

objects (TypoScript Tree)• TypoScript objects are realized by PHP Classes which are instantiated at runtime. Here

a class can be the base of several different objects.






90

TypoScript: Objects

• Valid TypoScript would be like the following• Here TypoScript Paths are always noted in lowerCamelCase and Objects (Prototypes)

in UpperCamelCasefoo = Pagemy.object = Textmy.image = TYPO3.Neos.ContentTypes:Image

• Value assignmentsfoo.myProperty1 = 'Some Property which Page can access'my.object.myProperty1 = "Some other property"my.image.width = ${q(node).property('foo')}

• Values that describe strings have to be enclosed by quotation marks (single or double). Eel expressions are valid values as well.






91

TypoScript: Syntax

• One can note TypoScript in curly braces, i.e. the path before the opening brace is prepended to all paths inside the braces.my { image = Image image.width = 200 object { myProperty1 = 'some property' }}

• This is identical to the following Codemy.image = Imagemy.image.width = 200my.object.myProperty1 = 'some property'






92

TypoScript: Object Instantiation

• Besides, it's possible to assign values at instantiation as shown in the third example (all examples act the same):

someImage = ImagesomeImage.foo = 'bar'

someImage = ImagesomeImage { foo = 'bar'}

someImage = Image { foo = 'bar'}




http://dict.leo.org/#/search=instantiation&searchLoc=0&resultOrder=basic&multiwordShowSingle=on

http://dict.leo.org/#/search=instantiation&searchLoc=0&resultOrder=basic&multiwordShowSingle=on



93

TypoScript Objects are free of sideeffects

• While TypoScript Objects can change their context they are free of sideeffects.

• The context is "cleaned" after the usage of a TypoScript object, even if it has been altered before.

• TypoScript objects can only alter nested TypoScript objects, but not objects "before" or "after" them

• So a TypoScript path in combination with its context always acts the same, no matter at which place it's called






94

TypoScript: Prototypes

• When a TypoScript Object is instantiated (because someone issuedsomeImage = Image), then the prototype of this object is copied and is used as the base of this new object (someImage).

• A Prototype is defined as followed:prototype(MyImage) { width = '500px' height = '600px'}

• Now one can use this object:# The Object someImage has a width of 500px and a height of600 pxsomeImage = MyImage# Now the width is 100px (and the height stays at 600px)someImage.width = '100px'






95


• Prototypes are modifiable:

prototype(MyYouTube) { width = '100px' height = '500px'}

# with this the width for all Instances# is changed to 400pprototype(MyYouTube).width = '400px'

# One can also define new propertiesprototype(MyYouTube).showFullScreen = ${true}

# Prototypen can also be „inherited“prototype(MyImage) < prototype(TYPO3.TypoScript:Template)






96


• By Inheritance, prototypes are "bound" to each other. If one property changes in one instance, it is also changed in the other. prototype(TYPO3.TypoScript:Template).fruit = 'apple'prototype(TYPO3.TypoScript:Template).meal = 'dinner'

# MyImage now has the properties "fruit = apple" and "meal = dinner"prototype(MyImage) < prototype(TYPO3.TypoScript:Template)

# Because of MyImage *extending* the Object Template, # MyImage.fruit likewise has the value 'Banana'prototype(TYPO3.TypoScript:Template).fruit = 'Banana'

• # Because the property „meal“ is overwritten in the child class, # an overwriting in the parent class no longer has any effectprototype(MyImage).meal = 'breakfast'prototype(TYPO3.TypoScript:Template).meal = 'supper'






97


• Prototype inheritance is only possible on a global scope prototype(Foo) < prototype(Bar)

• therefore the following instructions would not be possible

prototype(Foo) < some.prototype(Bar)other.prototype(Foo) < prototype(Bar)prototype(Foo).prototype(Bar) < prototype(Baz)






98


• hierarchic TypoScript Prototypes # Set the property „bar“ (resp. „some.thing“) for all objects of type „Foo“prototype(Foo).bar = 'baz'prototype(Foo).some.thing = 'baz2'

# Set the property „some“ for all objects of type „Foo“, which are inside the # path „some.path“some.path.prototype(Foo).some = 'baz2'

# Set the property „some“ for all objects of type „Bar“# which are inside of objects of type „Foo“prototype(Foo).prototype(Bar).some = 'baz2'

# combination of all possibilities aboveprototype(Foo).left.prototype(Bar).some = 'baz2'






99

TypoScript: Namespaces

• Namespaces can be used at declaration

# defines a Namespace „Acme.Demo“ for the prototype „YouTube“prototype(Acme.Demo:YouTube) { width = '100px' height = '500px'}

• This Namespace is by convention the package key of the package where the TypoScript resides

• Full Qualified Namespaces can be used:

prototype(TYPO3.Neos:ContentCollection.Default) < prototype(TYPO3.Neos:Collection)






100

TypoScript: Namespaces

• By not using a Namespace, the default Namespace TYPO3.Neos is always used.• A Namespace directive can be used to create an own Namespace:namespace Foo = Acme.Demo

# The following instructions are identicalvideo = Acme.Demo:YouTubevideo = Foo:YouTube






101

TypoScript: Properties

• Even though TypoScript objects can access the context directly,one should use properties# We assume a property in the current context# "foo=bar"myObject = MyObject

# the value of the current context's variable "foo"# is explicitly assigned to the "foo" property of "myObject"myObject.foo = ${foo}

• Objects shall exclusively use own properties to generate Output

• Merely at prototype definition one can access the context directly:prototype(MyObject).foo = ${foo}






102

TypoScript: manipulation of the context

• The TypoScript Context kann be manipulated directly by usingthe meta property @override:

myObject = [email protected] = ${foo * 2}

• The above code creates an additional context variable with the name bar and the doubled value of foo.






103

TypoScript: Processors

• Processors allow to manipulate TypoScript properties:

myObject = MyObject { value = 'some value' value << 1.wrap(prefix: 'before ', suffix: ' after')}# Result: 'before some value after'

• usage of multiple processors is possible• The order follows the numerical position in the TypoScript. Following above's example, 2.wrap further processes the result of 1.wrap.






104

TypoScript: Processors• Processors are PHP Classes, which implement \TYPO3\TypoScript\ProcessorInterface• In this class a process($subject) method has to be implemented.• The return value is used as value of the processor.• One can either use the FQON (Fully Qualified Object Name) which allows the usage of own

processors or use an abbreviated form (e.g. \TYPO3\TypoScript\Processors\WrapProcessor or wrap)

• If an abbreviated form is used, Neos changes the initial character into uppercase and adds "Processor.php" to find such a file in Packages\Application\TYPO3.TypoScript\Classes\TYPO3\TypoScript\Processors

• therefore both declarations are identical:value << 1.wrap(prefix: 'before ', suffix: ' after')value << 1.TYPO3\TypoScript\Processors\WrapProcessor(prefix: 'before ', suffix: ' after')






105

TypoScript: Processors - crop• crops a string and replaces it with another string (e.g. three dots ...)

• Arguments:• maximumCharacters (integer): amount of characters the string is cropped• preOrSuffixString (string): string that replaces the cropped text• options (integer): bitmask combination of the following constants:• 1 = CROP_FROM_BEGINNING: crop from the beginning instead of the end• 2 = CROP_AT_WORD: cut at next word boundary• 4 = CROP_AT_SENTENCE: cut at next sentence boundary.

• Example:test = TYPO3.TypoScript:Valuetest.value = 'Lorem ipsum dolor sit amet!'test.value << 1.crop(maximumCharacters: 7, preOrSuffixString:'...', options: 3)# Result... dolor sit amet!






106

TypoScript: Processors - date

• formats a Unix Timestamp according to the PHP date() function

• Arguments:• format (string): sets the format (see date() function)• timezone (string): sets the timezone, see http://php.net/manual/en/

timezones.php

• Example:test = TYPO3.TypoScript:Valuetest.value = '1376604000'test.value << 1.date(format: 'Y-m-d',timezone:'Europe/Berlin')

# Result2013-08-16






107

TypoScript: Processors - if

• returns the content of „trueValue“, if the condition is TRUE, otherwise the content of „falseValue“

• Arguments:• condition (boolean): the condition (or simply TRUE/FALSE)• trueValue (string): the return value if the condition is TRUE• falseValue (string): the return value if the condition is FALSE

• Example:test = TYPO3.TypoScript:Valuetest.value << 1.if(condition:'Hallo',trueValue:'TRUE',falseValue:'FALSE')

# ResultTRUE






108

TypoScript: Processors - ifBlank

• overrides the content if it is blank (without trimming)

• Arguments:• replacement (string): the string that overrides the content if said content is blank

• Example:test = TYPO3.TypoScript:Valuetest.value = ''test.value << 1.ifBlank(replacement:'dummy text!')

# Resultdummy text!






109

TypoScript: Processors - ifEmpty

• overrides the content if it is empty (with trimming)

• Arguments:• replacement (string): the string that overrides the content if said content is empty

• Example:test = TYPO3.TypoScript:Valuetest.value = ' 'test.value << 1.ifEmpty(replacement:'dummy text!')

# Resultdummy text!






110

TypoScript: Processors - override

• overrides the content if it is not empty

• Arguments:• replacement (string): the string that overrides the content if said content is not empty

• Example:test = TYPO3.TypoScript:Valuetest.value = 'Hallo'test.value << 1.override(replacement:'Welt!')

# ResultWelt!






111

TypoScript: Processors - replace

• replaces a part of the value (uses str_replace() in the background)

• Arguments:• search (string): substring that is to be replaced• replace (string): replacement string

• Example:test = TYPO3.TypoScript:Valuetest.value = 'Hallo TypoScript!'test.value << 1.replace(search:'Hallo', replace:'OHai')

# ResultOHai TypoScript!






112

TypoScript: Processors - round

• rounds the value if it is a float(ing point) value - nothing happens if it is an int(eger)

• Arguments:• precision (integer): decimal places

• Example:test = TYPO3.TypoScript:Valuetest.value = 3.14159265359test.value << 1.round(precision:4)

# Result3.1416






113

TypoScript: Processors - shiftCase

• changes the case of a string (upper or lower case)

• Arguments:• direction (string): defines the case• SHIFT_CASE_TO_UPPER (upper) - upper case• SHIFT_CASE_TO_LOWER (lower) - lower case• SHIFT_CASE_TO_TITLE (title) - initial character upper case, rest lower case

• Example:test = TYPO3.TypoScript:Valuetest.value = 'HelloWorld'test.value << 1.shiftCase(direction:'upper')

# ResultHELLOWORLD






114

TypoScript: Processors - substring

• returns a substring of the string

• Arguments:• start (integer): starting from the left boundary (0 = 1st Position, 1 = 2nd Position, ...)• length (integer): length of the substring

• Example:test = TYPO3.TypoScript:Valuetest.value = 'HelloWorld!'test.value << 1.substring(start:5,length:5)

# ResultWorld






115

TypoScript: Processors - toInteger

• apply a typecast to integer

• Arguments:• none

• Example:test = TYPO3.TypoScript:Valuetest.value = '127.12'test.value << 1.toInteger()

# Result127






116

TypoScript: Processors - trim

• remove whitespace on both sides of the string

• Arguments:• none

• Example:test = TYPO3.TypoScript:Valuetest.value = ' 127.12 ' test.value << 1.trim()

# Result127.12






117

TypoScript: Processors - wrap

• pre- or appends a value to a given string

• Arguments:• prefix (string): string that is prepended• suffix (string): string that is appended

• Example:test = TYPO3.TypoScript:Valuetest.value = 'World'test.value << 1.wrap(prefix:'Hello ',suffix:'!')

# ResultHello World!





Technical DetailsEel





119

Eel - Embedded Expression Language

• next to easy TypoScript assignments like myObject.foo = 'bar' it‘s easy to form expressions like myObject.foo = ${q(node).property('bar')} using Eel.

• every Eel expression is noted by ${...• Eel is similar to JavaScript• Eel does not support variable assignments or control structures• Eel supports the usual JavaScript Operators for arithmetic and comparisons• Eel supports the ternary operator: <condition> ? <ifTrue> : <ifFalse>• as soon as Eel accesses an object property, the respective getter is called• object access via the offset notation is supported as follows: foo['bar']

Technical Details - Eel





120

Eel - examples

• the following are examples of valid expressions:• Eel itself does not define own functions or variables, instead it uses the Eel Context

Array where functions and objects, one would like to access, can be defined• Therefore Eel is perfect for the construction of a "domain specific language" which

defines the syntax, but does not provide the semantics of such a DSL• For Eel inside of TypoScript the semantics is defined as follows:

• all Variables of the TypoScript Context are accessible inside the Eel Context• the special variable this always points to the current TypoScript Object Implementation• there is a function q(), which wraps its arguments into a FlowQuery object






121

Eel - Sematic

• the following are examples of valid expressions:

${foo.bar} // Traversal${foo.bar()} // Method call${foo.bar().baz()} // Chained method call

${foo.bar("arg1", true, 42)} // Method call with arguments${12 + 18.5} // Calculations are possible${foo == bar} // ... and comparisons

${foo.bar(12+18.5, foo == bar)} // and of course also use it inside arguments${[foo, bar]} // Array Literal${{foo: bar, baz: test}} // Object Literal





Technical DetailsFlowQuery





123

FlowQuery - jQuery for Flow

• FlowQuery represents the idea of jQuery for Flow and as such has been strongly inspired by it

• FlowQuery is a way to process content (which is a TYPO3CR Node inside of Neos)in an Eel Context

• FlowQuery Operations are implemented through PHP Classes• the respective package containing a specific FlowQuery Operation has to be installed• each Package can add its own FlowQuery Operations• the TYPO3.Eel Package contains a set of basic operations

Technical Details - FlowQuery





124

FlowQuery - add Operation (TYPO3.Eel)

• the add operation adds an additional flowQuery Object to the current

• Example:items = ${q(node).add(q(node).parents())}

Here, the current node is determined and all parent nodes are added. This, for example, is used to create a breadcrumb navigation. It is achieved by the help of the statement above which provides a rootline of the nodes.






125

FlowQuery - count Operation (TYPO3.Eel)

• The count operation returns the amount of objects (or Array items)

• Example:test.value = ${q(node).add(q(node).parents()).count()}

The rootline is determined and enumerated by count() whose value is returned.






126

FlowQuery - first Operation (TYPO3.Eel)

• the first operation returns the first object

• Example:test.value = ${q(node).add(q(node).parents()) .first().property('title')}

At first the rootline is determined, afterwards the first element is selected by first() and this element's property 'title' is returned.

If there are two pages: Home > Compendium, then „Compendium“ is returned.






127

FlowQuery - get Operation (TYPO3.Eel)

• If FlowQuery is used, the result is again a FlowQuery object. The get operation "frees" the result from the "Flow Query".

• Example:test.value = ${q(node).add(q(node).parents()).first().get(0)}

The rootline is determined and by first() the first element is selected. Using get() the result is now transformed into an array (without it would be a FlowQuery object) and the first element is returned.

If there are two pages: Home > Compendium, the following is returned:

Node /sites/demo/homepage/Compendium[TYPO3.Neos:Page]






128

FlowQuery - if Operation (TYPO3.Eel)

• checks if at least one of the elements in the current context matches a given filter

• Example:test.value = ${q(node).if('[instanceof TYPO3.Neos:Page]') ? 'Page' : 'No Page'}

The if operator first checks if the current node is an instance of typeTYPO3.Neos:Page (a normal page). If that is the case "Page" is returned otherwise "No Page".






129

FlowQuery - last Operation (TYPO3.Eel)

• the last operation returns the last object

• Example:test.value = ${q(node).add(q(node).parents()) .last().property('title')}

At first the rootline is determined, afterwards the last element is selected by last() and this element's property 'title' is returned.

If there are two pages: Home > Compendium, then „Home“ is returned.






130

FlowQuery - property Operation (TYPO3.Eel)

• the property operation returns a property of an object• if the property begins with _ (an underscore), internal values are returned, e.g.:• _path (Node Path)

• _nodeType.name (Node Type)

• Example:test.value = ${q(node).property('_path')}

returns the property „title“ of the current node.






131

FlowQuery - children Operation (TYPO3.Eel)

• The children operation returns the child objects of the current object. Inside a page these are the sections or content areas.

• It is possible to a filter option: ...children('main')...

• Example:test.value = ${q(node).children().property('_path')}

Ergebnis:/sites/demo/homepage/Compendium/compendium1/main






132

FlowQuery - filter Operation (TYPO3.Eel)

• The filter operation limits the result‘s set of objects. The filter expression is noted in Fizzle and supports the following operators:• = (equality)• $= (value ends with the operand)• ^= (value begins with the operand)• *= (value contains the operand)• instanceof (checks if the value is an instance of the operator)

• Example:test.value = ${q(node).children().filter('main'). first().property('_path')}

Returns the property „_path“ of the first child node in the path „main“.





Technical DetailsFizzle





134

Fizzle• filter Operations (e.g. filter() in FlowQuery) are written in Fizzle• Property Name Filters• This can be the first part of a filter, like foo, foo.bar or foo.bar.baz

• Attribute Filter • baz[foo]• baz[answer = 42]• baz[foo = "Bar"]• baz[foo = 'Bar']• baz[foo ^= "Bar"]• baz[foo $= "Bar"]• baz[foo *= "Bar"]

• Operators• = (equality)• $= (value ends with the operand)• ^= (value begins with the operand)• *= (value contains the operand)• instanceof (checks if the value is an instance of the operator)

Technical Details - Fizzle




Structure of theTYPO3 Neos Rendering





136

The directory structure of a TYPO3 Flow base:

The directory structure of a TYPO3 Flow base

Files for the build process (Behat, Phing, ...)Neos Configuration (Context, Routes, Settings, PackageStates...)Data (Logs, Setup-Key, Caches, ...)Packages (Application, Framework, Libraries, Sites)Tests (Selenium-Tests)Static Ressourcen (Icons, Fonts, Images, CSS, ...)

Flow Command Line Interface





137

The directory structure of a TYPO3 Neos Site:

The directory structure of a TYPO3 Neos Site

starting point of the TYPO3 Neos Site

Classes (e.g. regisitration Classes)

Configuration (e.g. Node Types)

Private Ressources (e.g. Content, Templates, TypoScript, ...)

public Ressources (Assets, like CSS, Fonts, Images, JS, ...)





138

TypoScript - sequence of loading - Root.ts2

• the rendering in TYPO3 Neos is completely realized in TypoScript 2• At first the following file is loaded and its content interpreted:

Packages/Application/TYPO3.Neos/Resources/Private/TypoScript/Root.ts2

Warning: The resource path omits the „Resources“ part of the physical path!

$mergedTypoScriptCode = $this->readExternalTypoScriptFile('resource://TYPO3.Neos/Private/TypoScript/Root.ts2') . $siteRootTypoScriptCode;

• Afterwards the following file is loaded - it contains the TypoScript Code of the own Site:Packages/Sites/[Vendor.Sitename]/Resources/Private/Typoscripts/Library/Root.ts2

TYPO3 Neos Internals: TypoScript Sequence of Execution





139

TypoScript: Root.ts2 (TYPO3.Neos)

• the file Root.ts2 in the TYPO3.Neos Resources directory subsequently loads the following files:

include: resource://TYPO3.TypoScript/Private/TypoScript/Root.ts2include: resource://TYPO3.Neos/Private/TypoScript/DefaultTypoScript.ts2include: resource://TYPO3.Neos/Private/TypoScript/WireframeMode.ts2include: resource://TYPO3.Neos.NodeTypes/Private/TypoScript/Root.ts2






140

TypoScript: Root.ts2 (TYPO3.TypoScript)

• The file Root.ts2 in the TYPO3.TypoScript Resources directory defines six classes for the respective objects Array, Template, Collection, Case, Matcher and Value. The classes are located atPackages/TYPO3.TypoScript/Classes/TYPO3/TypoScript/TypoScriptObjects:

prototype(TYPO3.TypoScript:Array).@class = 'TYPO3\\TypoScript\\TypoScriptObjects\\ArrayImplementation'prototype(TYPO3.TypoScript:Template).@class = 'TYPO3\\TypoScript\\TypoScriptObjects\\TemplateImplementation'prototype(TYPO3.TypoScript:Collection).@class = 'TYPO3\\TypoScript\\TypoScriptObjects\\CollectionImplementation'prototype(TYPO3.TypoScript:Case).@class = 'TYPO3\\TypoScript\\TypoScriptObjects\\CaseImplementation'prototype(TYPO3.TypoScript:Matcher).@class = 'TYPO3\\TypoScript\\TypoScriptObjects\\MatcherImplementation'prototype(TYPO3.TypoScript:Value).@class = 'TYPO3\\TypoScript\\TypoScriptObjects\\ValueImplementation'






141

TypoScript: DefaultTypoScript.ts2 (TYPO3.Neos)

• next the default TYPO3.Neos TypoScript is loaded and interpreted• Here the Object TYPO3.Neos:ContentCase is inherited from the Object

TYPO3.TypoScript:Case and the properties @position, condition and type havedefault values applied.

• the "case" TypoScript Object renders its child elements

# TYPO3.Neos:ContentCase inherits TYPO3.TypoScript:Case and overrides # the default case with a catch-all condition for the default case, # setting the type variable to the name of the current nodes' node type#prototype(TYPO3.Neos:ContentCase) < prototype(TYPO3.TypoScript:Case) { default { @position = 'end' condition = ${true} type = ${q(node).property('_nodeType.name')} }}






142


• The object TYPO3.Neos:Template is inherited from the Object TYPO3.TypoScript:Template and its property node is set to the context‘s value of node.

# TYPO3.Neos:Template makes the current node available in addition to the # default TYPO3.TypoScript:Template properties#prototype(TYPO3.Neos:Template) < prototype(TYPO3.TypoScript:Template) { node = ${node}}






143


• Furthermore the Object ContentCollection is initialized, which in turn can take content elements later.

# Case TS Object for ContentCollection## Using a Case object allows for defining custom rendering of content # collections for specific node types.## The default case is to render all children of the current content collection # node. This is the case for regular pages: A page contains a content # collection which contains content elements.#prototype(TYPO3.Neos:ContentCollection) { @class = 'TYPO3\\Neos\\TypoScript\\ContentCollectionCaseImplementation'

default { condition = ${true} type = 'TYPO3.Neos:ContentCollection.Default'

@position = 'end'}

}prototype(TYPO3.Neos:PrimaryContentCollection) < prototype(TYPO3.Neos:ContentCollection)






144


• this specifies the default Content-Collection

# Default case for ContentCollection TS Object#prototype(TYPO3.Neos:ContentCollection.Default) < prototype(TYPO3.TypoScript:Collection) { @class = 'TYPO3\\Neos\\TypoScript\\DefaultContentCollectionImplementation'

# The node path is set by the user on TYPO3.Neos:ContentCollection. This # path needs to be copied from the context to the local variable of # ContentCollection.Default

nodePath = ${nodePath} # To enable direct rendering of a ContentCollection we check if the current node is a # content collection already or if the child nodes of a content collection specified # by nodePath should be rendered collection = ${q(node).is('[instanceof TYPO3.Neos:ContentCollection]') ? q(node).children() : q(node).children(this.getNodePath()).children()} itemName = 'node' itemRenderer = TYPO3.Neos:ContentCase}






145


• The TYPO3.Neos:Page Object is constructed (inherited from TYPO3.Neos:Template)• including a template for the rendering of the body, head und backendHeader object

# TYPO3.Neos:Page is the default object used for rendering in most sites#prototype(TYPO3.Neos:Page) < prototype(TYPO3.Neos:Template)prototype(TYPO3.Neos:Page) { templatePath = 'resource://TYPO3.Neos/Private/Templates/TypoScriptObjects/PageTemplate.html' htmlAttributes = ''

body = TYPO3.Neos:Template body.title = ${q(node).property('title')} body.nodePath = ${q(node).property('_path')}

head = TYPO3.TypoScript:Array

backendHeader = TYPO3.Neos:Template backendHeader.templatePath = 'resource://TYPO3.Neos/Private/Templates/TypoScriptObjects/PageHead.html' }




146

Template: TYPO3.Neos/Private/Templates/TypoScriptObjects/PageTemplate.html

• setup of the template (PageTemplate.html){namespace neos=TYPO3\Neos\ViewHelpers}{namespace ts=TYPO3\TypoScript\ViewHelpers}<!DOCTYPE html><html version="HTML+RDFa 1.1" xmlns="http://www.w3.org/1999/xhtml" xmlns:typo3="http://www.typo3.org/ns/2012/Flow/Packages/Neos/Content/" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" {htmlAttributes -> f:format.raw()}>  <head> <f:base /> <meta charset="UTF-8" /> <ts:render path="head" />

<ts:render path="backendHeader" /> </head> <body<f:if condition="{bodyAttributes}"><f:for each="{bodyAttributes}" key="attribute" as="value"> {attribute}="{value -> f:format.raw()}"</f:for></f:if>>

<f:security.ifAccess resource="TYPO3_Neos_Backend_BackendController"> <neos:contentElement node="{node}" page="TRUE" /> </f:security.ifAccess>

<ts:render path="body" /> <neos:backend.container node="{node}"/> </body> </html>



147

Template: TYPO3.Neos/Private/Templates/TypoScriptObjects/PageHead.html

• setup of the PageHeader template (PageHead.html) - Part 1• The JavaScript serves the purpose to emerge directly at the editor of the current page if

one appends /neos to the URL to access the admin interface.

{namespace neos=TYPO3\Neos\ViewHelpers}{namespace ext=TYPO3\ExtJS\ViewHelpers}{namespace aloha=TYPO3\Aloha\ViewHelpers}<script> try { with (window.location) { sessionStorage.setItem( 'TYPO3.Neos.lastVisitedUri', [protocol, '//', host, pathname, (pathname.charAt(pathname.length - 1) === '/' ? '{node.name}.html' : '')].join('') ); } } catch(e) {}</script>






148

Template: TYPO3.Neos/Private/Templates/TypoScriptObjects/PageHead.html

• setup of the PageHeader template (PageHead.html) - Part 2<f:security.ifAccess resource="TYPO3_Neos_Backend_BackendController"> <f:if condition="{0: 'live'} != {0: node.context.workspace.name}"> <script type="text/javascript"> // TODO Get rid of those global variables var ExtDirectInitialization = function() { <ext:extDirect.provider />; }; {neos:backend.javascriptConfiguration()} var Aloha, alohaBaseUrl = '{aloha:baseUri()}'; </script>

<script src="{f:uri.resource(path: 'JavaScript/ext-direct.js', package: 'TYPO3.ExtJS')}"></script> <f:if condition="{neos:backend.shouldLoadMinifiedJavascript()}"> <f:then> <script src="{f:uri.resource(path: 'JavaScript/require.js', package: 'TYPO3.Neos')}" data-main="{f:uri.resource(path: 'JavaScript/ContentModule-built.js', package: 'TYPO3.Neos')}"></script> <link rel="stylesheet" type="text/css" href="{f:uri.resource(path: 'Styles/Includes-built.css', package: 'TYPO3.Neos')}" /> </f:then> <f:else> <script src="{f:uri.resource(path: 'JavaScript/require.js', package: 'TYPO3.Neos')}" data-main="{f:uri.resource(path: 'JavaScript/ContentModuleBootstrap.js', package: 'TYPO3.Neos')}"></script> <link rel="stylesheet" type="text/css" href="{f:uri.resource(path: 'Styles/Includes.css', package: 'TYPO3.Neos')}" /> </f:else> </f:if> </f:if> </f:security.ifAccess>






149


• this sets up the TYPO3.Neos:Shortcut Object (inherited from TYPO3.Neos:Template)• As of version Alpha 5 this is currently not yet usable!

# TYPO.Neos.Shortcut is given a representation for editing purposes#prototype(TYPO3.Neos:Shortcut) < prototype(TYPO3.Neos:Template)prototype(TYPO3.Neos:Shortcut) { templatePath = 'resource://TYPO3.Neos/Private/Templates/TypoScriptObjects/Shortcut.html'

targetMode = ${q(node).property('targetMode')} targetNode = ${q(node).property('targetNode')} firstChildNode = ${q(node).children('[instanceof TYPO3.Neos:Document]').get(0) parentNode = ${q(node).parents().get(0)} } prototype(TYPO3.Neos:ContentCollection).shortcut { condition = ${q(node).is('[instanceof TYPO3.Neos:Shortcut]')} type = 'TYPO3.Neos:Shortcut' }






150


• the TYPO3.Neos:Breadcrumb Object is set up (inherited from TYPO3.Neos:Template), which creates a Breadcrumb menu# TYPO3.Neos:Breadcrumb provides a basic breadcrumb navigation#prototype(TYPO3.Neos:Breadcrumb) < prototype(TYPO3.Neos:Template)prototype(TYPO3.Neos:Breadcrumb) { templatePath = 'resource://TYPO3.Neos/Private/Templates/TypoScriptObjects/BreadcrumbMenu.html' items = ${q(node).add(q(node).parents())}}

• according template{namespace neos=TYPO3\Neos\ViewHelpers}<f:if condition="{items}"> <ul class="breadcrumbs"> <f:for each="{items}" as="item" reverse="TRUE"> <f:if condition="{item.hiddenInIndex} == 0"> <li> <neos:link.node node="{item}">{item.label}</neos:link.node> </li> </f:if> </f:for> </ul></f:if>






151

TypoScript: WireframeMode.ts2 (TYPO3.Neos)• the TypoScript in this file presets different settings specific to the Neos Wireframe Mode in the

„Backend“• especially relating to the markup and the classes• additionally jQuery is integrated






152

TypoScript: Root.ts2 (TYPO3.Neos.NodeTypes)• concrete TS objects are defined here - at first the Menu Object:

# Menu TS Object - extends TYPO3.Neos:Menu and is rendering menus inserted as content elementsprototype(TYPO3.Neos.NodeTypes:Menu) < prototype(TYPO3.Neos:Menu) { templatePath = 'resource://TYPO3.Neos.NodeTypes/Private/Templates/TypoScriptObjects/Menu.html' entryLevel = ${q(node).property('startLevel')} entryLevel << 1.toInteger() maximumLevels = ${q(node).property('maximumLevels')} maximumLevels << 1.toInteger()}

• HTML Template{namespace neos=TYPO3\Neos\ViewHelpers}<neos:contentElement node="{node}" reloadable="TRUE"> <ul> <f:render section="itemsList" arguments="{items: items}" /> </ul></neos:contentElement>

<f:section name="itemsList"> <f:for each="{items}" as="item"> <li class="{item.state}"> <neos:link.node node="{item.node}">{item.label}</neos:link.node> <f:if condition="{item.subItems}"> <ul> <f:render section="itemsList" arguments="{items: item.subItems}" /> </ul> </f:if> </li> </f:for></f:section>






153

TypoScript: Root.ts2 (TYPO3.Neos.NodeTypes)• additional TS objects are defined subsequently - the Html Object:

# HTML TS Objectprototype(TYPO3.Neos.NodeTypes:Html) < prototype(TYPO3.Neos:Template)prototype(TYPO3.Neos.NodeTypes:Html) { templatePath = 'resource://TYPO3.Neos.NodeTypes/Private/Templates/TypoScriptObjects/Html.html' source = ${q(node).property('source')}}

• HTML Template{namespace neos=TYPO3\Neos\ViewHelpers}<neos:contentElement node="{node}"> <div property="typo3:source">{source -> f:format.raw()}</div></neos:contentElement>






154

TypoScript: Root.ts2 (TYPO3.Neos.NodeTypes)• additional TS objects are defined subsequently - the Image Object (1/2):

# Image TS Objectprototype(TYPO3.Neos.NodeTypes:Image) < prototype(TYPO3.Neos:Template)prototype(TYPO3.Neos.NodeTypes:Image) { templatePath = 'resource://TYPO3.Neos.NodeTypes/Private/Templates/TypoScriptObjects/Image.html' image = ${q(node).property('image')} alignment = ${q(node).property('alignment')} alternativeText = ${q(node).property('alternativeText')} title = ${q(node).property('title')} link = ${q(node).property('link')} hasCaption = ${q(node).property('hasCaption')} caption = ${q(node).property('caption')} captionAlignment = ${q(node).property('captionAlignment')} maximumWidth = 2560 maximumHeight = 2560}

• HTML Template{namespace neos=TYPO3\Neos\ViewHelpers}<neos:contentElement node="{node}"> <div class="typo3-image{f:if(condition: alignment, then: ' typo3-image-alignment-{alignment}')}"> <f:render partial="Image" arguments="{ image: image, alternativeText: alternativeText, title: title, link: link, hasCaption: hasCaption, caption: caption, captionAlignment: captionAlignment, maximumWidth: maximumWidth, maximumHeight: maximumHeight }" /> </div></neos:contentElement>






155

TypoScript: Root.ts2 (TYPO3.Neos.NodeTypes)• additional TS objects are defined subsequently - the Image Object (2/2): • Partial HTML Template

{namespace neos=TYPO3\Neos\ViewHelpers}{namespace media=TYPO3\Media\ViewHelpers}<figure> <f:if condition="{image}"> <f:then> <f:if condition="{link}"> <f:then> <a href="{link}"><media:image image="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" /></a> </f:then> <f:else> <media:image image="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" /> </f:else> </f:if> </f:then> <f:else> <img src="{f:uri.resource(package: 'TYPO3.Neos', path: 'Images/dummy-image.png')}" title="Dummy image" alt="Dummy image" /> </f:else> </f:if> <f:if condition="{hasCaption}"> <figcaption{f:if(condition: captionAlignment, then: ' class="alignment-{captionAlignment}"')}><neos:contentElement.editable property="caption">{caption -> f:format.raw()}</neos:contentElement.editable></figcaption> </f:if></figure>






156

TypoScript: Root.ts2 (TYPO3.Neos.NodeTypes)• additional TS objects are defined subsequently - the Headline Object:

# Headline TS Objectprototype(TYPO3.Neos.NodeTypes:Headline) < prototype(TYPO3.Neos:Template)prototype(TYPO3.Neos.NodeTypes:Headline) { templatePath = 'resource://TYPO3.Neos.NodeTypes/Private/Templates/TypoScriptObjects/Headline.html' title = ${q(node).property('title')}}

• HTML Template{namespace neos=TYPO3\Neos\ViewHelpers}<neos:contentElement node="{node}"> <neos:contentElement.editable property="title">{title -> f:format.raw()}</neos:contentElement.editable></neos:contentElement>






157

TypoScript: Root.ts2 (TYPO3.Neos.NodeTypes)• additional TS objects are defined subsequently - the Text Object:

# Text TS Objectprototype(TYPO3.Neos.NodeTypes:Text) < prototype(TYPO3.Neos:Template)prototype(TYPO3.Neos.NodeTypes:Text) { templatePath = 'resource://TYPO3.Neos.NodeTypes/Private/Templates/TypoScriptObjects/Text.html' text = ${q(node).property('text')}}

• HTML Template{namespace neos=TYPO3\Neos\ViewHelpers}<neos:contentElement node="{node}"> <neos:contentElement.editable property="text">{text -> f:format.raw()}</neos:contentElement.editable></neos:contentElement>






158

TypoScript: Root.ts2 (TYPO3.Neos.NodeTypes)• additional TS objects are defined subsequently - the Text with Image Object:

# TextWithImage TS Objectprototype(TYPO3.Neos.NodeTypes:TextWithImage) < prototype(TYPO3.Neos.NodeTypes:Image)prototype(TYPO3.Neos.NodeTypes:TextWithImage) { templatePath = 'resource://TYPO3.Neos.NodeTypes/Private/Templates/TypoScriptObjects/TextWithImage.html' text = ${q(node).property('text')} position = ${q(node).property('position')}}

• HTML Template{namespace neos=TYPO3\Neos\ViewHelpers}<neos:contentElement node="{node}"> <div class="typo3-image{f:if(condition: alignment, then: ' typo3-image-alignment-{alignment}')}"> <f:render partial="Image" arguments="{ image: image, alternativeText: alternativeText, title: title, link: link, hasCaption: hasCaption, caption: caption, captionAlignment: captionAlignment, maximumWidth: maximumWidth, maximumHeight: maximumHeight }" /> </div> <neos:contentElement.editable property="text">{text -> f:format.raw()}</neos:contentElement.editable></neos:contentElement>






159

TypoScript: Root.ts2 (TYPO3.Neos.NodeTypes)• additional TS objects are defined subsequently - the MultiColumn Object:

# Basic implementation of a flexible MultiColumn element, not exposed directly but inherited by all specific MultiColumn content elementsprototype(TYPO3.Neos.NodeTypes:MultiColumn) < prototype(TYPO3.Neos:Template)prototype(TYPO3.Neos.NodeTypes:MultiColumn) { templatePath = 'resource://TYPO3.Neos.NodeTypes/Private/Templates/TypoScriptObjects/MultiColumn.html' layout = ${q(node).property('layout')} columns = TYPO3.TypoScript:Collection columns { collection = ${q(node).children('[instanceof TYPO3.Neos:ContentCollection]')} itemRenderer = TYPO3.Neos.NodeTypes:MultiColumnItem itemName = 'node' }}

• HTML Template{namespace neos=TYPO3\Neos\ViewHelpers}{namespace ts=TYPO3\TypoScript\ViewHelpers}<neos:contentElement node="{node}"> <div class="container columns-{layout}"> <ts:render path="columns" /> </div></neos:contentElement>






160

TypoScript: Root.ts2 (TYPO3.Neos.NodeTypes)• additional TS objects are defined subsequently - the MultiColumnItem Object:

# Abstract render definition for a single content column in a multi column elementprototype(TYPO3.Neos.NodeTypes:MultiColumnItem) < prototype(TYPO3.Neos:Template)prototype(TYPO3.Neos.NodeTypes:MultiColumnItem) { templatePath = 'resource://TYPO3.Neos.NodeTypes/Private/Templates/TypoScriptObjects/MultiColumnItem.html' columnContent = TYPO3.Neos:ContentCollection columnContent { nodePath = '.' }}

• HTML Template {namespace ts=TYPO3\TypoScript\ViewHelpers}<div class="column"> <ts:render path="columnContent" /></div>






161

TypoScript: Root.ts2 (TYPO3.Neos.NodeTypes)• additional TS objects are defined subsequently

the TwoColumn-, ThreeColumn- and Four-Column Object: # Two Column TS Objectprototype(TYPO3.Neos.NodeTypes:TwoColumn) < prototype(TYPO3.Neos.NodeTypes:MultiColumn)

# Three Column TS Objectprototype(TYPO3.Neos.NodeTypes:ThreeColumn) < prototype(TYPO3.Neos.NodeTypes:MultiColumn)

# Four Column TS Objectprototype(TYPO3.Neos.NodeTypes:FourColumn) < prototype(TYPO3.Neos.NodeTypes:MultiColumn)






162

TypoScript: Root.ts2 & Template of the Site (1/3)• finally the Site‘s TypoScript is evaluated• starting with the file Root.ts2 in the following directory

Sites/[Vendor].[Sitename]/Resources/Private/TypoScripts/Library/

• by default, i.e. the kickstarter adds the following TypoScript Code:

/** * Root TypoScript template for the Website Site */page = Pagepage.head { stylesheets = TYPO3.TypoScript:Template stylesheets { templatePath = 'resource://[Vendor].[Sitename]/Private/Templates/Page/Default.html' sectionName = 'stylesheets' } scripts = TYPO3.TypoScript:Template scripts { templatePath = 'resource://[Vendor].[Sitename]/Private/Templates/Page/Default.html' sectionName = 'scripts' }}






163

TypoScript: Root.ts2 & Template of the Site (2/3)• part 2 of the default TypoScript Code added by the kickstarter

...page.body { templatePath = 'resource://[Vendor].[Sitename]/Private/Templates/Page/Default.html' sectionName = 'body' parts { menu = Menu breadcrumb = Breadcrumb } // These are your content areas, you can define as many as you want, just name them and the nodePath. content { main = ContentCollection main.nodePath = 'main' }}




164

TypoScript: Root.ts2 & Template of the Site (3/3)• this is the default HTML Template added by the kickstarter:

<!DOCTYPE html>{namespace typo3=TYPO3\Neos\ViewHelpers}{namespace ts=TYPO3\TypoScript\ViewHelpers}<html><head> <f:section name="stylesheets">  </f:section> <f:section name="scripts">  </f:section></head><body><f:section name="body"> <h1>A freshly created template for your new site!</h1> <nav class="menu"><ts:render path="parts.menu" /></nav> <nav class="breadcrumb"><ts:render path="parts.breadcrumb" /></nav> <div class="content"><ts:render path="content.main" /></div></f:section></body></html>


rebuild aTYPO3 Neos Website





166

starting point• you can either reinstall TYPO3 Neos vom scratch• or (in case of resetting a test system): empty the database content• afterwards execute the following commands, it rebuilds all necessary database

tables and contents:

./flow doctrine:migrate

• finally flush the cache

./flow flow:cache:flush

• an invocation of the frontendshould reveal the following:

Getting started: starting point





167

add a user• to log into the system we need a user• this we can do on the shell by issuing the following command

• ./flow user:create --roles Administrator admin password firstname lastname

• USAGE:./flow user:create [<options>] <username> <password> <first name> <last name>

ARGUMENTS:--username The username of the user to be created--password Password of the user to be created--first-name First name of the user to be created--last-name Last name of the user to be created

OPTIONS:--roles A comma separated list of roles to assign

Getting started: add a user





168

add a Site• a website can be initialized in two different ways• using the Site Manager inside of Neos• via the TYPO3 Flow commandline

cd /path/to/Neos-Installation/./flow site:kickstart Typovision.Demo Website./flow site:import --package-key Typovision.Demo

• Syntax to add a site./flow site:kickstart <PackageKey> <SiteName>

• Syntax to import a Site in TYPO3 Neos./flow site:import --package-key <PackageKey>

(the Import leads to a record in the table typo3_neos_domain_model_site )

• Syntax to list all Sites./flow site:list

Getting started: add a Site





169

add a Site - Frontend• entering the website‘s url into the browser should bring the following:






170

add a Site - created files• Inside of Packages/Sites the kickstarter created

the following structure inside the directory Typovision.Demo incl. the below described files

• Sites.xml

contains the Root Node Definition of the Website

• Default.html

default Template

• Root.ts2

default TypoScript Code






171

add a Site - creates files - Sites.xml• Sites.xml contains the Root Node Definition of the Website

• <?xml version="1.0" encoding="UTF-8"?><root> <site nodeName="demo"> <properties> <name>Website</name> <state>1</state> <siteResourcesPackageKey>Typovision.Demo </siteResourcesPackageKey> </properties> <node identifier="" type="TYPO3.Neos:Page" nodeName="homepage" locale="en_EN"> <properties> <title>Home</title> </properties> </node> </site></root>

Getting started: add a Site - Sites.xml





172

add a Site - MultiSite• if the system contains just one site it can already be accessed via the URL• but in case of multiple site they have to configured by the of Domain Entries• at first a list of all sites is requested

pats-macbook-air-2:TYPO3-Neos patricklobacher$ ./flow site:list

Name Node name Resources package------------------------------------------------------------------ Website2 test Typovision.Test

Website demo Typovision.Demo

Getting started: add a Site - MultiSite





173

add a Site - MultiSite• for each "Node Name" you want to access later you add a Domain Entry

./flow domain:add test neos.dev

• Syntax./flow domain:add <node name> <domain>

• all Domains can be listed with ./flow domain:list

• finally flush the cache./flow flow:cache:flush --force

Getting started: add a Site - MultiSite





174

minimal TypoScript

• at least the following TypoScript is needed - it takes care of importing the template file and return it as an (empty) HTML Website

page = Pagepage.body.templatePath = 'resource://Typovision.Demo/Private/Templates/Page/Default.html'

• {title} can be used now - it is replaced by the title of the current page• you can also use the ViewHelper <ts:render path="parts.menu" />, which takes

care of rendering the TypoScript path page.body.parts.menu

Getting started: add a Site - minimal TypoScript





175

Analysis of Root.ts2• the file Root.ts2 (TypoScript 2.0) is initially parsed and interpreted

• at first an Object with the name "page" is createdand assigned to a Page Object

page = Page

• amongst others the Page Object has two properties:• head (type TYPO3.TypoScript:Array)• body (type TYPO3.Neos:Template)

• these have been defined in TYPO3.Neos/Resources/Private/TypoScript/DefaultTypoScript.ts2

Getting started: add a Site - Analysis of Root.ts2





176

Analysis of Root.ts2 - Header section• the header section is filled with both required stylesheets and JavaScripts.• in both cases the template is loaded and jumped to the respective section

page.head {

stylesheets = TYPO3.TypoScript:Template stylesheets { templatePath = 'resource://Typovision.Demo/Private/Templates/Page/Default.html' sectionName = 'stylesheets' } scripts = TYPO3.TypoScript:Template scripts { templatePath = 'resource://Typovision.Demo/Private/Templates/Page/Default.html' sectionName = 'scripts' }}

Getting started: add a Site - Analysis of Root.ts2



177

Analysis of Root.ts2 - Header section - Template• the Template (resource://Typovision.Demo/Private/Templates/Page/Default.html)

looks like this:

<head> <f:section name="stylesheets">  </f:section> <f:section name="scripts">  </f:section> </head>

• Eventually only the code between the <f:section>-ViewHelper is returned. The <head>-Tag created and returned by TYPO3 Neos itself (because of <ts:render path="head" /> in TYPO3.Neos/Private/Tamplates/TypoScriptObjects/PageTemplate.html)

Getting started: add a Site - Analysis Of Root.Ts2



178

Analysis of Root.ts2 - Body section & Template• it continues by filling the <body> part - therefore a templated is loaded an jumped to

the „body“ section:

page.body { templatePath = 'resource://Typovision.Demo/Private/Templates/Page/Default.html' sectionName = 'body'

• accordingly the surroundings of the associated Template look like this :

<body><f:section name="body"> ...</f:section></body>

• again, only content between the <f:section>-ViewHelper is interpreted






179

Analysis of Root.ts2 - Body section & Template• inside page.body two objects are defined - namely menu of type Menu and breadcrumb of type Breadcrumb:

page.body { parts { menu = Menu breadcrumb = Breadcrumb }

• Inside the template you access these by the <ts:render>-ViewHelper and the relative paths parts.menu resp. parts.breadcrumb :

<h1>A freshly created template for your new site!</h1><nav class="menu"><ts:render path="parts.menu" /></nav><nav class="breadcrumb"><ts:render path="parts.breadcrumb" /></nav><div class="content"><ts:render path="content.main" /></div>






180

Analysis of Root.ts2 - Body section & Template - Menu• responsbile for the rendering of the menu via menu = Menu is the TypoScript under

TYPO3.Neos/Private/Templates/TypoScript/DefaultTypoScript.ts2 and hence the Template templatePath = 'resource://TYPO3.Neos/Private/Templates/TypoScriptObjects/Menu.html': {namespace neos=TYPO3\Neos\ViewHelpers}<neos:contentElement node="{node}" reloadable="TRUE"> <ul> <f:render section="itemsList" arguments="{items: items}" /> </ul></neos:contentElement><f:section name="itemsList"> <f:for each="{items}" as="item"> <li class="{item.state}"> <neos:link.node node="{item.node}">{item.label}</neos:link.node> <f:if condition="{item.subItems}"> <ul> <f:render section="itemsList" arguments="{items: item.subItems}" /> </ul> </f:if> </li> </f:for></f:section>






181

Analysis of Root.ts2 - Body section & Template - Menu• the TypoScript for the Prototype Menu:

prototype(TYPO3.Neos:Menu) < prototype(TYPO3.Neos:Template)prototype(TYPO3.Neos:Menu) { @class = 'TYPO3\\Neos\\TypoScript\\MenuImplementation' templatePath = 'resource://TYPO3.Neos/Private/Templates/TypoScriptObjects/Menu.html'}

• this is how the class menu (in extracts) looks like:class MenuImplementation extends \TYPO3\TypoScript\TypoScriptObjects\TemplateImplementation {

const MAXIMUM_LEVELS_LIMIT = 100;

protected $templatePath = 'resource://TYPO3.Neos/Private/Templates/TypoScriptObjects/Menu.html'; /* 1=1.Level, 2=2.Level, 0=Aktuelles Level, -1=Elternlevel protected $entryLevel = 1; protected $lastLevel; protected $maximumLevels = 1; protected $items; protected $startingPoint; protected $currentNode;






182

Analysis of Root.ts2 - Body section & Template - Breadcrumb• responsbile for the rendering of the menu via breadcrumb = Breadcrumb is the TypoScript

under TYPO3.Neos/Private/Templates/TypoScript/DefaultTypoScript.ts2 and hence the Template templatePath = 'resource://TYPO3.Neos/Private/Templates/TypoScriptObjects/BreadcrumbMenu.html': {namespace neos=TYPO3\Neos\ViewHelpers}<f:if condition="{items}"> <ul class="breadcrumbs"> <f:for each="{items}" as="item" reverse="TRUE"> <f:if condition="{item.hiddenInIndex} == 0"> <li> <neos:link.node node="{item}">{item.label}</neos:link.node> </li> </f:if> </f:for> </ul></f:if>






183

Analysis of Root.ts2 - Body section & Template - Breadcrumb• the TypoScript for the Prototype Breadcrumb:

prototype(TYPO3.Neos:Breadcrumb) < prototype(TYPO3.Neos:Template)prototype(TYPO3.Neos:Breadcrumb) { templatePath = 'resource://TYPO3.Neos/Private/Templates/TypoScriptObjects/BreadcrumbMenu.html' items = ${q(node).add(q(node).parents())}}

• there is no seperate menu class defined






184

Analysis of Root.ts2 - Body section & Template• the Content object is defined inside of page.body:

page.body { content { main = ContentCollection main.nodePath = 'main' }

• likewise it is accessed via the <ts:render>-ViewHelper and the relative path content.main:

<div class="content"><ts:render path="content.main" /></div>

• the first Content Collection is auto-matically named „main“, subsequentContent Collections can be namedindependently





Extension of the SiteSimple Plugin 1





186

Plugin: Meta-Tag to declare a Canonical URL

• Intention: TYPO3 Neos shall be extended in a way to make it possible to enter a Canoical URL in the Backend that is rendered in the Frontend as follows:

<link rel="canonical" href="http://www.typovision.de/canonical" />

• this requires a Flow Package that is used as a Neos Plugin

• Step 1: add a Flow Package - in this case the Vendor is „Typovision“ and the name of the package „Canonical“

./flow kickstart:package Typovision.Canonical

Example For Plugin 1





187


• Step 2: add the file „NodeTypes.yaml“ in Packages/Application/Typovision.Canonical/Configuration/# add a field to the page properties 'TYPO3.Neos:Page': superTypes: - 'TYPO3.Neos:Document' ui: inspector: groups: metaOptions: label: 'Canonical Information' priority: 2 properties: canonicalUrl: type: string ui: label: 'Canonical URL' inspector: group: metaOptions


IMPORTANT:The Code isindented usingtwo space chars!





188


• Step 3: add a TypoScript directory inside of Resources

mkdir -p Packages/Application/Typovision.Canonical/Resources/Private/TypoScripts

• Step 4: create the file Root.ts2 which extends the head-section of a website with a template in which the CanonicalUrl is shown

page.head { canonicalTag = Template canonicalTag { templatePath = 'resource://Typovision.Canonical/Private/Templates/TypoScript/CanonicalTag.html' canonicalUrl = TYPO3.TypoScript:Value canonicalUrl.value = ${q(node).property('canonicalUrl')} }}






189


• Step 5: add a TypoScript directory inside of Templates

mkdir -p Packages/Application/Typovision.Canonical/Resources/Private/Templates/TypoScript

• Step 6: create the file CanonicalTag.html

{namespace ts=TYPO3\TypoScript\ViewHelpers}<link rel="canonical" href="{ts:render(path: 'canonicalUrl')}" />

• Reader‘s exercise: let the tag only be rendered if a Canonical URL has been entered






190


• Step 7: insertion of the TypoScript the file Packages/Sites/Typovision.Demo/Resources/Private/TypoScripts/Library/Root.ts2

include: resource://Typovision.Canonical/Private/TypoScripts/Root.ts2

• Background Knowledge:

Page Properties are saved in the table typo3_typo3cr_domain_model_nodedata at the fieldproperties

in a serialized representation: a:2:{s:5:"title";s:4:"Home";s:12:"canonicalUrl";s:29:"http://www.typovision.de/home";}






192

Plugin: Quote-FCE (Flexible Content Element)

• Intention: TYPO3 Neos shall be extended in a way to make it possible to insert a quotation content element - consisting of a quoted text (editable inline), a source and a URL (both manageable via the Inspector)


• Step 1: add a Flow Package - in this case the Vendor is „Typovision“ and the name of the package „Quote“

./flow kickstart:package Typovision.Quote






193







194


• Step 2: add the file „NodeTypes.yaml“ in Packages/Application/Typovision.Quote/Configuration/'Typovision.Quote:Quote': superTypes: ['TYPO3.Neos:Content'] ui: label: 'Quote' group: 'General' inspector: groups: quoteproperties: label: 'Quote Options' position: 5

• to be continued on the next pages...


IMPORTANT:The Code isindented usingtwo space characters!





195


• Step 2: ...continued („properties“ is indented with 2 spaces): properties: blockquote: type: string ui: label: 'Quote' inlineEditable: true reloadIfChanged: true sourcetitle: type: string ui: label: 'Source of Quote' inspector: group: 'quoteproperties' defaultValue: 'Source of Quote' reloadOnChange: true







196


• Step 2: ...continued („sourceurl“ is indented with 4 spaces):

sourceurl: type: string ui: label: 'URL of the source of Qoute' inspector: group: 'quoteproperties' reloadOnChange: true groups: quoteproperties: ui: label: 'Quote Options' priority: 10 inlineEditableProperties: ['blockquote']







197



mkdir -p Packages/Application/Typovision.Quote/Resources/Private/TypoScripts

• Step 4: create the file Root.ts2 which defines the TypoScript Object Quote:

# Quote TypoScript Objectprototype(Typovision.Quote:Quote) < prototype(TYPO3.Neos:Template)prototype(Typovision.Quote:Quote) { templatePath = 'resource://Typovision.Quote/Private/Templates/TypoScriptObjects/Quote.html' blockquote = ${q(node).property('blockquote')} sourceurl = ${q(node).property('sourceurl')} sourcetitle = ${q(node).property('sourcetitle')}}






198

Plugin: Quote-FCE (Flexible Content Element)• Step 5: add a TypoScriptObjects directory inside of Templates

mkdir -p Packages/Application/Typovision.Quote/Resources/Private/Templates/TypoScriptObjects

• Step 6: create the file Quote.html{namespace t=TYPO3\Neos\ViewHelpers}<t:contentElement node="{node}"> <blockquote cite="{f:uri.external(uri: '{sourceurl}', defaultScheme: 'http')}"> <t:contentElement.editable property="blockquote"> {blockquote} </t:contentElement.editable> </blockquote> <f:if condition="{sourceurl}"> <f:then> <f:link.external uri="{sourceurl}" defaultScheme="http">{sourcetitle}</f:link.external> </f:then> <f:else> {sourcetitle} </f:else> </f:if></t:contentElement>






199


• Step 7: insertion of the TypoScript the file Packages/Sites/Typovision.Demo/Resources/Private/TypoScripts/Library/Root.ts2

include: resource://Typovision.Quote/Private/TypoScripts/Root.ts2

• Step 8: extend the Demo Site‘s structure with two directories

mkdir Packages/Sites/Typovision.Demo/Resources/Publicmkdir Packages/Sites/Typovision.Demo/Resources/Public/Stylesheets

or with one command:mkdir -p Packages/Sites/Typovision.Demo/Resources/Public/Stylesheets






200


• Step 9: create the file Quote.css in:Packages/Sites/Typovision.Demo/Resources/Public/Stylesheets/blockquote { background:#f9f9f9; border-left:10px solid #ccc; margin:1.5em 10px; padding:.5em 10px; quotes:"\201C""\201D""\2018""\2019";}blockquote:before { color:#ccc; content:open-quote; font-size:4em; line-height:.1em; margin-right:.25em; vertical-align:-.4em;}blockquote p { display:inline;}




201


• Step 10: refer to this stylesheet in the file: Packages/Sites/Typovision.Demo/Resources/Private/Templates/Page/Default.html

<f:section name="stylesheets"> 

<link rel="stylesheet" href="../../../Public/Stylesheets/Quote.css" media="all" />

</f:section>



203

Plugin: Youtube-Content Plugin

• Intention: TYPO3 Neos shall be extended in a way to make it possible to insert a content element which takes a YouTube URL and provides a Video Player


• Step 1: add a Flow Package - in this case the Vendor is „Typovision“ and the name of the package „Youtube“

./flow kickstart:package Typovision.Youtube






204







205


• Step 2: add the file „NodeTypes.yaml“ in Packages/Application/Typovision.Youtube/Configuration/'Typovision.Youtube:YouTube': superTypes: ['TYPO3.Neos:Content'] ui: group: 'General' label: 'YouTube Video' inspector: groups: video: label: 'Video' properties: videoUrl: type: string ui: label: 'Video URL' inspector: group: 'video' reloadIfChanged: TRUE







206



mkdir -p Packages/Application/Typovision.Youtube/Resources/Private/TypoScripts

• Step 4: create the file Root.ts2 which defines the TypoScript Object YouTube:

prototype(Typovision.Youtube:YouTube) < prototype(TYPO3.Neos:Template) { templatePath = 'resource://Typovision.Youtube/Private/Templates/TypoScriptObjects/YouTube.html' videoUrl = ${q(node).property('videoUrl')} width = '640' height = '360'}






207


• Step 5: add a TypoScriptObjects directory inside of Templates

mkdir Packages/Application/Typovision.Youtube/Resources/Private/Templates/TypoScriptObjects

• Step 6: create the file Youtube.html angelegt

{namespace neos=TYPO3\Neos\ViewHelpers}<neos:contentElement node="{node}"> <iframe width="{width}" height="{height}" src="{videoUrl}" frameborder="0" allowfullscreen></iframe></neos:contentElement>





NeosCommand Line Interface





209

Neos Command Line Interface - Domain• CLI (Command Line interface) Commands are always executed using ./flow

e.g. ./flow typo3.neos:domain:add ...

• typo3.neos:domain:add (adds a Domain)• Arguments• --site-node-name

Node Name of the Root Node e.g. neostypo3org• --host-pattern

pattern of host e.g. neos.typo3.org

• typo3.neos:domain:delete (deletes a Domain)• Arguments• --host-pattern

pattern of host which is to be deleted e.g. neos.typo3.org

• typo3.neos:domain:list (lists all domains)• Arguments• --host-pattern

optional pattern for a host that is to be looked up e.g. neos.typo3.org

Neos Command Line Interface





210

Neos Command Line Interface - Site• CLI (Command Line interface) Commands are always executed using ./flow


• typo3.neos:site:export (export a Site into XML)• Arguments• --site-name

name of a site that is to be exported, if empty, all sites are exported

• typo3.neos:site:import (import a Site from XML)• Arguments• --package-key

Package-Key where the content shall be imported to• --file-name

filename containing an exported TYPO3 Neos Site in XML






211

Neos Command Line Interface - Site• CLI (Command Line interface) Commands are always executed using ./flow


• typo3.neos:site:list (list all sites)• Arguments

• none

• typo3.neos:site:prune (delete the content of site)• Optionen• --confirmation

get the user‘s confirmation if deletion shall be done






212

Neos Command Line Interface - User/Role• CLI (Command Line interface) Commands are always executed using ./flow


• typo3.neos:user:addrole (add a role to a user)• Arguments• --username

user the role is added to• --role

role to be added like "TYPO3.Neos:Editor" or "TYPO3.Neos:Administrator"

• typo3.neos:user:removerole (remove a role from the user)• Arguments• --username

user from which the role is taken• --role

role to be removed like "TYPO3.Neos:Editor" oder "TYPO3.Neos:Administrator"






213

Neos Command Line Interface - User• CLI (Command Line interface) Commands are always executed using ./flow


• typo3.neos:user:create (add a user)• Arguments• --username

username• --password

password• --first-name

firstname• --last-name

lastname• Options• --roles

A comma separated list of roles to assign






214

Neos Command Line Interface - User• CLI (Command Line interface) Commands are always executed using ./flow


• typo3.neos:user:setpassword (set a password for a user)• Arguments• --username

username the password is set for• --password

the new password





TroubleshootFAQ / Help





216

problems during Installation• When there's an error message in the PHP log, the console, while issuing ./flow help or

in the frontend that is similar to the following:• ...'"typo3eel" is not a valid package key...

workaround: use a fixed composer file:http://downloads.sourceforge.net/project/typo3flow/patched-1147-composer.phar

• There is an error message similar to the following:...Class 'PHPUnit_Framework_Constraint' not found in...

or...imagine... (something indicates of imagine)workaround: delete the PackageStates filerm Configuration/PackageStates.php

Troubleshoot / FAQ / Help




Contribute toTYPO3 Neos





218

We need you!!

• Join the TYPO3 Neos and Flow Team!

• Everybody is needed: Programmer, Architects, UX-Experts, Designer,Documentation, Tester, JS-Specialists, ...

• contact robert[AT]typo3.org

Contribute to TYPO3 Neos: We need you!!





219

Customers wanted!

• firsthand contribution• give early feedback to new Functions, User Interfaces, ...• direct contact und discussion with the developers• if meaningful and resonable, the feedback is adapted

• advantages• take part in the design of the WCMS of the future• have influence in the development• access to developers, architects and UX‘er• networking with other NEOS Customers

• Contact• rasmus[at]typo3.org

Contribute to TYPO3 Neos: Customers wanted




List ofReferences





221

List of References

• TYPO3 Neos Websitehttp://neos.typo3.org/

• TYPO3 Neos Downloadhttp://neos.typo3.org/download.html

• TYPO3 Flow Websitehttp://flow.typo3.org/

• TYPO3 Neos Documentationhttp://docs.typo3.org/neos/TYPO3NeosDocumentation/Index.html

• TYPO3 Flow Documentationhttp://flow.typo3.org/documentation.html

List of References





222

List of References

• TYPO3 Neos Project at forgehttp://forge.typo3.org/projects/typo3neos

• TYPO3 Flow Project at forgehttp://forge.typo3.org/projects/flow3

• Cheatsheet for Fluid (coming soon for Flow)http://www.typovision.de/de/kompetenzen/typo3/

List of References





223

List of References

• GitHub Account of Lelesys (Pankaj Lele / http://www.lelesys.com/)https://github.com/lelesys

• IRC Log from the channel #typo3-neos at Freenodehttp://riesvantwisk.com/cms/home/irc-logs/typo3-neos-irc-log.html

List of References




Questions?Or perfectly confused?





225

about the contributors

Patrick LobacherCEO of typovision GmbH

Veröffentlichungen:

• 42 years, happily married, resident in Munich• Author of 9 tech textbooks und > 40 Technical Articles regarding TYPO3

and web development• self employed in the area of web development since 1994• Certified TYPO3 Integrator since 2009• until 2012 Member of the TYPO3 Core-Teams:

Certification, Extbase and Content Editorial• until 2012 Member of the Expert Advisory Board of the

TYPO3 Association (EAB)• Co-Organizer of the TYPO3camp Munich 2008-2013 and the T3DD12• Speaker at national and international Congresses• Lecturer at leading training institutes and Munich „Volkshochschule“

(adult education centre / adult evening classes)





226

about the contributors

Roland Schenke

• 33 years, single, resident in Lüneburg• convinced uncle, respected brother-in-law, beloved brother• devoted to languages, linguistics and communication theory• freelancer in the area of web development since 2007• self employed with 3 associate partners since 2013• first experience with TYPO3 at Version 3.8• Bronze Member of the TYPO3 Association since 2012• Member of the TYPO3 Editorial Team since 2012

Head of Web Development at BuildingPossibilities©





227

about typovision GmbH

• Munich based Fullservice Agency for digital Communication• 39 permanent employees (+ 14 from a fixed Pool of Freelancer)• CEOs: Sebastian Böttger, Patrick Lobacher• highly specialized in TYPO3 for 11 years and Solr

• Presentation under: www.typovision.de/dieagentur

• over 400 TYPO3 Projects of any size - for customers like:

TYPO3 PLATINUMMEMBER



http://www.typovision.de/dieagentur

http://www.typovision.de/dieagentur

Thank you very muchfor your attention