Discussion :

[Gwenc]

Bonjour,

Je post un message pour bien comprendre comment fonctionne CSS pour javaFx.

Les instructions semblent différentes pour javaFx ( ajout de -fx- devant chaque instruction).

exemple background-color: devient -fx-background-color.

sauf que d'après NETBeans, il y aurait d'autres instruction comme :

-moz- pour firefox, -o- pour opéra, ....

ma question :

peut-on utiliser les instructions normales CSS (sans -fx-, ...) dans un écran fxml?

les fonctions :hover, .... fonctionnent-elles en javaFX?

[Largo13]

Il faut mettre le -fx-pour les fichiers FXML.

Introduction

JavaFX Cascading Style Sheets (CSS) is based on the W3C CSS version 2.1 [1] with some additions from current work on version 3 [2]. JavaFX CSS also has some extensions to CSS in support of specific JavaFX features. The goal for JavaFX CSS is to allow web developers already familiar with CSS for HTML to use CSS to customize and develop themes for JavaFX controls and scene graph objects in a natural way. The JavaFX CSS support and extensions have been designed to allow JavaFX CSS style sheets to be parsed cleanly by any compliant CSS parser, even though it might not support JavaFX extensions. This enables the mixing of CSS styles for JavaFX and for other purposes (such as for HTML pages) into a single style sheet. To this end, all JavaFX property names have been prefixed with a vendor extension of "-fx-". Even properties that might seem to be compatible with standard HTML CSS have been prefixed, because JavaFX has somewhat different semantics for their values.

Sinon, au début le plus simple est de lire la doc pour voir les possibilités qui s'offrent à toi:
http://docs.oracle.com/javafx/2/api/...es/cssref.html

[Gwenc]

Bonjour Largo13,

As-tu essayer la fonction hover dans un css utilisé par un fxml?

C'est pourtant assez simple mais je n'arrive pas à le faire fonctionner :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#glass-grey {
    -fx-background-color: #c3c4c4, linear-gradient(#d6d6d6 50%, white 100%), radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%);
    -fx-background-radius: 30;
    -fx-background-insets: 0,1,1;
    -fx-text-fill: black;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 );
}
 
.button:hover {
    -fx-background-color: #ffffff;
    /*-fx-background-color: linear-gradient(#2A5058, #61a2b1);*/
}

dans le fxml :

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

<Button id="glass-grey" fx:id="signIn" text="Sign In" />

[bouye]

Peux-t'on avoir le code qui charge la feuille de style dans l'UI STP?

Quand au fait que Netbeans propose d'autres valeurs c'est tout simplement que son éditeur CSS peut aussi faire du CSS pour autre chose que JavaFX.

[Gwenc]

Bien sur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
 
 public void start(Stage stage) throws Exception {
 
        Scene scene = new Scene(new AnchorPane(), 1200, 700);
        stage.setResizable(true);
        MenuManager menuManager = new MenuManager(scene);
        menuManager.showLoginScreen();
 
        stage.setScene(scene);
        stage.show();
 
    }
 
MenuManager : 
 
public class MenuManager {
 
    private Scene scene;
 
    public MenuManager(Scene scene) {
        this.scene = scene;
    }
 
