Astuces CSS, Javascript, PHP ou Ajax par RapotOR

Scroll d'un element jusqu'a un autre element

2009-03-10T10:31:00.010+01:00

Bonjour,

Un petit post assez court pour vous exposez ce petit problème qui me chatouillait.
Dans mon application web, j'avais besoin d'utiliser le fameux "scrollTo()". Seulement, petit hic, cette fonction fonctionne sur le document. Dans mon cas, le scroll se situait sur une DIV parente a l'élément que je voulais atteindre.

La fonction suivante permet donc de réaliser un scroll sur le premier élément parent qui possède une scrollbar.


Element.addMethods({
  scrollFirstAncestorTo: function(element) {
    var firstAncestor = null;
    //boucle pour recuperer le premier parent qui possede un scroll.
    element.ancestors().each(function(el,index){
      var previousScrollTop = el.scrollTop;
      el.scrollTop = el.scrollHeight;
      // si le scroll est > 0, il y a un scroll possible.
      if (el.scrollTop > 0){
        firstAncestor = el;
        el.scrollTop = previousScrollTop;
        // on sort de la boucle vu qu'on a notre parent.
        throw $break;
      }
    });
    
    if (typeof firstAncestor == "object" && firstAncestor !== null){
      var valueT = 0, valueL = 0;
      // on somme les offsets jusqu'a notre element
      // la fonction est similaire a cumulativeOffset
      do {
        valueT += element.offsetTop  || 0;
        valueL += element.offsetLeft || 0;
        element = element.offsetParent;
      } while (element && element!=firstAncestor);
      // on applique le scroll calculé
      firstAncestor.scrollTop = valueT;
      firstAncestor.scrollLeft = valueT;
      return firstAncestor;
    }else{
      return false;
    }
    
  }
});

Si vous avez des questions ou des remarques, n'hésitez pas.

Cédric

Site ajax, referencement, historique et favoris (PART 2)

2009-02-16T18:52:00.010+01:00

La lecture de cette partie nécessite la compréhension de la partie 1.

Bonjour,

Nous avions vu comment gérer la navigation Ajax en respectant les utilisateurs sans JS (ou le bot Google). La classe créée était relativement basique. La deuxième partie de l'article va nous permettre d'améliorer son fonctionnement.

Dégradation des formulaires

La solution est quasiment identique a celle utilisée sur les liens. On utilise l'action onSubmit. Les valeurs du formulaire sont ajoutées au paramètres généraux par le biais de Serialize.


//...
var forms = el.getElementsByTagName("form");

$A(forms).each(function(form){

  form.onsubmit = function(){
    var anchor = form.action;
    
    if (anchor.length==0)
      return false;
    
    var formOptions = { "ajaxtype": "form", 
                        "curl": this.stripBaseUrl(window.location.href), 
                        "formid": form.id, 
                        "hash": anchor };

    Object.extend( formOptions , Form.serialize( form , true) || { });
    
    this.triggerCallback( formOptions );

    return false;
  }.bind(this);
}.bind(this));
//...

Éviter l'écrasement de l'action onClick

La solution est assez simple. Avant l'ecrasement de la fonction onClick du lien, il nous suffit de sauver la fonction originale tel que montré ci-dessous:


