Salut à tous, aujourd'hui un peu de technique. J'ai récemment eu à intégrer une applet Java dans une application Web. Le client voulait pouvoir passer l'applet en full screen avec un bouton.
J'ai été très surpris par le comportement de Firefox vis à vis de cela. En effet sous Internet Explorer pas de problèmes, on met l'applet dans un div avec des paramètres de tailles à 100% et lorsque l'on retaille le DIV l'applet suit les changements sans problèmes. Avec Firefox ca a été une autre paire de manches.
Ok l'applet était bien retaillée sous Firefox mais malheureusement celle ci était rechargée. En effet Firefox détruit et recréé une nouvelle instance de l'applet pour l'afficher à la nouvelle taille. Dans beacoup de cas cela ne sera pas un problème mais dans mon cas c'en était un gros. L'applet en question est JxCell qui est une applet (très bien faite d'ailleurs) permettant l'édition de fichier Excel en ligne. Résultat le retaillage du div provoquait le rechargement du fichier Excel et donc la perte des modifications effectuées avant le passage en full screen... ... ...
Bref il a fallut ruser un maximum. Ce qu'il faut savoir c'est qu'il ne faut surtout pas toucher au conteneur de l'applet alors que vous pouvez toucher à l'applet elle même.
Voici comment j'ai procédé : 1. Mettre l'applet au plus au niveau du HTML (directement dans le BODY) 2. Mettre un DIV à l'endroit où l'applet doit apparaître sous sa petite forme. Ce div doit avoir la taille que devra avoir l'applet. 3. Au chargement de la page déplacer l'applet par dessus le DIV afin de le recouvrir. 4. Pour passer en fullScreen il suffit de changer la taille de l'applet 5. Pour repasser en mode normal il suffit de rechanger la taille de l'applet pour recouvrir à nouveau le DIV.
Voici les bouts de codes nécessaires à la manip :
Dans le code le DIV de placement s'appelle appletDivPlace
JavaScript :
function getSize(objName) {
var obj = document.getElementById(objName);
return \[obj.offsetWidth, obj.offsetHeight\];
}
function getOffset(objName) {
var obj = document.getElementById(objName);
var curleft = 0;
var curtop = 0;
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return \[curleft, curtop\];
}
function getWindowHeight()
{
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' )
{ //Non-IE
myHeight = window.innerHeight;
}
else
{
if ( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
{ //IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
}
else
{
if ( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
{ //IE 4 compatible
myHeight = document.body.clientHeight;
}
}
}
return myHeight;
}
function fullScreen(editable) {
var applet = document.Applet;
var appletDivPlace = window.document.getElementById("appletDivPlace");
var height = getWindowHeight() - 50 + "px";
var width = document.body.parentNode.scrollWidth - 50 + "px";
applet.width = width;
applet.height = height;
applet.style.top = "20px";
applet.style.left = "0px";
}
function initApplet() {
// move the applet over the div representing the position of the applet
var applet = document.Applet
var offset = getOffset("appletDivPlace");
var size = getSize("appletDivPlace");
applet.style.left = offset[0];
applet.style.top = offset[1] + 20;
applet.width = size[0];
applet.height = size[1];
}
HTML:
<HTML>
<HEAD><TITLE>Applet</TITLE></HEAD>
<BODY onLoad="javascript:initApplet">
<APPLET id="applet" name="applet" .... />
...
...
<DIV id="appletDivPlace" style="width:200px; height:200px"></DIV>
<A HREF="#" onClick="javascript:fullScreen();">Fullscreen</a>
...
...
</BODY>
</HTML>
