Archives mensuelles : décembre 2009

Appel périodique avec la librairie javascript Prototype

Il se peut que vous ayez besoin dans vos développement web, d’appeler périodiquement une fonction javascript. Prototype fournit le méthode PeriodicalExecuter qui permet de le faire.

Son utilisation est très simple. Il suffit de créer un objet « PeriodicalExecuter » et de lui passer 2 paramètres : votre fonction à appeler et le temps en seconde entre chaque appel.

 new PeriodicalExecuter(maFonction, 2);

Et voila ! Simple, non ?

Ajax, Xml et Template avec Prototype

Voici un petit article concernant la librairie prototype qui va traiter des templates. Les templates sont des modèles qui vont vous permettre de développer plus rapidement et plus facilement. Pour cet exemple, j’ai utiliser comme source de donnée un fichier XML. Cela nous permettra de voir comment récupérer le fichier XML en AJAX et comment s’en servir.

Contexte

Le but de cet exemple est l’affichage d’une liste de liens contenu dans un fichier XML dans une liste non ordonnées (ul). Cette liste de liens sera créée via du javascript. Voici la page d’exemple.

Code

XML

Le fichier XML contient la liste des liens que nous souhaitons affichés. Le nœud links est le nœud racine. Il contient des noeuds link qui représente un lien. Ce noeud link est lui même composé d’un noeud Url et description.



  
    http://www.google.fr
    Le site de recherche de Google
  
  
    http://www.lequipe.fr
    L'equipe : Actualité du sport
  
  
    http://www.ubuntu-fr.org
    L'association fr d'Ubuntu
  
  
    http://www.planet-libre.org/
    Le Planet Francophone sur Linux et les Logiciels Libres ...
  

Html

Le code html est très simple.
Tout d’abord il faut inclure le fichier de prototype :

Pour notre exemple nous n’aurons besoin d’une liste ordonée ul ayant pour id « links » et un bouton qui appellera notre fonction javascript « getLinks ».


      
      

Javascript

Notre code Javascript se compose de 3 fonctions : la fonction getLinks et 2 fonction qui vont nous permettre de nettoyer notre XML afin d’avoir un fichier identique sous tous les navigateurs. Je ne détaillerai pas ces fonctions qui peuvent être récupéré dans le code de la page html.

Voici le code de la fonction getLinks.

function getLinks(){
  //On vide le contenu de l'élément ayant pour id links
  $('links').update();
      
  //On récupère le fichier Xml via une requete AJAX en get
  new Ajax.Request('links.xml', {
    method: 'get', //indispensable pour la récupération d'un fichier
    onException: function(request,error) {
        alert(error.message);
    },
    onFailure: function(){ alert('Une erreur est survenue...'); },
    //en cas de succès de la récupération du fichier
    onSuccess: function(response) {
    //On récupère la réponse et on la nettoie pour avoir un fichier XML
    //identique sur tous les navigateur
    var xmlDoc = clean(response.responseXML);
          
    //Initialisation du template avec une balise li qui contient un lien vers le site
    var myTemplate = new Template('
  • #{Description}
  • '); //On récupère les neouds de type link var links = xmlDoc.getElementsByTagName('link'); //On boucle sur les noeuds for (i=0; i < links.length; i++) { //On récupére l'Url et la description du lien en cours var UrlValue = links[i].getElementsByTagName("Url")[0].firstChild.nodeValue; var DescriptionValue = links[i].getElementsByTagName("Description")[0].firstChild.nodeValue; //On met à jour l'élément links avec le template qu'on évalue //en lui passant en paramètre les valeurs à substituer $('links').insert(myTemplate.evaluate({Url: UrlValue, Description: DescriptionValue})); } } }); }
    Utilisation des templates

    La création d'un template se fait via l'instanciation d'une variable avec new Template. Les variables du template sont définis par #{ et }.

    var myTemplate = new Template('
  • #{Description}
  • ');

    Pour remplacer les variables par ses données, on utilisera la méthode evaluate en lui passant comme paramètre les valeurs des variables pour chacune d'entre elles.

    myTemplate.evaluate({Url: 'http://royto.familleroy.fr//', Description: 'mon site'})

    Conclusion

    Prototype fournit une méthode simple et rapide pour créer du contenu issu d'un modéle. A utiliser sans modération !!

    Supprimer un compte dans Empathy

    En regardant dans mes statistiques, je me suis aperçu que certaines personnes arrivaient sur le blog en recherchant comment supprimer un compte dans Empathy. Donc voici la procédure.

    Ouvrez la fenêtre de configuration des comptes (Édition > Comptes ou F4). La liste de vos comptes configurés apparait sur la gauche. Sélectionnez le compte que vous souhaitez supprimer et cliquer sur l’icône en forme de sens interdit.

    Fenêtre de gestion des comptes d'Empathy

    Une fenêtre vous demande de confirmer la suppression. Cliquer sur Enlever. Et voila !

    Confirmation de suppression d'un compte Empathy

    A noter que les salles de conversations et les discussions associées à ce compte ne sont pas supprimés. Je vous renvois vers mon précédent article pour supprimer les conversations.

    Installer la visionneuse de Picasa sous Ubuntu

    Une visionneuse photo est installé avec Picasa 3 sous Windows. Malheureusement, cette visionneuse n’est pas fourni avec Picasa sous Linux. Heureusement, celle-ci vient d’être porté sous Linux par 2 hackers et un .deb est maintenant disponible.

    Installation

    Bien entendu, Picasa 3 doit être installé pour pouvoir installer la visionneuse.

    Le fichier .deb est disponible ici.

    Installez le avec gedebi en double cliquant sur le .deb.

    Installation de la visionneuse Picasa

    Vous pouvez maintenant ouvrir une photo avec la visionneuse en utilisant un clic droit puis ouvrir avec > Utiliser une commande personnalisée > PicasaPhotoViewer

    configuation de la visinuse Picasa

    Visionneuse par défaut

    Pour mettre la visionneuse Picasa en tant que lecteur d’image par défaut, faîtes un clic droit sur une image, puis Propriétés > Ouvrir Avec > PicasaPhotoViewer.

    Visionneuse Picasa en action

    Source : http://www.omgubuntu.co.uk/2009/11/picasa-image-viewer-ubuntu.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+d0od+%28Omg!+Ubuntu!%29&utm_content=Google+Reader