var links = el.getElementsByTagName("a");
$A(links).each(function(link){
    link._onclick = link.onclick || Prototype.emptyFunction;
    link.onclick = function(){
        link._onclick();
        // code présent dans la PART 1 de l'acticle.
        return false;
    }
}

On fait exactement la meme manipulation avec le onSubmit.

Gestion de sous-répertoire

Lorsque l'on veut utiliser l'URL rewriting, on a besoin de placer une balise BASE pour indiquer quel est le répertoire réel. C'est précisément cette balise que je vais utiliser pour nettoyer l'URL et récupérer l'adresse réelle tel que:
http://www.monsite.com/site2/news/2/toto-est-un-heros.html deviendra news/2/toto-est-un-heros.html
Dans un premier temps, nous allons sauvegarder la base (http://www.monsite.com/site2/) dans une variable. Celle-ci servira a une fonction stripBaseUrl.
Je me permet de sauvegarder également l'index qui sera en fait la page d'arrivée (cela nous servira plus tard).


var baseObj = document.getElementsByTagName("base");
if ( baseObj.length == 1 ){
  this.options.baseUrl  = baseObj[0].href;
  this.options.indexUrl = this.stripBaseUrl(window.location.href);
}
//...
stripBaseUrl: function(url){
  if ( url.substring( 0 , this.options.baseUrl.length ) == this.options.baseUrl ){
    return url.substring( this.options.baseUrl.length , url.length );
  }else{
    return url;
  }
}

Gestion du bouton Précédent et de l'historique

A ce moment, les choses sérieuses commencent! Il faut savoir que le changement d'ancre fait réagir différemment les navigateurs. Firefox crée un point d'historique alors que IE n'en crée pas. Sous Firefox, même si je me rend a la page précédente, le navigateur ne relancera pas de nouvelles requête Ajax en vue de recharger son contenu (le contraire aurait été surprenant).
En attendant la création d'une action onHashChange (et puis même si elle arrive, il faudra toujours satisfaire les couillons qui ont un vieux navigateur), nous devons ruser pour gérer a la fois IE et Firefox.

Firefox

Pour Firefox, j'utilise un timer qui va vérifier en permanence l'ancre du navigateur. Si jamais il change, il va relancer la requête Ajax. dans le cas ou il n'y a pas d ancre, je fais une requête avec l'index comme ancre.


this.interval = setInterval(function(){
  if ( this.anchor != this.getHash() ){
    this.anchor = this.getHash() ;
    var formOptions = { "ajaxtype": "link", 
                        "curl": this.stripBaseUrl(window.location.href) , 
                        "hash": ( (this.anchor.length>0) ? this.anchor : this.options.indexUrl) };
    this.triggerCallback(formOptions);      
  }
}.bind(this), this.options.interval);

Internet Explorer

Pour IE, le changement d'ancre ne cree pas de point d'historique. Il faut ruser. L'astuce est de creer une iframe. Le changement d'adresse dans l'iframe permettra alors la creation du point d'historique.
Ce n'est pas tout! Il faut encore detecter le changement d'ancre. Pour cela, c'est le contenu de l'iframe qui déclenchera la requête Ajax. Un exemple vaut mieux que de grandes paroles.


initialize: function(options){
  //...
  if (Prototype.Browser.IE){
    this.iframe(document.body, this.getHash() );
  }
  //...
}
//...
iframe: function(parentElement,anchor){
  if ( this.el.historyFrame == null ){

    this.el.historyFrame = new Element( 'iframe' );
    this.el.historyFrame.style.display = 'none';
    this.el.historyFrame.style.position ='absolute';
    this.el.historyFrame.style.top ='200px';
    this.el.historyFrame.style.border ='solid 1px #000';
    this.el.historyFrame.style.right ='50px';
    this.el.historyFrame.style.zIndex = '1000';
    this.el.historyFrame.style.backgroundColor ='#FFFFFF';
    
    this.el.historyFrame.src = this.options.baseUrl+'nav.php?hash='+ anchor;

    parentElement.appendChild(this.el.historyFrame);

  }else{
  
    this.el.historyFrame.src = this.options.baseUrl+'nav.php?hash='+ anchor;
  
  }
}
//...
setHash: function(anchor){
  this.anchor = anchor;
  window.location.hash = anchor;
  if (Prototype.Browser.IE){
    this.iframe(this.el.historyDiv,anchor);
  }
}
//...
goLink: function(anchor, options, hashChange){   
  if ( anchor != this.getHash() ){
    if (hashChange == undefined)
      hashChange = true;
    
    var formOptions = { "ajaxtype": "link", 
                        "curl": this.stripBaseUrl(window.location.href), 
                        "hash": anchor };
    Object.extend( formOptions , options || { });
    
    if (hashChange)
      this.setHash(anchor);
    
    this.triggerCallback( formOptions );  
  }                      
}
//...

Explications :
* Si historyFrame est nulle, c'est le premier appel de la fonction et il faut créer l'iframe.
* Lorsqu'on change d'ancre, on change également l'adresse de l'iframe.
* La fonction goLink est equivalente au code executé par un lien. Il sera appelé par l'iframe.
* Lors de l'appel d'une page précédente, c'est le code de la page nav.php qui relancera la requête Ajax par le biais de la fonction goLink. Pour connaitre l'URL a appeler, l'ancre est tout simplement écrite dans la propriété TITLE de la page.


<?php

  header( "Expires: Mon, 20 Dec 1998 01:00:00 GMT" );
  header( "Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT" );
  header( "Cache-Control: no-cache, must-revalidate" );
  header( "Pragma: no-cache" );
  
  $hash = 'index.html';
  if (isset($_GET['hash'])){
    $hash = stripslashes($_GET['hash']);
  }  
  
?>
<html>
  <head>
    <title><?php echo $hash; ?></title>
    <script type="text/javascript" src="http://127.0.0.1/Intranet/js/prototype/prototype.js"></script>
    <script type="text/javascript">
      document.observe("dom:loaded", function() {
        if (window.parent.location.hash != document.title){
          window.parent.AjaxNav.goLink( document.title );
        }
      });
    </script>
  </head>
  <body><?php echo $hash; ?></body>
</html>

Gestion des favoris.

Lorsqu'on met une page en favoris, la page désirée sera indiquée dans l'ancre. Il suffit donc au chargement de la page de vérifier si une ancre est présente. Dans l'affirmative, on redirige vers celle-ci.


document.observe("dom:loaded", function() {
  //...
  if (window.location.hash.length > 0){
    var baseObj = document.getElementsByTagName("base");
    if ( baseObj.length == 1 ){
      window.location.href = baseObj[0].href+window.location.hash.split('#')[1];
    }else{
      window.location.href = window.location.hash.split('#')[1];
    }
    return;
  }
  //...
}

Crypter les mots de passe.

Cette dernière amélioration peut être superflue pour certain. Elle consiste en le cryptage (MD5 dans l'exemple) des champs PASSWORD avant de soumettre le formulaire. Pour effectuer cela, il faut tout d'abord récupérer le fichier MD5.js qui fera la conversion des mots de passe. Le code est le suivant. Il est relativement simple.


//...
Object.extend( formOptions , Form.serialize( form , true) || { });

if (this.options.pwdToMd5){
  var pwdOnly = Form.serializeElements( form.getInputs('password') , true );
  for (var property in pwdOnly)
    pwdOnly[property] = hex_md5(pwdOnly[property]);
  
  Object.extend( formOptions , pwdOnly || { });
}

this.triggerCallback( formOptions );
//...

Appel d'une page SANS changement d'ancre.

Cela peut paraitre bizarre mais cela devient vite utile. En effet, cela permet d'effectuer des actions qui ne sont pas réellement une page. Dans une version de site sans Ajax, cela équivaut a une page du type "Les modifications ont été effectuées. Redirection en cours...". En Ajax, on a évidement pas besoin de changer la page pour cela! J'espère que cela vous parle!
Pour réaliser cela, j'utilise l'attribut TARGET avec la valeur "_self". Cela permet de ne pas avoir de problème pour les utilisateurs sans JS.


if ( !link.target || link.target != "_self" )
  this.setHash(anchor);

On recolle tous les bouts

Il est maintenant temps de rassembler les différents bouts de code en une classe pleinement fonctionnelle.


/*  Ajax Navigator 
 *  (c) 2008-2009 Cedric Lahouste
 * 
 *  Educative version, my final version will be posted in a next article.
 *  Version dans un but educatif, ma version finale sera postee dans un prochain article
 *  
 *  Ajax Navigator is freely distributable under the terms of an MIT-style license.
 *
 *  Prototype needed.
 *
 *---------------------------------------------------------------------------------*/

var AjaxNavigator = Class.create({
 
 options: {
  url: 'index.php',
  indexUrl : 'index.html',
  baseUrl  : '',
  interval : 250, // in millisecond
  pwdToMd5 : true,
  callback : Prototype.emptyFunction  
 },

  // elements
  el: {
    historyFrame : null
  },
  
  // initialize: gogogo!
 initialize: function(options){
  
  Object.extend(this.options, options || { });
 
  this.applyOn(document);
  
  var baseObj = document.getElementsByTagName("base");
  if ( baseObj.length == 1 ){
   this.options.baseUrl  = baseObj[0].href;
   this.options.indexUrl = this.stripBaseUrl(window.location.href);
  }
  
  if (Prototype.Browser.IE){
      // no setInterval needed for ie. hash change detected directly by the iframe!
      this.iframe(document.body, this.getHash() );
  }else{
      // with firefox, actually no way found. if iframe used, 2 history points are created (1 by iframe and 1 by hash)
      // and there is a problem. the iframe content doesn't change.
      this.anchor = this.getHash();
      this.interval = setInterval(function(){
        if ( this.anchor != this.getHash() ){
          this.anchor = this.getHash() ;
          var formOptions = { "ajaxtype": "link", 
                              "curl": this.stripBaseUrl(window.location.href) , 
                              "hash": ( (this.anchor.length>0) ? this.anchor : this.options.indexUrl) };
          this.triggerCallback(formOptions);      
        }
      }.bind(this), this.options.interval);
  }

 },
 
 iframe: function(parentElement,anchor){
    if ( this.el.historyFrame == null ){

      this.el.historyFrame = new Element( 'iframe' );
      this.el.historyFrame.style.display = 'none';
      this.el.historyFrame.style.position ='absolute';
      this.el.historyFrame.style.top ='200px';
      this.el.historyFrame.style.border ='solid 1px #000';
      this.el.historyFrame.style.right ='50px';
      this.el.historyFrame.style.zIndex = '1000';
      this.el.historyFrame.style.backgroundColor ='#FFFFFF';
      
      this.el.historyFrame.src = this.options.baseUrl+'nav.php?hash='+ anchor;

      parentElement.appendChild(this.el.historyFrame);

    }else{
    
      this.el.historyFrame.src = this.options.baseUrl+'nav.php?hash='+ anchor;
    
    }
 },
 
 // get the url without the base... http://127.0.0.1/toto.html becomes toto.html
 stripBaseUrl: function(url){
  if ( url.substring( 0 , this.options.baseUrl.length ) == this.options.baseUrl ){
   return url.substring( this.options.baseUrl.length , url.length );
  }else{
   return url;
  }
 },
 
 // getHash... get the anchor and if no anchor, get the url!
 getHash: function(){
    return ( this.stripBaseUrl(window.location.href).split('#')[1] || this.stripBaseUrl(window.location.href) );
 },
 
 // use for changing url without request
 setHash: function(anchor){
  this.anchor = anchor;
  window.location.hash = anchor;
  if (Prototype.Browser.IE){
   this.iframe(this.el.historyDiv,anchor);
  }
 },
 
 // use for action by button
 goLink: function(anchor, options, hashChange){   
    if ( anchor != this.getHash() ){
      if (hashChange == undefined)
        hashChange = true;
      
      var formOptions = { "ajaxtype": "link", 
                          "curl": this.stripBaseUrl(window.location.href), 
                          "hash": anchor };
      Object.extend( formOptions , options || { });
      
      if (hashChange)
        this.setHash(anchor);
      
      this.triggerCallback( formOptions );  
    }                      
 },
 
 // apply on a element. Because can be called by a function getting new html code
 applyOn: function(el){
    
    if (typeof el == 'string')
      el = $(el);
    
  // links
  var links = el.getElementsByTagName("a");
 
  $A(links).each(function(link){
      // Don't make change the onclick value IF:
      // * It's already script
      // * The target is '_blank' => will open in an other window
      // * The target is 'file:' (local files)
      if ( link.href.substring(0,11) != 'javascript:' && link.href.substring(0,5) != 'file:' && link.target != "_blank"){
        link._onclick = link.onclick || Prototype.emptyFunction;
        link.onclick = function(){
          var anchor = this.stripBaseUrl( link.href );
          if (anchor.length==0)
            return false;
          var linkOptions = { "ajaxtype": "link", 
                              "curl": this.stripBaseUrl(window.location.href), 
                              "hash": anchor };

          // if the target is '_self', we did page actions without anchor change.
          if ( !link.target || link.target != "_self" )
            this.setHash(anchor);
          
          this.triggerCallback( linkOptions );
          
          // Fire original function
          link._onclick();
          
          return false;
        }.bind(this);
   }
  }.bind(this));
  
  // forms 
  var forms = el.getElementsByTagName("form");

  var pwdOnly = {toto:'toto'};
  
  $A(forms).each(function(form){
   
   form._onsubmit = form.onsubmit || Prototype.emptyFunction;

   form.onsubmit = function(){
    var anchor = this.stripBaseUrl(form.action);
    
    if (anchor.length==0)
     return false;
        
        // Fire the original function
        form._onsubmit();    
    
    var formOptions = { "ajaxtype": "form", 
              "curl": this.stripBaseUrl(window.location.href), 
              "formid": form.id, 
              "hash": anchor };
 
    Object.extend( formOptions , Form.serialize( form , true) || { });
 
    if (this.options.pwdToMd5){
     // we convert all password input's values with md5 function.
     var pwdOnly = Form.serializeElements( form.getInputs('password') , true );
     for (var property in pwdOnly)
      pwdOnly[property] = hex_md5(pwdOnly[property]);
     
     Object.extend( formOptions , pwdOnly || { });
    }
    
    this.triggerCallback( formOptions );

    return false;
   }.bind(this);
  }.bind(this));
  
 },
 
 // the callback, for submitting & requesting url
 triggerCallback: function(vars){
  if ('function' == typeof this.options.callback) {
   this.options.callback(vars);
  }
  return false;
 },
 
 // submit & get actions to do!
 submit: function(formOptions){
 
  var ajaxOptions = {
   method: 'post',
   postBody: $H(formOptions).toQueryString(),
   onSuccess: function(xhr){
    
    if ( xhr.status==200 && xhr.responseText.length > 0){
     if ( xhr.responseText.isJSON() ){
      this.evaluateResponse( xhr.responseText.evalJSON() );
     }
    }
    
   }.bind(this),
   onFailure: Prototype.emptyFunction
  };
  
  //***********************************************
  new Ajax.Request(this.options.url,ajaxOptions);
  //***********************************************
  
  return false;
  
 },
 
 // evalutation actions received
 evaluateResponse: function(xhrObj){
 
          // Do something here
          // Evaluation de la chaine ici.
          // Ce sera le sujet de la partie 3 de cet article.
 
 }

Ouf...

Voici la fin de la deuxième partie de cet article. Nous avons effectué toutes les améliorations nécessaires. Notre classe est maintenant fonctionnelle pour la navigation Ajax.

Dans la troisième partie de l'article, je vous exposerai une manière d'effectuer diverses actions en évaluant le retour de la requête. On pourra ainsi créer une automatisation d'actions complexes.

Vos commentaires et remarques sont les bienvenus. J'y répondrai volontiers.
A bientôt

Site ajax, referencement, historique et favoris (PART 1)

2009-02-13T09:16:00.012+01:00

Bonjour,

Ajax, c'est chouette, c'est beau et en plus cela permet de diminuer les requêtes vers le serveur... Mais lorsqu'on désactive Javascript ou qu'on est un bot de référencement, le contenu peut rapidement nous échapper...
Les autres problèmes concernent la gestion des historiques (bouton précédent) et la mise en favoris. Ces points seront développés dans les parties suivantes de cet article.

Dans cette première partie, je vais vous développer une méthode qui permet la lisibilité totale de vos pages par les robots des moteurs tels que Google et par les personnes qui n'ont pas activé Javascript (oui cela arrive!!).
Lorsque j'ai débuté avec Ajax, un bon nombre d'articles sur le sujet pourrissaient ce système vu qu'il était limité a une part des utilisateurs. Avec le temps, j'ai accru mes connaissances et j'ai fini par trouver des débuts de solutions.

Oui je parle beaucoup et peu d'actions donc je propose un truc: commençons.

Pour que la navigation s'opère normalement pour un utilisateur sans JS, il faut que les liens soient tout a fait conventionnels. Donc, le code HTML doit rester du type:


<a href="mapage.html">Go to my page!</a>

Par contre, lorsque notre visiteur a activé JS, ces mêmes liens doivent faire une requête sans rafraichir la page entière. La solution est ce qu'on appelle la dégradation de tous liens. Pour cela, je crée un objet qui gèrera la navigation générale de notre site basé sur Prototype.

La solution consiste a utilise l'action OnClick, de realiser la requete et de renvoyer false a la fonction pour que le navigateur ne se rende évidement pas a l'adresse!

La partie du code intéressant pour faire cela est la suivante:


var links = document.getElementsByTagName("a"); // NOTE 1
$A(links).each(function(link){ // NOTE 2
  link.onclick = function(){
    var anchor = link.href; // NOTE 3
    if (anchor.length==0)
      return false;
    
    // NOTE 4
    var linkOptions = { "ajaxtype": "link", 
                        "curl": window.location.href, 
                        "hash": anchor };

    submitAjax(linkOptions); // NOTE 5
    return false; // NOTE 6
  };
};
    
function submitAjax(linkOptions){
  var ajaxOptions = {
    method: 'post',
    postBody: $H(linkOptions).toQueryString(), // NOTE 7
    onSuccess: function(xhr){
      if ( xhr.status==200 && xhr.responseText.length > 0){
        // NOTE 9
      }
    }.bind(this),
    onFailure: Prototype.emptyFunction
  };
 
  new Ajax.Request("index.php",ajaxOptions); // NOTE 8
  return false;
}

Explications
1) On commence récupérer tous les liens du document.
2) On parcoure tous les liens.
3) On récupère l'adresse du lien en cours.
4) On prépare les infos (notamment l'adresse) a transmettre
5) On effectue la requete
6) On renvoi FALSE pour eviter le changement de page.
7) On ajoute les infos aux paramètres généraux de la requête.
8) On lance la requête
9) Si la requête est un succès, il reste a réaliser quelque chose avec le résultat!

