JavaFX主题切换按钮

时间：2018-11-28 16:35:20

标签： button javafx model-view-controller switch-statement themes

我目前正在使用JavaFX MVC创建游戏PacMan。我使用SceneBuilder制作了FXML文件。

我还添加了2个主题：经典主题和X-Mas主题。我现在要做的是使用在FXML文件中创建的按钮来切换主题（参见图片：按钮'classic'和'xmas'。

请帮帮我。

它是这样的： ThemePage

这是我当前的代码： FXMLSideMenucontroller.fxml 

package sidemenu;

import com.jfoenix.controls.JFXButton;
import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;

public class FXMLSideMenuController implements Initializable {

    @FXML
    private AnchorPane ap_main;

    @FXML
    private AnchorPane ap_gamefield;

    @FXML
    private Pane pnl_highscore;

    @FXML
    private Pane pnl_main;

    @FXML
    private Pane pnl_moeilijkheid;

    @FXML
    private VBox vbox_moeilijkheid;

    @FXML
    private JFXButton btn_easy;

    @FXML
    private JFXButton btn_medium;

    @FXML
    private JFXButton btn_hard;

    @FXML
    private Pane pnl_credits;

    @FXML
    private Pane pnl_spelers;

    @FXML
    private JFXButton btn_mraerts;

    @FXML
    private ImageView iview_mraerts;

    @FXML
    private JFXButton btn_mrlemmens;

    @FXML
    private ImageView iview_mrlemmens;

    @FXML
    private Pane pnl_thema;

    @FXML
    private VBox vbox_thema;

    @FXML
    private JFXButton btn_classic;

    @FXML
    private JFXButton btn_xmas;

    @FXML
    private AnchorPane ap_sidemenu;

    @FXML
    private AnchorPane ap_sidepane;

    @FXML
    private JFXButton btn_spelers;

    @FXML
    private JFXButton btn_moeilijkheid;

    @FXML
    private JFXButton btn_thema;

    @FXML
    private JFXButton btn_highscore;

    @FXML
    private JFXButton btn_credits;

    @FXML
    private FontAwesomeIconView iview_spelers;

    @FXML
    private FontAwesomeIconView iview_niveau;

    @FXML
    private FontAwesomeIconView iview_thema;

    @FXML
    private FontAwesomeIconView iview_highscore;

    @FXML
    private FontAwesomeIconView iview_credits;

    @FXML
    private void handleButtonAction(ActionEvent event) {
        if(event.getSource() == btn_spelers) {
            pnl_spelers.toFront();
        } else
        if(event.getSource() == btn_moeilijkheid) {
            pnl_moeilijkheid.toFront();
        } else
        if(event.getSource() == btn_thema) {
            pnl_thema.toFront();
        } else 
        if(event.getSource() == btn_highscore) {
            pnl_highscore.toFront();
        } else 
        if(event.getSource() == btn_credits) {
            pnl_credits.toFront();
        }
    }
    /**
    @FXML
    private void handleThemeSwitcher(ActionEvent event) {
        if(event.getSource() == btn_classic) {
            scene.getStylesheets().remove(getClass().getResource("Resources/style.css").toExternalForm());
            scene.getStylesheets().remove(getClass().getResource("Resources/xmas.css").toExternalForm());
            scene.getStylesheets().add(getClass().getResource("Resources/style.css").toExternalForm());// Load voor custom stylesheet       
        }
        if(event.getSource() == btn_xmas) {
            scene.getStylesheets().remove(getClass().getResource("Resources/style.css").toExternalForm());
            scene.getStylesheets().remove(getClass().getResource("Resources/xmas.css").toExternalForm());
            scene.getStylesheets().add(getClass().getResource("Resources/xmas.css").toExternalForm());// Load voor custom stylesheet  
        } 
    }   */
    
   /** @FXML
    private void closeMenuItem(ActionEvent event) {
        if(event.getSource() == icon_close) {
            pnl_main.toFront();
        }
    }*/
      
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        pnl_main.toFront();
    }
}

SideMenu.java 

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package sidemenu;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.stage.Stage;

/**
 *
 * @author User
 */
public class SideMenu extends Application {
        
    @Override
    public void start(Stage stage) throws Exception {  
        Font.loadFont(
        SideMenu.class.getResource("Resources/CrackMan.TTF").toExternalForm(), 
        10); // Load voor custom font
        Parent root = FXMLLoader.load(getClass().getResource("FXMLSideMenu.fxml"));
        
        Scene scene = new Scene(root);
        //scene.getStylesheets().add(getClass().getResource("Resources/style.css").toExternalForm());// Load voor custom stylesheet       
        
        stage.setTitle("PacMan");
        stage.setScene(scene);
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

Style.css 

/* Classic */
#ap_sidemenu {
    -fx-background-color: #1919A6;
}

#ap_sidepane {
    -fx-background-color: #a8a8a8;
}

#pnl_main {
    -fx-background-color: #FFFF00;
}

#pnl_spelers {
    -fx-background-color: #FFFF00;
}

#pnl_moeilijkheid {
    -fx-background-color: #FFFF00;
}

#pnl_thema {
    -fx-background-color: #FFFF00;
}

#pnl_highscore {
    -fx-background-color: #FFFF00;
}

#pnl_credits {
    -fx-background-color: #FFFF00;
}

.button {
    -fx-background-radius: 50; 
    -fx-font-family: CrackMan;
    -fx-font-size: 26;
}

.button:hover {
    -fx-background-color: #1919A6;
    -fx-background-radius: 50; 
    -fx-font-family: CrackMan;
    -fx-font-size: 26;
    -fx-border-color: black;
    -fx-border-radius: 50;
    -fx-border-width: 1;
    -fx-text-fill: white;
}

.button:pressed {
    -fx-background-color: #1919A6;
    -fx-background-radius: 50; 
    -fx-font-family: CrackMan;
    -fx-font-size: 26;
    -fx-border-color: black;
    -fx-border-radius: 50;
    -fx-border-width: 3;
    -fx-text-fill: white;
    -fx-rotate: 2;
}

.button:focused {
    -fx-background-color: #1919A6;
    -fx-background-radius: 50; 
    -fx-font-family: CrackMan;
    -fx-font-size: 26;
    -fx-text-fill: darkgrey;
}

xmas.css 

/* X-Mas*/
#ap_sidemenu {
    -fx-background-color: #165B33;
}

#ap_sidepane {
    -fx-background-color: #BB2528;
}

#pnl_main {
    -fx-background-color: #F8B229;
}

#pnl_spelers {
    -fx-background-color: #F8B229;
}

#pnl_moeilijkheid {
    -fx-background-color: #F8B229;
}

#pnl_thema {
    -fx-background-color: #F8B229;
}

#pnl_highscore {
    -fx-background-color: #F8B229;
}

#pnl_credits {
    -fx-background-color: #F8B229;
}

.button {
    -fx-background-radius: 50; 
    -fx-font-family: CrackMan;
    -fx-font-size: 26;
}

.button:hover {
    -fx-background-color: #EA4630;
    -fx-background-radius: 50; 
    -fx-font-family: CrackMan;
    -fx-font-size: 26;
    -fx-border-color: #146B3A;
    -fx-border-radius: 50;
    -fx-border-width: 1;
    -fx-text-fill: white;
}

.button:pressed {
    -fx-background-color: #BB2528;
    -fx-background-radius: 50; 
    -fx-font-family: CrackMan;
    -fx-font-size: 26;
    -fx-border-color: #165B33;
    -fx-border-radius: 50;
    -fx-border-width: 3;
    -fx-text-fill: white;
    -fx-rotate: 2;
}

.button:focused {
    -fx-background-color: #BB2528;
    -fx-background-radius: 50; 
    -fx-font-family: CrackMan;
    -fx-font-size: 26;
    -fx-text-fill: darkgrey;
}

1 个答案:

答案 0 :(得分：0)

您可以这样做：

首先，为两个主题创建URL：

private String urlTheme1 = getClass().getResource("css1.css").toExternalForm();
private String urlTheme2 = getClass().getResource("css2.css").toExternalForm();

然后，当点击“更改样式”按钮时，您可以执行以下操作：

  changeStylebtn.setOnAction(new EventHandler<ActionEvent>() {
                 @Override
                 public void handle(ActionEvent event) {
//Remove from scene the theme1(asumming you added to your scene when your app starts)
                     scene.getStylesheets().remove(urlTheme1); 

                     //Add the new theme
                     scene.getStylesheets().add(urlTheme2); 
                 }
            }

这可以解决问题。

相关问题
最新问题