Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

Fluid

From TYPO3Wiki
Jump to: navigation, search


Draft Change the {{draft}} marker to {{review}} when you need a reviewer for text and TypoScript. info
Fluid / Extbase

Extbase is a backport of some features of FLOW3 (the PHP framework on which TYPO3 5.0 will be built) to TYPO3 v4.
With Fluid, the new templating system, all the code for the view logic moves to the template.
Extbase can be seen as a bridge between TYPO3 4.3 and 5.0.

current version:
TYPO3 4.5 Extbase/Fluid 1.3.0
earlier releases:
TYPO3 4.4 Extbase/Fluid 1.2.0
TYPO3 4.3 Extbase/Fluid 1.0.2
Ressources:


Contents

Collection of fluid / extbase hints

Accessing a view helper

Acessing a viewHelper from another viewHelper for instance:

PHP script:
$objectManager = t3lib_div::makeInstance('Tx_Extbase_Object_ObjectManager');
$viewHelper = $objectManager->create($viewHelperName);
$result = $viewHelper->render($param1, $param2);

Including a Fluid plugin through ext_tables.php

PHP script:
 /**
  * Register an Extbase PlugIn into backend's list of plugins
  */
 Tx_Extbase_Utility_Plugin::registerPlugin(
 	'Addresses',					// The name of the extension in UpperCamelCase
 	'Pi1',						// A unique name of the plugin in UpperCamelCase
 	'Address Management'				// A title shown in the backend dropdown field
 );

Configure a Fluid plugin through ext_localconf.php

PHP script:
 /**
  * Configure the Extbase Dispatcher
  */
 Tx_Extbase_Utility_Plugin::configurePlugin(
 	'Addresses',					// The name of the extension in UpperCamelCase
 	'Pi1',						// A unique name of the plugin in UpperCamelCase
 	array(						
 		'Address' => 'index,show',		// The first controller and its first action will be the default 
 	),
 	array(
 		'Address' => 'index,show',		// An array of non-cachable controller-action-combinations (they must already be enabled)
 	)
 );

Accessing TS configuration in the controller

The TS configuration can be accessed through
PHP script:
$this->settings

Adding AdditionalHeaderdata (for example Stylesheets)

Use

PHP script:
$this->response->addAdditionalHeaderData()

Better is the method (not for uncached actions) to include js or css.

PHP script:
$GLOBALS['TSFE']->getPageRenderer()->

Example:

PHP script:
$this->response->addAdditionalHeaderData('<link rel="stylesheet" href="' . t3lib_extMgm::siteRelPath('extkey') . 'Resources/Public/Stylesheets/index.css" />');

Accessing the current request (f.e. for retrieving $_GET vars)

You can access the current request with

PHP script:
$currentRequest = $this->variableContainer->get('view')->getRequest();

If you want to access f.e. a $_GET param use

PHP script:
$this->variableContainer->get('view')->getRequest()->getArgument('name of the GET var');

or to access all arguments:

PHP script:
$this->variableContainer->get('view')->getRequest()->getArguments();

You can also check if an argument exists with

PHP script:
$this->variableContainer->get('view')->getRequest()->hasArgument('name of the GET var');

Standard View Helpers

f:alias

Used to declare one or more variables that will only be valid within the f:alias tag.

Example:

XML / HTML:
<f:alias map="{x: foo.bar.baz, y: foo.bar.baz.name}">
   {x.name} or {y}
</f:alias>

f:base

Outputs the base-tag in HTML

Example:

XML / HTML:
<f:base />

Output:

XML / HTML:
<base href="http://example.com/"></base>

CObject

TODO: Explain http://www.t3node.com/blog/combining-fluid-viewhelpers-and-typoscript-in-typo3-5-basic-examples/

f:count

Counts the number of elements in an array

Example:

XML / HTML:
<f:count subject="{myarray}" />

Output: 5

f:cycle

If used inside a for-loop will rotate the values given.

Example:

XML / HTML:
<f:for each="{0:1, 1:2, 2:3, 3:4}" as="foo">
  <f:cycle values="{0: '..', 1: '--', 2: 'xx'}" as="cycle">
    {cycle}
  </f:cycle>
