Discussion :

[Roger_Rabbit]

Bonjour,

ma question de ce jour concerne un rich:modalpanel très simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<rich:modalPanel 
  id="importPanel" height="500" width="500" style="overflow:auto">
  <f:facet name="header">
    <h:outputText value="#{bundle.somevalue}" />
  </f:facet>
  <ui:include src="importFile.xhtml" flush="true"/>
</rich:modalPanel>

Seulement, j'aimerais aussi que mon modalPanel puisse être défini comme un composant HTML classique avec les comportements suivants :

1. Qqchose de type "height:100%;overflow-y:auto"
2. Une taille max (de type "max-height:700px"
3. une taille min

Seulement, après près de 3h passées à triturer mon panneau dans tous les sens, je n'arrive pas à faire même le premier... principalement car rich:modalpanel n'accepte pas les dimensions dynamiques (autant que je sache!)
Je pourrais bien travailler directement avec la résolution de l'écran (screen.width et screen.height) mais je ne sais pas comment les transmettre directement à rich:modalpanel (width=??0.9*screen.width??).
D'autre part, ça ne résoudrait qu'une partie de mon problème (resterait les tailles min et max).

Donc j'ai l'intuition que la solution se trouverait plutôt dans la redéfinition des styles internes du composant (.rich-mpnl-panel si je ne m'abuse).
Seulement, mes connaissances en CSS sont faibles, et je ne suis pas certain de pouvoir faire un "ajout" sur ce sytle sans automatiquement effacer tout ce que je ne définis pas explicitement. Et mes essais ont surtout foutu une pagaille pas possible dans mes autres modals...
Ca ressemble à ça (et ce sera certainement une horreur aux yeux des experts!):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<style type="text/css">
	.rich-mpnl-panel {overflow:auto;width:100%;height:100%;}
</style>

Au final... si quelqu'un a une idée sur le comment de ce problème, elle sera évidemment la bienvenue!

En attendant, merci déjà de m'avoir lu, et éventuellement d'avance pour vos suggestions.

[romaintaz]

Bonjour,

Alors effectivement, un <rich:modalPanel> doit disposer de dimensions fixes. Les attributs height et width n'accepte que des entiers, qui sont des valeurs en pixels.

Ensuite, redéfinir une classe CSS comme tu l'as fait c'est bien, mais cela implique que tous les composants modalPanel seront impactés. Si tu souhaites définir exceptionnellement des propriétés CSS sans affecter tous les autres composants, il faudra utiliser les attributs styleClass ou style d'un composant.

Sinon, dernière solution : modifier les dimensions en utilisant un peu de code JavaScript, exécuté par le onbeforeshow du composant...

[Roger_Rabbit]

merci Romain.

Tu as confirmé ce que je pensais... par contre je n'ai pas réussi dans les pistes que tu as suggérées (peut-être est-ce que j'ai mal compris!).


Ce que j'ai essayé :

• onbeforeshow
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  7
  8
      function doChangePercentPanelDims(panel,widthPercent,heightPercent)
      {
         panel.width=widthPercent*screen.width/100;
         alert("screen.width : "+screen.width+", panel.width : "+panel.width);
         panel.height=heightPercent*screen.height/100;
         alert("screen.height : "+screen.height+", panel.height : "+panel.height);
      }
       ;

  >> les alertes sont cohéreantes.
  Par contre si je fais l'alerte avant le set, le résultat pour panel.width est "undefined"
  
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  7
  8
  <rich:modalPanel 
    id="importPanel" 
              onbeforeshow="doChangePercentPanelDims(this,100,100);">
    <f:facet name="header">
      <h:outputText value="#{bundle.somevalue}" />
    </f:facet>
    <ui:include src="importFile.xhtml" flush="true"/>
  </rich:modalPanel>

  >> Au final, ça n'a aucun effet de toutes façons
  
  
• style
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  7
  8
  9
   <rich:modalPanel
              id="importPanel"
              autosized="true"
  			style="overflow:auto;width:100%;height:100%;">
  	            <f:facet name="header">
  	                <h:outputText value="#{bundle.somevalue}" />
  	            </f:facet>
  	            <ui:include src="importFile.xhtml" />
          </rich:modalPanel>

  => Absolument sans effet
  
  
• styleClass
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  <style type="text/css">
  	.totoStyle {overflow:auto;width:100%;height:100%;}
  </style>

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  7
  8
  9
   <rich:modalPanel
              id="importPanel"
              autosized="true"
  			styleClass="totoStyle">
  	            <f:facet name="header">
  	                <h:outputText value="#{bundle.somevalue}" />
  	            </f:facet>
  	            <ui:include src="importFile.xhtml" />
          </rich:modalPanel>

  >> A première vue il ne se passe absolument rien... mais en regardant de plus près, il semble y avoir un effet en arrière plan (une espèce de masque blanc de la largeur et la hauteur de l'écran.. seulement Firebug ne me permet pas d'inspecter ces effets (inactif sur les éléments en arrière-plan) pour confirmer de quel objet il s'agit.
  

Voilà... je patauge... en résumé

PS : j'ai aussi essayé à chaque fois avec ET sans le autosize = true;

[romaintaz]

Hello,

Pour la solution JavaScript, je pense qu'il faut opter pour quelque chose de légèrement différent. En fait, tu passes this à ta fonction. Le souci, c'est que cela ne fait pas référence à ton panel. En effet, ça marcherait bien si la méthode liée à onbeforeshow été affectée à une balise HTML. Or la fonction a appelée est donnée à du code JavaScript (qui est le constructeur de l'objet modalPanel). Donc le this fera référence non plus à un objet HTML, mais à une fonction JavaScript. Du coup, modifier des valeurs de dimensions n'a plus de sens ici...

Il faut à mon avis que tu retrouves ton modal panel dans le code JavaScript, en utilisant l'ID qui doit être écrit comme ça :

formId:panelIdContentDiv

Ainsi, si ton panel s'appelle toto, il faudra chercher le DIV à l'ID totoContentDiv, préfixé, si je ne dis pas de bêtise, par l'éventuel form qui le contient (à vérifier).

Du coup, tu fais quelque chose comme ça dans ta fonction JavaScript, à laquelle tu passes ton ID de form et ton ID de panel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function doBidule(formId, panelId) {
    var widthToSet = ...;
    var heightToSet = ...;
    jQuery("#" + formId + "\\:" + panelId + "ContentDiv").width(widthToSet).height(heightToSet);
}

Bon, je ne sais pas si cela est plus clair, j'essaierais de voir demain sinon.

[Roger_Rabbit]

Romain,

j'ai tenté ta solution, mais j'ai l'impression que l'id du form n'est pas invoqué ici.. j'ai donc tenté (en dur) de faire jQuery("importFilePanelContentDiv") (si ça peut être une info utile : si je fais une alerte sur ce que me renvoie jQuery, je reçois un [Object object]). Rien ne se passe dans les deux cas.

Je liste ci-dessous le généré (visible via firebug) dont je me sers pour mes tests (erreurs de recopie possible) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
  <div id="importContactFilePanelContainer" class="rich-modalpanel" style="position:absolute;z-index:100;background-color:inherit;">
    <div id="importFilePanelDiv" class="rich-mpnl-mask-div-opaque rich-mpnl-mask-div" style="z-index:-1;">
      <div class="rich-mpnl-panel">
        <div id="importFilePanelCDiv" class="rich-mp-container" style="position:absolute;left:257px;top:88px;z-index:9;">
          <div id="importFilePanelShadowDiv" class="rich-mp-shadow" style="width:750px;height:604px;"> </div>
          <div id="importFilePanelContentDiv" class="rich-mp-shadow" style="width:750px;height:604px;">
  ................
          </div>
        </div>
      </div>
    </div>
  </div>

J'ai tenté de faire des sets un peu violents de chacun des éléments :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
        var panel0 = document.getElementById('importFilePanelDiv');
        var panel1 = document.getElementById('importFilePanelCDiv');
        var panel2 = document.getElementById('importFilePanelShadowDiv');
        var panel3 = document.getElementById('importFilePanelContentDiv');
        var panel4 = document.getElementById('importFilePanelContentTable');
 
     	panel0.style.width="1270px";
     	panel1.style.width="1270px";
     	panel2.style.width="1270px";
     	panel3.style.width="1270px";
     	panel4.style.width="1270px";

Mais la largeur n'est appliquée que sur les 4 premiers panneaux.
Le dernier (panel4 => importContactFilePanelContentTable) est automatiquement remis à la taille que j'ai fixée au départ...

Par contre, si je le fais à la main via firebug (width:1270px) sur le importFilePanelContentTable, là ça fonctionne... (c'est très frustrant d'ailleurs!)

[romaintaz]

jQuery("importFilePanelContentDiv"); ne donnera rien, mais normalement jQuery("#importFilePanelContentDiv"); oui
Le "#" est utilisé pour indiquer que l'on parle d'un ID ici...

Sinon, je me demande si le problème n'est pas que le onbeforeshow est appelé, donne la taille voulue, puis le code JavaScript du modal panel vient remettre la bonne taille au moment d'afficher la popup.

Essaie de mettre ton code JavaScript dans l'événement onshow plutôt...