 public void showLoginScreen() {
        try {
            FXMLLoader loader = new FXMLLoader(
                    getClass().getResource("/myLogin/Login.fxml"));
            scene.setRoot((Parent) loader.load());
            MyLoginController controller = loader.<MyLoginController>getController();
            controller.initManager(this);
        } catch (IOException ex) {
            Logger.getLogger(MenuManager.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

Concernant le tag :hover, il fonctionne en fxml?

[bouye]

Oui mais ton CSS n'est pas chargé dans ce code.

Si tu utilises SceneBuilder pour créer ton FXML, tu as deux manière d'y ajouter un CSS :

1. Par le menu Preview->Scene Style Sheets->Add a Style Sheet..., il s'agit d'une preview qui ne fonctionne que dans SceneBuilder.
2. Sur un noeud via Properties->Stylesheets->+, la feuille de style est attachée de manière permanente à ce nœud et sera chargée en même temps que le FXML. C'est surtout utile pour fournir un style de base quand on crée de nouveaux contrôles.

Et évidement, en chargeant la feuille de style manuellement dans le code et en l'attachant à la scène ou à un nœud :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
URL cssURL = getClass().getResource(...);
if (cssURL != null) {
  scene.getStyleSheets().add(cssURL.toExternalForm());
}

PS : pour ce dernier cas, il faut faire attention que si on a activé la compilation des CSS en binaire dans les options du projet, c'est un fichier BSS et non pas un fichier CSS qu'on recherche.

[Gwenc]

Merci Bouye,

Le rattachement à la scene est faite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  public void start(Stage stage) throws Exception {
 
        Scene scene = new Scene(new AnchorPane(), 1200, 700);
        URL cssURL = getClass().getResource("style.css");
        if (cssURL != null) {
            scene.getStylesheets().add(cssURL.toExternalForm());
        }
        stage.setResizable(true);
        MenuManager menuManager = new MenuManager(scene);
        menuManager.showLoginScreen();
 
        stage.setScene(scene);
        stage.show();
 
    }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 public void showLoginScreen() {
        try {
            FXMLLoader loader = new FXMLLoader(
                    getClass().getResource("/myLogin/Login.fxml"));
            URL cssURL = getClass().getResource("style.css");
            if (cssURL != null) {
                scene.getStylesheets().add(cssURL.toExternalForm());
            }
            scene.setRoot((Parent) loader.load());
            MyLoginController controller = loader.<MyLoginController>getController();
            controller.initManager(this);
        } catch (IOException ex) {
            Logger.getLogger(MenuManager.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

Le rattachement au nœud est fait directement dans le fxml :

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
  </children>
  <stylesheets>
    <URL value="@../ressources/style.css" />
  </stylesheets>
</AnchorPane>

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<GridPane id="cadre" layoutX="100.0" layoutY="225.0" maxHeight="100.0" maxWidth="400.0" minHeight="100.0" minWidth="100.0" prefHeight="200.0" prefWidth="400.0" styleClass="table">
            <stylesheets>
                <URL value="@../ressources/style.css" />
            </stylesheets>

Bon le résultat n'est pas concluant mais je vais approfondir.
Merci à tous les deux

[Gwenc]

Pour affecter les attributs css à chaque zone, peut on utiliser la fonction initialize de la classe controller?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 public void initialize() {
 
         userName.getStyleClass().add("registration");
 
        // TODO
    }

[bouye]

Tu peux le faire sans problème depuis le code tel ce que tu as écrit ci-dessus ou depuis le FXML dans l'attribut styleClass en séparant les différentes valeurs par des virgules.

[bouye]

Et pour revenir au problème initial, aucun soucis pour moi avec le code suivant (adapté à partir du projet "JavaFX FXML application" dans NetBeans) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.button:hover {    
    -fx-base: red;
}

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="UTF-8"?>
 
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
 
<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml" fx:controller="test.SampleController">
    <children>
        <Button layoutX="126" layoutY="90" text="Click Me!" onAction="#handleButtonAction" fx:id="button" />
        <Label layoutX="126" layoutY="120" minHeight="16" minWidth="69" fx:id="label" />
    </children>
</AnchorPane>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package test;
 
import java.net.URL;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
 
        Scene scene = new Scene(root);
        URL cssURL = getClass().getResource("Main.css");
        scene.getStylesheets().add(cssURL.toExternalForm());
 
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package test;
 
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
 
public class SampleController implements Initializable {
 
    @FXML
    private Label label;
 
    @FXML
    private void handleButtonAction(ActionEvent event) {
        System.out.println("You clicked me!");
        label.setText("Hello World!");
    }
 
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
}

Pour info supplémentaires, il est possible d’accéder à la définition de Caspian (JavaFX 2.x, repertoire jre/lib) en ouvrant le fichier jfxrt.jar avec un manipulateur d'archive zip et en accédant à com/sun/javafx/scene/control/skin/caspian/caspian.css.
Pour Modena (JavaFX 8, répertoire jre/lib/ext) c'est le fichier com/sun/javafx/scene/control/skin/modena/modena.css.
Et bien sur en lisant la doc CSS indiquée par Largo13.

[Gwenc]

Je vais me faire un exemple simple avant de reprendre mon exemple.

Bizarrement j'ai trouvé sur internet un exemple qui ne nécessite pas l'ajout de code pour acceder au css.

Tout ce fait au niveau du fxml .

Je joins l'exemple, mais je vais quand même repartir du tiens.

Encore merci. Je ferme le post.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package fxmlexample;
 
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
/**
 *
 * @author pbonnet
 */
public class FXMLExample extends Application {
 
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml"));
 
        Scene scene = new Scene(root, 300, 275);
 
        stage.setTitle("FXML Welcome");
        stage.setScene(scene);
        stage.show();
    }
 
    /**
     * The main() method is ignored in correctly deployed JavaFX application.
     * main() serves only as fallback in case the application can not be
     * launched through deployment artifacts, e.g., in IDEs with limited FX
     * support. NetBeans ignores main().
     *
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package fxmlexample;
 
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.text.Text;
 
public class FXMLExampleController {
    @FXML private Text actiontarget;
 
    @FXML protected void handleSubmitButtonAction(ActionEvent event) {
        actiontarget.setText("Sign in button pressed");
    }
 
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?xml version="1.0" encoding="UTF-8"?>
 
<?language javascript?>
<?import java.lang.*?>
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
 
<GridPane alignment="CENTER" hgap="10.0" styleClass="root" vgap="10.0" xmlns:fx="http://javafx.com/fxml">
    <fx:script><![CDATA[
        function handleSubmitButtonAction() {
            actiontarget.setText("Calling the JavaScript");
        }
    ]]></fx:script>
 
    <padding>
        <Insets bottom="10.0" left="25.0" right="25.0" top="25.0" />
    </padding>
    <stylesheets>
        <URL value="@../ressources/Login.css" />
    </stylesheets>
    <Text id="welcome-text" scaleX="1.137277875414958" text="Welcome" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="0" />
    <Label text="User Name:" GridPane.columnIndex="0" GridPane.rowIndex="1" />
    <TextField GridPane.columnIndex="1" GridPane.rowIndex="1" />
    <Label text="Password:" GridPane.columnIndex="0" GridPane.rowIndex="2" />
    <PasswordField fx:id="passwordField" GridPane.columnIndex="1" GridPane.rowIndex="2" />
    <HBox alignment="BOTTOM_RIGHT" spacing="10.0" GridPane.columnIndex="1" GridPane.rowIndex="4">
        <Button onAction="handleSubmitButtonAction(event)" text="Sign In" />
    </HBox>
 
 
    <Text fx:id="actiontarget" GridPane.columnIndex="1" GridPane.rowIndex="6" >
 
    </Text>
 
</GridPane>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* 
    Document   : Login
    Created on : 23 juil. 2013, 16:53:18
    Author     : pbonnet
    Description:
        Purpose of the stylesheet follows.
*/
 
root { 
    display: block;
}
.root {
-fx-background-image: url("background.jpg");
}
.label {
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}
 
#welcome-text {
   -fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
#actiontarget {
  -fx-fill: FIREBRICK;
  -fx-font-weight: bold;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}
 
.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

[bouye]

1. [...]
2. Sur un noeud via Properties->Stylesheets->+, la feuille de style est attachée de manière permanente à ce nœud et sera chargée en même temps que le FXML. C'est surtout utile pour fournir un style de base quand on crée de nouveaux contrôles.