TYPO3 4.4
What‘s inside the new version
21.06.2010
Patrick Lobacher (GF typovision*)
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
1
Dienstag, 22. Juni 2010 1

ABOUT TYPOVISION
• Address:
typovision* new media
Belfortstr. 8
81667 munich
Germany
Phone +49-89-18 92 08 70
Fax +49-89-18 92 08 69
Email info@typovision.de
Web http://www.typovision.de
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 2
Dienstag, 22. Juni 2010 2

INTRODUCTION PACKAGE
Easy setup of a TYPO3 demo site
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
3
Dienstag, 22. Juni 2010 3

INTRODUCTION PACKAGE
• Note: There are steps in the so-called 1-2-3 installer:
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 4
Dienstag, 22. Juni 2010 4

INTRODUCTION PACKAGE
• During installation you can now
choose to setup a blank system
(as before) or setup an
„Introduction package“ with
a predefined website and dummy
content - so you can start to
play with it after installation.
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 5
Dienstag, 22. Juni 2010 5

INTRODUCTION PACKAGE
• Now you can specify a
password and a color sheme
for the created dummy
website
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 6
Dienstag, 22. Juni 2010 6

INTRODUCTION PACKAGE
• After this simple step,
your website is created
automagically ;-)
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 7
Dienstag, 22. Juni 2010 7

INTRODUCTION PACKAGE
• Let‘s start
with TYPO3 -
that easy
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 8
Dienstag, 22. Juni 2010 8

NEW SKIN IN BACKEND
A new look & feel for TYPO3
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
9
Dienstag, 22. Juni 2010 9

NEW SKIN IN BACKEND
• There is now a complete new modern backend skin for
all backend modules, the login screen and the install
tool. It is still called "t3skin".
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 10
Dienstag, 22. Juni 2010 10

NEW SKIN IN BACKEND
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 11
Dienstag, 22. Juni 2010 11

REVISED INSTALLER
New functions and layout
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
12
Dienstag, 22. Juni 2010 12

REVISED INSTALLER
• Just a few clear steps to install
TYPO3
• Install is possible (and now easier) without creating
a ENABLE_INSTALL_TOOL file as a file
FIRST_INSTALL in typo3conf will be used
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 13
Dienstag, 22. Juni 2010 13

REVISED INSTALLER
• The 1-2-3 installer is completely revised to make
installations more easy and intuitive
It‘s even possible to
choose another database
driver at installation
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 14
Dienstag, 22. Juni 2010 14

