Libérez la touche F1 sous Internet Explorer

le 25/09/2008 par Andre Nedelcoux
Tags: Software Engineering

Aaaah, cette fabuleuse "feature" de Internet Explorer : lorsqu'on presse F1, la fenêtre d'aide d'IE s'ouvre... sauf que lorsque l'on a besoin d'utiliser F1 comme raccourci dans une application web métier, on constate vite la gestion de F1 est enfouie profondément dans le code IE et qu'il est difficile de reprendre la main sur cet événement. Voici donc le hack en 5 étapes qui permet de récupérer la main sur F1 - comme c'est un classique du développement Javascript, je vous fais la version "implémentation avec GWT" pour changer un peu.

Etape 1 Dans la page HTML, positionner une méthode sur le "onhelp" du tag body (ce tag est seulement supporté sous IE, donc les autres navigateurs vont l'ignorer). Cette méthode sera appelée lorsque F1 est pressé.

< body onhelp="trapOnHelp()" >

Etape 2 Implémenter le hack suivant dans la méthode trapOnHelp() qui repasse la main à GWT et bloque l'événement "touche F1 pressée", si bien que IE ne va pas ouvrir la fenêtre d'aide. Vous remarquerez que l'on passe en paramètre un boolean qui indique si l'utilisateur a pressé F1 ou SHIFT+F1

< script language='javascript' >
function trapOnHelp(){
trapF1InGwt(event.shiftKey);

event.returnValue=false;
};
< /script >

Etape 3 Implémenter en GWT la méthode qui sera in fine appelée lorsque F1 est pressé (dans MyGwtClass)

public static void trapF1(boolean pHasShift){
//implémenter ici le code métier à déclencher sous F1
}

Etape 4 Faire le lien entre le code Javascript et la méthode GWT en JSNI : la méthode GWT est "branchée" sur l'objet window du DOM la méthode GWT et elle délègue l'appel à la méthode trapF1() (...qui sera compilée en Javascript lors de la compilation GWT).

public static native void hookJavascript()/*-{
$wnd.trapF1InGwt = function(hasShift){
@mygwtpackage.MyGwtClass::trapF1(Z)(hasShift);
}
}-*/;

Etape 5 Dans le entry point GWT (en Java), provoquer le branchement dans le DOM au chargement de l'application

MyGwtClass.hookJavascript();