javafx 런타임시 CSS 변경

JavaFX 응용 프로그램이 실행되는 동안 CSS를 변경할 수 있습니까?javafx 런타임시 CSS 변경

내가 찾고있는 효과는 버튼 클릭만으로 스킨이나 테마를 변경하는 것입니다.

UI가 다를 경우 FXML 파일에 있습니다.

나는 아무 효과가 없습니다

Scene.getStylesheets() 
    .add(getClass().getResource(skinFileName).toExternalForm());

을 시도했습니다.

감사합니다.

출처

2013-07-21 Rob

감사합니다. 이 전체 데모 코드를 사용해보십시오 :

public class CssThemeDemo extends Application { 

    private String theme1Url = getClass().getResource("theme1.css").toExternalForm(); 
    private String theme2Url = getClass().getResource("theme2.css").toExternalForm(); 

    @Override 
    public void start(Stage primaryStage) { 
     StackPane root = new StackPane(); 
     final Scene scene = new Scene(root, 300, 250); 
     System.out.println("scene stylesheets: " + scene.getStylesheets()); 
     scene.getStylesheets().add(theme1Url); 
     System.out.println("scene stylesheets: " + scene.getStylesheets()); 

     final Button btn = new Button("Load Theme 1"); 
     btn.getStyleClass().add("buttonStyle"); 
     btn.setOnAction(new EventHandler<ActionEvent>() { 
      @Override 
      public void handle(ActionEvent event) { 
       scene.getStylesheets().remove(theme2Url); 
       System.out.println("scene stylesheets on button 1 click: " + scene.getStylesheets()); 
       if(!scene.getStylesheets().contains(theme1Url)) scene.getStylesheets().add(theme1Url); 
       System.out.println("scene stylesheets on button 1 click: " + scene.getStylesheets()); 
      } 
     }); 

     final Button btn2 = new Button("Load Theme 2"); 
     btn2.getStyleClass().add("buttonStyle"); 
     btn2.setOnAction(new EventHandler<ActionEvent>() { 
      @Override 
      public void handle(ActionEvent event) { 
       scene.getStylesheets().remove(theme1Url); 
       System.out.println("scene stylesheets on button 2 click: " + scene.getStylesheets()); 
       if(!scene.getStylesheets().contains(theme2Url)) scene.getStylesheets().add(theme2Url); 
       System.out.println("scene stylesheets on button 2 click: " + scene.getStylesheets()); 
      } 
     }); 

     ComboBox<String> comboBox = new ComboBox<String>(FXCollections.observableArrayList("Just", "another", "control")); 
     root.getChildren().add(VBoxBuilder.create().spacing(10).children(btn, btn2, comboBox).build()); 

     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
}

THEME1 CSS :

.root{ 
    -fx-font-size: 14pt; 
    -fx-font-family: "Tahoma"; 
    -fx-base: #DFB951; 
    -fx-background: #A78732; 
    -fx-focus-color: #B6A678; 
} 

.buttonStyle { 
    -fx-text-fill: #006464; 
    -fx-background-color: #DFB951; 
    -fx-border-radius: 20; 
    -fx-background-radius: 20; 
    -fx-padding: 5; 
}

THEME2 CSS :

.root{ 
    -fx-font-size: 16pt; 
    -fx-font-family: "Courier New"; 
    -fx-base: rgb(132, 145, 47); 
    -fx-background: rgb(225, 228, 203); 
} 

.buttonStyle { 
    -fx-text-fill: red; 
    -fx-background-color: lightcyan; 
    -fx-border-color: green; 
    -fx-border-radius: 5; 
    -fx-padding: 3 6 6 6; 
}

주 모두 THEME1에서 같은 이름의 CSS 선택기 및 THEME2 CSS 파일.

출처

2013-07-21 22:31:47

또한 (간단하고 진정으로 설명)이 코드 조각을 시도 할 수 있습니다 :

컨테이너를 그것을 : 나는 BorderPane를 선택했다.

응용 프로그램의 주된 장면을 추가하십시오.

응용 프로그램의 모양에 따라 일련의 항목이있는 메뉴 모음입니다.

메뉴 모음의 항목.

BorderPane rootPane = new BorderPane(); 
Parent content = FXMLLoader.load(getClass().getResource("sample.fxml")); 
rootPane.setCenter(content); 
Scene scene = new Scene(root, 650, 550, Color.WHITE); 
// Menu bar 
MenuBar menuBar = new MenuBar(); 

// file menu 
Menu fileMenu = new Menu("_File"); 
MenuItem exitItem = new MenuItem("Exit"); 
exitItem.setAccelerator(new KeyCodeCombination(KeyCode.X, KeyCombination.SHORTCUT_DOWN)); 
exitItem.setOnAction(ae -> Platform.exit()); 

fileMenu.getItems().add(exitItem); 
menuBar.getMenus().add(fileMenu); 

// Look and feel menu 
Menu themeMenu = new Menu("_Theme"); 
themeMenu.setMnemonicParsing(true); 
menuBar.getMenus().add(themeMenu); 
rootPane.setTop(menuBar); 


MenuItem theme1 = new MenuItem("Theme 1"); 
theme1.setOnAction(ae -> { 
      scene.getStylesheets().clear(); 
      setUserAgentStylesheet(null); 
      scene.getStylesheets() 
        .add(getClass() 
          .getResource("theme1.css") 
          .toExternalForm()); 
}); 

MenuItem theme2 = new MenuItem("Theme 2"); 
     theme2.setOnAction(ae -> { 
      scene.getStylesheets().clear(); 
      setUserAgentStylesheet(null); 
      scene.getStylesheets() 
        .add(getClass() 
          .getResource("theme2.css") 
          .toExternalForm()); 
}); 


themeMenu.getItems() 
       .addAll(theme1, 
         theme2); 

primaryStage.setScene(scene); 
primaryStage.show();

세웠 죠 당신이 해당 이름 theme1.css 및 theme2.css이 코드를 호출하는 클래스 의 폴더에 두 개의 CSS 파일이 있는지 확인하십시오.

이제 응용 프로그램이 실행되는 동안 두 테마 사이를 전환 할 수 있습니다.

출처

2016-01-26 05:06:45

javafx 런타임시 CSS 변경

답변

관련 문제