Catégorie : développement Internet

jQuery : animate(), queue() et dequeue() solution

Voilà le problème que je viens de rencontrer et que vous avez sûrement rencontré si vous faites un petit peu de jQuery : j’ai fait un <div></div> qui était un petit rectangle, et je voulais, que lorsque la souris entre dedans, il s’agrandisse, et lorsqu’elle en sort, il diminue.

Le problème (qui est la plupart du temps un avantage) avec jQuery, c’est que lorsqu’une animation commence, s’il y en a une autre pour le même élément, il la met dans une queue() (toute plaisanterie grivoise mise à part).
Donc, si, comme moi, vous voulez faire une animation assez lente, et que vous entrez et sortez rapidement avant la fin de l’animation, il va y avoir plein d’éléments qui vont aller à l’intérieur, et… même si vous éloignez la souris, les animations d’entrée-sortie vont continuer à jusqu’à ce que la queue soit vide ! …là aussi toute plaisanterie grivoise mise à part.

La solution est simple : il faut non seulement dire à l’élément concerné d’arrêter l’animation via stop(), mais aussi :

  1. dire de supprimer tout ce qu’il y a dans la queue (premier paramètre = true)
  2. dire de jouer immédiatement l’animation qui suit (premier paramètre = true)

Exemple de code qui fonctionne :

  $('tr')
    .mouseenter(function() {
      var id=$(this).attr('id').substring(3);
      var c=$(this).children('.principal').children('.texte');
      c.stop(true, true).animate({ height: '400px'}, 'slow');
    })  
    .mouseleave(function() {
      var c=$(this).children('.principal').children('.texte');
      c.stop(true, true).animate({ height: '89px'}, 'slow');
    });

Php : comment dériver la classe Exception et lui passer un tableau de chaines

Dans la plupart de mes pages, j’ai besoin, lorsqu’il y a une erreur, de mettre un message explicite qui est souvent long. Qui dit long dit plusieurs lignes. Ou bien j’ai envie de stopper l’exécution en cours et d’afficher plusieurs messages. L’idée de base est de lever une exception, mais une exception qui reçoit plusieurs chaînes de caractères comme message d’erreur. Alors j’ai fait ma propre classe en m’inspirant de l’aide sur les exceptions de php.net.

On peut lever une exception de cette façon :

throw new ExceptionErr(
  array(
    "Nous vous avons envoyé la liste récemment.",
    "Afin de garantir une qualité de service ".
    "pour tout le monde, ",
    "nous ne pouvons ré-envoyer la liste que dans ".
    $delai
  ) 
);

Vous pouvez la récupérer ou simplement lire le code. En espérant que cela serve à d’autres personnes :

<?
/**
 * fichier exception_err.php
 *
 * Historique :
 * 21/09/2011 : Olivier Pons
 *              Création
 * @author Olivier Pons
 * @version 1.0
 * @since 1.0
 * @copyright Olivier Pons
 * @package Classes_Base
 */

/**
 * Includes
 */

/**
 * Classe Exception qu'on peut
 * lever en lui passant un tableau
 * en paramètre.
 *
 * @author Olivier Pons
 * @version 1.0
 * @since 1.0
 * @copyright Olivier Pons
 * @package Classes_Base
 *
 */
class ExceptionErr extends Exception
{
  /** 
   * @var array le tableau contenant les lignes d'erreur
   */
  private $TabErr;
  
  /** 
   * Lit le tableau contenant les lignes d'erreur
   * @return array le tableau contenant les lignes d'erreur
   */
  public function getTabErr()
  {
    if (!isset($this->TabErr)) {
      throw new Exception('TabErr : pas initialise');
    }   
    return $this->TabErr;
  }

  /** 
   * Surcharge de la représentation de l'objet sous forme de
   * chaine
   *
   * @return string Représentation de l'objet sous forme de
   *   chaine.
   */
  public function __toString() {
      return __CLASS__ .
        ": [{".$this->code."}]: {".$this->message."} ".
        "- {".var_export($this->TabErr,true)."}\n";
  }

  /** 
   * Constructeur surchargé de la classe "Exception" de base.
   *
   * @param array $tab_err
   *   Tableau contenant les chaines à mettre à la suite dans
   *   un tableau d'erreur (voir les classes qui utilisent
   *   cette classe pour comprendre)
   * @param integer $code
   *   Numéro de code d'erreur
   * @param Exception $previous
   *   Exception précédente
   *
   * @return void
   */
  public function __construct(
    $messages, $code = 0,
    Exception $previous = null) 
  {
      if (!is_array($messages)) {
        throw new Exception("Messages : array attendu");
      }   
      if (count($messages)==0) {
        throw new Exception("Messages : tableau vide");
      }   
      list($message)=each($messages);
      parent::__construct($message, $code, $previous);
      $this->TabErr = $messages;
  }
}

