TASK: Add docs about configuration of views

This commit is contained in:
Daniel Siepmann 2018-09-01 14:07:27 +02:00
parent 6085264b27
commit e47a16656d
Signed by: Daniel Siepmann
GPG key ID: 33D6629915560EF4
2 changed files with 160 additions and 12 deletions

View file

@ -31,6 +31,6 @@ class ExampleController extends ActionController
// Comment the code out, to use fluid template from // Comment the code out, to use fluid template from
// "Resources/Private/Templates/Example/Example.html" // "Resources/Private/Templates/Example/Example.html"
return 'Hello world!'; // return 'Hello world!';
} }
} }

View file

@ -44,27 +44,175 @@ Do not forget to remote the ``return 'Hello world!';`` from our controller.
We should now see our "Hello World!". We should now see our "Hello World!".
Sections
--------
ViewHelper
----------
Partials and Layouts
--------------------
Configuration Configuration
------------- -------------
Awesome, we now do no longer need to touch PHP code to change the output, we can use Awesome, we now do no longer need to touch PHP code to change the output, we can use
Fluid and an Integrator or Frontendler is able to change something. Fluid and an Integrator or Frontendler is able to change something.
But they should be able to change template ins their own extension, e.g. a But they should be able to change templates in their own extension, e.g. a
"sitepackage". Let's take a look how this works. "sitepackage". We will see how to do this in next chapter "Configuration".
Sections
--------
If templates grow in size, we need to add some structure. One way is to use sections
inside a single Template. A section is like a PHP method or function and can be
called with arguments:
.. code-block:: html
:linenos:
Normal output
{f:render(
section: 'FirstSection',
arguments: {
arg1: var1,
arg2: var2,
arg3: 'string'
}
)}
<f:section name="FirstSection">
Some output + {arg1}.
</f:section>
We have our default output "Normal output" and call a ViewHelper ``f:render`` with
some arguments to render a specific section with some arguments. The ViewHelper will
be replaced with the rendered result of the section.
This way it's possible to structure templates like Controllers. They control the
output flow and call different sections with arguments where more specific logic
happens.
Variables
---------
Variables are assigned via PHP:
.. code-block:: php
:linenos:
// Inside a controller action do:
$this->view->assign('var1', $variable1);
$this->view->assign('var2', $variable2);
// Or to assign multiple variables at once:
$this->view->assignMultiple([
'var1' => $variable1
'var2' => $variable2
]);
Assigned variables can be accessed inside Fluid with curly braces:
.. code-block:: html
:linenos:
Hello {userInput}!
ViewHelper
----------
To make Templates more flexible, ViewHelpers are available. They are custom HTML-Tags
available inside via template engine.
TYPO3 and Fluid already ship some ViewHelpers, but you can provide own ViewHelpers.
ViewHelpers always live in a Namespace, e.g. ``TYPO3\CMS\Fluid\ViewHelpers`` or
``Workshop\\ExampleExtension\\ViewHelpers``.
You can either register these namespaces globally, or inside the templates via
``{namespace wee=Workshop\ExampleExtension\ViewHelpers}``.
The ``f`` namespace for ``Fluid`` is always registered globally.
Once ViewHelpers are available available, you can use them:
.. code-block:: html
<f:format.crop maxCharacters="5">Hello World!</f:format.crop>
The above should output "Hello ...", as the string is cropped to 5 characters, the
"..." can be configured via another argument of the ViewHelper:
.. code-block:: html
<f:format.crop maxCharacters="5" append="">Hello World!</f:format.crop>
Beside the tag based kind of inserting ViewHelpers, you can also use the "inline
notation":
.. code-block:: html
:linenos:
{f:format.date(date: 'now')}
It's also possible to chain ViewHelpers in both ways:
.. code-block:: html
:linenos:
{f:format.date(date: 'now') -> f:format.raw()}
<f:format.raw>
{f:format.date(date: 'now')}
</f:format.raw>
<f:format.raw>
<f:format.date date="midnight" />
</f:format.raw>
<f:format.raw>
<f:format.date>midnight</f:format.date>
</f:format.raw>
Partials and Layouts
--------------------
We already saw sections to make a single template easier to manage.
For re-using parts between multiple templates there are Partials.
Partials are like Templates and can be rendered via:
.. code-block:: html
:linenos:
Normal output
{f:render(
partial: 'Path/To/Partial',
arguments: {
arg1: var1,
arg2: var2,
arg3: 'string'
}
)}
Also each template can be embedded into a Layout via:
.. code-block:: html
:linenos:
<f:layout name="Layout/Path/AndName" />
This way wrapping code, e.g. for HTML E-Mails or content elements can be moved to a
layout and all templates can inherit this layout.
Further resources Further resources
----------------- -----------------
.. hint::
Use ViewHelpers for output logic, not to get data into your View.
Use Controller and DataProcessing to prepare data.
* Available ViewHelpers can be found at:
* :file:`typo3/sysext/fluid/Classes/ViewHelpers/`
* :file:`vendor/typo3fluid/src/ViewHelpers/`
* https://github.com/TYPO3/Fluid * https://github.com/TYPO3/Fluid
* https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Fluidtemplate/Index.html * https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Fluidtemplate/Index.html