Javafx: Binding font size to container

Question

I am currently working on my final year project which is to create a Sudoku game/solver. The problem I have is that I am cannot find a method of resizing font size to that of its container when using a scene framework.

I would like to have the font size of a label change to the corresponding size of the gridpane it is within. I however am finding it hard to bind the properties I need such as 'widthProperty' and 'heightProperty' to that of 'Font.font(size)'

The difference of this question to other binding questions, is that my scene framework interferes with putting the binding for controls in the initialize method of a controller. I cannot do this as all of my controllers are initialized on start up not when they are shown to the scene

Here is all my code:

Main.java

package Controller;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    public static String mainMenu = "Main Menu";
    public static String mainMenuFXML = "/FXML/MainMenu.fxml";
    public static String chooseLevel = "Level Selection";
    public static String chooseLevelFXML = "/FXML/ChooseLevel.fxml";

    //Global Variable to be accessed across all classes
    //To be used to determine which scenes are loaded in the HashMap and also which scene has been set
    public static SceneFramework mainController = new SceneFramework();

    @Override
    public void start(Stage primaryStage) throws Exception{

        //Only the main menu scene is needed to be loaded at the start
        mainController.loadScene(Main.mainMenu, Main.mainMenuFXML);
        mainController.setScene(Main.mainMenu);

        StackPane root = new StackPane();
        root.getChildren().addAll(mainController);
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {

        launch(args);
    }
}

SceneFramework.java

package Controller;


import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.layout.StackPane;

import java.util.HashMap;

public class SceneFramework extends StackPane{

    //Constructor for the class
    public SceneFramework(){
        //The keyword super, overrides methods from the superclass
        super();
    }

    //This HashMap is used to hold the screens(scenes) to be used within the application
    protected HashMap scenes = new HashMap<>();

    //Adds the selected scene to the HashMap
    public void addScene(String title, Node scene) {
        scenes.put(title, scene);
    }

    //Returns the Node with the specified title for use within application
    public Node getScene(String title) {
        return scenes.get(title);
    }

    //Removes the selected scene from the framework
    public boolean unloadScene(String title){
        if(scenes.remove(title) == null){
            System.out.println("Scene cannot be located or it doesn't exist");
            return false;
        } else{
            return true;
        }
    }

    public boolean loadScene(String title, String resource){
        //encase code segment in try for exception handling,
        // as resources are required to be found and then loaded into memory
        try{
            //Load FXML File
            FXMLLoader loadedFXMLFile = new FXMLLoader(getClass().getResource(resource));

            //Get Parent of scene
            Parent loadScene = loadedFXMLFile.load();

            //Get the Controller class of the parent
            SetSceneParent sceneController = (loadedFXMLFile.getController());

            //Method of making sure every scene knows who it's parent is
            sceneController.setSceneParent(this);

            //Add scene to HashMap
            addScene(title, loadScene);
            return true;

        }catch (Exception e){
            //If FXML resource can't be loaded then generate this
            System.out.println("Could't load FXML file");
            return false;
        }
    }

    //Method for showing scenes
    //If one scenes if wanting to be shown then it is added to the root
    //If multiple scenes are wanting to be loaded then the first scene is removed and the new scene is then displayed
    public boolean setScene(final String title){
        //Check to see if scene can be found
        if(scenes.get(title) != null) {
            if(!getChildren().isEmpty()){

                getChildren().remove(0);
                getChildren().add(0 ,scenes.get(title));

            }else{
                    getChildren().add(scenes.get(title));
            }
            return true;
        } else{
            System.out.println("Scene not located!!!");
            return false;
        }
    }
}

SetSceneParent.java

package Controller;

import Controller.SceneFramework;

public interface SetSceneParent {

   void setSceneParent(SceneFramework sceneParent);
}

MainMenuController.java

package Controller;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

import java.net.URL;
import java.util.ResourceBundle;


public class MainMenuController implements Initializable, SetSceneParent {

    @FXML
    public Button playButton, optionsButton, quitButton;


    @Override
    public void initialize(URL location, ResourceBundle resources) {
        SelectionStatus.initialize();
    }

    @Override
    public void setSceneParent(SceneFramework sceneParent) {
        //Sets the parent of the scene by using the global variable of the class SceneFramework
        Main.mainController = sceneParent;
    }

    public void handlePlayButtonAction(){
        //On clicking of the play button
        //The user is taken to the level difficulty scene

        Main.mainController.loadScene(Main.chooseLevel, Main.chooseLevelFXML);
        Main.mainController.setScene(Main.chooseLevel);
        Main.mainController.unloadScene(Main.mainMenu);
    }

}

MainMenu.fxml

ChooseLevelController.java

package Controller;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;

import java.net.URL;
import java.util.ResourceBundle;

public class ChooseLevelController implements Initializable, SetSceneParent {

    @FXML
    public Label lblLevelSelection, lblLevel1, lblLevel2, lblLevel3, lblLevel4, lblLevel5, lblLevel6, lblLevel7, lblLevel8, lblLevel9, lblLevel10; // Value injected by FXMLLoader
    public Button backButton;
    public GridPane gridPaneCenter;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        //Assert code is to be used in debugging making sure references to files and their elements are correct
        assert lblLevel1 != null : "fx:id=\"lblLevel1\" was not injected: check your FXML file 'ChooseLevel.fxml'.";
        assert lblLevel2 != null : "fx:id=\"lblLevel2\" was not injected: check your FXML file 'ChooseLevel.fxml'.";
        assert lblLevel3 != null : "fx:id=\"lblLevel3\" was not injected: check your FXML file 'ChooseLevel.fxml'.";
        assert lblLevel4!= null : "fx:id=\"lblLevel4\" was not injected: check your FXML file 'ChooseLevel.fxml'.";
        assert lblLevel5 != null : "fx:id=\"lblLevel5\" was not injected: check your FXML file 'ChooseLevel.fxml'.";
        assert lblLevel6 != null : "fx:id=\"lblLevel6\" was not injected: check your FXML file 'ChooseLevel.fxml'.";
        assert lblLevel7 != null : "fx:id=\"lblLevel7\" was not injected: check your FXML file 'ChooseLevel.fxml'.";
        assert lblLevel8 != null : "fx:id=\"lblLevel8\" was not injected: check your FXML file 'ChooseLevel.fxml'.";
        assert lblLevel9 != null : "fx:id=\"lblLevel9\" was not injected: check your FXML file 'ChooseLevel.fxml'.";
        assert lblLevel10 != null : "fx:id=\"lblLevel10\" was not injected: check your FXML file 'ChooseLevel.fxml'.";

    }

    @Override
    public void setSceneParent(SceneFramework screenParent) {
        //Sets the parent of the scene by using the global variable of the class SceneFramework
        Main.mainController = screenParent;
    }

    //Logic code
    @FXML
    public void mouseClickedLevelLabel() {

        //Load the play screen when any Label is pressed
        lblLevel1.setOnMouseClicked(e -> handleLabelClick(1));
        lblLevel2.setOnMouseClicked(e -> handleLabelClick(2));
        lblLevel3.setOnMouseClicked(e -> handleLabelClick(3));
        lblLevel4.setOnMouseClicked(e -> handleLabelClick(4));
        lblLevel5.setOnMouseClicked(e -> handleLabelClick(5));
        lblLevel6.setOnMouseClicked(e -> handleLabelClick(6));
        lblLevel7.setOnMouseClicked(e -> handleLabelClick(7));
        lblLevel8.setOnMouseClicked(e -> handleLabelClick(8));
        lblLevel9.setOnMouseClicked(e -> handleLabelClick(9));
        lblLevel10.setOnMouseClicked(e -> handleLabelClick(10));
    }

    @FXML
    public void handleBackButtonAction() {
        //On clicking of the back button
        //The user is taken to the level difficulty scene

        Main.mainController.loadScene(Main.mainMenu, Main.mainMenuFXML);
        Main.mainController.setScene(Main.mainMenu);
        Main.mainController.unloadScene(Main.chooseLevel);

    }
}

ChooseLevel.fxml

JohnRW · Accepted Answer

Ok your code does not compile AGAIN. So I'll just post a minimal example:

App.java

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class App extends Application {
    @Override
    public void start(Stage primaryStage) {
        View view = new View();
        Scene scene = new Scene(view, 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }  
    public static void main(String[] args) {
        launch(args);
    } 
}

View.java

import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.control.Label;
import javafx.scene.layout.*;

public class View extends AnchorPane {
    public View() {
        GridPane gridPane = new GridPane();
        ColumnConstraints column = new ColumnConstraints();
        column.setPercentWidth(33.33);
        column.setHalignment(HPos.CENTER);
        gridPane.getColumnConstraints().addAll(column, column, column);
        RowConstraints row = new RowConstraints();
        row.setPercentHeight(33.33);
        row.setValignment(VPos.CENTER);
        gridPane.getRowConstraints().addAll(row, row, row);
        gridPane.setGridLinesVisible(true);

        AnchorPane.setTopAnchor(gridPane, 0.0);
        AnchorPane.setBottomAnchor(gridPane, 0.0);
        AnchorPane.setLeftAnchor(gridPane, 0.0);
        AnchorPane.setRightAnchor(gridPane, 0.0);

        for ( int i = 0 ; i < 9; i++ ) {
            gridPane.add(new Label(i+1+""), i%3, i/3, 1, 1);
        }

        this.widthProperty().addListener( event -> {
            this.setStyle("-fx-font-size: " + this.getWidth()/10);
        });

        this.getChildren().add(gridPane);
    }
}

This is EXACTLY what i proposed on your other question...

Edit:

To change the font of the exact element you could go about it like this:

    this.widthProperty().addListener( event -> {
        ObservableList labelList = gridPane.getChildren();
        for ( int i = 0; i < labelList.size(); i++ ) {
            //labelList.get(i).setStyle("-fx-font-size: " + this.getWidth()/10);
            if ( labelList.get(i).getClass().equals(Label.class) ) {
                Label.class.cast(labelList.get(i)).setFont(Font.font(this.getWidth()/10));
            }
        }
    });

Edit2:

To have the font scale with the height AND the width you could use a method such as this:

private void changeFontSize(List labelList) {
    Double newFontSizeDouble = Math.hypot(this.getWidth(), this.getHeight())/10;
    int newFontSizeInt = newFontSizeDouble.intValue();

    for ( int i = 0; i < labelList.size(); i++ ) {
        if ( labelList.get(i).getClass().equals(Label.class) ) {
            Label.class.cast(labelList.get(i)).setFont(Font.font(newFontSizeInt));
        }
    }
}

And call it like this:

this.widthProperty().addListener( event -> changeFontSize(gridPane.getChildren()));
this.heightProperty().addListener( event -> changeFontSize(gridPane.getChildren()));

Edit3:

You can also bind them using property bindings. There's a good tutorial on youtube here:

https://www.youtube.com/watch?v=s8GomyEOA8w&index=29&list=PL6gx4Cwl9DGBzfXLWLSYVy8EbTdpGbUIG

Javafx: Binding font size to container

Answers (1)

Related Questions