"Composants" et css/js

**tontonnux** · 31/03/2014, 17h32

Bonjour,

Je commence à regarder comment fonctionne Symfony2 (j'ai déjà travaillé avec Symfony1) et je n'arrive pas à trouver la réponse à la question suivante:

Dans Symfony1, pour ajouter une feuille CSS ou un fichier Javascript, on avait les helper de type use_...
Ca permettait par exemple de placer le helper dans la vue d'un composant et ainsi, lorsqu'une page devait inclure le composant, le composant lui-même ajoutait ses ressources à la pile qui était donc rendue globalement via les include_stylsheets() dans la layout de base.

Ex:

Code layout.php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <?php include_title() ?>
        <?php include_stylesheets() ?>
    </head>
    <body>
        <?php include_component('base','example') ?>
 
        <?php include_javascripts(); /* rend les balises <script> */ ?>
    </body>
</html>

Code .../module/base/templates/_example.php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<?php
use_javascript("lien/vers/mon/fichier.js"); // ajoute le fichier à la pile
?>
<div id="mondiv"></div> <!-- mon JS travail sur cet élément par exemple -->

La question est donc: comment reproduire ce comportement avec Symfony2 ?

Si j'ai:

Code layout.php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!doctype html>
<html lang="{{ 'fr' }}"> 
{% block body %}
    <head>
        <title>{% block title %}Test{% endblock %}</title>
        {% block stylesheets %}
            {% stylesheets filter='cssrewrite'
                'bundles/monbundle/css/fichier.css' %}
                <link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
            {% endstylesheets %}
        {% endblock %}
 
    </head>
    <body>
        {{ render(controller("monbundle:base:example")) }}
 
        {% block javascripts %}
            {% javascripts
                'bundles/monbundle/jquery.js' %}
                <script type="text/javascript" src="{{ asset_url }}"></script>
            {% endjavascripts %}
        {% endblock %}
    </body>
{% endblock %}
</html>

Comment faire en sorte que si j'inclue mon action monbundle:base:example, les CSS et JS dont dépend l'action soit ajoutés au {% block javascripts %} ?

**Nico_F** · 31/03/2014, 17h38

Hello,

Tu peux surcharger les blocs css et js en les redéclarant dans ton fichier monbundle:base:example.html.twig de cette manière

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endblock %}
 
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endblock %}

**tontonnux** · 31/03/2014, 17h44

Mais mon "composent", n'est pas censé hériter du layout du coup, le layout n'est pas censé être son "parent".
Je me trompe ?

Si je test j'ai ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Calling "parent" on a template that does not extend nor "use" another template is forbidden in

**Nico_F** · 01/04/2014, 09h34

Si ton template n'étend ou n'utilise aucun layout de base, il ne possède aucun css ni aucun js. Donc effectivement l'appel de parent() n'a pas de sens : mais si ce que tu veux c'est rajouter un fichier à la pile de css et de js il faut bien qu'il y ait un layout qui possède cette pile au départ.

**tontonnux** · 01/04/2014, 10h36

Envoyé par Nico_F

Si ton template n'étend ou n'utilise aucun layout de base, il ne possède aucun css ni aucun js.

Pourquoi un template qui n'étends pas le layout ne pourrait avoir besoin de ressources spécifiques ?

Envoyé par Nico_F

Donc effectivement l'appel de parent() n'a pas de sens

On est bien d'accord sur ce point.

Envoyé par Nico_F

mais si ce que tu veux c'est rajouter un fichier à la pile de css et de js il faut bien qu'il y ait un layout qui possède cette pile au départ.

Non, mon template a beau ne pas étendre le layout, il est malgré tout inclue dans celui-ci. Le layout et ce template de composant ne sont rien de plus que 2 morceau d'un même résultat HTML. A ce titre, il n'y a aucune raison de ne pas pouvor mettre en commun leurs ressources JS et CSS.

Comme je l'ai dit, l'idée est de créer un composant qui puisse être inclue ensuite dans n'importe quelle page, donc dans n'importe quel template.
Si mon composant à besoin de ressources spécifiques CSS ou JS, il n'est pas question de systématiquement ajouter l'appel de ces ressources à chaque fois que j'ai besoin d'utiliser mon composant (duplication inutile de code).
Faire simplement un appel à ce composant doit suffire. C'était le comportement standard de Symfony1.

Ajouter en bourrin un tag <javascript> directement dans le template du composant serait bien évidemment sale, et poserai de toute façon des problèmes de dépendance éventuelle (si le JS en question a besoin de jQuery, qui est lui chargé en toute fin de page, ça va planter).

Ce que je veux est plutôt simple (mais j'ai peut-être du mal à l'expliciter): je veux qu'au rendu de ma page, 100% des Ressources utilisées par chaque partie et chaque composant soit appelées au même endroit, et compressées (chose de base dans Symfony1 encore une fois, il n'y a rien de révolutionnaire dedans).

**gototog** · 01/04/2014, 14h10

qui était donc rendue globalement via les include_stylsheets() dans la layout de base.

Il y'a bien l'air d'avoir une dépendance au layout de base, je ne comprend pas pourquoi refuser de faire cette même dépendance dans twig

"Composants" et css/js

Symfony PHP

Vue hybride

Partager

Partager