Fluid Powered TYPO3

649 views
503 views

Published on

Questo intervento si rivolge ai web designer senza particolari conoscenze di sviluppo TYPO3 e tratta della creazione di templates di pagine e contenuti attraverso il 
framework Fluid Powered TYPO3

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
649
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Fluid Powered TYPO3

  1. 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. 2. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 3. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Contesto 3
  4. 4. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Evoluzione TYPO3 4
  5. 5. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Framework di sviluppo 5
  6. 6. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Pattern MVC 6 Model ControllerView
  7. 7. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 7 Fluid Pattern MVC
  8. 8. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 9. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 www.fedext.net 9
  10. 10. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 11. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 12. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 13. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 14. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 15. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 FedExt Core 15 Fluid Content Fluid Pages Flux VHS
  16. 16. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Implementazione 16
  17. 17. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 18. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 19. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 20. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 21. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 fluidcontent_t3campitalia 21
  22. 22. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resource/Private 22
  23. 23. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Public 23
  24. 24. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Fluidpages 24
  25. 25. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Frontend 25
  26. 26. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 27. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 https://fedext.net/viewhelpers 27
  28. 28. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 29. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 30. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 31. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: header di pagina 31
  32. 32. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: header di pagina 32
  33. 33. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 34. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 35. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Frontend 35
  36. 36. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Fluidcontent 36
  37. 37. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: header di pagina 37
  38. 38. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Private/Layouts/Content.html <f:layout name="Content"/>! ! <f:render section="Main"/> 38
  39. 39. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 40. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 41. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 42. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Fluidcontent disponibile in add content 42
  43. 43. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Edito il Fluidconten 43
  44. 44. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Edito il Fluidconten 44
  45. 45. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Edito il Fluidconten 45
  46. 46. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: header di pagina 46
  47. 47. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Conclusioni 47
  48. 48. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 49. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 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. 50. www.t3campitalia.it 2014 morini@gammsystem.com T3Camp Italia Milano, 14 e 15 Marzo 2014 Fluid Powered TYPO3 Maurizio Morini
 Gamm System Srl

×