Post on 19-May-2015
description
www.t3campitalia.it 2014 morini@gammsystem.com
T3Camp Italia Milano, 14 e 15 Marzo 2014
Fluid Powered TYPO3
Maurizio MoriniGamm System Srl
Paginawww.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
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Contesto
3
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Evoluzione TYPO3 4
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Framework di sviluppo 5
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Pattern MVC
6
Model ControllerView
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
7
Fluid
Pattern MVC
Paginawww.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
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
www.fedext.net
9
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
FedExtUtilizza 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
Paginawww.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
Paginawww.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
Paginawww.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
Paginawww.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
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
FedExt Core
15
Fluid Content
Fluid Pages
Flux
VHS
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Implementazione
16
Paginawww.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
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
Pagina www.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
ext_table.php
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile($_EXTKEY, 'Configuration/TypoScript', 'fluidcontent_t3campitalia');!!Tx_Flux_Core::registerProviderExtensionKey('fluidcontent_t3campitalia', ‘Page');!!Tx_Flux_Core::registerProviderExtensionKey('fluidcontent_t3campitalia', 'Content');!
19
Paginawww.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
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
fluidcontent_t3campitalia
21
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Resource/Private
22
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Resources/Public
23
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Fluidpages
24
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Frontend
25
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
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
https://fedext.net/viewhelpers
27
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
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
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
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Backend: header di pagina
31
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Backend: header di pagina
32
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
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
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Frontend
35
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Fluidcontent
36
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Backend: header di pagina
37
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
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
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
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
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Backend: Fluidcontent disponibile in add content
42
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Backend: Edito il Fluidconten
43
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Backend: Edito il Fluidconten
44
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Backend: Edito il Fluidconten
45
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Backend: header di pagina
46
Paginawww.t3campitalia.it 2014
morini@gammsystem.com
Fluid Powered TYPO3
Conclusioni
47
Paginawww.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
Paginawww.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
Documentazione ViewHelpers: https://fedext.net/viewhelpers
!
!
www.t3campitalia.it 2014 morini@gammsystem.com
T3Camp Italia Milano, 14 e 15 Marzo 2014
Fluid Powered TYPO3
Maurizio MoriniGamm System Srl