Blog Symfony - Lexik Montpellier » javascript http://www.lexik.fr/blog/symfony Blog sur le développement Web PHP Tue, 20 Jul 2010 08:35:36 +0000 en hourly 1 http://wordpress.org/?v=3.0 Du Javascript dynamique dans une vue en utilisant sf_format http://www.lexik.fr/blog/symfony/symfony/du-javascript-dynamique-dans-une-vue-en-utilisant-sf_format-746 http://www.lexik.fr/blog/symfony/symfony/du-javascript-dynamique-dans-une-vue-en-utilisant-sf_format-746#comments Wed, 08 Jul 2009 08:13:32 +0000 olivier http://www.lexik.fr/sfblog/?p=746 Il arrive que l’on ai besoin d’utiliser un script javascript spécifique dans une vue. Un script dynamique qui nécessite d’être renseigné par des informations de php (utiliser des variables ou des méthodes de nos objets).

Dans mon précédent post j’évoquais les différentes possibilités d’inclure le javascript dans les vues.

  • Mettre des balises <script> directement au milieu du html (un peu crade mais efficace)
  • Faire un fichier .js « en dur » dans le dossier /web/js (mais là on perd la possibilité d’utiliser du php)
  • Utiliser un slot dans le <head> du template
  • Utiliser une vue

C’est ce dernier point que je vous propose de voir aujourd’hui.

Pour se dessiner un petit background on va prendre l’exemple d’une vue index dans un module d’actualités.
Dans cette vue on veut faire un appel ajax sur un lien et on veut utiliser le routing pour définir l’url du script à appeler.

On va donc utiliser une action et deux vues, une pour la page html et une pour le javascript qui sera inclus dans la vue html. On utilise des sf_format différents.

On créé la route qui servira pour les deux vues (/app/frontend/config/routing.yml).

?View Code YML
...
actu_index:
  url:   /actualites/index.:sf_format
  param: { module: actu, action: index, sf_format: html }
...

Dans notre action on récupère juste les dernières actualités à afficher dans la page html (/app/frontend/modules/actu/actions/actions.class.php).

?View Code PHP
<?php
 
class actuActions extends sfActions
{
 
  public function executeIndex(sfWebRequest $request)
  {
    $this->actus = Doctrine::getTable('Actu')->getLast();
  }
 
}

La vue Html. C’est la que ca se passe ! On fais un use_javascript() auquel on passe le url_for() de la même vue en spécifiant juste le sf_format à ‘js’ (/app/frontend/modules/actu/templates/indexSuccess.php).

?View Code PHP
<?php use_javascript(url_for('@actu_index?sf_format=js')) ?>
<div class="liste_actus">
  <?php foreach($actus as $actu): ?>
    <div class="actu">
      <h3><?php echo $actu->getTitre() ?></h3>
      <p><?php echo $actu->getTexteCourt() ?></p>
      <div class="action"><?php echo link_to('Lire la suite', '@actu_detail') ?><div>
    </div>
  <?php endforeach; ?>
</div>

Et donc la vue js sera inclue par la vue html qui rajoute dans le head l’appel au fichier.

?View Code HTML
<script type="text/javascript" src="/actualites/index.js"></script>

Il ne reste plus qu’a faire la script javascript dans la vue /app/frontend/modules/actu/templates/indexSuccess.js.php ou on peut avoir accès à tous les éléments de symfony que l’on désire.

Par exemple là un peut appel ajax en jQuery ou je récupère l’url du script appelé grâce au routing.

?View Code JAVASCRIPT
jQuery(function() {
 
  $('div.action a').click(function(event) {
    event.preventDefault();
    $.post(
      '<?php echo url_for('@actu_detail') ?>',
      { url: $(this).attr('href') },
      {},
      'script'
    );
  });
 
});

Il se peut que dans la vue javascript on n’ait pas besoin d’exécuter toute l’action.
Par exemple ici, dans ma vue javascript, je n’ai pas besoin des dernières actualités, il est donc possible de filtrer pour alléger l’action grâce au sf_format.