?>

ExtJs, DataGrid, Store et événements : mémo pour le déboguage

Voici un petit mémo simple : si vous essayez de comprendre dans quel ordre se font les événements, je vous conseille de lire la page ici.

Parmi tout ce qui est expliqué, voici ce que j’utilise le plus souvent : une fonction de trace des événements.
Faites comme moi : un bon copier-coller des familles, et vous aurez dans votre console tous les événements concernant l’objet que vous voulez :

function captureEvents(observable) {
    Ext.util.Observable.capture(
        observable,
        function(eventName) {
            console.info(eventName);
        },
        this
    );		
}
 
Ext.onReady(function(){
    var grid = new Ext.grid.GridPanel({
        ... 
    });
 
    captureEvents(grid);
});

Exemple concret : j’avais un problème, lorsque je créais un nouvel enregistrement dans une DataGrid, j’avais beau essayer de le sélectionner, rien n’y faisait. J’ai cherché pendant des heures, j’ai essayé d’éliminer au fur et à mesure des choses, jusqu’à ce que je mette en place ce code, et là, magie, dans la console :

>beforeload
>datachanged
>load
>read
>add
>datachanged
>beforesync
>write
>datachanged

J’ai vu qu’en fait après l’événement d’ajout « add » sur lequel je comptais pour sélectionner l’élément en cours, il y avait… une mise à jour (« beforesync », « write », « datachanged ») !
En fait ça a fait tilt : j’avais activé la synchronisation automatique des données, et donc juste après l’insertion, le store tentait de se synchroniser, donc la sélection était inévitablement dé-sélectionnée.

Ici aussi, comme dans la plupart de mes articles techniques, j’espère avoir aidé la communauté et avoir évité à d’autre personnes de perdre des heures inutiles, comme celles que j’ai passées !

Php : comment faire un trim() sur tout un array()

C’est simple, et voici comment faire en trois lignes (si vous enlevez mes commentaires) : je crée une fonction anonyme qui est appelée en boucle par array_walk() et qui fait un ‘trim’ sur l’élément en cours :

/* Pas très propre, mais rapide et qui reste
 * compréhensible : je crée une fonction anonyme qui
 * est appelée en boucle par array_walk() et qui fait
 * un 'trim' sur l'élément en cours :
 */
array_walk($tab,
  create_function('&$item,$key', '$item = trim($item);')
);

Php et utf-8 : comment lire correctement un fichier texte

Si vous essayez de lire un fichier en utf8 mais que vous avez des problèmes, voici une solution toute simple qui pourra vous aider : essayez de rajouter l’option « u » lorsque vous ouvrez le fichier. Mon code ne fonctionnait pas correctement jusqu’à ce que je trouve cette astuce :

$handle = @fopen('wfrench-1.2.3/dico', 'ru');
if ($handle!==false) {
  while (($buffer = fgets($handle, 4096)) !== false) {
    array_push( $mots, $buffer);
  }
  if (!feof($handle)) {
    fclose($handle);
    throw new Exception("Erreur: fgets() a échoué");
  }
  fclose($handle);
}
else {
  throw new Exception("Erreur: fopen() a échoué\n");
}

Nouvelle version de Smarty – 3.1 : les avantages

J’ai récemment mis à jour quelques-uns de mes sites avec la nouvelle version de Smarty, la version 3.1.
Plusieurs choses sont maintenant possibles et c’est très appréciable.
La plus importante c’est le fait que Smarty détecte maintenant de manière très intelligente si les accolades {} sont pour lui ou pas.
Il est donc tout à fait possible de coder du JavaScript et de mettre du CSS sans utiliser {literal}{/literal}.

Pour toutes les personnes qui utilisent Smarty, ils réaliseront rapidement à quel point c’est pratique.

De plus les warnings sont à « on » par défaut, c’est à dire que si les variables n’existent pas, on a le warning classique Php. On aime ou on aime pas, mais maintenant il faut souvent utiliser {if isset($mavariable)}{/if}.

