Download - 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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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?
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
5
TYPO3 Neos - the next generation CMS
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
6
TYPO3 Neos - the next generation CMS
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
10
The TYPO3 World - since October 2012
• TYPO3 CMS• TYPO3 Flow• TYPO3 Neos• TYPO3 Surf
The History of TYPO3 Neos: Die TYPO3 World
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 11
The Architectureof TYPO3 Neos
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 14
The Basics ofTYPO3 Flow & Fluid (101)
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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 :-)
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 21
Installationof TYPO3 Neos
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Installation of TYPO3 Neos - Composer
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
24
Installation of TYPO3 Neos - Composer
• 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
Installation of TYPO3 Neos - Composer
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
28
Installation of TYPO3 Neos - Setup
• Call the Setup routinehttp://neos.demo/setup/
Installation of TYPO3 Neos - Setup
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
29
Installation of TYPO3 Neos - Setup
• The Password is located in the file at the path shown below.
Installation of TYPO3 Neos - Setup
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.
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
30
Installation of TYPO3 Neos - Setup
• 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.
Installation of TYPO3 Neos - Setup
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
31
Installation of TYPO3 Neos - Setup
• 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
Installation of TYPO3 Neos - Setup
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
32
Installation of TYPO3 Neos - Setup
• 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
Installation of TYPO3 Neos - Setup
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
33
Installation of TYPO3 Neos - Setup
• 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
Installation of TYPO3 Neos - Setup
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
34
Installation of TYPO3 Neos
Installation of TYPO3 Neos - Setup
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
35
Installation of TYPO3 Neos
Installation of TYPO3 Neos - Setup
Access to the Installation:
• Frontendhttp://neos.demo/
• Backendhttp://neos.demo/neos/
• Setuphttp://neos.demo/setup/
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 36
Installation on adomainFACTORY Server
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
37
Installation on a domainFACTORY Server
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
38
Installation on a domainFACTORY Server
Installation on a domainFACTORY Server
• 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/.
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
39
Installation on a domainFACTORY Server
Installation on a domainFACTORY Server
• 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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
40
Installation on a domainFACTORY Server
Installation on a domainFACTORY Server
• 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!
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
41
Installation on a domainFACTORY Server
Installation on a domainFACTORY Server
• 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!
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
42
Installation on a domainFACTORY Server
Installation on a domainFACTORY Server
• 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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
43
Installation on a domainFACTORY Server
Installation on a domainFACTORY Server
• add Neos Backend User./flow user:create <username> <password> <firstname> <lastname>
• add Admin Userrole./flow user:addrole <username> Administrator
• Finished :-)
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 44
Nginx Configfor TYPO3 Neos
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
45
Nginx Config for TYPO3 Neos
Nginx Config for TYPO3 Neos
• Credits to: • Christian Kuhn• Christian Müller• Anja Leichsenring
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
46
Nginx Config for TYPO3 Neos
Nginx Config for TYPO3 Neos
• 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; }
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
47
Nginx Config for TYPO3 Neos
Nginx Config for TYPO3 Neos
• 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;
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
48
Nginx Config for TYPO3 Neos
Nginx Config for TYPO3 Neos
• 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; } }
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
49
Nginx Config for TYPO3 Neos
Nginx Config for TYPO3 Neos
• 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"
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
50
Nginx Config for TYPO3 Neos
Nginx Config for TYPO3 Neos
• File Configuration/Settings.yaml
TYPO3: Flow: persistence: backendOptions: dbname: ... user: ... password: ... host: 127.0.0.1 core: subRequestPhpIniPathAndFilename: /etc/php5/cli/php.ini
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 51
Upgradeof TYPO3 Neos
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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!
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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!
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 54
ReleaseNotes
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 56
Featuresof TYPO3 Neos
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Features of TYPO3 Neos
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
58
Features of TYPO3 Neos
• 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)
Features of TYPO3 Neos
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 59
Structure of the Neosuser interface
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
61
Features of TYPO3 Neos - Screenshots
Properties PanelContent-Typee.g. Headline,Content Collection,Page, ...
Propertiescontent specific properties, e.g. page properties, etc.
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
62
Features of TYPO3 Neos - Screenshots
functions menu
Contentswitch between the different sites
WorkspacesAdministration of Workspaces
User Management
Package Management
Sites Management
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
63
Features of TYPO3 Neos - Screenshots
administration of WorkspacesPublish Discard
selection of single
changes
declaration of
Node Type
type of change
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
64
Features of TYPO3 Neos - Screenshots
user administrationEdit Delete
RoleView
addnew user
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
65
Features of TYPO3 Neos - Screenshots
user administration - new user
To add a new user simply provide username, password and personal data.
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
66
Features of TYPO3 Neos - Screenshots
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.
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
67
Features of TYPO3 Neos - Screenshots
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.
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
68
Features of TYPO3 Neos - Screenshots
Package Administration DeleteDeactivate& Activate
Freeze& Unfreeze
select
actionson the
selection
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
69
Features of TYPO3 Neos - Screenshots
Site Administration Overview
DeleteDeactivate& Activate
Edit
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
70
Features of TYPO3 Neos - Screenshots
Site Administration - Editing deactivate Domain
delete Domain
edit Domain
addDomain
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
71
Features of TYPO3 Neos - Screenshots
Wireframe-Mode
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
72
Features of TYPO3 Neos - Screenshots
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.
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
73
Features of TYPO3 Neos - Screenshots
Content Functionsadd a new
Content Elementafter the selected
copyContent Element
cutContent Element
deleteContent Element
disableContent Element
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
74
Features of TYPO3 Neos - Screenshots
Content FunctionsaddLink
remove formatslike bold, italics,hyperlinks, etc.
addTable
add(format free) Clipboard
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
75
Features of TYPO3 Neos - Screenshots
add a Content Element
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 76
Internals ofTYPO3 Neos
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
80
TypoScript: Fluid Template<!DOCTYPE html><html lang="en"><head> <!-- {namespace typo3=TYPO3\Neos\ViewHelpers}{namespace typoScript=TYPO3\TypoScript\ViewHelpers} --> <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"> <!-- ### content ### --> <div class="c cl" id="content"> <!-- ### aside ### --> <div class="a" id="aside"> <typoScript:renderTypoScript path="parts/subMenu" />
TYPO3 Neos Internals: TypoScript - Fluid Template
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 87
technical detailsTypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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.
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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.
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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'
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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'}
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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'
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
95
TypoScript: Prototypes
• 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)
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
96
TypoScript: Prototypes
• 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'
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
97
TypoScript: Prototypes
• 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)
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
98
TypoScript: Prototypes
• 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'
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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)
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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}
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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.
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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.
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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')
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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!
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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!
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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!
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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!
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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!
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
115
TypoScript: Processors - toInteger
• apply a typecast to integer
• Arguments:• none
• Example:test = TYPO3.TypoScript:Valuetest.value = '127.12'test.value << 1.toInteger()
# Result127
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Technical Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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 Details - TypoScript
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 118
Technical DetailsEel
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Technical Details - Eel
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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 Details - Eel
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 122
Technical DetailsFlowQuery
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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.
Technical Details - FlowQuery
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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.
Technical Details - FlowQuery
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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.
Technical Details - FlowQuery
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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]
Technical Details - FlowQuery
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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".
Technical Details - FlowQuery
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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.
Technical Details - FlowQuery
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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.
Technical Details - FlowQuery
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Technical Details - FlowQuery
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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 Details - FlowQuery
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 133
Technical DetailsFizzle
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 135
Structure of theTYPO3 Neos Rendering
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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, ...)
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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'
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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')} }}
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
142
TypoScript: DefaultTypoScript.ts2 (TYPO3.Neos)
• 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}}
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
143
TypoScript: DefaultTypoScript.ts2 (TYPO3.Neos)
• 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)
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
144
TypoScript: DefaultTypoScript.ts2 (TYPO3.Neos)
• 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}
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
145
TypoScript: DefaultTypoScript.ts2 (TYPO3.Neos)
• 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' }
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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()}> <!-- This website is powered by TYPO3 Neos, the next generation CMS, a free Open Source Enterprise Content Management System licensed under the GNU/GPL.
TYPO3 Neos is based on Flow, a powerful PHP application framework licensed under the GNU/LGPL.
More information and contribution opportunities at http://neos.typo3.org and http://flow.typo3.org --> <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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
149
TypoScript: DefaultTypoScript.ts2 (TYPO3.Neos)
• 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' }
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
150
TypoScript: DefaultTypoScript.ts2 (TYPO3.Neos)
• 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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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)
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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' }}
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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' }}
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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"> <!-- put your stylesheet inclusions here, they will be included in your website by TypoScript --> </f:section> <f:section name="scripts"> <!-- put your scripts inclusions here, they will be included in your website by TypoScript --> </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>
TYPO3 Neos Internals: TypoScript Sequence of Execution
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 165
rebuild aTYPO3 Neos Website
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
169
add a Site - Frontend• entering the website‘s url into the browser should bring the following:
Getting started: add a Site
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Getting started: add a Site
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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"> <!-- put your stylesheet inclusions here, they will be included in your website by TypoScript --> </f:section> <f:section name="scripts"> <!-- put your scripts inclusions here, they will be included in your website by TypoScript --> </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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Getting started: add a Site - Analysis Of Root.Ts2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
Getting started: add a Site - Analysis Of Root.Ts2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
Getting started: add a Site - Analysis Of Root.Ts2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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;
Getting started: add a Site - Analysis Of Root.Ts2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
Getting started: add a Site - Analysis Of Root.Ts2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Getting started: add a Site - Analysis Of Root.Ts2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Getting started: add a Site - Analysis Of Root.Ts2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 185
Extension of the SiteSimple Plugin 1
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
187
Plugin: Meta-Tag to declare a Canonical URL
• 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
Example For Plugin 1
IMPORTANT:The Code isindented usingtwo space chars!
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
188
Plugin: Meta-Tag to declare a Canonical URL
• 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')} }}
Example For Plugin 1
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
189
Plugin: Meta-Tag to declare a Canonical URL
• 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
Example For Plugin 1
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
190
Plugin: Meta-Tag to declare a Canonical URL
• 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";}
Example For Plugin 1
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 191
Extension of the SiteSimple Plugin 2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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)
• 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 „Quote“
./flow kickstart:package Typovision.Quote
Example For Plugin 2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
193
Plugin: Quote-FCE (Flexible Content Element)
Example For Plugin 2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
194
Plugin: Quote-FCE (Flexible Content Element)
• 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...
Example For Plugin 2
IMPORTANT:The Code isindented usingtwo space characters!
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
195
Plugin: Quote-FCE (Flexible Content Element)
• 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
Example For Plugin 2
IMPORTANT:The Code isindented usingtwo space characters!
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
196
Plugin: Quote-FCE (Flexible Content Element)
• 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']
Example For Plugin 2
IMPORTANT:The Code isindented usingtwo space characters!
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
197
Plugin: Quote-FCE (Flexible Content Element)
• Step 3: add a TypoScript directory inside of Resources
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')}}
Example For Plugin 2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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>
Example For Plugin 2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
199
Plugin: Quote-FCE (Flexible Content Element)
• 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
Example For Plugin 2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
200
Plugin: Quote-FCE (Flexible Content Element)
• 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;}
Example For Plugin 2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
201
Plugin: Quote-FCE (Flexible Content Element)
• Step 10: refer to this stylesheet in the file: Packages/Sites/Typovision.Demo/Resources/Private/Templates/Page/Default.html
<f:section name="stylesheets"> <!-- put your stylesheet inclusions here, they will be included in your website by TypoScript -->
<link rel="stylesheet" href="../../../Public/Stylesheets/Quote.css" media="all" />
</f:section>
Example For Plugin 2
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 202
Extension of the SiteSimple Plugin 3
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
• 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 „Youtube“
./flow kickstart:package Typovision.Youtube
Example For Plugin 3
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
204
Plugin: Youtube-Content Plugin
Example For Plugin 3
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
205
Plugin: Youtube-Content Plugin
• 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
Example For Plugin 3
IMPORTANT:The Code isindented usingtwo space characters!
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
206
Plugin: Youtube-Content Plugin
• Step 3: add a TypoScript directory inside of Resources
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'}
Example For Plugin 3
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
207
Plugin: Youtube-Content Plugin
• 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>
Example For Plugin 3
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 208
NeosCommand Line Interface
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
210
Neos Command Line Interface - Site• CLI (Command Line interface) Commands are always executed using ./flow
e.g. ./flow typo3.neos:domain:add ...
• 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
Neos Command Line Interface
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
211
Neos Command Line Interface - Site• CLI (Command Line interface) Commands are always executed using ./flow
e.g. ./flow typo3.neos:domain:add ...
• 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
Neos Command Line Interface
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
212
Neos Command Line Interface - User/Role• CLI (Command Line interface) Commands are always executed using ./flow
e.g. ./flow typo3.neos:domain:add ...
• 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"
Neos Command Line Interface
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
213
Neos Command Line Interface - User• CLI (Command Line interface) Commands are always executed using ./flow
e.g. ./flow typo3.neos:domain:add ...
• 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
Neos Command Line Interface
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
214
Neos Command Line Interface - User• CLI (Command Line interface) Commands are always executed using ./flow
e.g. ./flow typo3.neos:domain:add ...
• typo3.neos:user:setpassword (set a password for a user)• Arguments• --username
username the password is set for• --password
the new password
Neos Command Line Interface
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 215
TroubleshootFAQ / Help
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 217
Contribute toTYPO3 Neos
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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!!
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 220
List ofReferences
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de 224
Questions?Or perfectly confused?
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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)
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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©
(c) 2013 - typovision GmbH | TYPO3 Neos - the Compendium | Patrick Lobacher | 16.08.2013 | www.typovision.de
TYPO3 Neos - the Compendium
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
Thank you very muchfor your attention