Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
http://www.sxc.hu/photo/1076628
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Backend-Skin in TYPO3 4.4:
Technical changes under the hood
Steffen Ritter <[email protected]>
Steffen Gebert <[email protected]>
TYPO3 Developer Days 2010, Elmshorn
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Introduction
Your speakers
Steffen Ritter
Student, Freelancer
Steffen Gebert
Student, Freelancer
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
TYPO3 4.4
On the surface...
t3skin in version 4.4
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Let‘s breakthe surface!
http://www.flickr.com/photos/blackbird_hollow/3749443815/
Inspiring people toshare
Previous state
Backend-Skin in TYPO3 4.4:Technical changes under the hood
TYPO3 4.3without t3skin
„retroskin“ - styles of 3.x
Inspiring people toshare
Previous state
Backend-Skin in TYPO3 4.4:Technical changes under the hood
TYPO3 4.3with t3skin installed
styles of v4.0 - 4.3
Inspiring people toshare
Previous state
Backend-Skin in TYPO3 4.4:Technical changes under the hood
TYPO3 4.3
retroskin hardcoded in core
EXT:t3skin only adds CSS to core CSS
unnecessary CSS loaded, hard to maintain
t3skincorestyle
sheets
t3skin stylessheets
= +
„retroskin“
Inspiring people toshare
TYPO3 User Experience Week 2009
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Tasks of Team 3
extend skinning API
remove all CSS from core
split up CSS of t3skin
use CSS icon sprites
Fabien Udriot, Steffen Gebert, Thomas Allmer, André Wartmann, Michael Leibenson
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Extend the skinning API
Inspiring people toshare
Skinning API
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Improvements
Skins have to register:$TBE_STYLES[skins][extKey] = array();
Automatic inclusion from every skin: stylesheets/structure/*.css
stylesheets/visual/*.css
Add further directories:$TBE_STYLES[skins][extKey][stylesheetDirectories]
Inspiring people toshare
Skinning API
Backend-Skin in TYPO3 4.4:Technical changes under the hood
CSS for your backend module
Do not misuse skinning API for modules!
No need for hacks:// Mis-using JScode to insert CSS _after_ skin.$this->doc->JScode = '<link rel="stylesheet" href="my.css" />'
Use instead:$this->doc = t3lib_div::makeInstance('bigDoc');
$this->doc->getPageRenderer()->addCssFile();
Available since TYPO3 4.3
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Remove all CSS from core
Inspiring people toshare
Remove core CSS
Backend-Skin in TYPO3 4.4:Technical changes under the hood
TYPO3 4.4
t3skin t3skin stylessheets
=
Inspiring people toshare
Remove core CSS
Backend-Skin in TYPO3 4.4:Technical changes under the hood
TYPO3 4.4without t3skin
„naked“ skin
Inspiring people toshare
Remove core CSS
Backend-Skin in TYPO3 4.4:Technical changes under the hood
„naked“ skin
benefits:
no unneeded CSS transferred
clean CSS as base for skins
only demand:
be able to install any skin
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Split up t3skin CSS
Inspiring people toshare
CSS separation
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Criteria
structure & visual
by context
Inspiring people toshare
CSS separation
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Criteria
structure
width, height
position
top, right
margin, padding
visual
background
border
color
font
Inspiring people toshare
CSS separation
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Conclusion
Benefit:
better structure
know what is defined where
Drawback:
enormous amount of HTTP-Requests
Inspiring people toshare
t3lib_compressor
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Features
takes care of JS and CSS
concatenation
minification
gzip compression
you have to enable it!
Inspiring people toshare
t3lib_compressor
Backend-Skin in TYPO3 4.4:Technical changes under the hood
gzip compression$TYPO3_CONF_VARS[BE][compressionLevel] = 5
has always been there
<FilesMatch "\.js\.gzip$"> AddType "text/javascript" .gzip</FilesMatch><FilesMatch "\.css\.gzip$"> AddType "text/css" .gzip</FilesMatch>AddEncoding gzip .gzip
now also used for CSS/JS resources
needs .htaccess rules:otherwise: naked BE
Example:ext-all.js reduced from 642K to176K
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Sprite Icons
Inspiring people toshare
Sprite Icons
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Sprites?many icons combined into one image
inclusion as background-image using CSS
background-position to select proper icon
.t3-icon {height: 16px;width: 16px;
}.t3-icon-actions {
background-image: url("t3-icon-actions.png");}.t3-icon-actions.t3-icon-document-open {
background-position: 0 -672px;}
<img> is history ;-)
Inspiring people toshare
Backend optimizations
Backend-Skin in TYPO3 4.4:Technical changes under the hood
SpeedupTask:
Log in and open List module
0
85
170
HTTP Requests
v 4.3 v. 4.4
0
1100
2200
IP-Packets0
850
1700
KByte
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Icons and Graphics
new strategy - new technique
Inspiring people toshare
Icons and Graphics
Backend-Skin in TYPO3 4.4:Technical changes under the hood
TYPO3 4.3Icons in typo3/gfx/ and typo3/sysext/t3skin/gfx/
unstructured folders, chaotic filenames
no overview
no streamlined look
many HTTP requests
hardcoded <img>-tags in php classes
Inspiring people toshare
Icons and Graphics
Backend-Skin in TYPO3 4.4:Technical changes under the hood
whishes and aimsnew iconset, streamlined look and feel
structured filestructure for saving icons in fs
reduce http requests on each BE call
remove as much hardcoded html in BE-php classes
easy use of TYPO3 icons in own modules
fancy technical solution
==> implement an public to use sprite-icon-API
Inspiring people toshare
Problems arising?Icons and Graphics
Backend-Skin in TYPO3 4.4:Technical changes under the hood
old functionality in t3lib_iconWorks not usable anymore
all icons used in core have to be changed in php code (hardcoded image tags and sizes)
sprites and controlling CSS have to be maintained
Inspiring people toshare
Icons and Graphics
Backend-Skin in TYPO3 4.4:Technical changes under the hood
TYPO3 4.4changed file structure
clear naming scheme
sprite icon API in t3lib_iconWorks (inclusion)
manager API in t3lib_SpriteManager (handling)available icons, managing CSS and generating sprites
no misuse of icons in wrong context
Inspiring people toshare
Icons and Graphics
Backend-Skin in TYPO3 4.4:Technical changes under the hood
TYPO3 4.4File structures / naming scheme
moving icons to images/icons
clear folder structure / naming adopted from freedesktop.org
COPY an Icon and rename it matching your task instead of just using the icon dedicated to another action
Inspiring people toshare
Icons and Graphics
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Using spritesNew API in t3lib_iconWorks for sprite usage
t3lib_iconWorks::getSpriteIcon()replacing <img src= t3skin_iconWorks::skinImg>
t3lib_iconWorks::getSpriteIconForRecord()replacing t3skin_iconWorks::getIconImage()
t3lib_iconWorks::getSpriteIconForFile()
Inspiring people toshare
Icons and Graphics
Backend-Skin in TYPO3 4.4:Technical changes under the hood
registering icons at SpriteManageraddIconSprite(array $icons, $styleSheetFile)
addSingleIcons(array $icons, $extKey = '')
addTcaTypeIcon($table, $type, $iconFile)
=> all Icon-references should be relative to PATH_site
Inspiring people toshare
Icons and Graphics
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Using sprites
Old function are"deprecated"
make sure to adapt your extensions and BE-modules
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Sprite API/Manager internals
Inspiring people toshare
Sprite API/Manager internals
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Using Sprites - How it worksSprite Icon Api (t3lib_iconWorks)
(find iconname for file or record)
is requested icon present?
generate „bunch“ of CSS classes
wrap it into HTML
action-document-open
t3-icon t3-icon-action t3-icon-document-open
Inspiring people toshare
Sprite API/Manager internals
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Icon available?requesting icon name <=> fileName
how to know if an sprite icon is present?
All icons present in the CURRENT system are placed in $TBE_STYLES['spriteIconApi']['iconsAvailable']
Inspiring people toshare
Sprite API/Manager internals
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Overlaysoverlays are not generated anymore
every overlay is an sprite icon itself
only most important status overlay is automatically rendered
every „normal“ icon can be overlayed
Inspiring people toshare
Sprite API/Manager internals
Backend-Skin in TYPO3 4.4:Technical changes under the hood
SpriteManagergenerates cache of icons available
provides static API to register
own icon sprites,
own single icons
type-icons
is meant to generate sprites of unsprited icons
Inspiring people toshare
Sprite API/Manager internals
Backend-Skin in TYPO3 4.4:Technical changes under the hood
SpriteApi vs. SpriteManagerSprite API
• finding iconnames for files• finding iconnames for records• finding/building overlays• building tags and css classes
=> the actual „icon output“
Sprite Manager
• manages all icons from extensions and core
• build cache and „available icon“ list
• registers type-Icons for extending TCA
• register single icons to be used• builds sprites and css from
registered icons
Inspiring people toshare
Sprite API/Manager internals
Backend-Skin in TYPO3 4.4:Technical changes under the hood
spriteIconGenerator_handlerInterface t3lib_SpriteManager instanciates
responsible to „rebuild“ all sprite-related caches.
CSS files and one php-cache file
may/should generate sprites used in the generated css file
TYPO3 4.4: t3lib_spritemanager_SimpleHandler --> non spriting implementation
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
How To? In depth studies...Demonstrating the simplicity of the new technique
Inspiring people toshare
How To? In depth studies
Backend-Skin in TYPO3 4.4:Technical changes under the hood
In depth Studies - How to...Adapting Page - Module to repesent your FE Layout
Exchanging TYPO3 iconset
Icons in own extensions:
Own tables with TCA - Icons and TypeIcons
New Types or Modules (Pages) in CoreTables
Using own and core icons in BE-Modules
Inspiring people toshare
How To? In depth studies
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Adapting Page-Module to repesent your FE Layout
create a new empty extension
create folder structure as mentioned
register your Extensions as skin
write your CSS for page module
EXT: pagemodulecss
Inspiring people toshare
How To? In depth studies
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Exchanging TYPO3 iconsetcreate a new empty extension - as always :-)
copy t3skin/images/icons/ to you extension
replace all icons with the one you prefer
optional: create sprites of your icons
create CSS files mapping every icon to it‘s class
last two points will be supported by extdeveval soon
Inspiring people toshare
How To? In depth studies
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Exchanging TYPO3 iconsetunregister t3skin icons (extTables.php)unset( $TBE_STYLES[skins][t3skin][stylesheetDirectories][sprites]);
register yourself as a skin extension$TBE_STYLES['skins']['pagemodulecss'] =array();$TBE_STYLES['skins']['myskin']['name']= myskin;
Have fun with your new icons
Inspiring people toshare
How To? In depth studies
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Own Extensions - TYPE-IconUses Cases:
Own PageType,
Own „Contains Module“ in Pages,
new Type for tt_content ....
NEED to Update your Extension for v4.4
add following code to extTables.phpt3lib_SpriteManager::addTcaTypeIcon($table, $type, t3lib_extMgm::extRelPath($EXT_KEY) . /path/to/my/icon.png)
Example:t3lib_spriteManager::addTcaTypeIcon('pages','contains-news' , $pathToNewNewsIcon);
Inspiring people toshare
Further reading
Backend-Skin in TYPO3 4.4:Technical changes under the hood
Web resources
doc_core_skinning (work in progress)http://forge.typo3.org/projects/show/typo3v4-doc_core_skinning
EXT:pagemodulecsshttp://forge.typo3.org/projects/show/extension-pagemodulecss
slides will be available on slideshare.net
Inspiring people toshare
Backend-Skin in TYPO3 4.4:Technical changes under the hood
?????????????
inspiring people to share.