I have an fxml application started and I'm finding it very difficult to find relevant documentation. I want to drag a file onto my fxml application, specifically a tabpane, and get the location of the file. I am new to the fxml scene so please try your best to be simple.
fxmlcontroller
public class FXMLDocumentController implements Initializable {
#FXML protected void onDropEndEvent(ActionEvent event) {
System.out.println(event.toString());
}
#FXML protected void onDragEvent(ActionEvent event) {
System.out.println("stuff happened");
}
#Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
fxmldocument
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.chart.*?>
<?import javafx.scene.shape.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.text.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="485.0" prefWidth="577.0" style="-fx-background-color: #c4c4c4; -fx-border-radius: 0px;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="craigencdec.FXMLDocumentController">
<children>
<Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
<Button layoutX="458.0" layoutY="13.0" mnemonicParsing="false" prefHeight="45.0" prefWidth="110.0" style="-fx-border-radius: 1 1 1 1; -fx-background-color: #4A4DFF; -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.2), 10, 0, 0, 0); -fx-background-radius: 0 0 0 0;" text="Do Stuff" textFill="WHITE">
<font>
<Font name="Ubuntu" size="19.0" />
</font>
<cursor>
<Cursor fx:constant="HAND" />
</cursor>
</Button>
<TextField layoutX="11.0" layoutY="13.0" prefHeight="45.0" prefWidth="441.0" promptText="Enter your key here" style="-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.2), 10, 0, 0, 0); -fx-border-radius: 0 0 0 0; -fx-background-radius: 0 0 0 0;">
<cursor>
<Cursor fx:constant="HAND" />
</cursor>
<font>
<Font name="Ubuntu" size="19.0" />
</font>
</TextField>
<ProgressBar layoutX="332.0" layoutY="453.0" prefHeight="24.0" prefWidth="236.0" progress="0.06" style="-fx-background-radius: 0 0 0 0; -fx-border-radius: 0 0 0 0;">
<opaqueInsets>
<Insets />
</opaqueInsets>
</ProgressBar>
<TabPane layoutY="69.0" onDragDetected="#onDragEvent" onDragDropped="#onDropEndEvent" prefHeight="416.0" prefWidth="325.0" style="-fx-background-color: #FFFFFF;" tabClosingPolicy="UNAVAILABLE">
<tabs>
<Tab closable="false" text="Encode" />
<Tab closable="false" text="Decode" />
</tabs>
</TabPane>
<Label alignment="CENTER" layoutX="332.0" layoutY="70.0" prefHeight="33.0" prefWidth="236.0" style="-fx-border-radius: 3 3 3 3; -fx-background-color: #4A4DFF; -fx-background-radius: 0 0 0 0;" text="Status" textFill="WHITE">
<font>
<Font size="27.0" />
</font>
</Label>
<Circle fill="WHITE" layoutX="344.0" layoutY="120.0" radius="12.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" />
<Label alignment="TOP_LEFT" layoutX="369.0" layoutY="110.0" prefHeight="75.0" prefWidth="200.0" text="drag a file into a tab to encode or decode it" textFill="WHITE" textOverrun="CLIP" wrapText="true" />
<LineChart layoutX="333.0" layoutY="199.0" prefHeight="243.0" prefWidth="236.0">
<xAxis>
<CategoryAxis side="BOTTOM" />
</xAxis>
<yAxis>
<NumberAxis prefHeight="258.0" prefWidth="24.0" side="LEFT" />
</yAxis>
</LineChart>
</children>
</AnchorPane>
craigencdec
package craigencdec;
import java.io.BufferedInputStream;
import java.io.FileInputStream;
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
*
* #author craig
*/
public class CraigEncDec extends Application {
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.setTitle("Encoder/Decoder");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
private void getBits(String fileLoc){
StringBuilder sb = new StringBuilder();
try (BufferedInputStream is = new BufferedInputStream(new FileInputStream(""))) {
for (int b; (b = is.read()) != -1;) {
String s = "0000000" + Integer.toBinaryString(b);
s = s.substring(s.length() - 8);
sb.append(s).append(' ');
}
}catch(IOException e){
System.out.println("This is not a valid file");
}
System.out.println(sb);
}
}
If you are using scene builder, go to the code section and in the On Drag Dropped textfield put the name of the method in your controller that you want to handle drag events when something is dropped on this node
Then in your controller create the body of this function to be called when the drop happens
#FXML private void somethingDropped(Event event) {
System.out.println("something dropped!");
//TODO More useful code
}
Related
package com.gui;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import org.w3c.dom.Text;
import java.net.URL;
import java.util.ResourceBundle;
public class LayoutController {
#FXML
Pane boardPane;
#FXML
Button btnPlayAgain;
#FXML
TextField message;
public void btnPlayAgain(ActionEvent actionEvent) {
message.setText("Testing...");
}
#FXML
public void initialize() {
message.setText("Working");
int w = (int) boardPane.getWidth();
int h = (int) boardPane.getHeight();
int grid = 12;
int scaleW = w / grid;
int scaleH = h / grid + 5;
for (int i = 0; i < w; i += scaleW) {
for (int j = 0; j < h; j += scaleH) {
Rectangle rectangle = new Rectangle(i, j, scaleW, scaleH);
rectangle.setFill(Color.LIGHTYELLOW);
rectangle.setOpacity(2);
rectangle.setStroke(Color.BLACK);
boardPane.getChildren().add(rectangle);
}
}
}
}
My FXML :
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<AnchorPane minHeight="300" minWidth="300" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.2" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.gui.LayoutController">
<Pane prefHeight="50.0" prefWidth="600.0">
<TextField layoutX="100.0" layoutY="14.0" />
<TextField layoutX="375.0" layoutY="14.0" />
<Label layoutX="285.0" layoutY="15.0" text="Player 2" textFill="#000dff">
<font>
<Font name="System Bold" size="17.0" />
</font>
</Label>
<Label alignment="TOP_LEFT" contentDisplay="RIGHT" layoutX="10.0" layoutY="15.0" text="Player 1" textFill="#ee0303">
<font>
<Font name="System Bold" size="17.0" />
</font>
</Label>
</Pane>
<Pane fx:id="boardPane" layoutY="50.0" minHeight="300.0" minWidth="600.0" prefHeight="300.0" prefWidth="600.0" />
<Pane fx:id="paneBottom" layoutY="354.0" prefHeight="42.0" prefWidth="600.0">
<Button fx:id="btnPlayAgain" layoutX="5.0" layoutY="10.0" mnemonicParsing="false" onAction="#btnPlayAgain" text="Play Again" />
<TextField fx:id="message" layoutX="100.0" layoutY="10.0" prefWidth="450.0" editable="false"/>
</Pane>
</AnchorPane>
It should show something like that :
But it is showing something like that :
Please help anybody can help... :)
I want show the gird everytime i run code but nothing is showing in the pane layout I have tried different time but nothing seems to work
your insight to my problem will be very helpful...
I'm tryin to follow the material design guide for my application's color scheme. At the moment, I'm at the part where it's explaining how the dark theme works.
This is my CSS:
#main-app {
-fx-background-color: #121212;
-fx-background-radius: 5px;
}
#top-bar {
-fx-background-color: bar-color;
-fx-background-radius: 5px 5px 0 0;
}
#bottom-bar {
-fx-background-color: bar-color;
-fx-background-radius: 0 0 5px 5px;
}
How can I do the 5% overlay, as seen in the image below, of my #main-app's background-color so I can then apply it to the top and bottom bars?
I give it another shot ;-)
CSS File:
#main-app {
-fx-background-radius: 5px;
-fx-background-color: #121212;
}
#top-bar {
-fx-background-radius: 5px 5px 0 0;
-fx-background-color: inherit;
}
#top-bar-overlay {
-fx-background-radius: 5px 5px 0 0;
-fx-background-color: rgba(255, 255, 255, 0.05);
}
#bottom-bar {
-fx-background-radius: 0 0 5px 5px;
-fx-background-color: inherit;
}
#bottom-bar-overlay {
-fx-background-radius: 0 0 5px 5px;
-fx-background-color: rgba(255, 255, 255, 0.5);
}
FXML File:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Spinner?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>
<AnchorPane stylesheets="#styling2.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.OverlayController">
<children>
<HBox alignment="CENTER_LEFT" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Label text="Transparency Value for Top Bar Overlay:" />
<Spinner fx:id="topBarTransparencySpinner" />
<Label text="Transparency Value for Bottom Bar Overlay:" />
<Spinner fx:id="bottomBarTransparencySpinner" />
</children>
</HBox>
<GridPane id="main-app" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="27.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" />
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints vgrow="SOMETIMES" />
</rowConstraints>
<children>
<AnchorPane id="top-bar">
<children>
<HBox id="top-bar" alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Label text="Top Bar">
<font>
<Font size="36.0" />
</font>
<HBox.margin>
<Insets />
</HBox.margin>
</Label>
</children>
</HBox>
<Pane id="top-bar-overlay" fx:id="topBarOverlayPane" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
<AnchorPane GridPane.rowIndex="1">
<children>
<HBox id="bottom-bar" alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Label text="Bottom Bar">
<font>
<Font size="36.0" />
</font>
</Label>
</children>
</HBox>
<Pane id="bottom-bar-overlay" fx:id="bottomBarOverlayPane" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</children>
</GridPane>
</children>
</AnchorPane>
Controller Class:
package sample;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Spinner;
import javafx.scene.control.SpinnerValueFactory;
import javafx.scene.layout.Pane;
import java.net.URL;
import java.util.ResourceBundle;
public class OverlayController implements Initializable {
#FXML
Spinner<Double>
topBarTransparencySpinner,
bottomBarTransparencySpinner;
#FXML
private Pane
topBarOverlayPane,
bottomBarOverlayPane;
#Override
public void initialize(URL location, ResourceBundle resources) {
topBarTransparencySpinner.setValueFactory(new SpinnerValueFactory.DoubleSpinnerValueFactory(0, 1, 0.05, 0.01));
bottomBarTransparencySpinner.setValueFactory(new SpinnerValueFactory.DoubleSpinnerValueFactory(0, 1, 0.5, 0.01));
topBarTransparencySpinner.valueProperty().addListener((obs, oldV, newV) ->
topBarOverlayPane.setStyle(String.format("-fx-background-color: rgba(255, 255, 255, %s);", String.valueOf(newV).replace(",", "."))));
bottomBarTransparencySpinner.valueProperty().addListener((obs, oldV, newV) ->
bottomBarOverlayPane.setStyle(String.format("-fx-background-color: rgba(255, 255, 255, %s);", String.valueOf(newV).replace(",", "."))));
}
}
Preview:
Does this example help you for your project?
If you main background is already black, I think you can use an rgba background-color on the blocks. So for a 5% white overlay rgba(255,255,255,0.05).
I'm not sure if this is what you looking for but I hope it can help you a bit.
I think that it is not possible with css only. Here is one example for a possible solution:
Controller Class:
package sample;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.Pane;
import java.net.URL;
import java.util.ResourceBundle;
public class Controller implements Initializable {
#FXML
private FlowPane rootFlowPane;
#Override
public void initialize(URL location, ResourceBundle resources) {
for (int i = 0; i < rootFlowPane.getChildren().size(); i++) {
Node node = rootFlowPane.getChildren().get(i);
if (node instanceof Pane) {
Pane pane = (Pane) node;
String style = "-fx-background-color: rgba(255, 255, 255, %s); -fx-background-radius: 5; -fx-border-color: grey;";
if (i == 0)
pane.setStyle(String.format(style, "0"));
else if (i == 1)
pane.setStyle(String.format(style, "0.05"));
else if (i == 2)
pane.setStyle(String.format(style, "0.07"));
else if (i >= 100)
pane.setStyle(String.format(style, "1"));
else {
String transparency = String.format("%.2f", (i + 5) / 100.0).replace(",", ".");
pane.setStyle(String.format(style, transparency));
}
}
}
}
}
FXML File:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.Pane?>
<FlowPane fx:id="rootFlowPane" hgap="20.0" prefHeight="460.0" prefWidth="460.0" style="-fx-background-color: #121212;" vgap="20.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
<Pane prefHeight="200.0" prefWidth="200.0" />
<Pane prefHeight="200.0" prefWidth="200.0" />
<Pane prefHeight="200.0" prefWidth="200.0" />
<Pane prefHeight="200.0" prefWidth="200.0" />
</children>
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
</FlowPane>
Preview:
I run a JavaFX program in IDEA on Ubuntu. The window, first, locates on the left-top of the screen, and then I see a jump of the window to a center. How can I handle this?
I've tried different methods of Stage, but it didn't help.
start method
#Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("View/MainMenuView.fxml"));
primaryStage.setTitle("Flash Cards");
primaryStage.setScene(new Scene(root, 800, 600));
primaryStage.setResizable(false);
primaryStage.show();
}
MainMenuView.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controllers.MainMenuController">
<children>
<Pane fx:id="mainMenu" prefHeight="600.0" prefWidth="800.0">
<children>
<Text layoutX="233.0" layoutY="116.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Flash Cards v1" textAlignment="CENTER" wrappingWidth="333.419921875">
<font>
<Font size="37.0" />
</font>
</Text>
<Button fx:id="trainingButton" layoutX="314.0" layoutY="225.0" mnemonicParsing="false" prefHeight="75.0" prefWidth="172.0" style="-fx-background-color: #fff; -fx-border-color: #000; -fx-border-width: 2;" text="Training">
<cursor>
<Cursor fx:constant="OPEN_HAND" />
</cursor>
</Button>
<Button fx:id="addNewWordButton" layoutX="314.0" layoutY="325.0" mnemonicParsing="false" prefHeight="75.0" prefWidth="172.0" style="-fx-background-color: #fff; -fx-border-color: #000; -fx-border-width: 2;" text="Add a new word">
<cursor>
<Cursor fx:constant="OPEN_HAND" />
</cursor>
</Button>
</children>
</Pane>
</children>
</AnchorPane>
I just want the window be in a center immediately when my program starts.
This is a bug in JavaFX itself. A workaround for until it is fixed is to do this:
primaryStage.show();
primaryStage.centerOnScreen();
You need to call centerOnScreen() immediately after show() to prevent it from showing up in the corner.
TextArea will not display any information whatsoever. My goal is to display user input from TextField into TextArea. Here is my controller file:
package application.controller;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
public class MainController implements EventHandler<ActionEvent>{
#FXML
TextField starshipname;
TextArea shipInfo = new TextArea();
Button shipEnter;
#Override
public void handle( ActionEvent event) {
shipInfo.appendText(starshipname.getText());
}
I have looked at other posts similar to my issue, but none of them resolve what's going on. I have tried several things like, shipInfo.setText("test"), removing the new TextArea(); gives me a NullPointerException error. Ultimately, I want to call another function from the controller to display specific information on TextArea based on the users input. First, I want to make sure I can display on the TextArea at all. Here is my main file:
package application;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;
public class Main extends Application {
public static Stage stage;
#Override
public void start(Stage primaryStage) {
try {
Parent root = FXMLLoader.load(getClass().getResource("../Main.fxml"));
primaryStage.setScene(new Scene(root, 800, 800));
primaryStage.show();
stage = primaryStage;
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
Here is also my Main.fxml file:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane prefHeight="800.0" prefWidth="800.0"
xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="application.controller.MainController">
<children>
<Label alignment="CENTER" prefHeight="179.0" prefWidth="800.0"
text="United Federation of Planets" textAlignment="CENTER">
<font>
<Font name="Old English Text MT" size="40.0" />
</font>
</Label>
<Label alignment="CENTER" layoutX="35.0" layoutY="50.0" prefHeight="90.0" prefWidth="93.0" text="O">
<font>
<Font name="Old English Text MT" size="96.0" />
</font>
</Label>
<Label alignment="CENTER" layoutX="7.0" prefHeight="111.0" prefWidth="93.0" text="O">
<font>
<Font name="Old English Text MT" size="96.0" />
</font></Label>
<Label layoutX="81.0" layoutY="-6.0" text="O">
<font>
<Font name="Old English Text MT" size="96.0" />
</font>
</Label>
<Label layoutX="217.0" layoutY="179.0" text="Enter a starship name to view personnel:">
<font>
<Font name="Centaur" size="25.0" />
</font>
</Label>
<TextField fx:id="starshipname" layoutX="257.0" layoutY="223.0" prefHeight="0.0" prefWidth="275.0">
<font>
<Font name="Centaur" size="18.0" />
</font>
</TextField>
<Button fx:id="shipEnter" layoutX="360.0" layoutY="278.0" mnemonicParsing="false" onAction="#handle" prefHeight="36.0" prefWidth="82.0" text="Submit">
<font>
<Font name="Centaur" size="17.0" />
</font>
<effect>
<DropShadow blurType="TWO_PASS_BOX">
<input>
<InnerShadow />
</input>
</DropShadow>
</effect>
</Button>
<TextArea fx:id="shipInfo" editable="false" layoutX="54.0" layoutY="330.0" prefHeight="409.0" prefWidth="692.0">
<font>
<Font name="Centaur" size="18.0" />
</font>
</TextArea>
</children>
<opaqueInsets>
<Insets />
</opaqueInsets>
</AnchorPane>
Any help is greatly appreciated.
So the Button look normal when the program starts but If the decrease the size the window with my cursor horizontally or vertically, the buttons shrink to a smaller size.
Code
FXML File
<?import java.lang.*?>
<?import java.net.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.*?>
<?import java.net.URL?>
<VBox fx:id="OptionMenuLayout" alignment="TOP_CENTER" spacing="15" prefWidth="1366" prefHeight="768" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.40" fx:controller="millionairetriviagame.OptionscreenController">
<stylesheets>
<URL value="#BackgroundImages.css" />
</stylesheets>
<stylesheets>
<URL value="#ButtonLayout.css" />
</stylesheets>
<children>
<ImageView fitHeight="300" fitWidth="300" smooth="true" >
<image>
<Image url="#ImageFiles/MillionaireLogo1.png" />
</image>
</ImageView>
<Label style="-fx-font-style: Italic;" text="Click to Change the Background Color" textFill="white">
<font>
<javafx.scene.text.Font name="sans-serif" size="20" />
</font>
</Label>
<HBox alignment="CENTER" spacing="200">
<children>
<Button id="SmallBlueBackground1" fx:id="optionButton1" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
<Button id="SmallBlueBackground2" fx:id="optionButton2" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
<Button id="SmallBlueBackground3" fx:id="optionButton3" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
</children>
</HBox>
<Region prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
<HBox alignment="BOTTOM_RIGHT" spacing="10">
<children>
<Button fx:id="backToMain" onAction="#goToTheMainMenu" prefHeight="30" prefWidth="200" id="ButtonLayout" text="Back to the Main Menu">
<shape>
<javafx.scene.shape.Rectangle arcHeight="30" arcWidth="30" height="30" width="200" />
</shape>
</Button>
</children>
</HBox>
</children>
</VBox>
Here is a screenshot: Note that I resized the screen with my cursor to show this as this is right not the size of the screen
As you can see, the buttons are not their regular size.
Here is the CSS file(if need be) associated with the 3 main buttons that you see in the screenshot
#BlueBackground1
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor.jpg");
-fx-smooth: true;
-fx-background-position: center center;
}
#BlueBackground2
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor2.jpg");
-fx-smooth: true;
-fx-background-position: center center;
}
#BlueBackground3
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor3.jpg");
-fx-smooth: true;
-fx-background-position: center center;
}
#SmallBlueBackground1
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor.jpg");
-fx-background-repeat: stretch;
-fx-background-size: 80 50;
-fx-background-position: center center;
-fx-background-insets: 0, 0, 0, 0;
-fx-border-color: black;
-fx-border-width: 3;
-fx-border-style: solid;
-fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0);
}
#SmallBlueBackground2
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor2.jpg");
-fx-background-repeat: stretch;
-fx-background-size: 80 50;
-fx-background-position: center center;
-fx-background-insets: 0, 0, 0, 0;
-fx-border-color: black;
-fx-border-width: 3;
-fx-border-style: solid;
-fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0);
}
#SmallBlueBackground3
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor3.jpg");
-fx-background-repeat: stretch;
-fx-background-size: 80 50;
-fx-background-position: center center;
-fx-background-insets: 0, 0, 0, 0;
-fx-border-color: black;
-fx-border-width: 3;
-fx-border-style: solid;
-fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0);
}
If you want to have dynamic dimensions you shouldn't use min/pref/max size. Instead you should use proper layout containers. For your example you could use e. g. a
VBox for the entire screen
a top and a bottom Stackpane in that VBox
a GridPane in the bottom Stackpane for the buttons
and let the button dimensions be computed.
Something like this:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
<children>
<StackPane VBox.vgrow="ALWAYS" />
<StackPane VBox.vgrow="ALWAYS">
<children>
<GridPane hgap="10.0" vgap="10.0">
<columnConstraints>
<ColumnConstraints hgrow="ALWAYS" />
<ColumnConstraints hgrow="ALWAYS" />
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="ALWAYS" />
<RowConstraints vgrow="ALWAYS" />
</rowConstraints>
<children>
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.hgrow="ALWAYS" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" />
</children>
<StackPane.margin>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</StackPane.margin>
</GridPane>
</children>
</StackPane>
</children>
</VBox>
Note: The "1.7976931348623157E308" values are MAX_VALUE in scene builder.
Set min size on the button like pref size. That should work.
#edit: And you could set the resizable attribute to false