REVISED INSTALLER
• New Hooks to add new steps in installer process
// Hook to raise the counter for the total steps in the 1-2-3 installer
if (is_array ($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/install/mod/
class.tx_install.php']['additionalSteps'])) {
foreach ($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/install/mod/
class.tx_install.php']['additionalSteps'] as $classData) {
$hookObject = t3lib_div::getUserObj($classData);
$this->totalSteps += (integer) $hookObject->executeAdditionalSteps
($this);
}
}
// Hook to override and add steps to the 1-2-3 installer
if (is_array ($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/install/mod/
class.tx_install.php']['stepOutput'])) {
foreach ($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['ext/install/mod/
class.tx_install.php']['stepOutput'] as $classData) {
$hookObject = t3lib_div::getUserObj($classData);
$hookObject->executeStepOutput($markers, $this->step, $this);
}
}
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 15
Dienstag, 22. Juni 2010 15

REVISED INSTALL TOOL
Increased usability
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
16
Dienstag, 22. Juni 2010 16

REVISED INSTALL TOOL
• The install tool is completely
revised and redesigned -
based on the new t3skin.
• Possibility to log out
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 17
Dienstag, 22. Juni 2010 17

REVISED INSTALL TOOL
• Slightly different skinning
in backend and standalone
access to have a better
integration into the backend
• The old entries „typ3temp/“
and „Clean up database“ are
merged together to
„Clean up“
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 18
Dienstag, 22. Juni 2010 18

EXTJS
throughout the backend
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
19
Dienstag, 22. Juni 2010 19

EXTJS
• The TYPO3 Backend was moved into an ExtJS Viewport. This is one of
the first steps in a sequence to ExtJSify the complete backend.
Currently this gives you the possibility to create your own left sidebar
(like the pagetree) in your backend modules.
• Also you can extend the viewport easily with own code to create e.g.
a collapsable module menu. More information can be found in the
TYPO3 Wiki and the official ExtJS viewport documentation.
• See these links: http://wiki.typo3.org/index.php/TYPO3Viewport and
http://www.extjs.com/deploy/dev/docs/
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 20
Dienstag, 22. Juni 2010 20

EXTJS
• The ExtDirect specification was implemented in the Backend of TYPO3.
You can use it in your own backend modules.
• Details about the specification can be found in the TYPO3 Wiki and on
the ExtJS site.
• See the links: http://wiki.typo3.org/index.php/ExtDirect and http://
www.extjs.com/products/js/direct.php
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 21
Dienstag, 22. Juni 2010 21

MISC-BACKEND
Further improvements
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
22
Dienstag, 22. Juni 2010 22

DEBUG CONSOLE
• The debug in BE was enhanced.
• There is a new debug
console, which will
show each debug in
a single tab.
• The console will pop
up as soon a debug
statement is present.
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 23
Dienstag, 22. Juni 2010 23

STATIC TEMPLATES
• The static templates for some basic designs that were part of the
TYPO3 Core since TYPO3 3.5 are now moved to a system extension
that is not included by default. If you are using one of these templates
(GLUECK, GREEN, CANDIDATE etc) or one of the old table-based
layouts for rendering content (like content (default) or plaintext
rendering), make sure to install the system extension via the TYPO3
Installer.
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 24
Dienstag, 22. Juni 2010 24

RTE IMPROVEMENT
• The RTE has undergone major changes as UI components have been
transformed into ExtJS widgets:
1. The RTE framework becomes an ExtJS Panel comprising the toolbar, the iframe,
the textarea and the status bar. All components are ExtJS objects.
2. When BE textareas are resizable, the framework is resizable as a whole. In the
FE, the framework is always resizable.
3. The toolbar dropdowns become ExtJS
ComboBoxes.
4. The context menu becomes a configurable
ExtJS Menu.
5. Color palettes become ExtJS ColorPalettes.
6. All dialogue windows become ExtJS windows.
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 25
Dienstag, 22. Juni 2010 25

MISC
• Inline Records (IRRE Elements) are now loaded on demand, which is only
when they are opened. This should speed up the editing process drastically.
• The t3editor code completion DB was updated to reflect the latest
additions. Also the syntax highlighting engine was now extracted from the
system extension so it can be used in other places of the TYPO3 Core as
well.
• In the extension manager the configuration option „Enable extensions
without review (basic security check)“ is removed
• TypoScript condition [browser = xxx] checks now for all components, so
[browser = webkit532.5 chrome4.1 safari532.5] checks for all
three browser agent strings and version numbers
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 26
Dienstag, 22. Juni 2010 26

DONATION
• A donate notice will be shown to admins in the TYPO3 backend after using
it for more than three months.
• This behaviour can be disabled completely - see $TYPO3_CONF_VARS[BE]
[allowDonateWindow]
• Click on „Donate now“ brings you
to the official TYPO3 Donation Site
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 27
Dienstag, 22. Juni 2010 27

NEW MANUALS
• The system extensions "CSS Styled
Content" (css_styled_content) and "Frontend User
Login" (felogin) now have new manuals that reflect the
current state of the extension
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 28
Dienstag, 22. Juni 2010 28

SPRITE ICON API
Faster backend with CSS sprites
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
29
Dienstag, 22. Juni 2010 29

SPRITE ICON API
• Instead of using single icon files everywhere
in the backend there is a new API for using
CSS sprites
• A CSS sprite is an image which contains all
needed images - so the amount of files is reduced
• To reference one of the smaller images,
just use CSS to specify the position
.t3-icon-actions-page {
background-image:
url('../../images/sprites/t3-icon-actions-page.png');
}
.t3-icon-actions-page.t3-icon-page-open {
background-position: 0 -62px;
}
•
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 30
Dienstag, 22. Juni 2010 30

SPRITE ICON API
• The API is located in t3lib/class.t3lib_iconworks.php
• The Sprite Icon API helps you to quickly get the HTML for any icon you want - this is
typically wrapped in a <span> tag with corresponding CSS classes that will be
responsible for choosing the corresponding image
• There are three ways to use this API:
• 1) for any given TCA record
$spriteIconHtml = t3lib_iconWorks::getSpriteIconForRecord('pages', $row);
2) for any given file
$spriteIconHtml = t3lib_iconWorks::getSpriteIconForFile('myimage.png');
3) for any other icon you know the name
$spriteIconHtml = t3lib_iconWorks::getSpriteIcon('actions-document-open');
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 31
Dienstag, 22. Juni 2010 31

