Updating the Width of TextField and VBox when Full screened JavaFX

Question

whenever I try to full screen my application, it doesn't scale. I've made multiple copies of this application trying different methods but none seem to work right.

First attempt: Application was a Parent, it would scale the background but the elements inside wouldn't scale to screen size.

As an update: here is the actual Parent that was made. The layout is the original one I wrote and has no issues when it's windowed. It has a preset WIDTH and HEIGHT but when full screened, The first example picture is what it looks like where the WIDTH of the the TextField doesn't update (since it's preset and not updating to the highest WIDTH of the screen it's running on). There are two parts to this that CAN be fixed when only one is fixed. The displayed Text has a set wrapping length of the console, though it is set by using WIDTH.

Here's what the console looks like when it's windowed:

If I could find a way to change the WIDTH, I'm thinking this can be fixed for both the TextField and the setWrappingWidth().

package application.console;

import application.areas.startingArea.SA;
import application.areas.vanguardForest.VFCmds;
import application.areas.vanguardForest.VFNavi;
import application.areas.vanguardForest.VFPkups;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Parent;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.control.TextField;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Region;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

public class Ce extends Region {

    public static boolean fullscreen = false;
    
    public static double WIDTH = 990;
//          990;
//          Screen.getPrimary().getBounds().getMaxX();
    public static double HEIGHT = 525;
//          525;
//          Screen.getPrimary().getBounds().getMaxY();
    
    public static Font Cinzel = (Font.loadFont("file:fonts/static/Cinzel-Medium.ttf", 16));
    
    public static VBox console = new VBox(2);
    public static TextField input = new TextField();
    public static ScrollPane scroll = new ScrollPane();
            
    public static BorderPane root = new BorderPane();

    public static String s;
    
    public static Parent Window() {
        
        root.setMinSize(WIDTH, (HEIGHT - input.getHeight()));
        root.setStyle("-fx-background-color: #232323;");
        
        scroll.setContent(console);
        root.setCenter(scroll);
        scroll.setStyle("-fx-background: #232323;"
                + "-fx-background-color: transparent;"
                + "-fx-border-color: #232323;"
                + "-fx-focus-color: #232323;"
                );
        scroll.setHbarPolicy(ScrollBarPolicy.NEVER);
        scroll.setVbarPolicy(ScrollBarPolicy.NEVER);
        scroll.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, null, null)));
        
        console.setStyle("-fx-background-color: #232323;"
                + "-fx-focus-color: #232323;");
        
        console.heightProperty().addListener(new ChangeListener<Object>() {
            @Override
            public void changed(ObservableValue<?> observable, Object oldValue, Object newValue) {
                
                scroll.setVvalue((Double)newValue);
            }
            
        });
        
        HBox hbox = new HBox();
        hbox.setPrefSize(WIDTH, 16);
        root.setBottom(hbox);
        
        Text carrot = new Text(" >");
        carrot.setFont(Font.loadFont("file:fonts/static/Cinzel-Medium.ttf", 26));
        carrot.setFill(Color.WHITE);
        
        input.setStyle("-fx-background-color: transparent;"
                + "-fx-text-fill: #FFFFFF;"
                + "-fx-highlight-fill: #FFFFFF;"
                + "-fx-highlight-text-fill: #232323;"
//              + "-fx-border-color: #FFFFFF;"
//              + "-fx-border-width: .5;"
                );
        input.setFont(Cinzel);
        input.setMinWidth(console.getWidth());
        
        input.setOnAction(e -> {
            
            String s = (input.getText()).stripTrailing();

            input.clear();
        });
        
        Pane pane = new Pane();
        
        root.getChildren().add(pane);
        
        hbox.getChildren().addAll(carrot, input);
        
        return root;
    }

This isn't the main issue as I've stated, once getting the scaled width for the TextField the process of for setWrappingWidth() for displaying the text should be the if a solution is found, here's how it goes:

@SuppressWarnings("static-access")
    public void print(String s, Color c) {
        Ce Ce = new Ce();
        HBox text1 = new HBox();
        text1.setMinWidth(Ce.WIDTH);
        text1.setMaxWidth(Ce.WIDTH);
        
        Text tCarrot = new Text(" > ");
        tCarrot.setFont(Ce.Cinzel);
        tCarrot.setFill(c);
        
        Text text2 = new Text();
        final IntegerProperty i = new SimpleIntegerProperty(0);
        Timeline tl = new Timeline();
        KeyFrame kf = new KeyFrame(
                Duration.seconds(textSpeed(fastText)),
                e1 -> {
                    if(i.get() > s.length()) {
                        tl.stop();
                    } else {
                        text2.setText(s.substring(0, i.get()));
                        i.set(i.get() + 1);
                    }
                });
        
        tl.getKeyFrames().add(kf);
        tl.setCycleCount(Animation.INDEFINITE);
        tl.play();
        
        text2.setFill(c);
        text2.setFont(Ce.Cinzel);
        text2.setWrappingWidth(Ce.WIDTH - 40);
        
        text1.getChildren().addAll(tCarrot, text2);
        
        Ce.console.getChildren().add(text1);
        
        Ce.console.setMargin(text1, new Insets(5, 0, 0, 3));

    }   

Lastly, the HEIGHT of the VBox for the displayed Text works just as intended, it's just the setting/updating the WIDTH to set it to the size of the window whether Windowed of Full screened that is the main issue here.

Answer 1

Try this app. It will not be exactly what you want but may provide some useful help for you if you study it, if not just ignore it, tears can keep you blind, and sometimes, that is ok.

The implementation follows the suggestions you have received in the comments on your questions which together explain what is being done and why, so I won't provide much commentary on the solution here.

Type text in the input bar, press enter and it will appear in the listview for the console log. Use the Toggle full-screen button to toggle full-screen mode on or off.

Console.java

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Pos;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class Console extends VBox {
    private final ObservableList<String> consoleLog = FXCollections.observableArrayList();
    private final ListView<String> logView = new ListView<>(consoleLog);

    public Console(Stage stage) {
        VBox.setVgrow(logView, Priority.ALWAYS);

        HBox ribbon = createRibbon(
                createFullScreenToggle(stage)
        );
        ribbon.setMinHeight(HBox.USE_PREF_SIZE);

        getChildren().addAll(
                ribbon,
                logView
        );
    }

    private ToggleButton createFullScreenToggle(Stage stage) {
        ToggleButton fullScreenToggle = new ToggleButton("Toggle full screen");
        fullScreenToggle.setOnAction(e ->
                stage.setFullScreen(
                        fullScreenToggle.isSelected()
                )
        );
        
        return fullScreenToggle;
    }

    private HBox createRibbon(ToggleButton fullscreenToggle) {
        Text prompt = new Text(">");

        TextField input = new TextField();
        input.setOnAction(e -> {
            consoleLog.add(0, input.getText());
            logView.scrollTo(0);

            input.clear();
        });
        HBox.setHgrow(input, Priority.ALWAYS);

        HBox ribbon = new HBox(10, 
                prompt, 
                input, 
                fullscreenToggle
        );
        ribbon.setAlignment(Pos.BASELINE_LEFT);

        return ribbon;
    }

    public ObservableList<String> getConsoleLog() {
        return consoleLog;
    }
}

ConsoleApplication.java

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

public class ConsoleApplication extends Application {
    @Override
    public void start(Stage stage) {
        Console console = new Console(stage);
        console.getConsoleLog().addAll(
                TEXT.lines().toList()
        );

        stage.setScene(
                new Scene(
                        console
                )
        );

        stage.show();
    }

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

    private static final String TEXT = """            
            W. Shakespeare - Sonnet 148
            O me, what eyes hath Love put in my head,
            Which have no correspondence with true sight!
            Or, if the have, where is my judgement fled,
            That censures falsely what they see aright?
            If that be fair whereon my false eyes dote,
            What means the world to say it is not so?
            If it be not, then love doth well denote
            Love’s eye is not so true as all men’s ‘No.’
            How can it? O, how can Love’s eye be true,
            That is so vex’d with watching and with tears?
            No marvel then, though I mistake my view;
            The sun itself sees not till heaven clears.
                O cunning Love! with tears thou keep’st me blind.
                Lest eyes well-seeing thy foul faults should find.
            """;
}

Answer 2

If you want to increase the nodes height/width according to the viewport, then this's not the best practice, because every user will have the same font size at the end. What you can do is to make the font resizable by either GUI buttons or keyboard/mouse keys.

Here is a modification on your code, that will allow users to use ctrl + mouse wheel to increase/decrease the font (like any browser or terminal):

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.binding.ObjectBinding;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TextField;
import javafx.scene.input.ScrollEvent;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class ConsoleTest extends Application {
    @Override
    public void start(Stage stage) {
        Scene scene = new Scene(new GameWindow().Console(), 600, 600);
        stage.setTitle("Console");
        stage.setScene(scene);
        stage.show();
    }

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

class GameWindow {

    public static Console c = new Console();

    public Parent Console() {
        for (int i = 0; i < 100; i++) c.addText(new Text("Test" + i));
        return c;
    }

}

class Console extends BorderPane {

    private final SimpleDoubleProperty fontSize = new SimpleDoubleProperty(20);
    private final ObjectBinding<Font> fontBinding = Bindings.createObjectBinding(() -> Font.font(fontSize.get()), fontSize);

    private final VBox console;

    public Console() {
        console = new VBox();
        console.setBackground(new Background(new BackgroundFill(Color.BLACK, CornerRadii.EMPTY, Insets.EMPTY)));

        ScrollPane scroll = new ScrollPane(console);
        scroll.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
        scroll.setVbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
        scroll.setFitToHeight(true);
        scroll.setFitToWidth(true);
        scroll.setPadding(Insets.EMPTY);

        Text caret = new Text("  >");
        caret.fontProperty().bind(fontBinding);
        caret.setFill(Color.WHITE);

        TextField input = new TextField();
        input.setStyle("-fx-background-color: transparent;" + "-fx-text-fill: #FFFFFF;" + "-fx-highlight-fill: #FFFFFF;" + "-fx-highlight-text-fill: #232323;");
        input.fontProperty().bind(fontBinding);

        HBox inputBar = new HBox(2, caret, input);
        inputBar.setStyle("-fx-background-color: #232323;");
        inputBar.setAlignment(Pos.CENTER_LEFT);

        setCenter(scroll);
        setBottom(inputBar);

        EventHandler<ScrollEvent> scrollEvent = e -> {
            if (e.isControlDown()) {
                if (e.getDeltaY() > 0) {
                    fontSize.set(fontSize.doubleValue() + 2);
                } else {
                    double old;
                    fontSize.set((old = fontSize.doubleValue()) < 10 ? old : old - 2);
                }
                e.consume();
            }
        };

        inputBar.setOnScroll(scrollEvent);
        console.setOnScroll(scrollEvent);
    }

    public void addText(Text text) {
        text.fontProperty().bind(fontBinding);
        text.setFill(Color.WHITE);
        console.getChildren().add(text);
    }
}