css - font - javafx stylesheet tutorial

JavaFx establece la imagen de fondo externa mediante programación

Question

Tengo problemas para establecer dinámicamente una imagen de fondo de un panel de anclaje. Para fines de desarrollo, coloco los recursos externos en la carpeta dist del proyecto, por lo que los archivos están disponibles.

Código para el AnchorPane:

AnchorPane root = new AnchorPane();
// this works fine, styles inside the css are used in components on the root pane
root.getStylesheets().add("file:/D:/ProjectFolder/global.css");

Lo que no puedo entender es cómo establecer el camino para una imagen de fondo. Al leer las referencias de CSS y JavaFX, la ruta debe proporcionarse en relación con el archivo css. También traté de crear URLs y URIs y rutas absolutas.

// path of compiled jar
"D:/ProjectFolder/project.jar"
// path of css file
"D:/ProjectFolder/global.css"
// path of background file
"D:/ProjectFolder/Resources/Wallpapers/worldmap.jpg"

Todos estos no funcionan:

root.setStyle("-fx-background-image: url(''Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
root.setStyle("-fx-background-image: url(''/Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
root.setStyle("-fx-background-image: url(''./Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
root.setStyle("-fx-background-image: url(''@Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
root.setStyle("-fx-background-image: url(''@/Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
root.setStyle("-fx-background-image: url(''@./Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
root.setStyle("-fx-background-image: url(''D:/ProjectFolder/Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
root.setStyle("-fx-background-image: url(''file:/D:/ProjectFolder/Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");

(en una nota al margen los archivos existen, revisé los nombres de las carpetas y los archivos para el caso, esto también es correcto)

Para fines de prueba:

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class BackGroundTest extends Application {

    private int backgroundtest = 0;
    private AnchorPane root;

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button();
        btn.setText("Test Background");
        btn.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                switch (backgroundtest) {
                    case 0: {
                        root.setStyle("-fx-background-image: url(''Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                        break;
                    }
                    case 1: {
                        root.setStyle("-fx-background-image: url(''/Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                        break;
                    }
                    case 2: {
                        root.setStyle("-fx-background-image: url(''./Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                        break;
                    }
                    case 3: {
                        root.setStyle("-fx-background-image: url(''@Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                        break;
                    }
                    case 4: {
                        root.setStyle("-fx-background-image: url(''@/Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                        break;
                    }
                    case 5: {
                        root.setStyle("-fx-background-image: url(''@./Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                        break;
                    }
                    case 6: {
                        root.setStyle("-fx-background-image: url(''D:/ProjectFolder/Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                        break;
                    }
                    case 7: {
                        root.setStyle("-fx-background-image: url(''file:/D:/ProjectFolder/Resources/Wallpapers/worldmap.jpg''); -fx-background-repeat: stretch; -fx-background-size: stretch; -fx-background-position: center center;");
                        break;
                    }
                }
                backgroundtest++;
                if (backgroundtest == 8) {backgroundtest = 0;}
            }
        });
        root = new AnchorPane();
        root.getStylesheets().add("file:/D:/ProjectFolder/global.css");
        StackPane stack = new StackPane();
        root.getChildren().add(stack);
        AnchorPane.setBottomAnchor(stack, 0d);
        AnchorPane.setLeftAnchor(stack, 0d);
        AnchorPane.setRightAnchor(stack, 0d);
        AnchorPane.setTopAnchor(stack, 0d);
        stack.getChildren().add(btn);

        Scene scene = new Scene(root, 800, 600);

        primaryStage.setTitle("Test Background");
        primaryStage.setScene(scene);
        primaryStage.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);
    }
}

archivo css:

.button {
    -fx-background-color:
        rgb(0, 50, 0, 0.08),
        rgb(0, 0, 0, 0.8),
        #090a0c,
        linear-gradient(#4a5661 0%, #1f2429 20%, #1f242a 80%),
        linear-gradient(#242a2e, #23282e),
        radial-gradient(center 50% 0%, radius 100%, rgba(135,142,148,0.9), rgba(255,255,255,0));
    -fx-background-radius: 7, 6, 5, 4, 3, 5;
    -fx-background-insets: -3 -3 -4 -3, -3, 0, 1, 2, 0;
    -fx-font-family: "Arial";
    -fx-font-size: 14;
    -fx-text-fill: white;
    -fx-padding: 5 10 5 10;
    -fx-effect: dropshadow( one-pass-box , rgb(0, 255, 0, 0.6), 10, 0.5 , 0 , 1 );
}

Todo funciona bien si incluyo el css y la imagen en el archivo jar, pero quiero usar archivos externos. Establecer la ruta relativa al archivo css como dicen todas las referencias no parece funcionar, entonces, ¿cuál sería la ruta correcta?

Answer 1

Esto parece funcionar ahora si uso esto para ponerlo en la URL.

String filename = "worldmap.jpg"; 
HostServices services = this.getHostServices(); 
String url = services.resolveURI(services.getCodeBase(), "Resources/Wallpapers/" + filename);

La cadena resultante es la misma que en mi caso 7 tho, no sé por qué no funcionó antes y ahora lo hace.

Establecí el fondo en el constructor de SceneController la primera vez, ahora lo configuro en un método extra que se llama después de que la escena se agrega al escenario, tal vez eso tiene algo que ver, pero no puedo entender dónde ocurrió el error. realmente miente.

En cuanto a una respuesta para cualquier persona que tenga problemas similares, es mejor usar HostServices para resolver rutas como en el ejemplo anterior.

Answer 2

No sé si lo hiciste funcionar, pero aquí está la respuesta correcta:

root.setStyle("-fx-background-image: url(''file://D:/ProjectFolder/Resources/Wallpapers/worldmap.jpg'');");

La implementación del archivo debe ser ''file: // PATH''