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

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

Post on 08-May-2015

5.706 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

With version 4.4 of the Content Management System TYPO3, the Backend interface was undergone not only a major visual improvement. This presentation - held at the TYPO3 Developer Days 2010 in Elmshorn - shows the technical changes of the skin.

TRANSCRIPT

<ul><li>1.http://www.sxc.hu/photo/1076628 Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share </li></ul> <p>2. Backend-Skin in TYPO3 4.4: Technical changes under the hoodSteffen Ritter Steffen Gebert TYPO3 Developer Days 2010, Elmshorn Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 3. Introduction Your speakers Steffen RitterSteffen Gebert Student, Freelancer Student, Freelancer Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 4. TYPO3 4.4 On the surface... t3skin in version 4.4 Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 5. Lets breakthe surface!http://www.ickr.com/photos/blackbird_hollow/3749443815/Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 6. Previous state TYPO3 4.3 without t3skinretroskin - styles of 3.x Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 7. Previous state TYPO3 4.3 with t3skin installed styles of v4.0 - 4.3 Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 8. Previous state TYPO3 4.3retroskincoret3skin t3skin = style+ styles sheetssheets retroskin hardcoded in coreEXT:t3skin only adds CSS to core CSSunnecessary CSS loaded, hard to maintainBackend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 9. TYPO3 User Experience Week 2009 Tasks of Team 3 extend skinning APIremove all CSS from coresplit up CSS of t3skinuse CSS icon spritesFabien Udriot, Steffen Gebert, Thomas Allmer,Andr Wartmann, Michael Leibenson Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 10. Extend the skinning API Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 11. Skinning API Improvements Skins have to register: $TBE_STYLES[skins][extKey] = array();Automatic inclusion from every skin: stylesheets/structure/*.css stylesheets/visual/*.cssAdd further directories: $TBE_STYLES[skins][extKey][stylesheetDirectories] Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 12. 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-&gt;doc-&gt;JScode = ''Use instead: $this-&gt;doc = t3lib_div::makeInstance('bigDoc'); $this-&gt;doc-&gt;getPageRenderer()-&gt;addCssFile(); Available since TYPO3 4.3 Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 13. Remove all CSS from core Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 14. Remove core CSS TYPO3 4.4t3skin t3skin= styles sheets Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 15. Remove core CSS TYPO3 4.4 without t3skinnaked skin Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 16. Remove core CSS naked skin benets:no unneeded CSS transferredclean CSS as base for skinsonly demand:be able to install any skin Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 17. Split up t3skin CSS Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 18. CSS separation Criteria structure &amp; visualby context Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 19. CSS separation Criteria structure visualwidth, heightbackgroundposition bordertop, right colormargin, paddingfont Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 20. CSS separation Conclusion Benet:better structureknow what is dened whereDrawback:enormous amount of HTTP-Requests Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 21. t3lib_compressor Features takes care of JS and CSS you have to concatenationenable it! minicationgzip compression Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 22. t3lib_compressor gzip compression $TYPO3_CONF_VARS[BE][compressionLevel] = 5has always been therenow also used for CSS/JS resourcesneeds .htaccess rules: AddType "text/javascript" .gzip otherwise: naked BE AddType "text/css" .gzip AddEncoding gzip .gzip Example: ext-all.js reduced from 642K to176K Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 23. Sprite Icons Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 24. Sprite Icons is Sprites?history ;-) many icons combined into one imageinclusion as background-image using CSSbackground-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 toTechnical changes under the hood share 25. Backend optimizations Speedup Task:Log in and open List module 1700 170 220085085 110000 KByte HTTP Requests 0IP-Packets v 4.3v. 4.4Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 26. Icons and Graphicsnew strategy - new technique Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 27. Icons and Graphics TYPO3 4.3 Icons in typo3/gfx/ and typo3/sysext/t3skin/gfx/unstructured folders, chaotic lenamesno overviewno streamlined lookmany HTTP requestshardcoded -tags in php classes Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 28. Icons and Graphics whishes and aims new iconset, streamlined look and feelstructured lestructure for saving icons in fsreduce http requests on each BE callremove as much hardcoded html in BE-php classeseasy use of TYPO3 icons in own modulesfancy technical solution==&gt; implement an public to use sprite-icon-APIBackend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 29. Icons and GraphicsProblems arising? old functionality in t3lib_iconWorks not usable anymoreall 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 toTechnical changes under the hood share 30. Icons and Graphics TYPO3 4.4 changed le structureclear naming schemesprite icon API in t3lib_iconWorks (inclusion)manager API in t3lib_SpriteManager (handling) available icons, managing CSS and generating spritesno misuse of icons in wrong context Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 31. Icons and Graphics TYPO3 4.4 File structures / naming schememoving icons to images/iconsclear folder structure / naming adopted from freedesktop.orgCOPY 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 toTechnical changes under the hood share 32. Icons and Graphics Using sprites New API in t3lib_iconWorks for sprite usaget3lib_iconWorks::getSpriteIcon() replacing t3lib_iconWorks::getSpriteIconForRecord() replacing t3skin_iconWorks::getIconImage()t3lib_iconWorks::getSpriteIconForFile() Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 33. Icons and Graphics registering icons at SpriteManager addIconSprite(array $icons, $styleSheetFile)addSingleIcons(array $icons, $extKey = '')addTcaTypeIcon($table, $type, $iconFile)=&gt; all Icon-references should be relative to PATH_site Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 34. Icons and Graphics Using sprites Old function are "deprecated"make sure to adapt your extensions and BE-modulesBackend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 35. Sprite API/Manager internals Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 36. 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 classeswrap it into HTMLaction-document-opent3-icon t3-icon-action t3-icon-document-openBackend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 37. Sprite API/Manager internals Icon available? requesting icon name leNamehow 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 toTechnical changes under the hoodshare 38. Sprite API/Manager internals Overlays overlays are not generated anymoreevery overlay is an sprite icon itselfonly most important status overlay is automatically renderedevery normal icon can be overlayed Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 39. Sprite API/Manager internals SpriteManager generates cache of icons availableprovides static API to registerown icon sprites,own single icons type-iconsis meant to generate sprites of unsprited icons Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 40. Sprite API/Manager internalsSpriteApi vs. SpriteManager Sprite APISprite Manager nding iconnames for les manages all icons from nding iconnames for records extensions and core nding/building overlays build cache and available building tags and css classes icon list registers type-Icons forextending TCA register single icons to be used=&gt; the actual icon output builds sprites and css fromregistered icons Backend-Skin in TYPO3 4.4:Inspiring people to Technical changes under the hood share 41. Sprite API/Manager internals spriteIconGenerator_handler Interface t3lib_SpriteManager instanciatesresponsible to rebuild all sprite-related caches.CSS les and one php-cache lemay/should generate sprites used in the generated css leTYPO3 4.4: t3lib_spritemanager_SimpleHandler--&gt; non spriting implementation Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 42. How To? In depth studies... Demonstrating the simplicity of the new technique Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 43. How To?In depth studies In depth Studies - How to... Adapting Page - Module to repesent your FE LayoutExchanging TYPO3 iconsetIcons in own extensions:Own tables with TCA - Icons and TypeIconsNew Types or Modules (Pages) in CoreTablesUsing own and core icons in BE-Modules Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 44. How To?In depth studiesAdapting Page-Module to repesent your FE Layoutcreate a new empty extensioncreate folder structure as mentionedregister your Extensions as skinwrite your CSS for page module EXT: pagemodulecss Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 45. How To?In depth studies Exchanging TYPO3 iconset create a new empty extension - as always :-)copy t3skin/images/icons/ to you extensionreplace all icons with the one you preferoptional: create sprites of your iconscreate CSS les mapping every icon to its classlast two points will be supported by extdeveval soonBackend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 46. 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 toTechnical changes under the hoodshare 47. 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 toTechnical changes under the hoodshare 48. Further reading Web resources doc_core_skinning (work in progress) http://forge.typo3.org/projects/show/typo3v4-doc_core_skinningEXT:pagemodulecss http://forge.typo3.org/projects/show/extension-pagemodulecssslides will be available on slideshare.net Backend-Skin in TYPO3 4.4:Inspiring people toTechnical changes under the hood share 49. ????? ???????? Backend-Skin in TYPO3 4.4: Inspiring people toTechnical changes under the hoodshare 50. inspiring people to share. </p>