How do you create a .fxml file in vscode? - visual-studio-code

Question

(I am very new to coding so let me know if any wording is too vague). I am using Visual Studio Code 1.67.2. I did not use Maven or any other similar tools, I just manually pointed the JavaFX lib folder to my project. I successfully was able to "connect" a css file to my main.java application by creating a .css file and then using scene.getStylesheets().addAll("Main.css"). However, I do not see fxml as an option in the language drop down like I did with css (I just see xml). How can I create a .fxml file? Every tutorial I can find already has a blank .fxml file in the project folder ready to be edited.

Answer 1

Scene Builder
The easiest solution is to download and use Scene Builder, which is a WYSIWYG editor for FXML files. It can create new FXML files for you, and you rarely, if ever, have to deal with editing the FXML file yourself. You just create the UI that you want, and Scene Builder will write the FXML file for you.
Create & Write FXML File Manually
There may be an VS Code extension for this, but I'm not currently aware of one. Though it is not hard to "manually" create an FXML file. Just go to create a new file, type in the name of the file, and then add a .fxml extension. You'll end up with a completely blank FXML file. Then you just need to add two things to make it a minimally valid FXML file:
An XML header.
A root element (with namespaces + any needed import instructions).
<!-- XML header -->
<?xml version="1.0" encoding="UTF-8"?>
<!-- Add/remove/change import instructions as needed -->
<?import javafx.scene.layout.StackPane?>
<!-- Change root element type as needed -->
<StackPane xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml">
<!-- Define properties and rest of scene graph -->
</StackPane>
Note: Keep in mind that an FXML file is syntactically just an XML file.
And then you can continue to modify the FXML file as needed. It may help to read Introduction to FXML in order to understand what you're doing.

Answer 2

SceneBuilder
I agree with previous answer left by Slaw. And most specifically the part about getting SceneBuilder from Gluon. It'd be recommended. There really isn't a reason why you should need to edit the FXML file yourself. However, if you do need to generate a new FXML file and do not want to do it through the tools mentioned for whatever reason then you are free to create a file with the .fxml extension and modify it manually.
Ease of Use
In addition, for persons coming here new to VSCode, something else I recommend getting is the
Scene Builder extension, which streamlines navigation from VSCode to Scene Builder.
While this doesn't provide a whole lot more functionality it makes VSCode feel more similar to other Java editors.