Tutoriel: utiliser des tailles élastiques #

Ajouter les tailles élastiques #

1. Ouvrir file_attente.fxml et ajouter les VBox.vgrow et les HBox.hgrow

   <!-- ... -->
   
   <VBox xmlns:fx="http://javafx.com/fxml"
       fx:controller="pong.frontal.vues.VueFileAttente" 
       styleClass="conteneur"
       id="vue-file-attente">
   
       <!-- ... -->
   
   
       <!-- ajouter vgrow -->
       <Pane VBox.vgrow="ALWAYS" styleClass="grand-espace-vertical"/>
   
       <HBox styleClass="conteneur">
   
           <!-- ajouter hgrow -->
           <Pane HBox.hgrow="ALWAYS" styleClass="grand-espace-horizontal"/>
   
           <!-- ajouter hgrow -->
           <ScrollPane HBox.hgrow="ALWAYS" fitToWidth="true" styleClass="defilement">
   
               <VBox styleClass="conteneur" fx:id="conteneurRendezVous" id="conteneur-rendez-vous">
               </VBox>
   
           </ScrollPane>
   
           <!-- ajouter hgrow -->
           <Pane HBox.hgrow="ALWAYS" styleClass="grand-espace-horizontal"/>
   
       </HBox>
   
       <!-- ajouter vgrow -->
       <Pane VBox.vgrow="ALWAYS" styleClass="grand-espace-vertical"/>
   
   </VBox>
   

2. Ouvrir rendez_vous.fxml ajouter les HBox.hgrow

   <!-- ... -->
   
   <VBox xmlns:fx="http://javafx.com/fxml"
       fx:controller="pong.frontal.fragments.FragmentRendezVous" 
       styleClass="conteneur,vue-rendez-vous">
       <HBox>
           <Pane styleClass="grand-espace-horizontal"/>
           <!-- ajouter hgrow -->
           <HBox HBox.hgrow="ALWAYS" styleClass="conteneur,rendez-vous" fx:id="horizontalOuVertical">
               <Button 
                   fx:id="boutonDebuterPartie" 
                   text="%debuterPartie"
                   styleClass="gros-bouton">
               </Button>
               <Pane minHeight="20" minWidth="20"/>
               <Label
                   fx:id="labelNomPremierJoueur"
                   styleClass="gros-texte">
               </Label>
               <!-- ajouter hgrow -->
               <Pane HBox.hgrow="ALWAYS" minHeight="20" minWidth="20"/>
               <Button 
                   fx:id="boutonRetirerRendezVous" 
                   text="%retirerRendezVous"
                   styleClass="gros-bouton,bouton-rouge">
               </Button>
           </HBox>
           <Pane styleClass="grand-espace-horizontal"/>
       </HBox>
       <Pane styleClass="petit-espace-vertical"/>
   </VBox>
   

3. Ouvrir rendez_vous_complet.fxml et ajouter les HBox.hgrow

   <!-- ... -->
   
   <VBox xmlns:fx="http://javafx.com/fxml"
       fx:controller="pong.frontal.fragments.FragmentRendezVousComplet" 
       styleClass="conteneur,vue-rendez-vous">
       <HBox>
           <Pane styleClass="grand-espace-horizontal"/>
           <!-- ajouter hgrow -->
           <HBox HBox.hgrow="ALWAYS" styleClass="conteneur,rendez-vous">
               <Button 
                   fx:id="boutonDebuterPartie" 
                   text="%debuterPartie"
                   styleClass="gros-bouton">
               </Button>
               <Pane minHeight="20" minWidth="20"/>
               <HBox alignment="CENTER_LEFT">
                   <Label
                       fx:id="labelNomPremierJoueur"
                       styleClass="gros-texte">
                   </Label>
                   <Pane minWidth="20" minHeight="20"/>
                   <Label
                       text="Vs"
                       styleClass="gros-texte">
                   </Label>
                   <Pane minWidth="20" minHeight="20"/>
                   <Label
                       fx:id="labelNomDeuxiemeJoueur"
                       styleClass="gros-texte">
                   </Label>
               </HBox>
               <!-- ajouter hgrow -->
               <Pane HBox.hgrow="ALWAYS" minWidth="20" minHeight="20"/>
               <Button 
                   fx:id="boutonRetirerRendezVous" 
                   text="%retirerRendezVous"
                   styleClass="gros-bouton,bouton-rouge">
               </Button>
           </HBox>
           <Pane styleClass="grand-espace-horizontal"/>
       </HBox>
       <Pane styleClass="petit-espace-vertical"/>
   </VBox>
   

Vérifier l’effet #

1. Exécuter AppPong et vérifier l’effet des tailles élastiques

    $ sh gradlew pong