Fluid powered TYPO3

60 %
40 %
Information about Fluid powered TYPO3
Technology

Published on March 20, 2014

Author: gammsystem

Source: slideshare.net

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

www.t3campitalia.it 2014 morini@gammsystem.com T3Camp Italia Milano, 14 e 15 Marzo 2014 Fluid Powered TYPO3 Maurizio Morini
 Gamm System Srl

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

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Contesto 3

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Evoluzione TYPO3 4

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Framework di sviluppo 5

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Pattern MVC 6 Model ControllerView

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 7 Fluid Pattern MVC

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

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 www.fedext.net 9

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

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

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

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

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

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 FedExt Core 15 Fluid Content Fluid Pages Flux VHS

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Implementazione 16

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

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 TYPO3CMSCoreUtilityExtensionManagementUtility::addStaticFile($_EXTKEY, 'Configuration/TypoScript', 'fluidcontent_t3campitalia');! ! Tx_Flux_Core::registerProviderExtensionKey('fluidcontent_t3campitalia', ‘Page');! ! Tx_Flux_Core::registerProviderExtensionKey('fluidcontent_t3campitalia', 'Content');! 19

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

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 fluidcontent_t3campitalia 21

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resource/Private 22

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Public 23

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Fluidpages 24

Pagina www.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

Pagina www.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

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: header di pagina 31

Pagina www.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

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Frontend 35

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Fluidcontent 36

Pagina www.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

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Fluidcontent disponibile in add content 42

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Edito il Fluidconten 43

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Edito il Fluidconten 44

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Edito il Fluidconten 45

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: header di pagina 46

Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Conclusioni 47

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

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 ! !

www.t3campitalia.it 2014 morini@gammsystem.com T3Camp Italia Milano, 14 e 15 Marzo 2014 Fluid Powered TYPO3 Maurizio Morini
 Gamm System Srl

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Fluid Powered TYPO3: Welcome

Productive Templating Fluid Powered TYPO3 is a family of TYPO3 extensions designed to boost productivity and flexibility when creating CMS templates.
Read more

Templating manual · Introduction - Fluid Powered TYPO3 ...

Fluid Powered TYPO3: Documentation Dear reader, Thank you for your interest in the Fluid Powered TYPO3 project! This documentation covers everything you ...
Read more

Fluid Powered TYPO3 · GitHub

builder. TYPO3 extension for building, validating and syntax checking Fluid and Extbase code Updated Feb 11, 2016
Read more

TYPO3: Fluid Powered TYPO3 | Motions-Media

Ich möchte hier kurz Fluid Powered TYPO3 vorstellen. Dieses war mir schön länger bekannt, nur leider habe ich die Genialität dahinter nicht verstanden.
Read more

TYPO3 Forum: German Forum » [TYPO3-german] Fluid Powered ...

Hallo, ich habe mich mal ein bisschen mit Fluid Powered TYPO3 beschäftigt. Hat jemand hier im Forum schon mal Erfahrungen damit gesammelt? Einerseits ...
Read more

Fluid Pages Engine (fluidpages) - - TYPO3 - The Enterprise ...

Fluid Pages Engine Fluid Page Template engine ... Fluid Powered TYPO3 Download current version 3.5.0. Download T3X Package Download T3X Package.
Read more

Dating Fluid Powered TYPO3 — Joschi Kuphal · Web ...

Dating Fluid Powered TYPO3. A once in a decade escapade — first steps into a post-TemplaVoila! era?
Read more

Fluid Powered TYPO3 - YouTube

Fluid Powered TYPO3 T3CampItalia. Subscribe Subscribed Unsubscribe 8 8. ... TYPO3 Fluid Template - Erste Extension mit Builder - Duration: 6:00.
Read more

TYPO3: Fluid Powered TYPO3 – Custom Flux Controller ...

FluidTYPO3 alleine ist schon eine geniale Lösung. Damit ist es ein leichtes Seitentemplates und Contentelemente anzulegen. Im Hintergrund arbeitet Flux ...
Read more

Fluid Widgets (fluidwidget) - - TYPO3 - The Enterprise ...

Fluid Widgets Outdated extension ... Fluid Powered TYPO3 Download current version 1.1.0. Download T3X Package Download T3X Package. Size: 13.9kB.
Read more