</f:for>

Output: ..--xx..

Usage: Use to create Zebra-Styles, Rotating Templates, ...

f:debug

Debugs the content inside the tag, Outputs the title in front

Example:

XML / HTML:
<f:debug title="Debug of MyArray">{myarray}</f:debug>

f:for

Traverses an Array wholy

Example:

XML / HTML:
 <ul>
    <f:for each="{shoppinglist}" as="food" key="number">
      <li>{number}: {food}</li>
    </f:for>
 </ul>

Output:

XML / HTML:
  <li>4: apples</li>
  <li>3: choclate</li>
  <li>25: beer</li>
  <li>10: frozen pizza</li>
</ul>

f:form

Outputs a HTML form. The data is submitted via POST request (you can change that by setting method="get").

Inside the form you can use form fields (see below).

XML / HTML:
<f:form action="...">...</f:form>
<f:form action="..." controller="..." package="..." enctype="multipart/form-data"> ... </f:form>

A form to change the properties of a domain object. This binds the values to the form fields.

XML / HTML:
<f:form action="..." name="customer" object="{customer}">
  <f:form.hidden property="id" />
  <f:form.textbox property="name" />
</f:form>

form fields

f:form.checkbox

XML / HTML:
<f:form.checkbox name="myCheckBox" value="someValue" />
Output: <input type="checkbox" name="myCheckBox" value="someValue" />

You can also perfom simple boolean operations.

XML / HTML:
<f:form.checkbox name="myCheckBox" value="someValue" checked="{object.value} == 5" />
Output: <input type="checkbox" name="myCheckBox" value="someValue" checked="checked" /> (depending on {object})

Bind to an object property

XML / HTML:
<f:form.checkbox property="interests" value="TYPO3" />
Output: <input type="checkbox" name="user[interests][]" value="TYPO3" checked="checked" /> (depending on property "interests")

f:errors

Iterates through errors of the request

XML / HTML:
<ul class="errors">
  <f:errors>
    <li>{error.code}: {error.message}</li>
  </f:errors>
</ul>
 
Output:
<ul>
  <li>1234567890: Validation errors for argument "newBlog"</li>
</ul>

f:form.hidden

Renders an <input type="hidden" ...> tag.

XML / HTML:
<f:form.hidden name="myHiddenValue" value="42" />
 
Output:
<input type="hidden" name="myHiddenValue" value="42" />

f:form.password

Creates a textbox for password input.

XML / HTML:
<f:form.password name="myPassword" />
 
Output:
<input type="password" name="myPassword" value="default value" />

f:form.radio

Creates a radio button

XML / HTML:
<f:form.radio name="myRadioButton" value="someValue" />
 
Output: <input type="radio" name="myRadioButton" value="someValue" />
XML / HTML:
<f:form.radio name="myRadioButton" value="someValue" checked="{object.value} == 5" />
 
Output: <input type="radio" name="myRadioButton" value="someValue" checked="checked" /> (depending on {object})
XML / HTML:
<f:form.radio property="newsletter" value="1" /> yes
<f:form.radio property="newsletter" value="0" /> no
 
Output:
<input type="radio" name="user[newsletter]" value="1" checked="checked" /> yes
<input type="radio" name="user[newsletter]" value="0" /> no
(depending on property "newsletter")

f:form.select

Renders a <select> dropdown list. The simplest way is to supply an associative array, where the key is used as option key and the value as human-readable name.

XML / HTML:
<f:form.select name="paymentOptions" options="{payPal: 'PayPal', visa: 'Visa Card'}" />

To preselect a value simply specify the attribute value="...". In this example: value="visa". If it is a multi-select box (multiple="true"), then value can be an array, too.

Binding to domain objects

XML / HTML:
<f:form.select name="users" options="{userArray}" optionValueField="id" optionLabelField="firstName" />

In this example userArray is an array of "User" domain objects with no array key. $user->getId() and $user->getFirstName() is used to retrieve the key and the display name. The value attribute in this case would expect a "User" domain object.

