Une infobulle pour l’admin générator

Bérenger Vidal — Thu, 09 Apr 2009 13:39:54 +0000

Voici quelques astuces pour rendre le backend d’un site généré par symfony accessible au plus grand nombre et de faciliter la compréhension pour l’administrateur du site Web.

Petit rappel, les formulaires sont placés dans le dossier : votre-projet/lib/form
et un tuto pour apprendre à les utiliser : Formualires symfony 1.2

Voici deux petites astuces :

Lors de la création d’un formulaire , il est possible de rajouter une zone html en dessous d’un champs.
La ligne suivante permet de faire ça :

^?View Code PHP

$this-&gt;widgetSchema-&gt;setHelp('champs','code html');

Résulat :

Il est aussi possible d’injecter du code html dans le label d’un champs. Partant de ce constat , j’ai alors créé une petite classe qui va générer une image avec une info-bulle.

On crée en suite le fichier bulle.js dans le dossier web/js. Ce code permet de générer l’info-bulle.

^?View Code JAVASCRIPT

function GetId(id)
{
return document.getElementById(id);
 
}
var i=false; // La variable i nous dit si la bulle est visible ou non
 
function move(e) {
if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
GetId("curseur").style.left=e.pageX + 5+"px";
GetId("curseur").style.top=e.pageY + 10+"px";
}
else { // Modif proposé par TeDeum, merci à lui
if(document.documentElement.clientWidth&gt;0) {
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
}
else {
GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
}
}
}
}
 
function montre(text) {
 
if(i==false) {
 
GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
GetId("curseur").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche)
i=true;
}
 
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle etais visible on la cache
i=false;
}
}
document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
//-->

Puis on crée le fichier bt.css dans le dossier web/css. Ce fichier permet de modifier l’aspect de l’info-bulle pour qu’elle soit assortie au backend.

^?View Code CSS

.infobulle
{
position: absolute;
visibility : hidden;
border: 1px solid #CC0000;
padding: 10px;
font-family: Verdana, Arial;
font-size: 12px;
background-color: #FFFFFF;
}

Ensuite , on crée le fichier bulle.class.php dans le dossier lib du projet

^?View Code PHP

class bulle
{
public static function bubble($Message)
{
return ''.$Message.'\');" onmouseout="cache()" href="#">&nbsp;';
}
}

Une dernière chose, il faut maintenant inclure une div dans la page où est affiché le formulaire. pour cela on va sur-définir le fichier : _form_header.php

Il est à placé dans le dossier : votre-pojet/apps/backend/modules/votre-module/templates

Ensuite il suffit de rajouter bulle::bubble( texte a affiché dans la bulle ) quand on implémente le label

^?View Code PHP

$this-&gt;widgetSchema-&gt;setLabel('name',bulle::bubble('Référence du contenu').'Référence');

Résultat :

Ainsi vous pouvez donner le maximum d’information sur l’impact d’un champs pour que l’administrateur du site internet sache ce qu’il fait

TinyMCE dans l’admin generator (Symfony 1.2, Doctrine)

Samuel Breton — Wed, 04 Mar 2009 22:58:26 +0000

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

Télécharger et copier :
http://tinymce.moxiecode.com/download.php
dans :

/web/js/tinyMCE
Modifier ce fichier :

/apps/backend/config/settings.yml

^?View Code YML
all: .settings: sf_rich_text_js_dir: js/tinyMCE

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


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


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://forum.symfony-project.org/index.php/m/66906/?srch=tinymce+3+steps#msg_66906

http://tinymce.moxiecode.com/download.php

Blog Symfony - Lexik Montpellier » generator

Une infobulle pour l’admin générator

TinyMCE dans l’admin generator (Symfony 1.2, Doctrine)

Intégrer Tiny MCE

Installer le plugin sfFormExtraPlugin:

Modifier le widget sfWidgetFormTextareaTinyMCE.class.php

Utilisation