The XUL Factory

Un sondage pour les barbus

Jean-Christophe — Fri, 05 Mar 2010 09:47:00 +0100

Le Touilleur Express (alias Nicolas Martignole), dont je lis toujours le blog avec beaucoup d'intérêt, a lancé un sondage sur les communautés s'adressant aux geeks qui travaillent en SSII, chez les éditeurs de logiciels et autres employeurs de la même branche. Comme il cherche a avoir un maximum de réponse et compte-tenu de la nature de ce blog, je me permet de mette le lien ici.

C'est par là : https://spreadsheets.google.com/vie...

Ça prend juste 5 minutes pour y répondre, et en plus c'est anonyme.

Les attibuts data-* de HTML5

Jean-Christophe — Mon, 22 Feb 2010 16:35:00 +0100

On lit (et écrit également, c'est fatal) beaucoup de choses sur HTML5 depuis quelques années. Au programme des réjouissances on trouve pêle-mêle le tag canvas pour faire du graphisme programmatique, le stockage local pour, par exemple pour le mode offline des applications web, les désormais célèbres tags audio et video déjà utilisés par dailymotion et youtube, le drag and drop... J'en passe et des meilleurs.

Par contre une nouveauté à propose de laquelle je n'avais jamais rien lu et que j'ai découvert hier ce sont les embedded custom non-visible data attributes, c'est là dire des méta informations sous forme d'attributs que l'on peut ajouter à loisir sur n'importe quel élément d'une page HTML et qui peuvent être lus et interprétés par un script dans la page. C'est un peu équivalent à ce qu'il est possible de faire avec XHTML en ajoutant des attributs définis par ses propres namespaces.

Un exemple :

<ul id="pointsOfInterest">
  <li data-latitute="48°51" data-longitude="2°17">La tour Eiffel</li>
  <li data-latitute="48°38" data-longitude="1°30">La mont Saint-Michel</li>
</ul>

Ensuite avec un script on peut utiliser ces coordonnées. Par exemple on peut monter où se trouve le lieu sur une carte.

/* par exemple avec jQuery */
$("#pointsOfInterest > li").click(function() {
    var lat = $(this).dataset("latitude");
    var long = $(this).dataset("logitude");
    showOnMap(lat, long);
}

Un autre exemple : utilisation d'un attribut data-at pour afficher des sous-titres en fonction d'un time-code dans une présentation audio (lue avec le tag audio il va sans dire) : http://www.toolness.com/wp/?p=772.

Je trouve cette nouvelle façon de passer des données supplémentaires très intéressante ; elle est surtout plus simple à mettre en œuvre que les namespaces en XHTML. Toutefois, et c'est sans doute la raison pour laquelle on en parle peu, les navigateur ne l'implémente pas encore. Pour ceux qui sont tout de même pressés de jouer avec, il existe un plugin jQuery qui permet de simuler l'objet dataset : HTML5 Dataset jQuery Plugin.

Tabulation, focus et JTextComponent

Jean-Christophe — Fri, 17 Aug 2007 08:04:00 +0200

Problème : dans un composant de texte Swing (JEditorPane, JTextPane, JTextArea) lors de l'appui sur la touche [TAB], comment faire pour que le focus passe au composant suivant au lieu d'insérer une tabulation ?

Solution :

JTextPane pane = new JTextPane();
Set<AWTKeyStroke> focus = pane.getFocusTraversalKeys(
    KeyboardFocusManager.FORWARD_TRAVERSAL_KEYS);
Set<AWTKeyStroke> newFocus = new HashSet<AWTKeyStroke>(focus);
newFocus.add(KeyStroke.getKeyStroke(KeyEvent.VK_TAB, 0));
pane.setFocusTraversalKeys(KeyboardFocusManager.
    FORWARD_TRAVERSAL_KEYS, newFocus);

Et pour le aller dans l'autre sens (backward focus) :

JTextPane pane = new JTextPane();
Set<AWTKeyStroke> focus = pane.getFocusTraversalKeys(
    KeyboardFocusManager.BACKWARD_TRAVERSAL_KEYS);
Set<AWTKeyStroke> newFocus = new HashSet<AWTKeyStroke>(focus);
newFocus.add(KeyStroke.getKeyStroke(KeyEvent.VK_TAB,
    KeyEvent.SHIFT_MASK));
pane.setFocusTraversalKeys(KeyboardFocusManager.
    BACKWARD_TRAVERSAL_KEYS, newFocus);

Javascript, objets et prototypes

Jean-Christophe — Fri, 12 Jan 2007 18:12:00 +0100

Voici un petit billet qui présente rapidement le modèle objet de Javascript.

Objets

La majorité des langages objets utilisent la notion de classes. Pour reprendre une image fréquemment utilisée, la classe est le moule dans lequel on ~~cuit~~ instancie l'objet. Donc les classes et les objets vivent dans des mondes séparés.

En javascript c'est différent, il n'existe pas de classes, tout est objet. Voilà une façon de créer un objet en javascript^[1] :

Notes

[1] Habituellement j'utilise l'interpréteur javascript Rhino de mozilla. Rhino est multi-plateforme et écrit en Java.

js> myobj = {
    name : "My Object",

    show: function() {
        print ("I am " + this.name);
    }
}
js> myobj
[object Object]
js> myobj.name
My Object
js> myobj.show()
I am My Object

Voilà myobj est l'objet créé. il possède deux propriétés : name qui est une chaine de caractère et show qui est une fonction ou méthode car elle c'est sous ce nom que la norme ECAM-262 une fonction définie à l'intérieur d'un objet.

L'appel à ces propriétés se fait en utilisant la très classique notation pointée : foo.bar représente la propriété bar de l'objet foo. En fait un objet en javascript peut se résumer à un ensemble d'objet nommés. Et d'ailleurs si on reprend l'exemple précédent :

js> myobj.name
My Object
js> myobj["name"]
My Object

Ce sont 2 façons d'accéder à la propriété name de myobj. Ces deux appels sont sémantiquement identiques.

Constructeurs

Si javascript ne propose pas de classes il définit par contre la notion de constructeur. Un contructeur est une fonction qui crée un nouvel objet et initialise ses propriétés. Un constructeur s'utilise avec le mot clé new. Un rapide exemple :

js> function MyObj(objName) {
    this.name = objName;
}
js> myobj = new MyObj("My New Object");
[object Object]

Que se passe-t-il quand on appelle le constructeur MyObj avec new. D'abord un nouvel objet vide est créé ; puis this est initialisé de façon à pointer sur ce nouvel objet. Donc quand on exécute la première instruction de la fonction this pointe sur un objet vide. l'appel this.name = objName; va donc définir la propriété name et la remplir avec l'objet passé en paramètre au constructeur :

js> myobj.name
My New Object

Et si on veut ajouter une méthode à notre objet ? Une solution consite à ajouter la méthode comme on l'a fait avec la propriété précédente :

js> function MyObj(objName) {
    this.name = objName;
    this.show = function() {
        print ("I am " + this.name);
    };
}
js> myobj = new MyObj("My New Object");
[object Object]
js> myobj.show()
I am My New Object

Effectivement cela fonctionne. Cependant cette solution n'est pas très élégante puisque la méthode va être dupliqué dans tous les objets. Il serait plus intéressant que tous les objets instanciés à partir du constructeur partage le même objet méthode. C'est à cela que servent les prototypes.

Prototypes

Chaque objet possède un pointeur caché sur son un autre objet qu'on appelle son prototype. Le prototype est lui aussi un objet javascript et il possède donc lui aussi un prototype. Ces prototypes forment ce qu'on appelle la chaine de prototypes de l'objet. Quand on essaie d'accéder à la propriété bar de l'objet foo en faisant foo.bar alors l'interpréteur javascript fait la chose suivante : il regarde si foo possède une propriété bar ; si oui alors c'est terminé, si non, il fait la même chose avec le prototype de foo et ainsi de suite jusqu'à avoir trouvé la propriété ou avoir parcouru toute la chaine de prototypes.

Mais comment peut-on définir le prototype d'un objet ? C'est simple : le constructeur possède une propriété prototype qui permet de définir le prototype des objets instanciés avec ce constructeur. Attention, la propriété prototype du constructeur n'est pas le prototype du constructeur.

Je reprends mon exemple :

js> function MyObj(objName) {
    this.name = objName;
}
js> MyObj.prototype.show = function() {
    print ("I am " + this.name);
};
js> myobj = new MyObj("My New Object");
[object Object]
js> myobj.show()
I am My New Object

Quel avantage à utiliser des prototypes ? Comme les prototypes sont partagés dès qu'on les modifie, les modifications sont immédiatement répercutées. Par exemple :

js> function MyObj(objName) {
    this.name = objName;
}
js> MyObj.prototype.show = function() {
    print ("I am " + this.name);
};
js> myobj1 = new MyObj("My New Object");
[object Object]
js> myobj1.show()
I am My New Object
js> MyObj.prototype.show = function() {
    print ("Je suis " + this.name);
};
js> myobj1.show()
Je suis My New Object

Encore mieux, on peut ajouter des fonctions aux prototypes des objets déjà existants. Par exemple :

js> String.prototype.comment = function() {
    return "/* " + this + " */";
}
js> str = new String("This is a comment");
This is a comment
js> str.comment();
/* This is a comment */

Et maintenant toutes les chaines de caractères possèdent la méthode comment. Amusant non ?

Wikipedia Search

Jean-Christophe — Sat, 05 Aug 2006 20:46:00 +0200

Wikipedia Search est une extension pour firefox (à partir de la version 1.5.0.2) que j'ai développé quand je me suis rendu compte que la plupart de mes recherches dans wikipedia concernaient des termes lus sur une autre page web. Wikipedia-Search permet donc de faire rapidement une recherche contextuelle dans l'encyclopédie libre wikipedia à partir de n'importe mot lu sur une page web. Il est possible de choisir la langue principale de recherche ou de faire une recherche dans plusieurs langues simultanément.

Quelques captures d'écrans

Pour le moment c'est en version 0.9-beta2 donc pas encore complètement stable même si elle pas mal a été testée avec les différentes versions de firefox sous Windows et Linux.