Discussion :

[Daydreamer067]

Bonjour

J'ai l'anchorpane suivant :


On voit que si la fenetre est redimensionnée les boutons et contrôles sont tronqués puis disparaissent.

Le fxml est le suivant :

Code XML :

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

<AnchorPane maxHeight="-Infinity" maxWidth="1.7976931348623157E308" minHeight="-Infinity" prefHeight="52.0" prefWidth="1020.0" styleClass="dark-background" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.eps.helios.framework.compo.generic.footer.FooterController">

Comment je peux changer les min ou maxwidth, ou dans le css pour que ce qui se trouve dans le anchorpane se redimensionne automatiquement.

merci de vos réponses.

[bouye]

J'imagine que le bouton "Suivant" est ancré sur le bord droit ? Bon déjà s'il sort c'est que l'AnchorPane n'est pas redimensionné par son parent donc donc qu'il faut voir de ce coté là. Mais de toute manière il va y avoir un soucis car si ca diminue trop les boutons vont se retrouver empilés les uns sur les autres (puisque contrairement à d'autre layout, celui-ci ne va pas s'embêter à laisser de la place pour ses autres enfants, il les affiche juste les uns sur les autres).

Donc, comment est donc architecturé ce qu'on voit sur ce screen (au niveau des agencements de layout les uns dans les autres) ?

[Daydreamer067]

La barre en bas est un anchorpane.
A l'intérieur il y a deux Hbox. A gauche pour les boutons précédent et annuler et a droite pour les boutons suivant et terminer.

Le footer est un anchorpane ajouté à l'écran principal (borderpane).

Code XML :

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

1
2
3
4
5
6
7
8
9
10
11
<AnchorPane maxHeight="-Infinity" maxWidth="1.7976931348623157E308" minHeight="-Infinity" prefHeight="52.0" prefWidth="1020.0" styleClass="dark-background" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.eps.helios.framework.compo.generic.footer.FooterController">
   <children>
      <HBox fx:id="leftHBox" alignment="CENTER_LEFT" nodeOrientation="LEFT_TO_RIGHT" prefHeight="52.0" spacing="12.0" AnchorPane.leftAnchor="32.0" />
      <HBox alignment="CENTER" layoutX="988.0" spacing="10.0" AnchorPane.rightAnchor="32.0">
         <children>
            <ImageView fx:id="waitSpinner" pickOnBounds="true" preserveRatio="true" HBox.hgrow="NEVER" />
            <HBox fx:id="rightHBox" alignment="CENTER_LEFT" nodeOrientation="RIGHT_TO_LEFT" prefHeight="52.0" spacing="12.0" />
         </children>
      </HBox>
   </children>
</AnchorPane>

J'ai vu sur un forum qu'il faut changer anchorpane.leftAnchor ou rightAnchor mais je ne connais pas les paramètres.

[bouye]

Bon déjà j'essaie de comprendre ce que tu veux faire puisque ce FXML ne correspond pas tout a fait a ce que tu as dans ton image. Un truc comme ca ne serait pas mieux ?
PS: externaliser les tailles des deux bouton dans CSS.

Code XML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<HBox maxHeight="-Infinity" maxWidth="1.7976931348623157E308" minHeight="-Infinity" prefHeight="52.0" prefWidth="1020.0" styleClass="dark-background" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="footer.FooterController">
   <children>
      <HBox fx:id="leftHBox" alignment="CENTER_LEFT" nodeOrientation="LEFT_TO_RIGHT" prefHeight="52.0" spacing="12.0" AnchorPane.leftAnchor="32.0" HBox.hgrow="NEVER">
          <Button minHeight="32" minWidth="32" />
          <Button minHeight="32" minWidth="32" />
      </HBox>
      <HBox fx:id="centerHBox" alignment="CENTER" layoutX="988.0" spacing="10.0" AnchorPane.rightAnchor="32.0" HBox.hgrow="ALWAYS">
         <children>
            <ImageView fx:id="waitSpinner" pickOnBounds="true" preserveRatio="true" HBox.hgrow="NEVER" />
         </children>
      </HBox>
      <HBox fx:id="rightHBox" alignment="CENTER_LEFT" nodeOrientation="RIGHT_TO_LEFT" prefHeight="52.0" spacing="12.0" HBox.hgrow="NEVER" />
   </children>