f:form.submit

XML / HTML:
<f:form.submit name="mySubmit" value="Send Mail" />
 
Output: <input type="submit" name="mySubmit" value="Send Mail" />

f:textarea

XML / HTML:
<f:form.textarea cols="20" rows="5" name="myTextArea" value="This is shown inside the textarea" />
 
Output: <textarea cols="20" rows="5" name="myTextArea">This is shown inside the textarea</textarea>

f:form.textbox

DEPRECATED: use f:form.textfield instead!

f:form.textfield

XML / HTML:
<f:form.textfield name="myTextBox" value="some value" />
 
Output: <input type="text" name="myTextBox" value="some value" />

f:form.upload

Generates an <input type="file"> element. Make sure to set enctype="multipart/form-data" on the form!

XML / HTML:
<f:form.upload name="file" />
 
Output: <input type="file" name="file" />

format

f:format.crop

Example:

XML / HTML:
<f:format.crop maxCharacters="17" append="&nbsp;[...]">This is some very long text</f:format.crop>

f:format.currency

Formats a number to resemble a currency.

XML / HTML:
<f:format.currency currencySign="€" decimalSeparator="," thousandsSeparator=".">1234.56</f:format.currency>

Output: 1.234,56 €

f:format.date

XML / HTML:
<f:format.date format="d.m.Y - H:i:s">+1 week 2 days 4 hours 2 seconds</f:format.date>

Usage with unix timestamps:

XML / HTML:
<f:format.date format="d.m.Y - H:i:s">@{your_timestamp}</f:format.date>

f:format.html

Renders Code through lib.parseFunc_RTE or a custom parsing function. To be used with RTE input.

f:format.raw

See: f:format.html To avoid default rendering of multiple p-tags around content use f:format.raw.

f:format.nl2br

Makes <br /> tags out of new lines.

XML / HTML:
<f:format.nl2br>Some text with
newlines in it.</f:format.nl2br>

Output:

Some text with
newlines in it.

f:format.number

Formats numbers country-specific

XML / HTML:
<f:format.number decimals="1" decimalSeparator="," thousandsSeparator=".">2345.678</f:format.number>

Output: 2.345,6

f.format.padding

Adds whitespace or a user-defined string to a string (using the PHP str_pad function).

XML / HTML:
<f:format.padding padLength="10" padString="_">text</f:format.padding>

Output: text______

See also: PHP Manual str_pad

f.format.printf

Formats a string with the PHP printf function.

XML / HTML:
<f:format.printf arguments="{0: 34567890, 1: 'some text'}">We can display %2$s and format numbers like this: %1$.3e</f:format.printf>
<f:format.printf arguments="{number: 12345}">%d</f:format.printf>

Output:

We can display some text and format numbers like this: 3.456e+7
12345

See also: PHP Manual printf

f:groupedFor

Sorts a multidimensional array in another dimension.

XML / HTML:
<ul>
   <f:groupedFor each="{0: {name: 'apple', color: 'green'}, 1: {name: 'cherry', color: 'red'}, 2: {name: 'banana', color: 'yellow'}, 3: {name: 'strawberry', color: 'red'}}" as="fruitsOfThisColor" groupBy="color" groupKey="color">
     <li>
       {color} fruits:
       <ul>
         <f:for each="{fruitsOfThisColor}" as="fruit" key="label">
           <li>{label}: {fruit.name}</li>
         </f:for>
       </ul>
     </li>
   </f:groupedFor>
 </ul>

f:if, f:then, f:else

Conditional Output

Examples:

XML / HTML:
<f:if condition="{myvar}">
  Displayed if myvar is neither an empty string nor "0".
</f:if>
 
<f:if condition="{myvar}">
  <f:then>
    Displayed if myvar is neither an empty string nor "0".
  </f:then>
  <f:else>
    Displayed if myvar IS an empty string or "0".
  </f:else>
</f:if>

Comparing strings is not possible (yet?), but you can help yourself with a little trick:

XML / HTML:
<f:if condition="{0:myvar} == {0:'test'}">
  Displayed if myvar is "test".
