Nous allons voir ici comment utiliser le Genemu Bundle dans Symfony, pour avoir un Date Picker, utiliser TinyMCE et Select 2. Genemu est un ancien bundle qui permet facilement d’utiliser un ensemble de “Form Types” dans les “Forms” (formulaires) Symfony: Captcha GD, Tinymce, Recaptcha, JQueryDate, JQueryAutocomplete, JQuerySlider, JQueryFile, JQueryImage

Installation

Installer le bundle Genemu

Dans composer.json, ajouter:

"genemu/form-bundle" : "2.2.*",

puis exécuter

php composer.phar update  

Ajouter la ligne suivante dans AppKernel.php

public function registerBundles()     {  
$bundles = array(             ...             
  new Genemu\Bundle\FormBundle\GenemuFormBundle(),
             ...
    }

 Installer les assets extérieurs

Télécharger TinyMCE et décompresser l’archive dans web/js comme ci-dessous.

Télécharger Select 2 et décompresser l’archive dans web/js comme ci-dessous.

Decompresstinymce

Télécharger éventuellement les langages nécessaires ](http://www.tinymce.com/i18n/index.php)pour TinyMCE et les décompresser dans web/js/tinymce/langs.

Paramétrage

Dans votre template de layout ajouter les lignes suivantes:

  {% block stylesheet %}
     ....
     {% if form is defined %}
       <link rel="stylesheet/css" type="text/css" href="{{ asset ('js/select2-3.5.2/select2.css') }}" />
       {{ form_stylesheet(form) }}
     {% endif %}
   {% endblock %}
   ...
   {% block scripts %}
     ...
     {% if form is defined %}
       <script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
       <script src="{{ asset('js/select2-3.5.2/select2.min.js') }}"></script>
       {{ form_javascript(form) }}
     {% endif %}
   {% endblock %}

Ajouter Jquery et Jquery UI si cela n’est pas déjà fait.

Modifier la configuration et ajouter dans* config.yml*:

# Genemu Form
   genemu_form:
     tinymce:
         enabled: true
         theme: modern
         configs:
             entity_encoding: raw
             plugins : 'advlist autolink link image lists charmap print preview'
              date: ~
     image: ~
     select2:
         enabled: true
         configs:
             placeholder: Choisir une valeur
             width: element
             allowClear: false
             minimumInputLength: 0

Utilisation

Dans le code de votre form ajouter/modifier comme dans l’exemple ci-dessous

public function buildForm(FormBuilderInterface $builder, array $options) {  
 ...
 $builder ->add('date', 'genemu_jquerydate', array('widget' => 'single_text'))
 ->add('contenu', 'genemu_tinymce', array( 'required' => false ))
 ->add('maliste', 'genemu_jqueryselect2_entity',
      array(
        'class' => 'MonBundle:Maclass',
        'property' => 'nom',
        'label' => 'ZeLabel',
         'multiple' => true ))
 ...
 }

On obtient:

Datepicker:

Genemudatepicker

TinyMCE:

GenemuTinyMCE

Utiliser Genemu avec le Sonata Admin Dashboard

Étendre le bundle SonataAdmin (avec le bundle easy-extends):

php app/console sonata:easy-extends:generate SonataAdminBundle -d src  

Créer un fichier layout.html.twig dans src/Application/Sonata/AdminBundle/Resources/views:

{% extends 'SonataAdminBundle::standard_layout.html.twig' %}
 {% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
    <script src="{{ asset('js/select2-3.5.2/select2.min.js') }}"></script>
    {% if form is defined %}{{ form_javascript(form) }}{% endif %}
 {% endblock %}
 {% block stylesheets %}
    {{ parent() }}
    {% if form is defined %}{{ form_stylesheet(form) }}{% endif %}
 {% endblock %}

Modifier la configuration et ajouter/modifier dans* config.yml*:

sonata_admin:  
 ...
     templates:
         layout: ApplicationSonataAdminBundle::layout.html.twig
 ...
 sonata_doctrine_orm_admin:
     entity_manager: ApplicationSonataAdminBundle: ~
 ...

Ensuite modifiez vos Admin forms comme dans le chapitre précedent.

Sources

Genemu

https://groups.google.com/forum/#!msg/sonata-users/TZJpsp3fJDI/A-gvb9k9p94J

Tinymce

http://blog.k-metamodule.com/developpement/symfony2-installer-genemuformbundle-et-tinymce/ http://sysmagazine.com/posts/177457/

Select2

https://github.com/genemu/GenemuFormBundle/blob/master/Resources/doc/jquery/select2/index.md http://ivaynberg.github.io/select2/#documentation