Embed Size (px)
DESCRIPTION
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
Citation preview
www.t3campitalia.it 2014 [email protected]
T3Camp Italia Milano, 14 e 15 Marzo 2014
Fluid Powered TYPO3
Maurizio MoriniGamm System Srl
Paginawww.t3campitalia.it 2014
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
Fluid Powered TYPO3
Contesto
3
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Evoluzione TYPO3 4
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Framework di sviluppo 5
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Pattern MVC
6
Model ControllerView
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
7
Fluid
Pattern MVC
Paginawww.t3campitalia.it 2014
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
Fluid Powered TYPO3
www.fedext.net
9
Paginawww.t3campitalia.it 2014
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
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
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
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
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
Fluid Powered TYPO3
FedExt Core
15
Fluid Content
Fluid Pages
Flux
VHS
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Implementazione
16
Paginawww.t3campitalia.it 2014
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
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
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
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
Fluid Powered TYPO3
fluidcontent_t3campitalia
21
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Resource/Private
22
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Resources/Public
23
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Fluidpages
24
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Frontend
25
Pagina www.t3campitalia.it 2014
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
Fluid Powered TYPO3
https://fedext.net/viewhelpers
27
Pagina www.t3campitalia.it 2014
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
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
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
Fluid Powered TYPO3
Backend: header di pagina
31
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Backend: header di pagina
32
Pagina www.t3campitalia.it 2014
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
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
Fluid Powered TYPO3
Frontend
35
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Fluidcontent
36
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Backend: header di pagina
37
Pagina www.t3campitalia.it 2014
Fluid Powered TYPO3
Resources/Private/Layouts/Content.html
<f:layout name="Content"/>!!<f:render section="Main"/>
38
Pagina www.t3campitalia.it 2014
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
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
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
Fluid Powered TYPO3
Backend: Fluidcontent disponibile in add content
42
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Backend: Edito il Fluidconten
43
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Backend: Edito il Fluidconten
44
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Backend: Edito il Fluidconten
45
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Backend: header di pagina
46
Paginawww.t3campitalia.it 2014
Fluid Powered TYPO3
Conclusioni
47
Paginawww.t3campitalia.it 2014
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
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 [email protected]
T3Camp Italia Milano, 14 e 15 Marzo 2014
Fluid Powered TYPO3
Maurizio MoriniGamm System Srl
![Typo3 Tutorial - NDSU · Typo3 Tutorial – Overview – Typo3 Module [ Page 8 ] Last modified 01/11/2007 Figure 5 - TYPO3 context menu. You can access your content information to](https://img.pdfslide.us/doc/110x75/5ad0b5877f8b9a8b1e8e3707/typo3-tutorial-ndsu-tutorial-overview-typo3-module-page-8-last-modified.jpg)