</f:if>

It is possible, to do some comparance of integer values.

XML / HTML:
 <f:if condition="{rank} > 100">
   Will be shown if rank is > 100
 </f:if>
 <f:if condition="{rank} % 2">
   Will be shown if rank % 2 != 0.
 </f:if>
 <f:if condition="{rank} == {k:bar()}">
   Checks if rank is equal to the result of the ViewHelper "k:bar"
 </f:if>

It is possible to use the result of another viewhelper as condition for the if-loop. The double quotes of the inner view helper have to be changed to single quotes then.

XML / HTML:
<f:if condition="<f:count subject='{post.comments}' /> > 0">
  <f:then>
    [...] Display comments here[...]
  </f:then>
  <f:else>
    No Comments found.
  </f:else>
</f:if>

f:image

Renders the Image specified by the src-attribute. The image can be resized by adding width and/or height attributes (resizing happens on the fly using an instance of tslib_cObj internally). You can also specify 'c' or 'm' to the width and height attributes.

XML / HTML:
<f:image src="upload/pics/myImage.png" width="200" height="150" alt="My Image" />
XML / HTML:
<f:image src="{f:uri.resource(path:'Images/myImage.png')}" width="200" height="150" alt="My Image" />

See also Typo3 TS reference

f:layout

Selects a layout

Example:

XML / HTML:
<f:layout name="Main" />

Links

f:link.action

Creates a link to an extbase action.

Example:

XML / HTML:
<f:link.action action="myAction"> Do It! </f:link.action>

Example with arguments:

XML / HTML:
<f:link.action action="myAction" controller="MyController" arguments="{argument: argument}">Do It!</f:link.action>

f:link.email

Email link with spamProtectEmailAddresses-settings.

Example:

XML / HTML:
<f:link.email email="foo@example.com" />

f:link.external

Creates an external link.

Example:

XML / HTML:
<f:link.external uri="http://www.typo3.org" target="_blank">external link</f:link.external>

f:link.page

Creates a Typolink.

Example:

XML / HTML:
  <f:link.page>Current Page</f:link.page>
 
  <f:link.page pageUid="23">Contact</f:link.page>
 
  <f:link.page pageUid="13" additionalParams="{tt_news|news: 13}">Read whole news</f:link.page> (does not work with Fluid 1.3)
  <f:link.page pageUid="13" additionalParams="{tt_news: '{news: 13}'}">Read whole news</f:link.page> (works with Fluid 1.3)
 
  <f:link.page addQueryString="1" section="#top">To Top</f:link.page>
 
  <f:link.page pageUid="23" pageType="123">Generate PDF</f:link.page>

f:uri.*

If you need just the link itself from a link ViewHelper and not the full link tag, the ViewHelpers <f:uri.action>, <f:uri.email>, <f:uri.external>, <f:uri.image>, <f:uri.page> should be used. The arguments are the same as for the once of <f:link.

Examples:

XML / HTML:
<f:uri.action action="myAction" controller="MyController" arguments="{argument: argument}" />
<f:uri.email email="foo@example.com" />
<f:uri.page pageUid="23" />

f:renderFlashMessages

Renders Flash-Messages.

Example:

XML / HTML:
<f:renderFlashMessages />

f:render

Renders the content of a section or a partial.

XML / HTML:
<f:render partial="itemForm" arguments="{item: item}" />
 
<f:render section="sectionname" />

See also: f:section

f:section

With a section you can define a section within a template.

Example:

XML / HTML:
<f:layout name="layoutname" />
<f:section name="content">
  //Define Section here
</f:section>

This section will be called from a layout with

XML / HTML:
<f:render section="sectionname" />

f:translate

Translate a given key or use the tag body as default.

Example:

XML / HTML:
<f:translate key="label_recent_posts">Below are the most recent posts:</f:translate>


Other resources

Retrieved from "http://wiki.typo3.org/wiki/index.php?title=Fluid&oldid=61184"
Go to: typo3.org    
Login, and you can edit.
Personal tools
Namespaces

Variants
Actions