?View Code PHP
<?php
 
class actuActions extends sfActions
{
 
  public function executeIndex(sfWebRequest $request)
  {
    if($request->getParameter('sf_format') != 'js')
    {
      $this->actus = Doctrine::getTable('Actu')->getLast();
    }
  }
 
}

Après, libre a chacun de voir si on doit utiliser la même action que la vue html ou si la vue javascript nécessite sa propre action.

En utilisant une action séparée pour la vue javascript on peut s’amuser à pousser le vice du camouflage en utilisant un routing qui fasse croire que l’on appelle un fichier .js (Attention si jamais un fichier avec le même nom existe réellement dans le répertoire /web/js c’est ce dernier qui sera inclus).

?View Code YML
...
actu_index_js:
  url:   /js/actu.:sf_format
  param: { module: actu, action: index, sf_format: js }
...

Avantage de cette technique :

  • Un code source html super « clean »

Inconvéniant :

  • Pour une page html, on fait deux appels à symfony.
    A utiliser avec parcimonie et bien optimiser les actions pour ne pas faire des requêtes inutiles sur la base de donnée.
]]> http://www.lexik.fr/blog/symfony/symfony/du-javascript-dynamique-dans-une-vue-en-utilisant-sf_format-746/feed 0 TinyMCE dans l’admin generator (Symfony 1.2, Doctrine) http://www.lexik.fr/blog/symfony/symfony/sfformextraplugin-tinymce-197 http://www.lexik.fr/blog/symfony/symfony/sfformextraplugin-tinymce-197#comments Wed, 04 Mar 2009 22:58:26 +0000 Samuel Breton http://www.lexik.fr/sfblog/?p=197 Comment mettre en place un « Rich Text Editor » dans un backend Symfony 1.2 doctrine ?
J’ai trouvé la solution dans un post du forum symfony, je vous donne la version originale :

http://forum.symfony-project.org/index.php/m/66906/?srch=tinymce+3+steps#msg_66906

En français et expliqué plus en détails, ça donne :

Intégrer Tiny MCE

Installer le plugin sfFormExtraPlugin:

?View Code SF
symfony plugin:install sfFormExtraPlugin

Modifier le widget sfWidgetFormTextareaTinyMCE.class.php

Il faut modifier le plugin !

/plugins/sfFormExtraPlugin/lib/widget/sfWidgetFormTextareaTinyMCE.class.php

Fichier :

?View Code PHP
<?php
class sfWidgetFormTextareaTinyMCE extends sfWidgetFormTextarea
{
  protected function configure($options = array(), $attributes = array())
  {
    $this->addOption('theme', 'advanced');
    $this->addOption('width');
    $this->addOption('height');
    $this->addOption('config', '');
  }
  public function render($name, $value = null, $attributes = array(), $errors = array())
  {
    $attributes = array_merge($this->attributes, $attributes); 
    ...

Utilisation

Modifier ce fichier :

/lib/form/doctrine/ContenuForm.class.php

?View Code PHP
<?php
class ContenuForm extends BaseContenuForm
{
  public function configure()
  {
      $this->widgetSchema['texte'] =  new sfWidgetFormTextareaTinyMCE(
      array(
        'width'=>550,
        'height'=>350,
        'config'=>'theme_advanced_disable: "anchor,image,cleanup,help"',
        'theme'   =>  sfConfig::get('app_tinymce_theme','advanced'),
      ),
      array(
        'class'   =>  'tiny_mce'
      )
    );
    $js_path = sfConfig::get('sf_rich_text_js_dir') ? '/'.sfConfig::get('sf_rich_text_js_dir').'/tiny_mce.js' : '/sf/tinymce/js/tiny_mce.js';
    sfContext::getInstance()->getResponse()->addJavascript($js_path);
  }
}

Sources:

]]> http://www.lexik.fr/blog/symfony/symfony/sfformextraplugin-tinymce-197/feed 10