Download to read offline
Fluid Powered TYPO3
- 1. www.t3campitalia.it 2014 morini@gammsystem.com T3Camp Italia Milano,14 e 15 Marzo 2014 Fluid Powered TYPO3 Maurizio Morini Gamm System Srl
- 2. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Sono Maurizio Morini socio fondatore di Gamm System mi occupo della progettazione di siti internet basati su TYPO3 2 Questo intervento si rivolge ai web designer senza particolari conoscenze di sviluppo TYPO3 e tratta di templating attraverso il framework Fluid Powered TYPO3
- 3.
- 4. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Evoluzione TYPO3 4
- 5. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Framework di sviluppo 5
- 6. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Pattern MVC 6 Model ControllerView
- 7. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 7 Fluid Pattern MVC
- 8. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Fluid Fluid è un linguaggio di templating che oltre a formattare i contenuti permette di processare l’output attraverso i suoi helper tag, meglio conosciuti come ViewHelper 8
- 9. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 www.fedext.net 9
- 10. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 FedExt Utilizza Fluid per ogni singolo aspetto di design e layout dell’output TYPO3 quindi mi posso concentrare sulla costruzione dei templates utilizzando solamente Fluid assieme ai soliti strumenti (html, css e javascript) 10
- 11. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Flux • Flux è il cuore di ogni extension FedExt ed il suo scopo è di integrare un Flex Form dinamico direttamente all’interno del template Fluid • Flux permette di creare form fields di configurazione all’interno degli header di pagina e nei contenuti. 11
- 12. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 VHS • VHS è una libreria di ViewHelpers che permettono funzioni avanzate di formattazione, interazione e manipolazione dei dati all’interno di un template Fluid 12
- 13. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Fluid Pages • Fluid Pages è una extension con l’unico compito di interagire con il backend TYPO3 per il rendering dei template di pagina Fluid 13
- 14. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Fluid Content • Fluid Content, come Fluid Pages, ha il compito di interagire con il backend TYPO3 e permette ad un singolo template Fluid di essere usato come content element. 14
- 15. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 FedExt Core 15 Fluid Content Fluid Pages Flux VHS
- 16. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Implementazione 16
- 17. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Creazione extension • Creo con Extension Builder una ext vuota: fluidcontent_t3campitalia • Creo un file di configurazione typoscript • Modifico ext_table.php per includere il setup typoscript e registrare la extension come provider di page template e content template 17
- 18. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Configuration/Typoscript/setup.txt plugin.tx_fluidcontentt3campitalia.view {! ! ! templateRootPath = ! EXT:fluidcontent_t3campitalia/Resources/Private/Templates/! ! ! partialRootPath = ! EXT:fluidcontent_t3campitalia/Resources/Private/Partials/ ! ! ! layoutRootPath = ! EXT:fluidcontent_t3campitalia/Resources/Private/Layouts/! ! } ! 18
- 19. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 ext_table.php TYPO3CMSCoreUtilityExtensionManagementUtility::addStaticFile($_EXTKEY, 'Configuration/TypoScript', 'fluidcontent_t3campitalia');! ! Tx_Flux_Core::registerProviderExtensionKey('fluidcontent_t3campitalia', ‘Page');! ! Tx_Flux_Core::registerProviderExtensionKey('fluidcontent_t3campitalia', 'Content');! 19
- 20. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Templates Fluid • Layouts: creano la struttura generale della pagina e sono utilizzati da più templates • Templates: sono il vero e proprio template referenziato dal Controller per il rendering dell’output della ext. • Partials: sono templates di parti di codice utilizzate in più Layouts/Templates 20
- 21. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 fluidcontent_t3campitalia 21
- 22. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resource/Private 22
- 23. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resources/Public 23
- 24. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Fluidpages 24
- 25. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Frontend 25
- 26. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resources/Private/Layouts/Page.html {namespace v=Tx_Vhs_ViewHelpers}! <f:layout name="Page" />! ! <v:asset.style name=“bootstrap-css" ! path="EXT:fluidcontent_t3campitalia/Resources/Public/bootstrap.min.css"/>! <v:asset.style name="main-css" dependencies=“bootstrap-css" ! path="EXT:fluidcontent_t3campitalia/Resources/Public/main.css"/>! ! <v:asset.script name="jquery" allowMoveToFooter="false"! path="EXT:fluidcontent_t3campitalia/Resources/Public/jquery-1.9.0.min.js"/>! <v:asset.script name="bootstrap-core" dependencies="jquery"! path="EXT:fluidcontent_t3campitalia/Resources/Public/bootstrap.min.js"/>! ! <div class=“container {settings.pageClass}"> ! ! <f:render section="Header" partial=“Header" arguments="{_all}"/>! ! <f:render section="Content"></f:render> ! </div> 26
- 27. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 https://fedext.net/viewhelpers 27
- 28. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resources/Private/Templates/Page/FontPage.html {namespace v=Tx_Vhs_ViewHelpers}! {namespace flux=Tx_Flux_ViewHelpers}! ! <f:layout name="Page" />! ! <f:section name="Configuration">! ! <flux:flexform ! ! ! id="front" ! ! ! label="Front Page" ! ! ! icon="{f:uri.resource(path: ‘Icons/t3camp_2014_mid.png')}">! ! <!-- Input field variabile 'pageClass' -->! <flux:flexform.field.input ! ! ! ! label="classe pagina" ! ! ! ! name="settings.pageClass" ! ! ! ! default="Frontpage-css-class"/>! ! Continua» 28
- 29. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resources/Private/Templates/Page/FontPage.html <!-- Backend layout grid -->! ! ! <flux:flexform.grid> ! ! ! ! <flux:flexform.grid.row> ! ! ! ! ! <flux:flexform.grid.column ! ! ! ! ! ! colPos="0" ! ! ! ! ! ! label="Sidebar" ! ! ! ! ! ! name=“Sidebar">! ! ! ! ! </flux:flexform.grid.column> ! ! ! ! ! ! <flux:flexform.grid.column ! ! ! ! ! ! colPos="1" label="Content" name=“Content">! ! ! ! ! </flux:flexform.grid.column> ! ! ! ! ! </flux:flexform.grid.row> ! ! ! </flux:flexform.grid> ! ! </flux:flexform>! </f:section>! Continua» 29
- 30. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resources/Private/Templates/Page/FontPage.html ! <f:section name="Content">! ! <div class=“row">! ! ! ! <div class="col-md-4" id="sidebar-col"> ! ! ! ! <v:page.content.render column="0"></v:page.content.render> ! ! ! </div> ! ! ! ! <div class="col-md-8" id="content-col"> ! ! ! ! <v:page.content.render column="1"></v:page.content.render> ! ! ! </div> !! ! ! ! </div>! </f:section>! ! </div> 30
- 31. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Backend: header di pagina 31
- 32. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Backend: header di pagina 32
- 33. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resources/Private/Partials/Header.html {namespace v=Tx_Vhs_ViewHelpers}! <f:layout name="Page"/>! ! ! <f:section name="Header">! ! ! ! <v:switch value="{page.uid}">! ! ! ! <v:case case="113" break="true">! ! ! ! ! ! <header class="jumbotron" role="banner">! ! ! ! ! ! <f:image ! src="EXT:fluidcontent_t3campitalia/Resources/Public/Icons/logo.png" ! ! ! ! ! ! alt="Logo" ! ! ! ! ! ! class=“pull-left"/>! ! ! ! ! ! ! <h1>Pagina T3CampItalia</h1>! ! ! ! ! </header>! ! ! ! ! </v:case>! Continua» 33
- 34. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resources/Private/Partials/Header.html ! ! ! ! <v:case case="default">! ! ! ! ! ! <header class="jumbotron" role="banner">! ! ! ! ! ! ! <h1>Page</h1>! ! ! ! ! ! </header>! ! ! ! ! </v:case>! ! ! </v:switch>! ! </f:section>! ! </div>! 34
- 35. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Frontend 35
- 36. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Fluidcontent 36
- 37. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Backend: header di pagina 37
- 38. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resources/Private/Layouts/Content.html <f:layout name="Content"/>! ! <f:render section="Main"/> 38
- 39. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resources/Private/Templates/Content/Alert.html {namespace flux=Tx_Flux_ViewHelpers}! {namespace v=Tx_Vhs_ViewHelpers}! <f:layout name="Content" />! ! <f:section name="Configuration">! ! <flux:flexform wizardTab="Media" ! ! ! label="Alert box" ! ! ! description="Esempio di Fluidcontent per T3CampItalia 2014" id="alert" ! ! ! icon="{v:extension.path.resources(path: ‘Icons/ t3camp_2014_mid.png')}">! ! ! ! <flux:flexform.field.input name="header" label="Header" />! ! ! <flux:flexform.field.input name="closeLinkText" label="Close Link"/>! ! ! <flux:flexform.field.select name="class" items="warning,info,success,danger" default="warning" label="Type" />! ! ! <flux:flexform.field.checkbox label="Is Block?" name="isBlock" />! ! ! ! Continua» 39
- 40. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resources/Private/Templates/Content/Alert.html ! ! <flux:flexform.grid>! ! ! ! <flux:flexform.grid.row>! ! ! ! ! <flux:flexform.grid.column>! ! ! ! ! ! ! <flux:flexform.content name="content" />! ! ! ! ! ! </flux:flexform.grid.column>! ! ! ! </flux:flexform.grid.row>! ! ! </flux:flexform.grid>! ! </flux:flexform>! ! </f:section>! ! ! ! ! Continua» 40
- 41. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Resources/Private/Templates/Content/Alert.html ! ! <f:section name="Main">! ! <div class="alert alert-{class} {f:if(condition: isBlock, then: ‘alert- block')}">! ! ! ! <f:if condition="{closeLinkText}">! ! ! ! <a class="close" data-dismiss=“alert">! ! ! ! ! <f:format.raw>{closeLinkText}</f:format.raw>! ! ! ! </a>! ! ! </f:if>! ! ! ! <f:if condition="{header}">! ! ! ! <h1 class="alert-heading">{header}</h1>! ! ! </f:if>! ! ! ! <flux:flexform.renderContent area="content" />! ! </div>! </f:section>! 41
- 42. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Backend: Fluidcontent disponibile in add content 42
- 43. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Backend: Edito il Fluidconten 43
- 44. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Backend: Edito il Fluidconten 44
- 45. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Backend: Edito il Fluidconten 45
- 46. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Backend: header di pagina 46
- 47. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Conclusioni 47
- 48. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Confronto con TV • Nessuna informazioni di templates è memorizzata nel database • Quando si cambia il template non bisogna rimappare i contenuti • Typoscript viene utilizzato solo per configurazioni: con FedExt i menu vengono creati nel template Fluid • Fluid è utilizzato per tutti gli aspetti di definizione dei templates e per processare i dati da visualizzare. • Attraverso Flux posso parametrizzare e configurare i template di pagina e di contenuti, fornendo tantissime opzioni agli editori. 48
- 49. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid PoweredTYPO3 Riferimenti 49 Fluid Power TYPO3: https://fedext.net/ https://github.com/FluidTYPO3 Documentazione Fluid Power TYPO3: https://github.com/FluidTYPO3/documentation DocumentazioneViewHelpers: https://fedext.net/viewhelpers ! !
- 50. www.t3campitalia.it 2014 morini@gammsystem.com T3Camp Italia Milano,14 e 15 Marzo 2014 Fluid Powered TYPO3 Maurizio Morini Gamm System Srl