Forums : Xul, Xbl, JS...

C'est bon, j'ai trouvé une solution... Ce n'est peut-être pas la meilleure mais ça fonctionne :D Si vous avez d'autres façons de faire je suis intéressé.

Ma fenêtre est organisée ainsi :

• une boite (id='main_box') dans laquelle se trouve
  • une autre boite représentant un formulaire (id='form', mon champ et le bouton)

Dans 'main_box' et au-dessus de 'form', je désire ajouter mon message 'warning'. J'aurai alors la fenêtre suivante :

• une boite (id='main_box') dans laquelle se trouvent
  • le message (id='warning')
  • le formulaire (id='form', mon champ et le bouton)

Voici la fonction permettant d'ajouter le message et de redimensionner la fenêtre :

function warning(msg) {
 var mainBox    = document.getElementById('main_box');
 var formBox    = document.getElementById('form');
 var warningBox = document.getElementById('warning');
 
 if(!warningBox) {  
   warningBox = document.createElement('description');
   mainBox.insertBefore(warningBox, formBox);
   warningBox.setAttribute('id', 'warning');
   warningBox.setAttribute('value', msg);
   warningBox.setAttribute('style', 'color: red;');
       
   var h = warningBox.boxObject.height;
   window.resizeBy(0,h);
   
 }
 else {
   warningBox.value = msg;
 }
}

le if/else c'est pour afficher différents messages suivants les champs non-remplis, et donc ne pas recréer une boite pour le message warning à chaque fois que le"formulaire est validé

Tu as certainement placé tes éléments en définissant leur position exacte à coup de style CSS, ce n'est pas la meilleure chose à faire.

Il va falloir regarder du côté de l'attribut flex et de l'élément <spacer>. regarde cette page dans le wiki pour te faire une idée : /wiki/Tutoriel/ModeleDeBoite

Un autre moyen de redimenssionner la fenêtre d'après son contenu (pas testé): sizeToContent.

Au lieu de créer le tag description dans ta fonction warning() ce n'est pas plus simple de le mettre directement dans le XUL et de l'afficher ou masquer avec JS ?

<perso>beurk le sizeToContent</perso> ;) ;)

Oui, il serait préférable de placer un élément <description> dans ton fichier XUL, et de le remplir au besoin. Tu peux le masquer, soit par un attribut hidden, soit collapse (/wiki/Reference/Xul/ElementXul).

chBok a écrit:

Tu as certainement placé tes éléments en
définissant leur position exacte à coup de style
CSS, ce n'est pas la meilleure chose à faire.

Il va falloir regarder du côté de l'attribut flex
et de l'élément <spacer>. regarde cette page dans
le wiki pour te faire une idée :
/wiki/Tutoriel/ModeleDeBoite

Non, mes éléments sont placés dans des boites :D Je n'utilise pas encore de CSS, tout est brut pour l'instant.

thefab a écrit:

Un autre moyen de redimenssionner la fenêtre
d'après son contenu (pas testé): sizeToContent

Arf :D je ne l'avais pas vue celle-là. Et hop, je viens de tester et j'ai remplacé :

var h = warningBox.boxObject.height;
window.resizeBy(0,h);

par

window.sizeToContent();

Et ça fonctionne sans problème :D Merci.

thefab a écrit:

Au lieu de créer le tag description dans ta
fonction warning() ce n'est pas plus simple de le
mettre directement dans le XUL et de l'afficher ou
masquer avec JS ?

Si ce serait plus simple...

chBok a écrit:

Oui, il serait préférable de placer un élément <description>
dans ton fichier XUL, et de le remplir au besoin. Tu peux le
masquer, soit par un attribut hidden, soit collapse

Je viens de tester la chose :

• hidden : ne fonctionne pas. Quand le message apparaît, la fenêtre ne se redimensionne pas et cache en partie les boutons du bas.
• collapsed : fonctionne + ou - puisque l'espace réservé au message est présent. La fenêtre n'a donc pas besoin d'être redimensionnée et il y a donc un espace blanc pas très esthétique... De plus, si le message a afficher est très très grand, le problème est le même que pour hidden : la fenêtre ne se redimensionne pas et une partie du bas n'est plus accessible... En fait il faut réserver un espace suffisant...

Je ne pense pas que ces attributs soit une bonne solution.

Merci quand même pour toutes ces idées !

J'ai encore plus simple, dans le <dialog> (pas testé avec <window>), il suffit de ne pas préciser les attributs width et height (ou peut-être en les mettant à 0). La fenêtre s'adaptera toute seule à son contenu. C'est bien pratique si ton application est disponible en plusieurs langues.

David

Merci David, mais malheureusement (ou heureusement ;p) je n'ai aucun attribut width ou height de précisé... La fenêtre (j'utilise bien un dialog) ne s'adapte pas automatiquement.

Par contre, je n'ai pas testé la valeur 0...

Autre solution: ne pas redimmensionner la fenêtre

Je m'explique: tu as une zone flex dans ta fenêtre (ou dialogue), tu en as certainement une ! Donc placer ton message (qui fera l'objet d'un binding) au dessus de cette zone et lorsque tu affiches le message c'est la zone flexible qui s'adapte.

En code ça donne quelque chose comme:

XUL

<window>
<toolbox/>

<message id="warning" src="warning.png" value="Message d'erreur" style="-moz-binding: url('message.xml#message');"/>

// Zone flex
<vbox flex="1">
// Contenu de la fenêtre
</vbox>

<statusbar/>
</window>

XBL

<binding id="message">
  <content>
    <xul:hbox class="spaced box-padded" align="center" style="color: InfoText; background-color: InfoBackground;" flex="1">
      <xul:image xbl:inherits="src"/>
      <xul:description xbl:inherits="value" flex="1"/>
    </xul:hbox>
  </content>
</binding>

JS (hidden fonctionne bien dans ce cas, la zone flex est redimmensionnée)

// Afficher
document.getElementById("warning").removeAttribute("hidden");
// Masquer
document.getElementById("warning").setAttribute("hidden", true);

Fabrice