Enfin, l’autre différence majeure que j’ai noté, c’est la rapidité : c’est tout simplement incomparablement plus rapide. Vraiment. Surtout pour les tableaux et autres, c’est impressionnant. A vous de voir.

Smarty 3.1 et les plugins : comment faire / howto

Sur la toute dernière version de Smarty (3.1), voici comment créer un plugin personnalisé.
Pour résumer, l’un de mes sites n’était pas assez optimisé.
Le code qui sortait était :

<body class="sbody">
    <div>
....
    </div>
....
</body>

J’ai donc ajouté le filtre d’optimisation qui supprime les espaces en début :

$this->smarty->loadFilter('output', 'trimwhitespace');

Le code de sortie est devenu :

<body class="sbody"><img src="/title.jpg" /><div>....</div>....</body>

Tout mise en une ligne, super !
Le seul problème, c’est que ça ne fonctionnait pas avec le code JavaScript, il faut en effet les retours à la ligne.
J’ai donc crée mon plugin qui ne fait que supprimer les espaces en début de ligne, et remplacer de « retour + line feed » (deux octets) de fin de ligne par un seul octet « retour ».

Voici le code, je vous laisse comprendre, c’est extrêmement simple :

/* Déclarer un plugin "block".
 * Block = il faut un début et une fin.
 * Ici : {triml} {/triml}
 */
$this->smarty->registerPlugin('block',
  'triml', array($this,'smarty_block_trim_l'));

Après avoir déclaré le plugin, il faut faire la fonction adéquate :

/**
 * Fonction de plugin smarty pour supprimer tous les espaces
 * en début de ligne entre les blocs {triml}{/triml}
 * "triml" = trimleft
 * Voir le constructeur et chercher $this->smarty->registerPlugin()
 *
 * @param array $params les paramètres qu'on passe à {strip_nl}
 * @param variant $content Le contenu qu'il y a dans le bloc
 * @param variant $template Le nom du template
 * @param variant &$repeat
 *
 * @return int Description retour
 */
public function smarty_block_trim_l(
  array $params, $content, $template, &$repeat)
{
  $content = preg_replace('/\n[\s]+/', "\n", $content);
  return $content;
}

Et voilà maintenant, vous pourrez aussi optimiser votre site comme un professionnel.
Bien évidemment le gain le plus gros est dans la compression (voir mod_deflate)

Php / optimisation / compilation et le projet du compilateur FaceBook

Saviez vous que Facebook a eu une idée assez intéressante ?
Ils ont crée un outil qui transforme le code Php en code C++ et qu’on peut donc compiler.
D’ailleurs la plupart des choses de FaceBook tournent via cet outil, pour accélérer et optimiser au maximum leur site.
Il est ainsi possible de pousser la performance Php à l’extrême.

Pour ceux qui veulent rendre leur site encore plus rapide, voici le lien :

https://github.com/facebook/hiphop-php

JavaScript : comment tester, et faire partager très rapidement son code

Supposons que vous vouliez montrer quelques exemples de code JavaScript, mais surtout, le partager rapidement.
C’est très simple : avec http://jsfiddle.net/, vous tapez votre exemple de code, et à la fin vous cliquez sur « sauver » et hop, une URL automatique est créée. Il vous suffit de copier colle le lien pour partager votre code exemple (ou votre code qui démontre qu’une librairie a un problème, par exemple).

ExtJS et PhoneGap : une nouvelle façon de voir les choses

Comme je l’ai toujours dit, ExtJS est une librairie JavaScript extrêmement puissante.
Le seul problème c’est qu’elle est dure à maitriser… mais les résultats obtenus sont incroyablement beaux par rapport au temps de développement.

La même société, Sencha, qui n’est constituée – apparemment – que de personnes très compétentes, a développé le même système, mais pour téléphones portables : le Sencha Touch.

Et ils se sont penchés sur ce que j’appellerai le site du moment : PhoneGap.

Ils ont fait un tutoriel qui vous permet de combiner la puissance de PhoneGap et de Sencha Touch :

http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap

J’expliquerai plus en détail dans un prochain article comment fonctionne PhoneGap, mais à mon avis, c’est l’avenir pour des développeurs comme moi qui n’ont pas le temps de se pencher sur les plateformes mobiles spécifiques : je n’ai pas le temps d’apprendre tout iOS et je n’ai pas le temps d’apprendre Android. Par contre je connais bien JavaScript, je commence à bien connaitre HTML5, et grâce à PhoneGap, on peut aller loin, très loin 😉