11The View
22========
33
4- After reading the first part of this tutorial, you have decided that Symfony2
5- was worth another 10 minutes. Great choice! In this second part, you will
6- learn more about `Twig `_, the Symfony2 template engine. Twig is a flexible,
7- fast, and secure template engine for PHP. It makes your templates more
8- readable and concise; it also makes them more friendly for web designers.
4+ In this second chapter, you will learn more about `Twig `_, the fast, flexible,
5+ and secure template engine for PHP. Twig makes your templates more readable and
6+ concise; it also makes them more friendly for web designers.
97
108Getting familiar with Twig
119--------------------------
1210
13- The official Twig` documentation `_ is the best resource to learn everything
14- abut this new template engine. This section just gives you a quick overview of
11+ The official` Twig documentation `_ is the best resource to learn everything
12+ about this new template engine. This section just gives you a quick overview of
1513its main concepts.
1614
1715A Twig template is a text file that can generate any type of content (HTML, CSS,
18- JavaScript, XML, CSV, LaTeX, ...). Twig defines three kinds of delimiters:
16+ JavaScript, XML, CSV, LaTeX, ...). Twig elements are separated from the rest of
17+ the template contents using any of these delimiters:
1918
2019* ``{{ ... }} ``: prints the content of a variable or the result of an expression;
2120
22- * ``{% ... %} ``: controls the logic of the template; it is usedto execute
23- ``for `` loops and ``if `` statements, for example ;
21+ * ``{% ... %} ``: controls the logic of the template; it is usedfor example to
22+ execute ``for `` loops and ``if `` statements;
2423
2524* ``{# ... #} ``: allows to include comments inside templates.
2625
@@ -32,52 +31,54 @@ Below is a minimal template that illustrates a few basics, using two variables
3231 <!DOCTYPE html>
3332 <html>
3433 <head>
35- <title>My Webpage </title>
34+ <title>{{ page_title }} </title>
3635 </head>
3736 <body>
3837 <h1>{{ page_title }}</h1>
3938
4039 <ul id="navigation">
4140 {% for item in navigation %}
42- <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
41+ <li><a href="{{ item.url }}">{{ item.label }}</a></li>
4342 {% endfor %}
4443 </ul>
4544 </body>
4645 </html>
4746
4847To render a template in Symfony, use the ``render `` method from within a controller
49- and passit any variables neededin thetemplate ::
48+ and passthe variables neededas an array using theoptional second argument ::
5049
5150 $this->render('AcmeDemoBundle:Demo:hello.html.twig', array(
5251 'name' => $name,
5352 ));
5453
5554Variables passed to a template can be strings, arrays, or even objects. Twig
5655abstracts the difference between them and lets you access "attributes" of a
57- variable with the dot (``. ``) notation:
56+ variable with the dot (``. ``) notation. The following code listing shows how to
57+ display the content of a variable depending on the type of variable passed by
58+ the controller:
5859
5960..code-block ::jinja
6061
62+ {# 1. Simple variables #}
6163 {# array('name' => 'Fabien') #}
6264 {{ name }}
6365
66+ {# 2. Arrays #}
6467 {# array('user' => array('name' => 'Fabien')) #}
6568 {{ user.name }}
6669
67- {#force array lookup #}
70+ {#alternative syntax for arrays #}
6871 {{ user['name'] }}
6972
73+ {# 3. Objects #}
7074 {# array('user' => new User('Fabien')) #}
7175 {{ user.name }}
7276 {{ user.getName }}
7377
74- {#force method name lookup #}
78+ {#alternative syntax for objects #}
7579 {{ user.name() }}
7680 {{ user.getName() }}
7781
78- {# pass arguments to a method #}
79- {{ user.date('Y-m-d') }}
80-
8182
8283--------------------
8384
@@ -116,28 +117,38 @@ Now, simplify the ``layout.html.twig`` template:
116117 {% endblock %}
117118 </div>
118119
119- {% block %} `` tags define blocks that child templates can fill in. All
120- the ``{% block %} `` tag does is to tell the template engine that a child
121- template may override those portions of the template.
122-
123- In this example, the ``hello.html.twig `` template overrides the ``content ``
124- block, meaning that the "Hello Fabien" text is rendered inside the ``<div> ``
125- element.
120+ {% block %} `` tags tell the template engine that a child template may
121+ override those portions of the template. In this example, the ``hello.html.twig ``
122+ template overrides the ``content `` block, meaning that the "Hello Fabien" text
123+ is rendered inside the ``<div> `` element.
126124
127125Using Tags, Filters, and Functions
128126----------------------------------
129127
130128One of the best feature of Twig is its extensibility via tags, filters, and
131- functions. Symfony2 comes bundled with many of these built-in to ease the
132- work of the template designer.
129+ functions. Take a look at the following sample template that uses filters
130+ extensively to modify the information before displaying it to the user:
131+
132+ ..code-block ::jinja
133+
134+ <h1>{{ article.title|trim|capitalize }}</h1>
135+
136+ <p>{{ article.content|striptags|slice(0, 1024) }}</p>
137+
138+ <p>Tags: {{ article.tags|sort|join(", ") }}</p>
139+
140+ <p>Next article will be published on {{ 'next Monday'|date('M j, Y')}}</p>
141+
142+ Twig documentation `_ to learn everything
143+ about filters, functions and tags.
133144
134145Including other Templates
135146~~~~~~~~~~~~~~~~~~~~~~~~~
136147
137- The best way to share a snippet of code between severaldistinct templates is
138- to create a new template that can then be included from other templates.
148+ The best way to share a snippet of code between several templates is to create a
149+ new template fragment that can then be included from other templates.
139150
140- Create an ``embedded.html.twig `` template:
151+ First, create an ``embedded.html.twig `` template:
141152
142153..code-block ::jinja
143154
@@ -163,32 +174,31 @@ And what if you want to embed the result of another controller in a template?
163174That's very useful when working with Ajax, or when the embedded template needs
164175some variable not available in the main template.
165176
166- Suppose you've created a ``fancyAction `` controller method, and you want to
167- "render" it inside the ``index `` template, which means including the result
168- (e.g. ``HTML ``) of the controller. To do this, use the ``render `` function:
177+ Suppose you've created a ``topArticlesAction `` controller method to display the
178+ most popular articles of your website. If you want to "render" the result of
179+ that method (e.g. ``HTML ``) inside the ``index `` template, use the ``render ``
180+ function:
169181
170182..code-block ::jinja
171183
172184 {# src/Acme/DemoBundle/Resources/views/Demo/index.html.twig #}
173- {{ render(controller("AcmeDemoBundle:Demo:fancy ", {'name ':name, 'color': 'green' })) }}
185+ {{ render(controller("AcmeDemoBundle:Demo:topArticles ", {'num ':10 })) }}
174186
175- AcmeDemoBundle:Demo:fancy `` string refers to the ``fancy `` action
176- of the ``Demo `` controller. The arguments (``name `` and ``color ``) act like
177- simulated request variables (as if the ``fancyAction `` were handling a whole
178- new request) and are made available to the controller::
187+ AcmeDemoBundle:Demo:topArticles `` string refers to the
188+ ``topArticlesAction `` action of the ``Demo `` controller, and the ``num ``
189+ argument is made available to the controller::
179190
180191 // src/Acme/DemoBundle/Controller/DemoController.php
181192
182193 class DemoController extends Controller
183194 {
184- public functionfancyAction($name, $color )
195+ public functiontopArticlesAction($num )
185196 {
186- //create some object, based on the $color variable
187- $object = ...;
197+ //look for the $num most popular articles in the database
198+ $articles = ...;
188199
189- return $this->render('AcmeDemoBundle:Demo:fancy.html.twig', array(
190- 'name' => $name,
191- 'object' => $object,
200+ return $this->render('AcmeDemoBundle:Demo:topArticles.html.twig', array(
201+ 'articles' => $articles,
192202 ));
193203 }
194204
@@ -208,9 +218,8 @@ updated by just changing the configuration:
208218 <a href="{{ path('_demo_hello', { 'name': 'Thomas' }) }}">Greet Thomas!</a>
209219
210220The ``path `` function takes the route name and an array of parameters as
211- arguments. The route name is the main key under which routes are referenced
212- and the parameters are the values of the variables defined in the route
213- pattern::
221+ arguments. The route name is the key under which routes are defined and the
222+ parameters are the values of the variables defined in the route pattern::
214223
215224 // src/Acme/DemoBundle/Controller/DemoController.php
216225 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
@@ -267,5 +276,5 @@ But I'm getting ahead of myself. First, you need to learn more about the control
267276and that's exactly the topic of the:doc: `next part of this tutorial <the_controller >`.
268277Ready for another 10 minutes with Symfony2?
269278
270- .. _Twig :http://twig.sensiolabs.org/
271- .._ documentation :http://twig.sensiolabs.org/documentation
279+ .. _Twig :http://twig.sensiolabs.org/
280+ .._ Twig documentation :http://twig.sensiolabs.org/documentation