Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FLUID POWERED TYPO3Presented by Christof Rodejohann /
TYPO3 Developer at
@UrsaBerlin
Sächsische Landesbibliothek – Staats-...
A FAMILY OF EXTENSIONS
FlexForm engine, Page Template engine, Content Element
engine and many ViewHelpers, Service and con...
FLUX
Very dynamic Flex Forms to be written directly into specialised Fluid templates.
Used by extension developers and tem...
VHS
Extensive library of ViewHelpers which allow advanced formatting, array/iterator analysis and
manipulation.
A large co...
VHS
Example ViewHelpers.
v:format.replace
Replaces $substring in $content with $replacement.
v:media.exists
File/Directory...
FLUIDPAGES
Templating engine designed for Fluid templates.
It uses specially registered and constructed Fluid templates as...
FLUIDCONTENT
Content rendering engine - a content plugin which renders Fluid templates as content elements.
Flux is used t...
FLUIDPAGES
KONFIGURATION
plugin.tx_fed {
page.UNIQUENAME {
templateRootPath = EXT:EXTENSIONKEY/Resources/Private/Pages/
partialRootPa...
A PAGE WITH TWO COLUMNS
{namespace flux=Tx_Flux_ViewHelpers}
{namespace v=Tx_Vhs_ViewHelpers}
<f:layout name="Default"></f...
VERY BASIC LAYOUT USED
<f:layout name="Default"></f:layout>
<div class="container">
<f:render section="Content"></f:render...
FLUIDCONTENT
KONFIGURATION
plugin.tx_fed {
fce.UNIQUENAME {
label = Main label for this set of CE
templateRootPath = EXT:EXTENSIONKEY/R...
A CONTENT ELEMENT WITH 2 COLS
{namespace flux=Tx_Flux_ViewHelpers}
<f:layout name="Content"></f:layout>
<f:section name="C...
A CONTENT ELEMENT WITH FLEXIBLE COLS
{namespace flux=Tx_Flux_ViewHelpers}
{namespace v=Tx_Vhs_ViewHelpers}
<f:layout name=...
DANKE
Upcoming SlideShare
Loading in …5
×

Fluid powered TYPO3

4,056 views

Published on

Presentation of the Fluid powered TYPO3 extension family

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Fluid powered TYPO3

  1. 1. FLUID POWERED TYPO3Presented by Christof Rodejohann / TYPO3 Developer at @UrsaBerlin Sächsische Landesbibliothek – Staats- und Universitätsbibliothek Dresden More detailed informations and source of this presentation: /http://www.fedext.net @FluidPoweredT3
  2. 2. A FAMILY OF EXTENSIONS FlexForm engine, Page Template engine, Content Element engine and many ViewHelpers, Service and content collections flux vhs fluidcontentfluidpages fed fluidpages_bootstrap fluidcontent_bootstrap fluidcontent_fed dialog notify fluidwidget viewschemaker extbase_realurl google_auth tool uncache sysutils dropbox_sync
  3. 3. FLUX Very dynamic Flex Forms to be written directly into specialised Fluid templates. Used by extension developers and template developers as development tool to create configuration inside Fluid templates. Used by extension developers to allow any plugin which renders a Fluid template to be able to contain other content elements.
  4. 4. VHS Extensive library of ViewHelpers which allow advanced formatting, array/iterator analysis and manipulation. A large collection of ViewHelpers. No scripts, no stylesheets - just ViewHelpers. No configuration to be included, no DB changes. Documentation: 173 ViewHelpers. http://fedext.net/viewhelpers/vhs.html
  5. 5. VHS Example ViewHelpers. v:format.replace Replaces $substring in $content with $replacement. v:media.exists File/Directory Exists Condition ViewHelper v:content.render ViewHelper used to render content elements in Fluid page templates Many many more ...
  6. 6. FLUIDPAGES Templating engine designed for Fluid templates. It uses specially registered and constructed Fluid templates as page templates. Also enables integration between the Fluid Page template and Backend Layouts (TYPO3 6 needed)
  7. 7. FLUIDCONTENT Content rendering engine - a content plugin which renders Fluid templates as content elements. Flux is used to allow dynamic configuration as well as support nested content elements.
  8. 8. FLUIDPAGES
  9. 9. KONFIGURATION plugin.tx_fed { page.UNIQUENAME { templateRootPath = EXT:EXTENSIONKEY/Resources/Private/Pages/ partialRootPath = EXT:EXTENSIONKEY/Resources/Private/Partials/ layoutRootPath = EXT:EXTENSIONKEY/Resources/Private/Layouts/ } } Beware: templateRootPath gets automagically /Page/ added to the path
  10. 10. A PAGE WITH TWO COLUMNS {namespace flux=Tx_Flux_ViewHelpers} {namespace v=Tx_Vhs_ViewHelpers} <f:layout name="Default"></f:layout> <f:section name="Configuration"> <flux:flexform id="two-col" label="Two Cols"> <flux:flexform.grid> <flux:flexform.grid.row> <flux:flexform.grid.column colpos="1" name="Linke Spalte"></flux:fl <flux:flexform.grid.column colpos="2" name="Rechte Spalte"></flux:f </flux:flexform.grid.row> </flux:flexform.grid> </flux:flexform> </f:section> <f:section name="Content"> <div class="content-links"> <v:page.content.render column="1"></v:page.content.render> </div> <div class="content-rechts"> <v:page.content.render column="2"></v:page.content.render> </div> </f:section>
  11. 11. VERY BASIC LAYOUT USED <f:layout name="Default"></f:layout> <div class="container"> <f:render section="Content"></f:render> </div>
  12. 12. FLUIDCONTENT
  13. 13. KONFIGURATION plugin.tx_fed { fce.UNIQUENAME { label = Main label for this set of CE templateRootPath = EXT:EXTENSIONKEY/Resources/Private/Elements/ partialRootPath = EXT:flux/Resources/Private/Partials/ layoutRootPath = EXT:fluidcontent/Resources/Private/Layouts/ } } Default partial and layout pathes can be overwritten if needed
  14. 14. A CONTENT ELEMENT WITH 2 COLS {namespace flux=Tx_Flux_ViewHelpers} <f:layout name="Content"></f:layout> <f:section name="Configuration"> <flux:flexform wizardtab="Tabname" id="unique-id" label="2 Spalten" description <flux:flexform.grid> <flux:flexform.grid.row> <flux:flexform.grid.column> <flux:flexform.content name="content" label="Linker Inhalt"></f </flux:flexform.grid.column> <flux:flexform.grid.column> <flux:flexform.content name="content2" label="Rechter Inhalt">< </flux:flexform.grid.column> </flux:flexform.grid.row> </flux:flexform.grid> </flux:flexform> </f:section> <f:section name="Preview"> <flux:widget.grid></flux:widget.grid> </f:section> <f:section name="Main"> <div class="links"> <flux:flexform.rendercontent area="content"></flux:flexform.rendercontent> </div> <div class="rechts"> <flux:flexform.rendercontent area="content2"></flux:flexform.rendercontent> </div> </f:section>
  15. 15. A CONTENT ELEMENT WITH FLEXIBLE COLS {namespace flux=Tx_Flux_ViewHelpers} {namespace v=Tx_Vhs_ViewHelpers} <f:layout name="Content"></f:layout> <f:section name="Configuration"> <flux:flexform wizardtab="Tabname" id="flexible-cols" label="Flexible Spalten" <flux:flexform.sheet name="cols" label="Cols"> <flux:flexform.section name="cols" label="Cols"> <flux:flexform.object name="col" label="Col"> <flux:flexform.field.input name="title" label="Col title"></flu </flux:flexform.object> </flux:flexform.section> </flux:flexform.sheet> <flux:flexform.grid> <flux:flexform.grid.row> <f:if condition="{cols}"> <f:for each="{cols}" as="col" iteration="iteration"> <flux:flexform.grid.column style="width: {v:math.division(b <flux:flexform.content name="content.{iteration.index}" </flux:flexform.grid.column> </f:for> </f:if> </flux:flexform.grid.row> </flux:flexform.grid> </flux:flexform> </f:section> <f:section name="Preview">
  16. 16. DANKE

×