web-dev-qa-db-fra.com

Styliser les boîtes de dialogue JavaFX par défaut

Je cherche un moyen de styliser la boîte de dialogue JavaFX par défaut (javafx.scene.control.Dialog).

J'ai essayé d'obtenir le DialogPane et d'ajouter une feuille de style, mais elle ne couvre qu'une petite partie de la boîte de dialogue. Je préférerais styliser uniquement avec un fichier css externe et sans ajouter styleClasses sur le code. Cela aurait l'air désordonné (en-tête, contenu, propre contenu sur le contenu et plus ..)

J'ai googlé déjà beaucoup et trouvé seulement des exemples pour ControlsFX, mais comme jdk8_40 JavaFX a ses propres dialogues, je les utilise maintenant.

Aucune suggestion?

Modifier:

Depuis que José Pereda a publié la solution, j'ai créé mon propre dialogue.css. Je vais le poster ici car il couvre toute la boîte de dialogue et peut-être que quelqu'un veut le copier-coller. Remarque .dialog-pane est déjà un nom de styleClass donné, vous n'avez donc pas besoin d'appliquer le vôtre. Bien sûr, Josés est plus fin et détaillé.

.dialog-pane {
    -fx-background-color: black;
}

.dialog-pane .label {
    -fx-text-fill: white;
}

.dialog-pane:header .header-panel {
    -fx-background-color: black;
}

.dialog-pane:header .header-panel .label {
    -fx-font-style: italic;
    -fx-font-size: 2em;
}
javafxdialogjavafx-8
29
xoned

Vous pouvez styliser vos boîtes de dialogue avec votre propre fichier css, mais pour cela, vous devez prendre en considération que la boîte de dialogue est en fait une nouvelle étape, avec une nouvelle scène, et que le nœud racine est une instance DialogPane.

Donc, une fois que vous avez créé une instance de dialogue:

@Override
public void start(Stage primaryStage) {        
    Alert alert = new Alert(AlertType.CONFIRMATION);
    alert.setTitle("Confirmation Dialog");
    alert.setHeaderText("This is a Custom Confirmation Dialog");
    alert.setContentText("We override the style classes of the dialog");
    ...
}

vous pouvez accéder à son volet de dialogue et ajouter votre propre feuille de style et votre propre sélecteur de classe:

DialogPane dialogPane = alert.getDialogPane();
dialogPane.getStylesheets().add(
   getClass().getResource("myDialogs.css").toExternalForm());
dialogPane.getStyleClass().add("myDialog");

Maintenant, l'astuce consiste à connaître toutes les règles qu'une feuille de style Dialog a implémentée par défaut.

Et c'est une tâche difficile ... car ils ne sont pas dans le fichier modena.css, Comme pour tous les contrôles réguliers. Au contraire, ils se trouvent dans le fichier modena.bss, Un fichier binaire situé dans le jfxrt.jar sous des packages privés.

Après quelques recherches, j'ai réussi à obtenir ces règles, donc votre fichier myDialogs.css Personnalisé ressemblera à ceci:

.myDialog{
    -fx-background-color: #f9d900;
}
.myDialog > *.button-bar > *.container{
    -fx-background-color: #a9e200;
}
.myDialog > *.label.content{
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}
.myDialog:header *.header-panel{
    -fx-background-color: #a59c31;
}
.myDialog:header *.header-panel *.label{
    -fx-font-size: 18px;
    -fx-font-style: italic;
    -fx-fill: #292929;
}

Et vous aurez votre boîte de dialogue stylisée:

Styled dialog

Notez qu'étant un fichier bss sous des packages privés, ces sélecteurs peuvent changer sans préavis dans les futures versions.

[~ # ~] modifier [~ # ~]

Je viens de découvrir que le sélecteur .dialog-pane Fait déjà partie de modena.css dans les derniers 8u40 premières versions , donc vous pouvez trouver tous les sélecteurs et règles qui y sont appliquées.

49
José Pereda