Bind Font Size in JavaFX?

data-binding, fonts, java, javafx, user-interface

Solution

Just put everything where you want the fontsize to change in a container and set that style or use bindings if you want.

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class FontBind extends Application {

    private DoubleProperty fontSize = new SimpleDoubleProperty(10);
    private IntegerProperty blues = new SimpleIntegerProperty(50);

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button("click me, I change color");
        btn.setOnAction((evt)->{blues.set(blues.get()+20);});//max?
        Label lbl = new Label("I'm a label");
        TextArea ta = new TextArea("Lots of text can be typed\nand even number 1234567890");
        HBox hbox = new HBox(new Label("I never change"));
        VBox child = new VBox(btn, lbl, ta);
        VBox root = new VBox(child, hbox);
        Scene scene = new Scene(root, 300, 250);

        fontSize.bind(scene.widthProperty().add(scene.heightProperty()).divide(50));
        child.styleProperty().bind(Bindings.concat("-fx-font-size: ", fontSize.asString(), ";"
                                                  ,"-fx-base: rgb(100,100,",blues.asString(),");"));

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

I'm not sure what your style is already bound to, but you're allowed to set multiple css values in the style string.

Problem

I'd like to make my application fluid. However, the fonts look small compared to the UI elements when I make the windows bigger. Ultimately, I want the size of my text to get bigger or smaller when I resize the window. I know I could theoretically do this with the style property, but I already have that property bound to something else in some instances. I know there's the "fontProperty" method, but I have nothing to bind it to since I can't figure out how to create a dynamic ObjectProperty with a synced size. What should I do? EDIT: To avoid confusion, I'm trying to make the Font size change based on other factors, not the other way around.

Original source

Related problems