Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Symfony 3 | Twig] equivalent classes HTML ?

    23 avril 2017 à 10:11:51

    Bonjour à tous,

    Je développe pas mal depuis plusieurs années et jai recement décidé de me mettre à symfony (3). 

    Avant davoir commencé sur symfony, dans mon fonctionnement, j'avais créé des classes php pour tous les éléments html que je pouvais avoir sur mon template :

    • tous les input
    • Tous les éléments Boostrap (Modal, Widgetbox, DropdownButton, Label, ProgressBar etc etc...)

    ainsi, dans mes pages si, je veux creer une nouvelle Modal Jai juste à faire 

    <?php 
    $ma_modal = new Modal("titre", "id_1");
    $ma_modal->setContent('Super contenu');
    echo $ma_modal; //plein d'autres options dispo évidement 

    Voila. 3 lignes de code qui en remplacent un 20 aine en HTML, et je suis sûr qu'il ne peux pas y avoir d'erreur HTML puisque je m'en suis assuré une fois pour toute dans ma classe. 

    Dans symfony maintenant :

    J'en suis vraiment au début (Jai même pas encore vu doctrine) mais je commence à comprendre le fonctionnement de Twig avec les variables, les includes, les extends etc... par contre je ne trouve pas comment traduire mon fonctionnement par classe dans Twig. Même si j'en suis pas encore la, j'ai besoin de me rassurer en sachant que c'est possible et en voyant même succinctement comment convertir mes classe php qui génèrent du HTML en "classe Twig". Pour ne pas avoir à recopier du code Ad vitam aeternam  

    Avez vous une idée ?

    Merci beaucoup !!

    -
    Edité par cyril5789 23 avril 2017 à 11:27:15

    • Partager sur Facebook
    • Partager sur Twitter
      23 avril 2017 à 13:54:39

      Je pense que le meilleur équivalent à ton code sur Symfony serait ça : 

      {{ render(controller('AcmeBundle:Default:index')) }}

      qui correspond dans ce cas à l'action AcmeBundle/DefaultController:indexAction.  Tu peux y passer aussi des paramètres et bien sur la vue avec ton html.

      -
      Edité par Xerophy 23 avril 2017 à 13:59:17

      • Partager sur Facebook
      • Partager sur Twitter
        23 avril 2017 à 15:06:35

        Bonjour,

        Quelques idées :

        - d'abord rien n'oblige à utiliser twig. Une vue peut-être rendue en php. Dans ce cas, il me semble que les classes existantes pourraient être pérennisées.

        - twig étant un moteur de template, il me semble difficile de faire cohabiter les 2 méthodes de rendu.

        Néanmoins 

        - il est possible de définir ses propres fragments html : http://symfony.com/doc/current/form/form_customization.html

        - les mécanismes d'inclusion doivent pouvoir aussi faire des blocks génériques.

         Ceci permet peut-être de faire une surcouche de rendu.

        A+

        • Partager sur Facebook
        • Partager sur Twitter
          24 avril 2017 à 0:13:35

          Merci pour vos réponses à tous les 2. J'ai pris bonnes notes de vos solutions que j'étudierai prochainement.

          Cela dit, jai le sentiment qu'il s'agit un peu de faire du bricolage car - à priori - il n'existe rien de réellement prévu pour faire ce que je demande... en tout cas pas aussi facilement qu'avec de bonnes vieilles classes php.

          la question est donc : comment font les développeurs sous symfony à chaque fois qu'ils veulent afficher un élément particulier ? (Modal, widget, progressBar etc...) ils reprennent à chaque fois le code source html ?

          je trouve que cela va à l'encontre de la philosophie symfony non ? On est censé en faire le moins possible pour développer le plus facilement possible et le plus vite possible. 

          Apres, je me vois mal me passer de twig. J'apprécie énormément cette simplicité, cette rigueur et ce détachement complet entre l'html et le php. Donc même si, dans mons cas, un retour aux sources permettrait de pérenniser mes classes, je ne veux pas perdre la rigueur que me procure twig. 

          • Partager sur Facebook
          • Partager sur Twitter
            24 avril 2017 à 9:02:38

            Symfony est avant tout un framework php ... donc côté serveur ... ce que tu demandes est côté navigateur.

            Symfony a intégré le moteur de template Twig pour avoir une solution complète mais comme je l'ai dit rien n'oblige de l'utiliser.

            J'ai développé plusieurs projets sous Symfony et il suffit souvent d'intégrer dans la vue twig une classe de la feuille de style css pour avoir le rendu voulu sur une portion de page ... donc c'est finalement assez simple. De plus l'héritage de template, la notion de block et leur surcharge et la définition de fragment (cf ci-dessus) permettent de construire une vue twig (une page html) par composition successive. Je ne pense pas que ce soit "du bricolage".

            Ta formule de classe php nécessite aussi de composer la page par sorte de blocs donc je ne pense pas que ce soit plus simple.

            Twig intègre aussi nombre de fonctions intéressantes comme la possibilité de traduire simplement les différents 'labels, etc' suivant la langue choisie.

            Mon avis : soit tu veux conserver ton outillage et tu rends les vues en php (ce qui est tout à fait possible) soit tu utilises twig et tu oublies tes classes php.

            Utilises tu un framewok css, js ?

            A+ 

            -
            Edité par monkey3d 24 avril 2017 à 9:10:32

            • Partager sur Facebook
            • Partager sur Twitter
              24 avril 2017 à 10:16:47

              Hello !

              Avec Twig, tu peux étendre un template ou insérer un bloc d'un autre template. Je te laisse lire un peu la doc à ce sujet mais je suis persuadé que ça peut t'aider : https://twig.sensiolabs.org/doc/2.x/tags/extends.html

              Ensuite effectivement tu vas devoir tout réécrire en TWIG ce que tu as fait en PHP mais c'est un moindre mal ;) Le moteur de template c'est le bien car ça t'empêche d'avoir du code métier dans la vue.

              • Partager sur Facebook
              • Partager sur Twitter
              Nous sommes tous débutant pour quelqu'un et expert pour quelqu'un d'autre...
                24 avril 2017 à 13:25:29

                Monkey3D

                "Ta formule de classe php nécessite aussi de composer la page par sorte de blocs donc je ne pense pas que ce soit plus simple."

                Pas plus simple à configurer ! Mais à utiliser si. C'est carrément hyper intuitif. 

                Apres je verrais ce qui se rapproche le mieux de ce que j'ai actuellement et vous proposerait une solution trouvée. Vous me direz ce que vous en pensez :)

                • Partager sur Facebook
                • Partager sur Twitter
                  24 avril 2017 à 13:30:43

                  Salut !

                  Il me semble qu'il existe les macros Twig, sortes de fonctions pour rendre un contenu un peu partout en fonction de paramètres. Je ne sais pas comment faire pour rendre certaines macros globales, mais au pire, tu peux même créer des fonctions Twig qui rendent des blocs de template.

                  • Partager sur Facebook
                  • Partager sur Twitter
                    24 avril 2017 à 15:32:59

                    Pas plus simple à configurer ! Mais à utiliser si. C'est carrément hyper intuitif. 

                    C'est intuitif parce que tu connais ... et sans vouloir être désagréable tu es certainement le seul à connaître ton outillage ... twig il doit y avoir des milliers de développeurs qui connaissent et qui en pratiquant doivent aussi trouver cela intuitif.

                    Je pense que je t'ai tout dit sur les possibilités de vue sans twig en php ou avec twig en utilisant les héritages de template, les fragments, les fonctions, ... les macros, ... les blocks, ...

                    Si tu réalises un bon outillage générique sur le sujet et intuitif, n'hésite pas à le partager à la communauté.

                    A+


                    • Partager sur Facebook
                    • Partager sur Twitter
                      25 avril 2017 à 8:14:05

                      J'y manquerait pas ! :)

                      je viene de trouver ça du coup suite au message de Ymox 

                      https://twig.sensiolabs.org/doc/2.x/tags/macro.html

                      Ça m'a l'air pas mal du tout. Juste dommage qu'il s'agisse la d'un équivalent des fonctions à php. C'est à dire que tout se déclare en une seule ligne 

                      fonction(param1, param2, param3...)

                      J´aimais bien la possibilité de faire appelle à des méthodes en cours de route avec les classes php

                      <?php
                      
                      $textearea = new Textarea('nom','id');
                      $textearea->SetPlaceHolder('écrivez ici');
                      $textearea->setWysiwyg;
                      
                      $mon_formulaire->addLine('Description :', $textearea);
                      
                      echo $mon_formulaire;



                      ouais je sais je suis jamais content ;)

                      je vais voir si les macros conviennent quand même 

                      dailleurs tu m'as demandé si j'utilise un fw css et js... euh je crois que bootstrap est un framework ? Si c'est le cas, oui je l'utilise ^^ mais peut être pas correctement. Ce n'est pas ma tasse de thé le css et le js (voila pourquoi j'achète des templates tous fait sur themeforest)

                      -
                      Edité par cyril5789 25 avril 2017 à 20:09:39

                      • Partager sur Facebook
                      • Partager sur Twitter
                        25 avril 2017 à 8:17:23

                        Passe en résolu.

                        Bye

                        EDIT :

                        Pour info, j'utilise aussi bootstrap et jQuery.

                        Je ne trouve pas cela très complexe pour faire un page html.

                        Pour reprendre ton exemple avec le textarea et bootstrap, il suffit de faire dans une vue twig :

                        <textarea class="form-control" placeholder="Ecrivez ici ..." id="toto">{{ "contenu" | trans }}</textarea>

                        Et pour le même prix tu peux avoir le contenu traduit via trans.

                        Si tu penses que tes 5 lignes sont plus intuitives ... ;):D

                        Bye

                        -
                        Edité par monkey3d 25 avril 2017 à 11:13:22

                        • Partager sur Facebook
                        • Partager sur Twitter
                          25 avril 2017 à 19:34:32

                          En réalité c'est pas tant pour les les inputs que j'utilise des classes (même si je le fais aussi pour plus de rigueur)

                          C'est surtout pour les éléments complexes qui prennent plusieurs lignes...

                          WidgetBox HTML (Portlet) :

                          <div class="portlet light bordered">
                          	<div class="portlet-title">
                          		<div class="caption">
                          			<i class="icon-share font-dark"></i>
                          			<span class="caption-subject font-dark bold uppercase">Titre</span>
                          		</div>
                          		<div class="actions">
                          			<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
                          				<i class="icon-cloud-upload"></i>
                          			</a>
                          		</div>
                          	</div>
                          	<div class="portlet-body">
                          		Contenu
                          	</div>
                          </div>


                          En Php :

                          <?php
                          
                          $wb = new WidgetBox('Titre');
                          $wb->setContent('Contenu');
                          echo $wb;

                          C'est quand même nettement plus simple non ?

                          Idem pour les Modal, pour les tableaux, pour les Ribbon, les Tabs (onglets), les accordéons... 

                          Pour faire un Widget à onglets par exemple j'ai juste à faire :

                          <?php
                          $tab = new Tab(); //Position par defaut = "top", sinon "bottom", "right" ou "left"
                          $tab->addPane('Titre onglet 1', 'Contenu 1');
                          $tab->addPane('Titre onglet 2', 'Contenu 2');
                          $tab->addPane('Titre onglet 3', 'Contenu 3');
                          echo $tab;
                          

                          C'est quand même nettement plus digestes que des dizaines de lignes HTML non ? Où on se mélange, on sait plus si on à fermé la div, quelle classe il faut mettre la div "header"... c'est une surcouche PHP qui me permet de générer du code HTML en 2-2. Et même un non initié à mon code s'en sort très rapidement.

                          En plus j'ai des classes qui héritent d'autres... Mes "ModalDialog" qui contient des Buttons (Classes 'button.class.php') etc... etc...

                          Sachant que si je décide de changer de template qui n'utilise pas les même classes, les mêmes div : j'ai juste à modifier ma classe avec le nouveau schéma choisi par le créateur du design que j'ai acheté ! Je n'ai pas à changer tout mon code sur toutes mes pages.

                          J'ai l'impression de passer un peu pour un extra-terrestre alors que ça me parait tellement logique de travailler comme ça pour se faciliter la vie ! ^^ (humour hein) Mais c'est quand même pas faux, si ?



                          -
                          Edité par cyril5789 25 avril 2017 à 19:34:55

                          • Partager sur Facebook
                          • Partager sur Twitter
                            7 mai 2017 à 17:21:40

                            Bon, je reviens vers vous, j'ai commencé un peu mes Macros, 

                            Enfin une macro simple (pour commencer)

                            {% macro note(text, type) %}
                                
                            {% if (type != 'info') and (type != 'success') and (type != 'warning') and (type != 'danger') %}
                                {% set type = 'info' %}
                            {% endif %}    
                                
                            <div class="note note-{{ type }}">
                                <p>{{ text }}</p>
                            </div>
                                
                            {% endmacro %}

                            Qui s'utilise comme ça simplement :

                            {% import 'v4/macro/macro.html.twig' as macro %}
                            
                            
                            {{  macro.note('super texte', 'info' )  }}

                            C'est pas mal, mais ça manque franchement de puissance, et c'est pas du tout intuitif. Et y'a aucune auto complétion avec l'IDE. Je regrette mes classes. Je comprend vraiment pas que rien de plus puissant n'existe à ce jour pour gérer cette aspect de twig


                            • Partager sur Facebook
                            • Partager sur Twitter
                              7 mai 2017 à 17:34:59

                              L'auto-complétion est un problème d'IDE et n'a pas directement à voir avec le sujet.

                              J'utilise eclipse et j'ai l'auto-complétion sur twig.

                              Pour le reste, déjà tout dit : utilise php pour le rendu et tu seras satisfait avec tes classes php que tu maîtrises.

                              Bye

                              • Partager sur Facebook
                              • Partager sur Twitter
                                7 mai 2017 à 17:47:42

                                D'accord, 

                                Du coup, concrètement, comment j'inclus mes fichiers ?

                                Ou plutot, comment depuis une vue (PHP du coup !) je fais pour appeler un controller ?

                                L'équivalent de : 

                                {% block menu %}{{ render(controller('OCPlatformBundle:Advert:menu')) }}{%  endblock %}

                                Et comment je passe mes variables à l'appelle de mes vues ?

                                Enfin, je suppose que je les passe pareil : 

                                return $this->render('OCPlatformBundle:Advert:index.php', array('variable' => $variable));


                                Mais comment je les récupère dans mon fichier PHP ?

                                -
                                Edité par cyril5789 7 mai 2017 à 17:51:06

                                • Partager sur Facebook
                                • Partager sur Twitter

                                [Symfony 3 | Twig] equivalent classes HTML ?

                                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                • Editeur
                                • Markdown