Tutoriel 3.3: installer le CSS #

Préparer les fichiers .xml #

1. Ajouter des id et des styleClass à mon FXML

2. Dans racine.xml, ajouter les id et styleClass

   <?xml version="1.0" encoding="UTF-8"?>
   
   <?import javafx.scene.layout.* ?>
   
   <StackPane xmlns:fx="http://javafx.com/fxml" 
       fx:controller="pong.frontal.vues.VueRacine" 
       styleClass="conteneur" 
       id="vue-racine">
   
   </StackPane>
   

3. Dans file_attente.xml, ajouter les id et styleClass

   <?xml version="1.0" encoding="UTF-8"?>
   
   <?import javafx.scene.layout.* ?>
   <?import javafx.scene.control.* ?>
   <?import javafx.scene.image.* ?>
   
   <VBox xmlns:fx="http://javafx.com/fxml"
       fx:controller="pong.frontal.vues.VueFileAttente" 
       styleClass="conteneur"
       id="vue-file-attente">
   
       <ImageView>    
           <image>
               <Image url="@/images/logo.png" />
           </image>
       </ImageView>
   
       <Button 
           text="Débuter partie"
           styleClass="gros-bouton"
           id="bouton-debuter-partie">
       </Button>
   
   </VBox>
   

Créer les fichiers .css #

1. Créer deux fichier .css

   • dev.css pour afficher les conteneurs et faciliter les tests
   • prod.css pour l’apparence finale de ma Vue

2. Dans pong/src/main/resources/style ajouter

   • dev.css
   • prod.css

3. S’assurer d’avoir l’arborescence suivante dans mon projet:

Déclarer le CSS de l’application #

• L’application a un seul fichier CSS

• Il faut le déclarer dans le Frontal

• Ouvrir FrontalPong.java et ajouter

  public class FrontalPong implements FrontendFx {
  
      // ...
  
      @Override
      public void registerViews(ViewRegistrarFx registrar) {
  
          // ...
  
  
          registrar.registerStylesheet("/style/dev.css");
          //registrar.registerStylesheet("/style/prod.css");
  
      }
  
      // ...
  
  }
  

Ajouter des propriétés CSS #

• Dans dev.css, ajouter graduellement des propriétés pour voir l’effet

• Ajouter:

  .conteneur {
      -fx-border-width:0.8em;
  }
  
  #vue-racine {
      -fx-border-color:darkred;
  }
  

  
  • On voit que le conteneur VueRacine prend toute la fenêtre

• Ajouter:

  .conteneur {
      -fx-border-width:0.8em;
  }
  
  #vue-racine {
      -fx-border-color:darkred;
  }
  
  #vue-file-attente {
      -fx-border-color:darkblue;
  }
  

  
  • On voit que VueFileAttente qui prend tout l’espace à l’intérieur de VueRacine

• Expérimenter avec différents alignements à l’intérieur des conteneurs

  .conteneur {
  
      /* ... */
  
      -fx-alignment:{top-right|bottom-left|center}
  }
  

  top-right
  bottom-left
  center

  • NOTES:
    • il existe évidemment d’autres options.
    • on va utiliser center ici.

• Ajouter du style pour les états d’un gros-bouton

  .gros-bouton {
      -fx-font-size: 1.2em;
  }
  
  .gros-bouton:pressed {
      -fx-scale-x:0.9;
      -fx-scale-y:0.9;
  }
  
  .gros-bouton:hover {
      -fx-cursor: hand;
  }
  

  • NOTE: le bouton ne fait toujours rien, ce n’est que du style ;-)

• Choisir ou créer un style de bouton, p.ex.

  .gros-bouton {
      -fx-padding: 0.6em 1.15em 1.15em 1.15em;
      -fx-background-insets: 0,0 0 0.4em 0, 0 0 0.45em 0, 0 0 0.5em 0;
      -fx-background-radius: 0.6em;
      -fx-background-color: 
          linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
          #9d4024,
          #d86e3a,
          radial-gradient(center 50% 50%, radius 100%, #d86e3a, #c54e2c);
      -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 0.4em,0,0, 0.1em);
      -fx-font-weight: bold;
      -fx-font-size: 1.1em;
  }
  

  • adatpé de:
    • http://fxexperience.com/2011/12/styling-fx-buttons-with-css/
  

• Filnament, le prod.css est similaire, sauf que:

  • on ne montre pas les conteneurs
  • on ajoute une couleur de fond

  public class FrontalPong implements FrontendFx {
  
      // ...
  
  	@Override
  	public void registerViews(ViewRegistrarFx registrar) {
  
  		//registrar.registerStylesheet("/dev.css");
  		registrar.registerStylesheet("/prod.css");
  
  	}
  
  	// ...
  
  }