2012-11-13 7 views
10

나는JavaFX ProgressBar : 막대 색상을 변경하는 방법은 무엇입니까?

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

와 ProgressBar의 막대의 색상을 변경하기 위해 노력하고있어하지만 난 문제가 발생했습니다 : 나를 위해 잘 작동하지 않는 것!

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

난 항상 함께 2 빨간색 ProgressBar를 얻을 :

여기

코드입니다 (아니면 내가 뭔가를 이해하지 않습니다)! 라인 (1)의 코드는 인스턴스가 아닌 ProgressBar 클래스의 스타일을 변경하는 것으로 보입니다.

또 다른 이상한 순간은 선 (1)을 삭제해도 녹색 진행 막대가 2 개 발생하지 않는다는 것입니다. 그래서 나는 그 선 (2)이 완전히 쓸모 없다는 것을 알 수 있습니다 !! 왜?! 그것은 확실히 이상하게되고 있습니다.

별도의 진행 표시 줄에 별도의 색상을 설정할 수있는 방법이 있습니까?

답변

18

대답 여러 진행률 표시 줄

두 개의 서로 다른 색깔의 진행 바, 사실을 표시해야합니다 귀하의 질문의 코드와 간단한 애니메이션이 아닌 예를 추가 할 것을 JavaFX CSS 처리 시스템의 버그가 아닙니다. 런타임 프로젝트에 대한 버그를 여기에 기록하십시오 : http://javafx-jira.kenai.com.

해결 방법으로 진행률 막대에서 setStyle을 호출하는 대신 스타일 시트 내에서 진행률 표시 줄에 사용되는 강조 색상을 정의하고 진행률 막대에 스타일 클래스를 추가하십시오. 그런 다음 동일한 응용 프로그램 내에서 여러 색상으로 진행 막대를 여러 개 만들 수 있습니다. Uluk가 지적 하듯이

, 당신은 가지 스타일을하는 방법을 결정하기 위해 JavaFX 2 css reference guideJavaFX 2 css tutorial와 함께 JavaFX 2.2 caspian.css를 사용할 수 있습니다.

다음은 이러한 참조 정보를 기반으로 진행률 표시 줄을 사용자 지정하는 몇 가지 샘플 코드입니다.

샘플 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; } 

간단한 샘플 프로그램 :

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

간단한 샘플 프로그램 출력 : 단일 애니메이션 진행 바

coloredbars

더 복잡한 샘플 프로그램 된 동적으로 색상을 바꾼다. 진행 상황에 대한 g을 만든 :

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

더 복잡한 예제 프로그램 출력 : 나는 그것을 가지고로

sample program output

+0

, 나는 카스피해에서 약간의 정적 변경해야합니다.CSS를 누른 다음 내 프로그램에서 사용하십시오. 하지만 동적으로 새 색상을 생성 할 수는 없습니다. Btw, 감사합니다. ** - fx-accent : xxx **는 내가 필요한 것입니다. – Chechulin

+1

아니요, caspian.css를 정적으로 변경하지 마십시오. caspian.css는 단지 참조 용입니다. 답안에 정의 된대로 사용자 스타일 시트를 사용하십시오. – jewelsea

+0

대답이 업데이트되어 단일 응용 프로그램에 여러 진행률 표시 줄을 표시하는 방법을 보여주는 추가 샘플을 추가 할 수 있습니다. 모두 모두 다른 색으로 표시됩니다. – jewelsea

3

JavaFX CSS 선택기로 스타일을 재정의 (또는 사용자 정의)해야합니다. 자세한 내용은 caspian.css를 참조하십시오. 자신의 스타일에 정의 업데이트

.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 */ 
} 
관련 문제