Tutoriel: ajouter un Avatar #

Ajouter un avatar #

1. Dans file_attente.fxml, ajouter un contrôle ResizableImage

   <!-- ajouter -->
       <?import ca.ntro.app.fx.controls.ResizableImage?>
   
       <!-- autre possibilité -->
       <?import ca.ntro.app.fx.controls.ResizableAvatar?>
   
       <VBox xmlns:fx="http://javafx.com/fxml"
           fx:controller="pong.frontal.vues.VueFileAttente" 
           styleClass="conteneur"
           id="vue-file-attente">
   
           <!-- ... -->
   
           <!-- retirer -->
           <ImageView>    
               <image>
                   <Image url="@/images/logo.png" />
               </image>
           </ImageView>
   
           <!-- ajouter -->
           <ResizableImage
               fx:id="logo"
               VBox.vgrow="ALWAYS"
               styleClass="logo">
           </ResizableImage>
   
           <!-- autre possibilité: ResizableAvatar -->
   
           <!-- ... -->
   
       </VBox>
   

   • NOTE: on peut aussi utiliser ResizableImage si on ne veut pas le «look» avatar

2. Dans VueFileAttente.java, initialiser le contrôle:

   public class VueFileAttente extends ViewFx {
   
           // ...
   
           @FXML
           private ResizableImage logo;  // ajouter (autre option ResizableAvatar
   
           @Override
           public void initialize() {
               // ...
   
               // ajouter
               Ntro.assertNotNull(logo);
               logo.setImage(new Image("/images/avatar.png"));
   
               // si ResizableAvatar
               // logo.setBackgroundColor(Color.web("#ffff7a"));
   
               // ...
           }
   

3. Ajouter du CSS pour ce contrôle:

   .logo {
           -fx-min-width:10em;
           -fx-max-width:30em;
   
           -fx-min-height:10em;
           -fx-max-height:30em;
       }
   

4. Le résultat devrait être comme suit:

1. Version avec ResizableAvatar et tux.png: