ProgressBar JavaFX: come cambiare il colore della barra?

Question

sto cercando di cambiare il colore della barra di in ProgressBar con

pBar.setStyle("-fx-accent: green"); 

ma ho incontrato un problema: che non sembra funzionare bene per me! (O io proprio non capisco qualcosa)

ecco il codice:

public class JavaFXApplication36 extends Application { 

@Override 
public void start(Stage primaryStage) { 
AnchorPane root = new AnchorPane(); 
ProgressBar pbRed = new ProgressBar(0.4); 
ProgressBar pbGreen = new ProgressBar(0.6); 
pbRed.setLayoutY(10); 
pbGreen.setLayoutY(30); 

pbRed.setStyle("-fx-accent: red;");  // line (1) 
pbGreen.setStyle("-fx-accent: green;"); // line (2) 

root.getChildren().addAll(pbRed, pbGreen); 
Scene scene = new Scene(root, 150, 50); 
primaryStage.setTitle("Hello World!"); 
primaryStage.setScene(scene); 
primaryStage.show(); 
} 
} 

Ho sempre trovato 2 ProgressBars rossi con essa! Sembra che il codice in linea (1) cambi lo stile della classe ProgressBar, non l'istanza.

Un altro strano momento è che l'eliminazione della linea (1) non risulta in 2 barre di avanzamento verdi. Quindi posso capire che la linea (2) è completamente inutile !! PERCHÉ?! Questo è decisamente strano.

C'è un modo per impostare colori separati per barre di avanzamento separate?

Answer 1

risposta aggiornato per aggiungere un semplice esempio non animato con più barre di avanzamento

Il codice nella tua domanda dovrebbe visualizzare due differenti barre di avanzamento colorate, il fatto che essa non è un bug nel sistema di elaborazione css JavaFX. Registrare il bug nel progetto di runtime qui: http://javafx-jira.kenai.com.

Per ovviare al problema, anziché chiamare setStyle sulle barre di avanzamento, definire i colori di accento utilizzati per colorare le barre di avanzamento all'interno di un foglio di stile e aggiungere una classe di stile alle barre di avanzamento. Quindi, puoi creare più barre di avanzamento all'interno della stessa applicazione, tutte con colori diversi.

Come sottolinea Uluk, è possibile utilizzare JavaFX 2.2 caspian.css insieme allo JavaFX 2 css reference guide e allo JavaFX 2 css tutorial per determinare come modellare le cose.

Ecco un esempio di codice che personalizza una barra di avanzamento in base alle informazioni contenute in tali riferimenti. css

Esempio:

/** progress.css 
    place in same directory as 
    ColoredProgressBarStyleSheet.java or SimpleColoredProgressBar.java 
    ensure build system copies the css file to the build output path */ 

.root { -fx-background-color: cornsilk; -fx-padding: 15; } 

.progress-bar { -fx-box-border: goldenrod; } 

.green-bar { -fx-accent: green; } 
.yellow-bar { -fx-accent: yellow; } 
.orange-bar { -fx-accent: orange; } 
.red-bar { -fx-accent: red; } 

programma di esempio semplice:

import javafx.application.Application; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.ProgressBar; 
import javafx.scene.layout.VBox; 
import javafx.stage.Stage; 

// shows multiple progress bars drawn in different colors. 
public class SimpleColoredProgressBar extends Application { 
    public static void main(String[] args) { launch(args); } 

    @Override public void start(Stage stage) { 
     final VBox layout = new VBox(10); 
     layout.setAlignment(Pos.CENTER); 
     layout.getChildren().setAll(
      new ColoredProgressBar("red-bar", 0.2), 
      new ColoredProgressBar("orange-bar", 0.4), 
      new ColoredProgressBar("yellow-bar", 0.6), 
      new ColoredProgressBar("green-bar", 0.8) 
     ); 
     layout.getStylesheets().add(getClass().getResource("progress.css").toExternalForm()); 
     stage.setScene(new Scene(layout)); 
     stage.show(); 
    } 

    class ColoredProgressBar extends ProgressBar { 
     ColoredProgressBar(String styleClass, double progress) { 
      super(progress); 
      getStyleClass().add(styleClass); 
     } 
    } 
} 

semplice uscita programma di esempio:

programma di esempio Più complicato con una singola barra di avanzamento che cambia colore in modo dinamico in dipendenza g la quantità di progressi compiuti:

import javafx.animation.*; 
import javafx.application.Application; 
import javafx.beans.value.*; 
import javafx.event.*; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.*; 
import javafx.scene.layout.VBox; 
import javafx.stage.Stage; 
import javafx.util.Duration; 

// shows a progress bar whose bar changes color depending on the amount of progress. 
public class ColoredProgressBarStyleSheet extends Application { 
    public static void main(String[] args) { launch(args); } 

    private static final String RED_BAR = "red-bar"; 
    private static final String YELLOW_BAR = "yellow-bar"; 
    private static final String ORANGE_BAR = "orange-bar"; 
    private static final String GREEN_BAR = "green-bar"; 
    private static final String[] barColorStyleClasses = { RED_BAR, ORANGE_BAR, YELLOW_BAR, GREEN_BAR }; 

    @Override public void start(Stage stage) { 
    final ProgressBar bar = new ProgressBar(); 

    final Timeline timeline = new Timeline(
     new KeyFrame(Duration.millis(0), new KeyValue(bar.progressProperty(), 0)), 
     new KeyFrame(Duration.millis(3000), new KeyValue(bar.progressProperty(), 1)) 
    ); 

    Button reset = new Button("Reset"); 
    reset.setOnAction(new EventHandler<ActionEvent>() { 
     @Override public void handle(ActionEvent event) { 
     timeline.playFromStart(); 
     } 
    }); 

    bar.progressProperty().addListener(new ChangeListener<Number>() { 
     @Override public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) { 
     double progress = newValue == null ? 0 : newValue.doubleValue(); 
     if (progress < 0.2) { 
      setBarStyleClass(bar, RED_BAR); 
     } else if (progress < 0.4) { 
      setBarStyleClass(bar, ORANGE_BAR); 
     } else if (progress < 0.6) { 
      setBarStyleClass(bar, YELLOW_BAR); 
     } else { 
      setBarStyleClass(bar, GREEN_BAR); 
     } 
     } 

     private void setBarStyleClass(ProgressBar bar, String barStyleClass) { 
     bar.getStyleClass().removeAll(barColorStyleClasses); 
     bar.getStyleClass().add(barStyleClass); 
     } 
    });  

    final VBox layout = new VBox(10); 
    layout.setAlignment(Pos.CENTER); 
    layout.getChildren().setAll(bar, reset); 
    layout.getStylesheets().add(getClass().getResource("progress.css").toExternalForm()); 
    stage.setScene(new Scene(layout)); 
    stage.show(); 

    timeline.play(); 
    }  
} 

Più complicato l'output del programma di esempio:

Answer 2

È necessario sovrascrivere (o personalizzare) lo stile con i selettori CSS JavaFX. Vedi caspian.css per maggiori informazioni. Nel vostro foglio di stile definire:

.progress-bar .bar { 
    -fx-background-color: 
     -fx-box-border, 
     linear-gradient(to bottom, derive(-fx-accent,95%), derive(-fx-accent,10%)), 
     red; /* this line is the background color of the bar */ 
    -fx-background-insets: 0, 1, 2; 
    -fx-padding: 0.416667em; /* 5 */ 
}