</HBox>

[Daydreamer067]

En fait le footer.fxml est dans un borderpane principal :

Code :

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

1
2
3
4
5
6
7
8
<BorderPane styleClass="grey-level3-background" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.eps.helios.application.main.LeftScreenController">
   <top>
      <AnchorPane fx:id="headerBarContainer" />
   </top>
   <center>
      <AnchorPane fx:id="leftContentContainer" style="-fx-background-color: #cfd8dd;" styleClass="grey-level3-background" />
   </center>
</BorderPane>

Il est ajouté après le anchorpane leftcontentcontainer dans le controller.

[Daydreamer067]

Comment est-ce que je peux lier l'anchorpane footer au borderpane principal ?
Est-ce que je mets des setLeftAnchor dans le code ?

[Daydreamer067]

Plus de précisions.
Voici comment est ajouté le footer :

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
/** Le contenu de l'écran représentant le workflow IHM en cours. */
	@FXML
	private AnchorPane screenContent;
 
/**
         * Chargement du footer.
         */
	private void loadScreenFooter() {
		final GuiceFXMLLoader.Result footerControllerLoadResult = loadComponent.loadPanelFromController(FooterController.class,
				FooterController.PATH_TO_FXML);
		screenContainer.setBottom(footerControllerLoadResult.getRoot());
		footerController = footerControllerLoadResult.getController();
		final Set<HeliosFooterActionEnum> actionSet = new HashSet<>();
		actionSet.add(HeliosFooterActionEnum.NEXT);
		footerController.setFooterActionEvent(actionSet);
	}

[Daydreamer067]

Je pensais mettre ce code :

Code :

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

1
2
3
4
5
                AnchorPane.setLeftAnchor(footerControllerLoadResult.getRoot(), 0.0);
		AnchorPane.setRightAnchor(footerControllerLoadResult.getRoot(), 0.0);
		AnchorPane.setTopAnchor(footerControllerLoadResult.getRoot(), 0.0);
		AnchorPane.setBottomAnchor(footerControllerLoadResult.getRoot(), 0.0);
		screenContainer.setBottom(footerControllerLoadResult.getRoot());

mais ça ne fonctionne pas

[bouye]

Tu peux tout aussi bien faire comme tu as fais ici ou inclure directement le second contrôle depuis le FXML primaire via <fx:include/> (ce qui permet d'une part de mettre les contraintes directement dans le FXML parent mais aussi de pouvoir accéder implicitement au contrôleur du FXML inclus depuis le contrôleur du FXML parent).

Voir

• Comment inclure un fichier FXML dans un autre fichier FXML ?
• Comment accéder au contrôleur d'un fichier FXML inclus dans un autre fichier FXML ?

J'avoue que je ne suis pas fan de BorderPane car il semble se comporter différemment de ce à quoi j'étais habitué avec le BorderLayout en Swing, notamment lors du redimensionnement de son contenu. Et donc du coup j'ai des soucis avec Gluon puisque leur View hérite de BorderPane. Y aurait pas moyen dans ton cas que tu utilise VBox ou GridPane à la place vu que avec ces deux gestionnaires là tu peux spécifier des contraintes de redimensionnement ?

[Daydreamer067]

Non je ne peux pas changer le borderpane. Il sert de conteneur pour les barres en haut et en bas.

Ce qui est étrange c'est que lorsque j'agrandi horizontalement la fenêtre le bouton suivant suit le redimensionnement.
Mais si je réduis la fenêtre le bouton est coupé puis disparaît.