Set the .root -fx-font-size
- Create a custom stylesheet for your application.
In sylesheet .root selector, set -fx-font-size to your desired value:
.root {
-fx-font-size: 40px;
}
Why this works
This works because:
- All of the default controls are based on
em units (which are based on the default font size).
-fx-font-size is an inherited style.- Everything inherits from the root.
Once you do this, all controls (and the text inside them) will automatically resize nicely to fit whatever font size you specified.
Related Sample
Related Information
em is a generic unit that is not specific to JavaFX and em units are also used in HTML CSS. If interested, you can read a broader discussion on em units versus other units.
Using em units in FXML via expression binding
Just setting a default font size gets you about 90% of the way to where you need to be, but is not necessarily a universal fix as some layout units might be specified not using em units. Most of the time this isn't really an issue, but if it is in your case, you could also apply a mechanism described in an Oracle developer mailing list post, which appears to work, though is a little clunky.
How about using an expression binding.
For 35em x 25em you could write:
prefWidth="${35*u.em}" prefHeight="${25*u.em}"
It's not 100% concise, but perhaps passable.
These kind of sizing expressions work in scene builder 1.1, which is nice.
Here is an example using a Rectangle to store the width and height modifiers for the fxml file.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.*?>
<StackPane xmlns:fx="http://javafx.com/fxml">
<fx:define>
<Rectangle fx:id="s" width="13" height="13"/>
</fx:define>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="${22 * s.width}" prefWidth="${14 * s.height}">
<children>
<Button layoutX="${4 * s.width}" layoutY="${ 5 * s.height}" prefWidth="${6 * s.width}" text="Top" />
<Button layoutX="${4 * s.width}" layoutY="${10 * s.height}" prefWidth="${6 * s.width}" text="Middle" />
<Button layoutX="${4 * s.width}" layoutY="${15 * s.height}" prefWidth="${6 * s.width}" text="Bottom" />
</children>
</AnchorPane>
</StackPane>
Or instead, you can create your own unit class and use it in your sizing expressions, for example:
package org.jewelsea.measure;
public class Measurement {
private double em;
public void setEm(double em) { this.em = em; }
public double getEm() { return em; }
}
. . .
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import org.jewelsea.measure.Measurement?>
<?scenebuilder-classpath-element .?>
<StackPane xmlns:fx="http://javafx.com/fxml">
<fx:define>
<Measurement fx:id="u" em="26.0" />
</fx:define>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="${22*u.em}" prefWidth="${14*u.em}">
<children>
<Button layoutX="${4*u.em}" layoutY="${ 5*u.em}" prefWidth="${6*u.em}" text="Top" />
<Button layoutX="${4*u.em}" layoutY="${10*u.em}" prefWidth="${6*u.em}" text="Middle" />
<Button layoutX="${4*u.em}" layoutY="${15*u.em}" prefWidth="${6*u.em}" text="Bottom" />
</children>
</AnchorPane>
</StackPane>
