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

http://www.sxc.hu/photo/1076628 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Backend-Skin in TYPO3 4.4: Technical changes under the hood Steffen Ritter <info@steffen-ritter.net> Steffen Gebert <steffen@steffen-gebert.de> TYPO3 Developer Days 2010, Elmshorn Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Introduction Your speakers Steffen Ritter Steffen Gebert Student, Freelancer Student, Freelancer Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

TYPO3 4.4 On the surface... t3skin in version 4.4 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Let‘s break the surface! http://www.ﬂickr.com/photos/blackbird_hollow/3749443815/ Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Previous state TYPO3 4.3 without t3skin „retroskin“ - styles of 3.x Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Previous state TYPO3 4.3 with t3skin installed styles of v4.0 - 4.3 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Previous state TYPO3 4.3 „retroskin“ core t3skin t3skin = style + styles sheets sheets retroskin hardcoded in core EXT:t3skin only adds CSS to core CSS unnecessary CSS loaded, hard to maintain Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Extend the skinning API Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

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] Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Remove all CSS from core Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Remove core CSS TYPO3 4.4 t3skin t3skin = styles sheets Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Remove core CSS TYPO3 4.4 without t3skin „naked“ skin Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Remove core CSS „naked“ skin beneﬁts: no unneeded CSS transferred clean CSS as base for skins only demand: be able to install any skin Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Split up t3skin CSS Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

CSS separation Criteria structure & visual by context Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

CSS separation Criteria structure visual width, height background position border top, right color margin, padding font Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

CSS separation Conclusion Beneﬁt: better structure know what is deﬁned where Drawback: enormous amount of HTTP-Requests Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

t3lib_compressor Features takes care of JS and CSS you have to concatenation enable it! miniﬁcation gzip compression Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

t3lib_compressor gzip compression $TYPO3_CONF_VARS[BE][compressionLevel] = 5 has always been there now also used for CSS/JS resources needs .htaccess rules: <FilesMatch ".js.gzip$"> AddType "text/javascript" .gzip otherwise: naked BE </FilesMatch> <FilesMatch ".css.gzip$"> AddType "text/css" .gzip </FilesMatch> AddEncoding gzip .gzip Example: ext-all.js reduced from 642K to176K Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Sprite Icons Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Sprite Icons <img> is Sprites? history ;-) 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; } Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Backend optimizations Speedup Task: Log in and open List module 1700 170 2200 850 85 1100 0 0 KByte HTTP Requests 0 IP-Packets v 4.3 v. 4.4 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Icons and Graphics new strategy - new technique Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Icons and Graphics TYPO3 4.3 Icons in typo3/gfx/ and typo3/sysext/t3skin/gfx/ unstructured folders, chaotic ﬁlenames no overview no streamlined look many HTTP requests hardcoded <img>-tags in php classes Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Icons and Graphics whishes and aims new iconset, streamlined look and feel structured ﬁlestructure 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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Icons and Graphics Problems arising? 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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Icons and Graphics TYPO3 4.4 changed ﬁle 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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Icons and Graphics TYPO3 4.4 File 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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Icons and Graphics Using sprites New 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() Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Icons and Graphics registering icons at SpriteManager addIconSprite(array $icons, $styleSheetFile) addSingleIcons(array $icons, $extKey = '') addTcaTypeIcon($table, $type, $iconFile) => all Icon-references should be relative to PATH_site Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Icons and Graphics Using sprites Old function are "deprecated" make sure to adapt your extensions and BE-modules Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Sprite API/Manager internals Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Sprite API/Manager internals Using Sprites - How it works Sprite Icon Api (t3lib_iconWorks) (ﬁnd iconname for ﬁle 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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Sprite API/Manager internals Icon available? requesting icon name <=> ﬁleName how to know if an sprite icon is present? All icons present in the CURRENT system are placed in $TBE_STYLES['spriteIconApi']['iconsAvailable'] Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Sprite API/Manager internals Overlays overlays 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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Sprite API/Manager internals SpriteManager generates 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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Sprite API/Manager internals SpriteApi vs. SpriteManager Sprite API Sprite Manager • finding iconnames for files • manages all icons from • finding iconnames for records extensions and core • finding/building overlays • build cache and „available • building tags and css classes icon“ list • registers type-Icons for extending TCA • register single icons to be used => the actual „icon output“ • builds sprites and css from registered icons Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Sprite API/Manager internals spriteIconGenerator_handler Interface 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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

How To? In depth studies... Demonstrating the simplicity of the new technique Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

How To? In depth studies 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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

How To? In depth studies Exchanging TYPO3 iconset create 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 ﬁles mapping every icon to it‘s class last two points will be supported by extdeveval soon Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

How To? In depth studies Exchanging TYPO3 iconset unregister 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 Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

How To? In depth studies Own Extensions - TYPE-Icon Uses 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.php t3lib_SpriteManager::addTcaTypeIcon($table, $type, t3lib_extMgm::extRelPath($EXT_KEY) . /path/to/my/icon.png) Example: t3lib_spriteManager::addTcaTypeIcon('pages', 'contains-news' , $pathToNewNewsIcon); Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

Further reading Web resources doc_core_skinning (work in progress) http://forge.typo3.org/projects/show/typo3v4-doc_core_skinning EXT:pagemodulecss http://forge.typo3.org/projects/show/extension-pagemodulecss slides will be available on slideshare.net Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

????? ?? ? ?? ?? ? Backend-Skin in TYPO3 4.4: Inspiring people to Technical changes under the hood share

inspiring people to share.

http://registedone.wordpress.com	110
http://st-g.de	102
http://www.st-g.de	2

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

by Steffen Gebert on Jul 02, 2010

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 214

Statistics

Backend-Skin in TYPO3 4.4: Technical changes under the hood (T3DD10) Presentation Transcript