setfullscreen(boolean) in eclipse for the UI designed in scene builder

Question

I'm working on a mini project to create a beatbox application where I used JavaFX as UI and scene builder for the designing tool. While I placed components there I can see that it's not full screen but when I linked that with Eclipse IDE. I set the stage as set fullscreen mode but I having components placed far left but I wanted to align itself.

primaryStage.setMaximized(true);

primaryStage.setMaximized(true);

It has to be automatically aligned but not like it is far left.

enter image description here

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXProgressBar?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

 <VBox prefHeight="400.0" prefWidth="640.0" 
  xmlns="http://javafx.com/javafx/11.0.1" 
  xmlns:fx="http://javafx.com/fxml/1" fx:controller="box.firstcontroller">
 <children>
 <AnchorPane maxHeight="-1.0" maxWidth="-1.0" prefHeight="-1.0" 
 prefWidth="-1.0" style="-fx-background-color: #78909C;" 
 VBox.vgrow="ALWAYS">
  <children>
        <JFXProgressBar layoutX="203.0" layoutY="333.0" />
        <ImageView fitHeight="186.0" fitWidth="164.0" layoutX="53.0" 
  layoutY="94.0" pickOnBounds="true" preserveRatio="true">
           <cursor>
              <Cursor fx:constant="S_RESIZE" />
           </cursor>
           <image>
              <Image url="@../login.png" />
           </image>
        </ImageView>
        <ImageView fitHeight="164.0" fitWidth="151.0" layoutX="410.0" 
  layoutY="101.0" pickOnBounds="true" preserveRatio="true">
           <image>
              <Image url="@../signup.png" />
           </image>
        </ImageView>
        <Label layoutX="251.0" layoutY="36.0" text="BeatBox">
           <font>
              <Font name="Tempus Sans ITC" size="41.0" />
           </font>
        </Label>
        <JFXButton fx:id="signup" buttonType="RAISED" layoutX="68.0" 
     layoutY="314.0" onAction="#signupform" prefHeight="44.0" 
     prefWidth="115.0" ripplerFill="#752f2f" style="-fx-background-color: 
     #ae2121;" text="Sign Up" textFill="#fcfcfcf2">
           <font>
              <Font name="Webdings" size="20.0" />
           </font>
        </JFXButton>
        <JFXButton fx:id="signin" layoutX="428.0" layoutY="312.0" 
      onAction="#signinform" prefHeight="17.0" prefWidth="115.0" style="- 
      fx-background-color: #ae2121;" text="Sign In" textFill="WHITE">
           <font>
              <Font size="20.0" />
           </font>
        </JFXButton>
       </children>
      </AnchorPane>
      </children>
     </VBox>

~

This all depends on what layout panes you're using (ie: `VBox`, `HBox`, etc). Post your FXML if you'd like help sorting that out. What is the layout you want when it's fullscreen? — Zephyr, Mar 30 '19 at 16:19
i used vbox is it okay or can i try other layout panes? @Zephyr — mystica, Mar 30 '19 at 16:36
I'd recommend looking into a few more JavaFX layout tutorials. You actually have all your nodes in an `AnchorPane` within the `VBox`. An `AnchorPane` is meant to have another layout pane as it's child. Perhaps you could try removing the `AnchorPane` and just place the nodes directly in the `VBox`. — Zephyr, Mar 30 '19 at 16:40

Zephyr · Accepted Answer · 2019-03-30T17:05:51.873

You actually have several issues going on. First of all, your root VBox has an AnchorPane as it's child element, which in turn holds the individual nodes.

This leads you to being forced into setting the X/Y coordinates for those nodes manually. This is pretty poorly designed.

Instead, you should use the various layout panes that JavaFX provides to handle laying out the nodes for you.

Here is a very basic example that sort of resembles your layout, and it's fully scalable:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<VBox alignment="TOP_CENTER" spacing="10.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1">
    <padding>
        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
    </padding>
    <children>
        <Label text="BeatBox">
            <font>
                <Font name="Tempus Sans ITC" size="48.0"/>
            </font>
        </Label>
        <HBox alignment="CENTER" spacing="10.0" VBox.vgrow="ALWAYS">
            <children>
                <Button mnemonicParsing="false" text="Sign Up"/>
                <ProgressBar prefWidth="200.0" progress="0.0"/>
                <Button mnemonicParsing="false" text="Sign In"/>
            </children>
        </HBox>
    </children>
</VBox>

Note that I'm using a HBox below the title to layout the buttons horizontally. No need to manually set coordinates or sizes; let JavaFX do the work for you!

The Result:

Scene Builder Heirarchy:

now I can understand it a bit. will u provide the hierarchy screenshot of the scene builder? — mystica, Mar 30 '19 at 17:00
Done. I highly recommend reading the [Working With Layouts](https://docs.oracle.com/javafx/2/layout/builtin_layouts.htm) tutorial by Oracle. It really is incredibly helpful in getting your interfaces just right. — Zephyr, Mar 30 '19 at 17:07

setfullscreen(boolean) in eclipse for the UI designed in scene builder

1 Answers1