CSS & JS FILE HANDLING
Compression and versions
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
32
Dienstag, 22. Juni 2010 32

COMPRESSION OF FILES
• With the following configuration it is now possible to compress not only the
HTML output of the rendered page but CSS and JavaScript files as well. Before
the compression, all files will be concatenated.
$TYPO3_CONF_VARS['BE']['compressionLevel']
• If you use compression - add this to .htaccess:
<FilesMatch ".js.gzip$">
AddType "text/javascript" .gzip
</FilesMatch>
<FilesMatch ".css.gzip$">
AddType "text/css" .gzip
</FilesMatch>
AddEncoding gzip .gzip
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 33
Dienstag, 22. Juni 2010 33

VERSIONS OF FILES
• Automatic version-numbers of CSS and JS files to avoid caching problems:
This feature provides automatic numbering of CSS and JS files using the files
modified timestamp. This way the file reference will change when a CSS or JS
files is changed, and by this the browser and proxy will re-cache the file. Can
be configured to include the timestamp within the the filename (before .ext)
or as a parameter to the file (default).
• If versioning is done inside the filename (by setting $TYPO3_CONF_VARS[BE]
[versionNumberInFilename] to true) you need this line as the first rewrite rule
in .htaccess:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+).(d+).(php|js|css|png|jpg|gif|gzip)$ $1.$3 [L]
• IMPORTANT: this rule has to be the very first rule to work properly, at least it
has to be placed before the (^typo3...) rewrite rule
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 34
Dienstag, 22. Juni 2010 34

REVISED TASKCENTER
New layout and code
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
35
Dienstag, 22. Juni 2010 35

REVISED TASK CENTER
• The task center module in the TYPO3 Backend has
undergone a complete refactoring, both visually and
code-wise.
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 36
Dienstag, 22. Juni 2010 36

VERSIONING
Changes
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
37
Dienstag, 22. Juni 2010 37

VERSIONING
• "Page" and "Branch" versioning has been disabled for all installations,
because it is deprecated since TYPO3 4.2. If you still use one of these
versioning types, make sure to set
$TYPO3_CONF_VARS['BE']['elementVersioningOnly'] = FALSE
in your localconf.php.
• Please be aware that this option will vanish with TYPO3 4.6 and that
"Page" and "Branch" versioning is neither supported nor maintained any
longer.
• The dummy "draft workspace" has been disabled for all installations. If
you need it you can enable it again in the extension configuration of the
"version" extension.
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 38
Dienstag, 22. Juni 2010 38

EXTBASE
Changes
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
39
Dienstag, 22. Juni 2010 39

EXTBASE
• New version number of Extbase and Fluid is now 1.2.0
• Extbase has been updated to support "Single Table Inheritance" which is
a breaking change. In TYPO3 4.3, Extbase made a "best guess" for the
table name if it was not the lowercased class name (simply by crawling
the class hierarchy upwards trying to find a mapping rule or table). This
"magic" was removed because it was very hard to understand what
was happening; especially if there was an error. This behaviour is now
changed and you define the recordType and the tableName through
TypoScript now. See the typo3.projecty.typo3v4mvc mailing list for more
details on this topic.
• For more details see: http://forge.typo3.org/issues/5883
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 40
Dienstag, 22. Juni 2010 40

EXTBASE
• Template filenames are expected to be UpperCamelCased from
now on. Before, they were expected to be all lowercase.
• For a grace period there is still a fallback mechanism, so that
your old template filenames will still work. But you should
rename your templates from "myaction.html" to
"MyAction.html" to make sure, that it still works in upcoming
versions of Fluid!
• A message to the deprecation log is generated in case an "old"
template name is found.
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 41
Dienstag, 22. Juni 2010 41

