Discussion :

[Gouyon]

Salut à tous
De retour avec mon interface en FXML qui me pose beaucoup de problèmes (voir ce post). Le suivant est que je voudrais adapter la taille du contenu de certaine de cellules du GridPane à la taille de la colonne ou de la ligne de la cellule en question.
Après pas mal d'essai j'ai opté pour la solution suivante (qui n'est pas forcément la meilleure): Il s'agit de créer une interface et d'utiliser une transformation de mise à l'échelle (Scale) pour adapter la taille de cette interface à la largeur de la cellule qui la contient.

Donc j'ai créé mon interface avec la taille maximale que je souhaite lui donner (250). Pour cela j'ai utilisé un AnchorPane.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
 
<AnchorPane fx:id="cmdPane" maxWidth="250.0" minWidth="150.0" styleClass="fond" stylesheets="@../../../application.css" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.view.ihmtestCtrl">
   <children>
      <AnchorPane fx:id="paneMiniCarte" styleClass="minicarte">
         <children>
            <ImageView fx:id="miniCarte" fitHeight="234.0" fitWidth="234.0" pickOnBounds="true" preserveRatio="true" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
               <image>
                  <Image url="@../../../Images/FondCarte/Test_2048_H.png" />
               </image>
            </ImageView>
         </children>
      </AnchorPane>
      <GridPane fx:id="avionGP" gridLinesVisible="true" hgap="4.0" layoutY="270.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
         <rowConstraints>
            <RowConstraints minHeight="10.0" prefHeight="30.0" />
            <RowConstraints />
            <RowConstraints />
         </rowConstraints>
         <columnConstraints>
            <ColumnConstraints />
            <ColumnConstraints />
            <ColumnConstraints />
         </columnConstraints>
         <children>
            <ImageView fx:id="ABECtoCarte" pickOnBounds="true" preserveRatio="true" GridPane.halignment="CENTER" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="1" GridPane.valignment="CENTER" GridPane.vgrow="SOMETIMES">
               <image>
                  <Image url="@../../../Images/Ihm/CANADAIR.PNG" />
               </image>
            </ImageView>
            <ImageView fx:id="ABETtoCarte" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="1" GridPane.valignment="CENTER" GridPane.vgrow="SOMETIMES">
               <image>
                  <Image url="@../../../Images/Ihm/TRACKER.PNG" />
               </image>
            </ImageView>
            <ImageView fx:id="HBEtoCarte" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="1" GridPane.valignment="CENTER" GridPane.vgrow="SOMETIMES">
               <image>
                  <Image url="@../../../Images/Ihm/HBE.PNG" />
               </image>
            </ImageView>
            <Label fx:id="lblNbABEC" text="00" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM" />
            <Label fx:id="lblNbABET" text="11" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM" />
            <Label fx:id="lblNbHBE" text="22" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM" />
         </children>
      </GridPane>
   </children>
</AnchorPane>

J'ai placé cet AnchorPane dans ma vue principale qui est un GridPane. Et j'ai imposé que la première colonne ait une largeur comprise entre 150 et 250

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
vueRoot = new GridPane();		
vueRoot.setStyle("-fx-background-color: lightgray");
 
//Surface du jeu
vueRoot.add(mapArea, 1, 1);
vueRoot.setConstraints(mapArea, 1, 1, 1, 1, HPos.LEFT, VPos.TOP, Priority.ALWAYS, Priority.ALWAYS);
 
//Panneau de commande		
FXMLLoader ihmLoader = new FXMLLoader();
ihmLoader.setLocation(MainFF.class.getResource("view/ihmTest.fxml"));
try {
	AnchorPane ihm = (AnchorPane) ihmLoader.load();
	vueRoot.add(ihm, 0, 1);
	vueRoot.setConstraints(ihm, 0, 1, 1, 1, HPos.LEFT, VPos.TOP, Priority.SOMETIMES, Priority.SOMETIMES);
	Ctrl = ihmLoader.getController();
} catch (IOException e) {
		e.printStackTrace();
	}
//Contrainte de dimension sur la colonne 0
ColumnConstraints cc0=new ColumnConstraints();
cc0.setMaxWidth(250);
cc0.setMinWidth(150);
vueRoot.getColumnConstraints().add(cc0);

le Contrôleur de mon interface

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
private Scale scale = new Scale(1.0, 1.0);
@FXML
	private AnchorPane cmdPane;
@FXML
	private void initialize() {
		cmdPane.getTransforms().add(scale);				
	}
public void miseEchelle(double L){	
	if(L<250){
	double ech=L/250;
	scale.setX(ech);
	scale.setY(ech);	
 
	}

Dans le thread principal j'ai mis une méthode qui répond au redimensionnement de la fenêtre.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
private void mapAreaSizeChanged(Observable o) {
		double viewWidth = mapArea.getWidth() / zoom;
		double viewHeight = mapArea.getHeight() / zoom;
		final Rectangle2D viewport = vueCarte.getViewport();
		if (viewport.getWidth() != viewWidth || viewport.getHeight() != viewHeight) {
			double newMinX = viewport.getMinX();
			double newMinY = viewport.getMinY();
			newMinX = clamp(newMinX, 0, Math.max(0, vueCarte.getImage().getWidth() - viewWidth));
			newMinY = clamp(newMinY, 0, Math.max(0, vueCarte.getImage().getHeight() - viewHeight));
			vueCarte.setViewport(new Rectangle2D(newMinX, newMinY, viewWidth, viewHeight));
		}
		double ll=vueRoot.getColumnConstraints().get(0).getPrefWidth();
		Ctrl.miseEchelle(ll);
	}

Dans le principe ça fonctionne bien à condition que je récupère la largeur de la colonne où est mon interface. J'ai fait quelques essais avec des valeurs fixe et ça marche. Mais le problème est que je dois récupérer la largeur de ma colonne. Je pensais que vueRoot.getColumnConstraints().get(0).getPrefWidth(); allait la donner or ce n'est pas du tout le cas.
J'ai pas mal cherché mais je n'ai pas trouvé comment récupérer cette donnée.

Donc pour résumer:

1. Comment obtenir la largeur d'une colonne d'un GridPane
2. Y a t'il une méthode plus simple pour faire ce que je veux faire que celle que je viens de décrire

Merci

[bouye]

Je ne crois pas que cela soit faisable actuellement (sans taper dans l'API privée*) : JDK-8092307: Get width / height of a GridPane column / row et JDK-8091874: Need API in GridPane to get row count, column count, and cell bounds

*Tu peux en voir une implémentation préliminaire dans le code de GridPane du JDK 9 -> getCellBounds()

Du coup je me demande si ça ne serait pas plus simple de mettre un conteneur custom (une Region, un Pane ou un StackPane) dans la cellule, de le configurer pour qu'il se mettre automatiquement a la bonne taille lorsqu'on agrandit / rétrécit la grille et de récupérer ses dimensions à lui...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
final Region myStuffContainer = new Region() {
    {
        getChildren().add(stuff);
    }
 
    @Override
    protected void layoutChildren() {
        final double width = getWidth();
        final double height = getHeight();
        // Calcul de l'echelle.
        // Mise en page.
        [...]
    }
};
GridPane.setContraint(myStuffContainer, ... Priority.ALWAYS, Priority.ALWAYS);
myGrid.getChildren().add(myStuffContainer);

[Gouyon]

Ta solution a l'air de bien fonctionner. Cependant il y a du retard à l'allumage si je puis m'exprimer ainsi. Par exemple si je maximise la fenêtre la partie gauche ne bouge pas alors que la colonne du GridPane à changer de taille.
Au départ (1er lancement)


Après maximisation


Ce qu'il y aurait du avoir (et que j'ai au final quand je bouge la partie centrale)


Peut être que je rate un message.

[bouye]

Hum ça va être encore le genre de truc qui me font dire après toutes ces années qu'il y a un truc que je ne pige pas dans leur méthode de layout qui est quand même disons-le moins évidente que celle de Swing en son temps (et si on regarde bien depuis JavaFX 1.0 c'est surtout sur des histoires de mise en page que je me suis pris la tête le plus grave...). Hum essaie avec Pane au lieu de Region juste pour voir .

[Gouyon]

Même phénomène. Cependant j'ai trouvé une solution en faisant une grosse tricherie
Je me met en fullscreen (ce qui sera le cas dans la version finale) et j’exécute une routine qui déplace la carte et l'interface se réajuste automatiquement.

Code :

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

1
2
3
4
 
primaryStage.setFullScreen(true);
		primaryStage.show();
		moveMap(-20,-20);

Le déplacement de la carte

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
private void moveMap(double draggedDistanceX,double draggedDistanceY)
 
{
	double viewWidth = mapArea.getWidth() / zoom;
	double viewHeight = mapArea.getHeight() / zoom;
 
	final Rectangle2D viewport = vueCarte.getViewport();
	double curMinX = viewport.getMinX();
	double curMinY = viewport.getMinY();
 
	double newMinX = curMinX + draggedDistanceX;
	double newMinY = curMinY + draggedDistanceY;
	newMinX = clamp(newMinX, 0, Math.max(0, vueCarte.getImage().getWidth() - viewWidth));
	newMinY = clamp(newMinY, 0, Math.max(0, vueCarte.getImage().getHeight() - viewHeight));
	vueCarte.setViewport(new Rectangle2D(newMinX, newMinY, viewWidth, viewHeight));
	corrigeLocation(newMinX, newMinY);
}