Your SlideShare is downloading. ×
Fluid powered TYPO3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Fluid powered TYPO3

2,944
views

Published on

Presentation of the Fluid powered TYPO3 extension family

Presentation of the Fluid powered TYPO3 extension family

Published in: Technology, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,944
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. FLUIDPAGES
  • 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. 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. VERY BASIC LAYOUT USED <f:layout name="Default"></f:layout> <div class="container"> <f:render section="Content"></f:render> </div>
  • 12. FLUIDCONTENT
  • 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. 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. 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. DANKE