Tutoriel: utiliser des tailles élastiques #

Ajouter les tailles élastiques #

1. Ouvrir file_attente.xml 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.xml 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.xml 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