MISC FRONTEND
Changes
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
42
Dienstag, 22. Juni 2010 42

MISC
• HTML5 now is official supported. For frontend simply use these two
config lines:
config.doctype = html_5
config.xmlprologue = none
Backend modules also allow HTML5 configuration, simply choose the
doktype:
$this->doc->docType = 'html_5';
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 43
Dienstag, 22. Juni 2010 43

DEVELOPMENT
Changes & new features
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
44
Dienstag, 22. Juni 2010 44

DEVELOPMENT
• In t3lib_extMgm there is now a way to retrieve the version of an
extension through the static method:
t3lib_extMgm::getExtensionVersion($extensionKey)
• t3lib_div now provides the constants LF, CR, CRLF and TAB which can be
used to improve code readability.
// a tabulator
define('TAB', chr(9));
// a linefeed
define('LF', chr(10));
// a carriage return
define('CR', chr(13));
// a CR-LF combination
define('CRLF', CR . LF);
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 45
Dienstag, 22. Juni 2010 45

DEVELOPMENT - MAIL
• There is now a new API for sending emails t3lib_utility_Mail::mail() that
serves as a proxy for the PHP mail() function, and is now the
recommended way for sending emails, in order to have a central place
to use a different mailing engine.
public static function mail($to, $subject,
$messageBody, $additionalHeaders = null,
$additionalParameters = null)
• Adds the possibility to hook in and send the mails in a different way:
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['t3lib/
utility/class.t3lib_utility_mail.php']
['substituteMailDelivery']
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 46
Dienstag, 22. Juni 2010 46

DEVELOPMENT - HOOKS
• There are new hooks available for you to use:
• t3lib_page::getRecordOverlay (pre and post process)
• t3lib_page::getPageOverlay (used for advanced language-fallsbacks in
the languagevisibility extension)
• several new hooks in the impexp (Import/Export) extension
• alt_doc::makeEditForm() to enable further access-restrictions
• in tslib_fe::settingLanguage()
• in tslib_menu for further filtering of menu items
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 47
Dienstag, 22. Juni 2010 47

SOURCES
Sources for this presentation
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010
48
Dienstag, 22. Juni 2010 48

QUELLEN
• TYPO3 Bug-Tracker
http://bugs.typo3.org
• TYPO3 Changelog
http://forge.typo3.org/repositories/entry/typo3v4-core/
trunk/ChangeLog
• NEWS.txt (have a look in the root dir of your installation)
• The Internet itself
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 49
Dienstag, 22. Juni 2010 49

ABOUT TYPOVISION*
• Full service web agency located in Munich / Germany
• CEO Patrick Lobacher
• Primarily spezializing in TYPO3 since about 6 years
• Founded 16 years ago (net-o-graphic / typofaktum)Über
Over 800 completed projects, >100 with TYPO3
• Customers: Vodafone, Finanzscout 24, AGIP, Contraco,
Siemens, Arbeitsamt München, Langenscheidt, Motorola,
Integralis, ASPECTonline, u.v.a.m
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 50
Dienstag, 22. Juni 2010 50

ABOUT TYPOVISION*
• CEO Patrick Lobacher has published a large number of books and articles
regarding every aspect of TYPO3 - more are planned
• TYPO3 Business areas
• TYPO3 conceptual design, development, programming, integration, administration
(incl. Extbase / Fluid / FLOW3)
• Consulting, Project management
• Training (incl. complete TYPO3-Curriculum, from beginner level to very advanced
topics as well as inhouse trainings and one to one )
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 51
Dienstag, 22. Juni 2010 51

ABOUT TYPOVISION
• Address:
typovision* new media
Belfortstr. 8
81667 munich
Germany
Phone +49-89-18 92 08 70
Fax +49-89-18 92 08 69
Email info@typovision.de
Web http://www.typovision.de
(c) 2010 - typovision* new media | TYPO3 4.4 - What‘s inside | Patrick Lobacher | www.typovision.de | 21.06.2010 52
Dienstag, 22. Juni 2010 52