Incluons maintenant cela dans une classe. A partir de ce code très primaire, il faut prévoir la dégradation d'autres éléments que document. Dans la classe, il faut donc que la fonction soit applicable a n'importe quel élément.

Version fonctionnelle reprenant les différentes parties:


/*  Ajax Navigator 
 *  (c) 2008-2009 Cedric Lahouste
 * 
 *  Educative version, my final version will be posted in a next article.
 *  Version dans un but educatif, ma version finale sera postee dans un prochain article
 *  
 *  Ajax Navigator is freely distributable under the terms of an MIT-style license.
 *
 *  Prototype needed.
 *
 *---------------------------------------------------------------------------------*/
var AjaxNavigator = Class.create({

  options: {
    url: 'index.php',
    callback : Prototype.emptyFunction  
  },

  // initialize: gogogo!
  initialize: function(options){
  
    Object.extend(this.options, options || { });
  
    this.applyOn(document);

  },

  getHash: function(){
    return ( this.stripBaseUrl(window.location.href).split('#')[1] || this.stripBaseUrl(window.location.href) );
  },

  // apply on a element. Because can be called by a function getting new html code
  applyOn: function(el){  
    if (typeof el == 'string')
      el = $(el);
   
    var links = el.getElementsByTagName("a");
    
    $A(links).each(function(link){
      link.onclick = function(){
        var anchor = link.href;
        if (anchor.length==0)
          return false;
        
        var linkOptions = { "ajaxtype": "link", 
                            "curl": window.location.href, 
                            "hash": anchor };
        this.triggerCallback( linkOptions );

        return false;
      }.bind(this);
    }.bind(this);
    
  },
  
  // the callback, for submitting & requesting url
  triggerCallback: function(vars){
    if ('function' == typeof this.options.callback) {
      this.options.callback(vars);
     }
     return false;
  },

  // submit & get actions to do!
  submit: function(linkOptions){

    var ajaxOptions = {
      method: 'post',
      postBody: $H(linkOptions).toQueryString(),
      onSuccess: function(xhr){
        if ( xhr.status==200 && xhr.responseText.length > 0){
          /*
          next step will be to do something with the response...
          if ( xhr.responseText.isJSON() ){
            this.evaluateResponse( xhr.responseText.evalJSON() );
          }
          */
        }
      }.bind(this),
      onFailure: Prototype.emptyFunction
    };

    new Ajax.Request(this.options.url,ajaxOptions);
  
    return false;
  
  },

});

AjaxNav = new AjaxNavigator({
  callback:function(options){
    AjaxNav.submit(options);
  }
);

Ouf! Maintenant, si JS est activé, chaque clic sur un lien nous permettra de faire la requête Ajax.

Améliorations?
Les améliorations que nous aborderont dans les articles suivants sont les suivantes:

* Dégradation des formulaires... On utilise l'action onSubmit.
* Éviter l'écrasement de l'action onClick (onSubmit) si elle est déjà présente sur un lien.
* Gestion de sous-répertoire du type http://www.monsite.com/secondsite ou de sites bases sur l'url rewriting. Pour cela, nous utiliserons la balise BASE.
* Gestion du bouton Précédent.
Sous firefox, le changement d'ancre crée un point d'historique mais la requête n'est pas rappelée pour changer la page.
Sous IE, un changement d'ancre ne suffit pas a créer un point d'historique.
* Gestion des favoris. La réponse est quasi déjà dévoilée. On utilise les ancres pour indiquer la page en cours.

Un dernier mot
Cette classe est une version très très épurée de ma version finale. A terme, Ajax Navigator permet d'effectuer des actions très poussée a partir de ce qui est reçu du serveur. Une classe PHP y est associée. Pour la version finale, voici quelques exemples de commandes PHP que nous pourrons faire:


// Changement d'attributs d'un element
$ajaxNav->writeAttributes( "ID_ELEMENT" , array('value' => "" ));

// redirection ajax (donc sans rafraichissement)
$ajaxNav->ajaxlocation("toto.html");

// creer une alerte.
$ajaxNav->alert("La forme?");

/* ajout, suppression de classes.
   <div class="red">Coucou toi!</div>  devient <div class="red isselected">Coucou toi!</div>
*/
$ajaxNav->addclass("ID_ELEMENT","isselected");

// changer le contenu d'une div.
$ajaxNav->html("ID_ELEMENT","<b>hello</b>");

Si vous êtes impatient et que vous ne voulez pas attendre la publication des différentes parties de l'article, laissez un message sur ce post avec des infos de contacts.
Pour les autres, rendez-vous sur la PART 2.

A bientôt.
Cedric

Bien démarrer avec reset.css

2009-01-26T20:52:00.004+01:00

Hello!

Voici un petit bout de code pour tenter de mettre les différents navigateurs à égalité avant de démarrer. Vous le mettez dans un fichier reset.css.

Important:
Évidement, ce n'est en aucun cas LE produit miracle. Ce bout de code permet juste de mettre les valeurs par défaut identiques. Par contre, les propriétés assimilées différemment continueront à vous hanter...


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

A bientôt!
Source: http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/

Mise en forme du code pour SyntaxHighlighter

2009-01-18T12:04:00.011+01:00

Voici un petit code PHP pour convertir vos codes source et les afficher dans un article Blogger. Cet article est le complément du premier.


$textareaValue = "";

echo "<html>";
echo "<head><title>Htmlentities</title></head>";
echo "<body>";

echo "<form method=\"post\" action=\"\">";   

if (isset($_POST["code"])){
 echo "<a href=\"javascript:history.back(1);\">Previous</a><br/>";
 
 if (get_magic_quotes_gpc())
  $textareaValue = stripslashes($_POST["code"]);
 
 $textareaValue = "<pre name=\"code\" class=\"".$_POST["codetype"]."\">".chr(13).htmlentities($textareaValue).chr(13)."</pre>";

}else{
 echo "<input type=\"submit\" name=\"Convert\" />";
 echo "<select name=\"codetype\">";
 echo "<option value=\"php\">PHP</option>";
 echo "<option value=\"xhtml\">XHTML</option>";
 echo "<option value=\"js\">Javascript</option>";
 echo "<option value=\"css\">CSS</option>";
 echo "</select><br/>";
}

echo "<textarea name=\"code\" cols=\"100\" rows=\"30\">".htmlentities($textareaValue)."</textarea><br/>";   

echo "</form>";

echo "</body>";
echo "</html>";

Cédric

Quelques exemples de base pour ExtJS

2009-01-17T16:28:00.004+01:00

J'avais écrit un article sur librairie javascript ExtJS.
Celui-ci comporte diverses astuces qu'un débutant rencontre à coup sûr lorsqu'il débute avec ExtJS.

Je vous invite à lire:
La version en anglais: http://extjs.com/learn/Tutorial:Some_Usefull_examples
ou
La version en français: http://extjs.com/learn/Tutorial:Quelques_exemples_utiles

La documentation officielle est également à consulter. Elle est très bien faite!

Contenu du tutoriel en français:

Introduction

J'ai réalisé une application personnelle. A mes débuts avec ExtJs, pas mal de problèmes sont venu bloquer ma progression et j'ai voulu les rassembler dans ce tutoriel pour aider les personnes qui débutent.
Mes recherches dans la doc et les forums a été assez importante. J'espère que la votre sera beaucoup plus petite grâce à ce tutoriel.

Enfin, je voudrais préciser que ma connaissance de ExtJs n'est pas encore parfaite; il y a donc certainement des améliorations possibles au code. Donc, désolé pour d'éventuelles conneries... Je veux juste vous aider :)

Programmation Orientée Object

J'avais réalisé ma première version de mon application sans PPO mais c'était une erreur pour une grosse application... Je pense. PPO est beaucoup plus simple d'utilisation.
Voici une adresse : http://extjs.com/learn/Manual:Basic_Application_Design

s.gif sur internet?? Non!!!

C'est déjà présent dans d'autres tutoriels mais une fois de plus vaut mieux qu'une fois de moins.

Ajoutez cette ligne pour que ExtJs utilise l'image locale:


Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';  // 2.0

Selection de la première ligne

C'est toujours utile de pouvoir selectionner la première ligne d'un combo ou d'une grid.

Les Combo

2 Solutions:
Première:

Votre 'store' est déjà créé et charger dans votre application (orientée object).
Effectivement, j'ai personnellement changé mes stores petits et souvent utilisés dans ma classe.


var MyCombo = new Ext.form.ComboBox({
 displayField:'field1',
 store: store1,                          
 valueField: 'id',
 editable: false,
 typeAhead: true,
 mode: 'local',
 triggerAction: 'all',
 emptyText:'Choose...',
 selectOnFocus:true,
 forceSelection : true,
 anchor:'95%',
 listeners: {
   beforerender: function(combo){
     MyCombo.setValue(MyCombo.store.getAt(0).data.id); // Ligne finale
     // MyCombo.setValue(MyCombo.store.collect('id', true)[0]); //pas assez rapide
   }
 }
});

La ligne finale est la ligne correspondant à la selection de la première ligne.
Le champ 'id' correspond au champ 'valueField'.

Deuxième:
La deuxième solution envisage le cas ou il faut également créer le store avec le combo.


var MyCombo = new Ext.form.ComboBox({
 displayField:'field1',
 store: new Ext.data.store({
   url: 'getdata.php',
   autoLoad: true,
   listeners: {
     load: function(){
       MyCombo.setValue(MyCombo.store.getAt(0).data.id); // Ligne finale
       // MyCombo.setValue(MyCombo.store.collect('id', true)[0]);  // pas assez rapide
     }
   }
   reader: new Ext.data.JsonReader({
     root: 'data'  // le champ 'root' des données; à enlever si nécessaire
   }, ['id','field1', 'field2'])
 }),                          
 valueField: 'id',
 editable: false,
 typeAhead: true,
 mode: 'local',
 triggerAction: 'all',
 emptyText:'Choose...',
 selectOnFocus:true,
 forceSelection : true,
 anchor:'95%'
});

Les Grid

Pour les grids, c'est le meme système à part qu'on utilise comme ligne finale celle ci :


MyGrid.getSelectionModel().selectRow(0);

Examples avec Combo

Alors ici, c'est une petit code pour montre plusieurs champs dans le combo.
On utilise un template : tpl.


var myCombo = new Ext.form.ComboBox({
 // use tpl !!!
 tpl: '<tpl for="."><div class="x-combo-list-item">{id} > {field1}</div></tpl>',
 valueField: 'id',
 store: myStore,
 allowBlank: true,
 typeAhead: true,
 mode: 'local',
 triggerAction: 'all'
});

Examples et astuces pour Grid

Différents affichages de colonnes

Voici quelques exemples d'affichage de différentes données pour vous donner des idées. Vous pouvez envisage tout et n'importe quoi.


// donc on crée un objet 'ColumnModel'
var cmLIST = new Ext.grid.ColumnModel([
{
  // ajouter un peu de text à la value du champ
  header: "ID",
  dataIndex: 'id',
  sortable: true,
  renderer: function(v,params,record){
    return 'TOTO-'+v;
  },
  width: 30         
},{
  // On peut meme ajouter de l'HTML
  header: "Field 1",
  dataIndex: 'field1',
  sortable: true,
  renderer: function(v,params,record){
    return '<b>'+v+'</b>';
  },
  width: 50     
},{
  // Utiliser un autre champ dans celui en cours; ajouter de la couleur...
  // par exemple, ici, j'utilise le field3 pour afficher le field2.
  header: "Field 2",
  dataIndex: 'field2',
  sortable: true,
  renderer: function(v,params,record){
    if (record.data.field3 == 1){
      // imagine that 'field2' is an other field in store
      return v+':<font color="#00FF00">'+record.data.field3+'</font>';
    }else{
      return v+':<font color="#FF0000">'+record.data.field3+'</font>';
    }
  },
  width: 50
},{
  // afficher une date. :)
  // perso j'utilise tjs le temps unix... un petit format et hop!
  header: "Date",
  dataIndex: 'fielddate',
  sortable: true,     
  renderer: function(v,params,record){
   return Ext.util.Format.date(v,'d-m-Y');  // change the mask if you want..
  },    
  width: 50
},{
  // On peut meme ajouter un champ imaginaire calculé à partir d'existants
  header: "Cost",
  width: 60,
  renderer: function(v, params, record){
    return (record.data.pricebyunit * record.data.quantity);
  },
  sortable: true
}
]);

var myGrid= new Ext.grid.GridPanel({
  id: 'myGrid',
  anchor: '100% 100%',
  store: myStore,  // ici un store déjà créé avant. avec les différents champs
  cm: cmLIST,  // et ici on définit l'utilisation de notre ColumnModel
  ...
});

Colonne à partir d'un store

Dans la plus part des cas, avec la configuration des bases de données, on utilise des ID pour faire un lien avec une autre table. alors évidement, on récupère des numéros dans certains champs et pas une valeur texte ou autre. Pour ca, la ligne suivante permet la récupération dans un autre store que celui de la grid du texte correspondant à un ID.


...
  // Dans un champ du ColumnModel
  renderer: function(v, params, record){ 
     return store2.getAt(stores2.find('id',v)).get('field1');      
  },  
...

Affichage d'une ligne

Dans le GridPanel, vous pouvez utiliser la fonction 'getRowClass' dans la propriété 'view' pour changer la css de la ligne.


...
  view: new Ext.grid.GridView({
     getRowClass: function(row, index) {
         var cls = '';
         var data = row.data;
         
         // ici un petit test pour changer ou pas la css... changez par le votre!
         if ( data.field1 < 0  ) {
            cls = 'row-invalid'; // on assigne le nom d'une classe css!
         }else{
            cls = '';
         }

         return cls; // on retource la valeur...
     }
  }),
...


// ici ma classe css qui rendra rouge la ligne si on l'utilise... bien sûr!
.row-invalid { 
    background-color: red !important;
}

Selectionner une seule ligne

La propriété singleselect... bien sur!


...
  sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
...

Examples et astuces avec EditorGrid

Colonne Date

Ici on doit pouvoir afficher la date correctement et en même temps l'éditer !! wow!!


...
// dans le ColumnModel
{
  header: "Date",
  dataIndex: 'datefield',
  sortable: true,     
  renderer: Ext.util.Format.dateRenderer('d-m-Y'), 
  width: 80,
  editor: new Ext.form.DateField({
    format: 'd-m-Y'
  })
} 
...

Colonne avec combo


...
// dans le ColumnModel
{
  header: "Suppliers",
  dataIndex: 'supplierid',
  sortable: true,     
  width: 80,
  renderer: function(v, params, record){ 
   // ici on affiche la value à partir du store comme déjà montré dans la section grid
   return storeSuppliers.getAt(storeSuppliers.find('id',v)).get('name');      
  }, 
  // et on crée notre combo qui va chercher dans le meme store
  // ainsi la valeur du champ est tjs l'ID et pas le texte! 
  editor: new Ext.form.ComboBox({
    store: storeSuppliers,
    triggerAction: 'all',
    emptyText:'',
    selectOnFocus: true,
    valueField: 'id',
    displayField: 'name'
  }),
  width: 200 
}
...

Editeur dynamique

Peut être que vous devriez avoir besoin de changer l'éditeur en fonction des données.
Pour cet exemple, je vais utiliser parfois un textfield ou parfois un combo!


// a store
var storeField = new Ext.data.Store({
   url: 'getdata.php',
   reader: new Ext.data.JsonReader({
      root: 'enreg'
   }, ['id','field1', 'field2'])
});

// un combo         
var editorCombo = new Ext.form.ComboBox({
   valueField: 'id',
   displayField: 'field1',
   store: storeField,
   allowBlank: true,
   typeAhead: true,
   mode: 'local',
   triggerAction: 'all',
   emptyText:'Choose...',
   selectOnFocus: true,
   forceSelection : true,
   editable: true
});

// ici on crée l'éditeur en fonction du combo        
var objEditorCombo = new Ext.grid.GridEditor(editorCombo);

// un textfield
var editorText = new Ext.form.TextField({ allowBlank: false });    

// ici on crée l'éditeur en fonction du textfield
var objEditorText = new Ext.grid.GridEditor(editorText);
         
var cmLIST = new Ext.grid.ColumnModel([
//...
{
  header: "Field 1",
  dataIndex: 'field1',
  sortable: true,   
  width: 400,  
  editor: objEditorCombo  // on assigne un des 2 éditeurs.
}
//.... 
]); 

var myGrid = new Ext.grid.EditorGridPanel({
  store: myStore,
  // ... ici, n'importe quelle propriétés..
  cm: cmLIST,  // my column model
  listeners:{
      // au moment du double click on va changer l'éditeur
      celldblclick: function(grid, rowIndex, columnIndex, e){
                    
          // mais seulement pour le champ 'field1'...
          // faudrait pas le changer pour un autre ;)
          if (grid.getColumnModel().getDataIndex(columnIndex) == "field1"){
             // ici un test exemple... à changer par le votre
             if (grid.store.getAt(rowIndex).get('field2') == 0){
                 // on assigne dans ce cas le textfield
                 grid.getColumnModel().setEditor(columnIndex,objEditorText);
             }else{
                 // et dans l'autre le combo
                 grid.getColumnModel().setEditor(columnIndex,objEditorCombo);
             }
          }
                    
      },
      afteredit: function(e){
        // après l'édition, dans le cas ou l'éditeur était le combo,
        // il se pourrait qu'il faille changer en même temps d'autres colonnes
        // qui sont liées.        
        if (e.field == 'field1' && e.record.get('field2') == 0){
e.record.set('field2',storeField.getAt(storeField.find('id',e.value)).get('field2'));           
        }

      }  
  }
});

Eviter des pertes de mémoire

Il y a pas mal de topics qui parlent de pertes de mémoires. Qu'est ce que c'est? Avec l'utilisation de certains composants, certaines DIV ne sont pas détruites avec l'utilisation de l'application et la mémoire augmente sans cesse...
J'ai remarqué cela avec msg, modal windows, grid pour l'instant.
Vous vérifier cela, utilisez l'extension FIREBUG sous FIREFOX.

Ext.msg

Ce n'est en fait pas vraiment un problème. A chaque fois qu'une fenêtre apparaît, les 'shadow' (masque, ombres sous les fenêtres etc...) DIV ne sont pas créées à chaque fois; elles sont réutilisées à nouveau à chaque fenêtre ('show'). Donc ce n'est pas nécessaire de les supprimer.

Modal window

Argh! Pas très bon!
C'est la fenêtre avec l'option d'un masque qui cache l'application en arrière.
J'ai créé une petite extend de Ext.Window avec un listener qui supprimer les mask, shadow correspondants


Ext.ModalWindow = Ext.extend(Ext.Window, {
  
  initComponent : function(){
    Ext.Window.superclass.initComponent.call(this);
  },
  
  modal: true,
  
  closable: true,
        
  modal: true,
  
  shadow: false,
  
  minimizable: false,
  
  draggable: false,
  
  resizable: false,
  
  width: 500,
  
  height: 'auto',
        
  layout: 'anchor',

  plain: true, 
  
  listeners: {
  
    beforedestroy: function(w){
    
      if (w.mask){Ext.destroy(w.mask);}
      if (w.proxy){Ext.destroy(w.proxy);}
      if (w.plain){Ext.destroy(w.plain);}
      
    }
  }
  
});

// et son utilisation :

var modalWin = new Ext.ModalWindow({
      
  id: 'modalWin',
        
  title: 'Intranet Logon.',
        
  width: 360,
        
  buttons: [
  {
    text: 'Quit',
    handler: function(){
       modalWin.destroy();
    }
  }]

});        
      
modalWin.show();

Vider un panel

Dans ce cas, j'avais quelques grids dans un panel et certaines DIV n'était pas supprimées. Du coup, à chaque fois, j'avais des DIV qui s'amoncelait... et la mémoire qui augmentait...


<div id="ext-gen728" class="x-dd-drag-proxy x-dd-drop-nodrop x-grid3-col-dd" style="position: absolute; z-index: 15000; visibility: hidden; left: -10000px; top: -10000px;">
<div class="x-dd-drop-icon"/>
<div id="ext-gen730" class="x-dd-drag-ghost"/>
</div>
<div id="ext-gen733" class="col-move-top"/>
<div id="ext-gen734" class="col-move-bottom"/>

La meilleure solution pour moi était :


 myPanel.items.each(function(item, index, len){
   item.purgeListeners();
   myPanel.remove(item,true); 
   // le 'true' , cest pour l'option destroy.
   // à noter que le '.destroy', ca marchait pas des masses pour éviter les DIV restantes.
 });

Form avec grid

Comme pas mal de personnes sur le forum, j'ai voulu mettre une grid dans un formpanel... mais evidement, ce ne fut pas si facile au moment du submit ... :D
Ici, c'est ma méthode. Peut être il y en a d'autres.
( Une extend du formpanel avec grid serait peut être mieux... )

Changement des données


 Ext.Ajax.request({
    url: 'getdata.php?type=da&idv='+PR_ID,
    callback: function(options,success,response){
               
       var myResponse = Ext.util.JSON.decode(response.responseText);
                  
       myForm.form.setValues(myResponse);
                  
       // mettre les données dans la grid à partir du champ grid1
       var myGrid = Ext.getCmp('myGrid');
       myGrid.store.loadData(myResponse.grid1);
                  
     }
 });

Savegarde des données


var myForm = new Ext.form.FormPanel({
  ...
  items: [
  {
    xtype: 'textfield',
    name: 'field1',
    fieldLabel: 'Field 1'
  },{
    xtype: 'textfield',
    name: 'field2',
    fieldLabel: 'Field 2'
  },{
    xtype: 'grid',
    // ... d'autres propriétés ici
  }
  ]
  bbar: [     
  {
     xtype: 'button', // c'est le même que d'utiliser "new Ext.Button()" (voir doc)
     text: 'Save' ,
     iconCls: 'save', 
     handler : function() {

       var storeValue=[];
       var myGrid = Ext.getCmp('myGrid');
       var allRecords = myGrid.store.getRange(0);
       
       // je mets les données dans une variable storeValue
       for (i=0;i < allRecords.length;i++)
       {
         storeValue[i] = allRecords[i].data;
       }

       // je récup les données de la form
       var dataForm = generalInfos.getForm().getValues();

       // j'envoi la requete ajax avec les données complètes.
       Ext.Ajax.request({
                           
         url: 'submitdata.php',
         
         // je paramètre la requête                      
         params: {
            param1: 'toto',
            param2: 'titi',
            field1: dataForm.field1,
            field2: dataForm.field2,
            grid1: Ext.encode(storeValue)  // Données de la grid au format JSON...
         },
                               
         callback: function(options,success,response){
                               
            alert('SUBMIT!');
                                  
         }
                               
       }); 
     }
  }
  ...

Merci et à bientôt.

Cédric

Coloration syntaxique de code source sur Blogger.

2009-01-17T15:13:00.008+01:00

Premier post! Et l'aventure commence!
Celui-ci concerne la coloration syntaxique de code source dans un article Blogger.
Demo:


echo "Ceci est une démo";

Comment faire?
Lorsque j'ai cherché pour cette astuce, je suis tombé presque directement sur SyntaxHighlighter. Il me semble le meilleur et c'est celui-là qu'on utilisera dans ce tutoriel.
Premier problème que j'ai rencontré dans une paire de tutos, c'est qu'il fallait uploader sur un hébergement. Perso, cela ne me bottait pas trop... si on a un blog sans hébergement c'est pas pour devoir encore héberger quelque chose.
Astuce: il faut utiliser les fichiers directement sur le serveur google et le tour est joué!

Etape 1: Se rendre dans "Mise en page" (template) et se rendre dans "Modifier le code HTML". (Pas trop dur ;) )

Etape 2: Coller le code suivant juste en dessous de <head>


<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>  
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>   
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/clipboard.swf'/>

Etape 3: Choisir les languages à vouloir afficher. J'ai choisi php, sql, css, html. Vous vous rendez sur cette page. Vous choisissez les fichiers correspondants: shBrushPhp.js pour PHP, shBrushCss.js pour CSS, etc...
A la suite des premières lignes de code collées, il faut donc ajouter une ligne par language à supporter. Voici la ligne pour PHP:
Important: Le HTML se trouve dans shBrushXml.js!


<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'/>

Etape 4: Coller la suite juste avant </body>. Cela sert à initialiser le script de mise en page de vos codes.
Petit détail tout de même! Le script est un peu différent de l'original. Effectivement, Blogger n'aime pas trop les <br/>; ils sont remplacés par un retour à la ligne. Le code ci-dessous permet de contourner le problème. Merci les chinois.


<script class='javascript'>
//<![CDATA[
  function FindTagsByName(container, name, Tag)
  {
      var elements = document.getElementsByTagName(Tag);
      for (var i = 0; i < elements.length; i++)
      {
          if (elements[i].getAttribute("name") == name)
          {
              container.push(elements[i]);
          }
      }
  }
  var elements = [];
  FindTagsByName(elements, "code", "pre");
  FindTagsByName(elements, "code", "textarea");

for(var i=0; i < elements.length; i++) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
 var childNode = elements[i].childNodes[0];
 var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
 elements[i].replaceChild(newNode, childNode);

}
else if(elements[i].nodeName.toUpperCase() == "PRE") {
 brs = elements[i].getElementsByTagName("br");
 for(var j = 0, brLength = brs.length; j < brLength; j++) {
  var newNode = document.createTextNode("\n");
  elements[i].replaceChild(newNode, brs[0]);
 }
}
}

dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>

Etape 5: Etape importante... qui rend fou si elle nous échape. En haut de la page, il faut supprimer le DOCTYPE (c'est la ligne tout en haut qui contient DOCTYPE ;) ). C'est en contradiction avec celui situé sur google. Du coup, ça s'affiche pas bien!

Etape 6: On appuie sur "Enregistrer le modèle". Oula! C'est dur cette étape-ci!

Etape 7 : Allez courage! Pour terminer... On insère notre code source! Après tout c'est le but non?
Comment Faire cela?
Sur la page de rédaction du message, il faut passer en mode HTML "Modifier le code HTML".

Etape 8: Il faut convertir le code que l'on veut afficher. Soit vous vous créer un script en PHP qui effectue un htmlentities; Soit vous vous rendez sur ce site. Cela remplacera par exemple < par <.
Vous entourez le code par le code HTML comme ceci:


<pre name="code" class="php">
// mon code ici
</pre>

La valeur de la classe indique le language. La liste est ici.

Etape 9: Je publie le message! Ouf!

Je vous remercie pour la lecture de ce premier post. Vos commentaires sont les bienvenus.

Cédric.

Bonjour

2009-01-16T17:12:00.010+01:00

Bonjour à tous,

Je lance ce blog pour vous partager astuces, méthodes et diverses choses que j'ai découvertes au cours des mes développements. Je me fais une joie de vous les partager.


echo "Hello world!";

Il sera l'objet de tutoriels portant le javascript, l'ajax ou encore le PHP.
Les articles à venir porteront plus précisément sur:
- La coloration syntaxique de codes sur Blogger.
- Des astuces diverses sur le framework ExtJS.
- Astuces de navigation ajax par ancres.
et bien plus encore...

Cédric