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: