JavaFX ProgressBar: çubuk rengini nasıl değiştirebilirim?

Question

Ben

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

ile ProgressBar barda rengini değiştirmeye çalışıyorum ama bir sorun karşılaştı: benim için uygun çalışmak görünmüyor!

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(); 
} 
} 

Hep onunla 2 kırmızı ProgressBars olsun:

burada

kodudur (Ya Sadece bir şey anlamıyorum)! Çizgideki (1) kodun, örneğin değil, ProgressBar sınıfının stilini değiştirdiği görülmektedir.

başka garip an hattını silme (1) 2 yeşil ilerleme çubuklara neden kalmamasıdır. Yani bu çizgiyi (2) tamamen işe yaramaz olduğunu anlayabilirim !! NİYE YA?! Bu kesinlikle tuhaf oluyor.

ayrı ProgressBars için ayrı renkler ayarlamak için herhangi bir yolu var mı?

Answer 1

Cevap birden fazla ilerleme çubukları

iki farklı renkli ilerleme çubukları, aslında göstermesi gerekir sorunuzu kod ile basit olmayan animasyonlu bir örnek eklemek için öyle JavaFX css işlem sisteminde bir hata değil. Hatayı çalışma zamanı projesine karşı şu günlüğe kaydedin: http://javafx-jira.kenai.com. Geçici bir çözüm olarak

yerine ilerleme çubukları üzerindeki setStyle çağıran, bir stil sayfası içindeki renk ilerleme çubukları için kullanılan vurgu renkleri tanımlamak ve ilerleme çubukları bir stil sınıfını ekleyin. Daha sonra, aynı uygulama içinde farklı renklerdeki birden çok ilerleme çubuğu oluşturabilirsiniz. Uluk işaret ettiği gibi

, bir şeyler stilini nasıl belirlemek için JavaFX 2 css reference guide ve JavaFX 2 css tutorial birlikte JavaFX 2.2 caspian.css kullanabilirsiniz. İşte

bu referanslarından bilgilere dayalı bir ilerleme çubuğu özelleştirir bazı örnek kodudur.

Numune css:

/** 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; } 

Basit örnek programı:

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); 
     } 
    } 
} 

Basit Örnek program çıkışı: Tek bir animasyonlu ilerleme çubuğu ile

Daha karmaşık örnek program hangi dinamik olarak değişen renkler değişir ilerleme miktarına gr yaptı:

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(); 
    }  
} 

Daha karmaşık örnek program çıktısı: Anladım olarak

Answer 2

Sen JavaFX CSS seçicileri ile stilini geçersiz (veya özelleştirmek) olmalıdır. Daha fazla bilgi için caspian.css dosyasına bakın. Kendi stil tanımlamak: güncellenmiş

.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 */ 
}