backend-skin in typo3 4.4: technical changes under the hood (t3dd10)

Inspiring people toshare

Backend-Skin in TYPO3 4.4:Technical changes under the hood

http://www.sxc.hu/photo/1076628





Backend-Skin in TYPO3 4.4:

Technical changes under the hood

Steffen Ritter <[email protected]>

Steffen Gebert <[email protected]>

TYPO3 Developer Days 2010, Elmshorn

mailto:[email protected]






Introduction

Your speakers

Steffen Ritter

Student, Freelancer

Steffen Gebert

Student, Freelancer



TYPO3 4.4

On the surface...

t3skin in version 4.4



Let‘s breakthe surface!

http://www.flickr.com/photos/blackbird_hollow/3749443815/




Previous state


TYPO3 4.3without t3skin

„retroskin“ - styles of 3.x


Previous state


TYPO3 4.3with t3skin installed

styles of v4.0 - 4.3


Previous state


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“


TYPO3 User Experience Week 2009


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



Extend the skinning API


Skinning API


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]


Skinning API


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



Remove all CSS from core


Remove core CSS


TYPO3 4.4

t3skin t3skin stylessheets

=


Remove core CSS


TYPO3 4.4without t3skin

„naked“ skin


Remove core CSS


„naked“ skin

benefits:

no unneeded CSS transferred

clean CSS as base for skins

only demand:

be able to install any skin



Split up t3skin CSS


CSS separation


Criteria

structure & visual

by context


CSS separation


Criteria

structure

width, height

position

top, right

margin, padding

visual

background

border

color

font


CSS separation


Conclusion

Benefit:

better structure

know what is defined where

Drawback:

enormous amount of HTTP-Requests


t3lib_compressor


Features

takes care of JS and CSS

concatenation

minification

gzip compression

you have to enable it!


t3lib_compressor


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



Sprite Icons


Sprite Icons


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 ;-)


Backend optimizations


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



Icons and Graphics

new strategy - new technique


Icons and Graphics


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


Icons and Graphics


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


Problems arising?Icons and Graphics


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


Icons and Graphics


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


Icons and Graphics


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


Icons and Graphics


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()


Icons and Graphics


registering icons at SpriteManageraddIconSprite(array $icons, $styleSheetFile)

addSingleIcons(array $icons, $extKey = '')

addTcaTypeIcon($table, $type, $iconFile)

=> all Icon-references should be relative to PATH_site


Icons and Graphics


Using sprites

Old function are"deprecated"

make sure to adapt your extensions and BE-modules



Sprite API/Manager internals




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




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']




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




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




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




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



How To? In depth studies...Demonstrating the simplicity of the new technique


How To? In depth studies


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




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




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




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




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);


Further reading


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

http://forge.typo3.org/projects/show/typo3v4-doc_core_skinning

http://forge.typo3.org/projects/show/typo3v4-doc_core_skinning

http://forge.typo3.org/projects/show/extension-pagemodulecss

http://forge.typo3.org/projects/show/extension-pagemodulecss



?????????????

inspiring people to share.

backend-skin in typo3 4.4: technical changes under the hood (t3dd10)

Technology