1

I've created a GUI in JavaFX using SceneBuilder that works perfectly in windowed mode. It looks like this;

enter image description here

What I would like to do is run the program maximised (not full screen) and ideally have the elements resize according to whether the stage is maximised or not. This is what the GUI looks like when the program is maximised;

enter image description here

As you can see for some bizzare reason the table does "scale" however none of the other elements do. Is there a setting in SceneBuilder I can use that makes the elements fluid?

FXML code for displayed page;

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

<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.GridPane?>

<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" onKeyPressed="#handleRefresh" prefHeight="634.0" prefWidth="602.0" stylesheets="@Style.css" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <TableView fx:id="tView" layoutX="20.0" layoutY="159.0" onKeyPressed="#handleRefresh" prefHeight="389.0" prefWidth="601.0" AnchorPane.bottomAnchor="86.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="31.0" AnchorPane.topAnchor="159.0">
        <columns>
          <TableColumn fx:id="caseNumCol" prefWidth="75.0" text="CaseNO" />
          <TableColumn fx:id="caseNotesCol" prefWidth="75.0" text="Case Notes" />
            <TableColumn fx:id="dateCreatedCol" prefWidth="75.0" text="Date Created" />
            <TableColumn fx:id="deadlineDateCol" prefWidth="75.0" text="Deadline" />
            <TableColumn fx:id="priorityCol" prefWidth="75.0" text="Priority" />
            <TableColumn fx:id="completedCol" prefWidth="75.0" text="Completed" />
        </columns>
         <columnResizePolicy>
            <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
         </columnResizePolicy>
      </TableView>
      <Button layoutX="66.0" layoutY="559.0" mnemonicParsing="false" onAction="#handleAddButtonAction" prefHeight="25.0" prefWidth="79.0" text="Add Job" />
      <Button layoutX="322.0" layoutY="559.0" mnemonicParsing="false" onAction="#handleDeleteButtonAction" prefHeight="25.0" prefWidth="79.0" text="Delete Job" />
      <Label layoutX="14.0" layoutY="6.0" prefHeight="58.0" prefWidth="245.0" text="SDC Job Manager">
         <font>
            <Font name="System Bold" size="28.0" />
         </font>
      </Label>
      <Line endX="500" layoutX="101.0" layoutY="72.0" startX="-100.0" />
      <Label fx:id="adamLabel" alignment="CENTER" layoutX="153.0" layoutY="98.0" prefHeight="30.0" prefWidth="295.0" text="Adam's Jobs" visible="false">
         <font>
            <Font size="24.0" />
         </font>
      </Label>
      <Label fx:id="kitLabel" alignment="CENTER" layoutX="153.0" layoutY="98.0" prefHeight="30.0" prefWidth="295.0" text="Kit's Jobs" visible="false">
         <font>
            <Font size="24.0" />
         </font>
      </Label>
      <Label fx:id="userLabel" layoutX="428.0" layoutY="24.0" prefHeight="20.0" prefWidth="162.0">
         <font>
            <Font name="System Bold" size="14.0" />
         </font>
      </Label>
      <Button layoutX="197.0" layoutY="559.0" mnemonicParsing="false" onAction="#handleUpdateButtonAction" prefHeight="25.0" prefWidth="79.0" text="Update Job" />
      <Label layoutX="20.0" layoutY="90.0" prefHeight="17.0" prefWidth="107.0" text="Press F5 To Refresh" />
      <Button layoutX="447.0" layoutY="559.0" mnemonicParsing="false" onAction="#handleBackButtonAction" prefHeight="25.0" prefWidth="79.0" text="Back" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="447.0" AnchorPane.rightAnchor="76.0" AnchorPane.topAnchor="559.0" />
   </children>
</AnchorPane>

EDIT: I am using an AnchorPane as a layout, added FXML code for clarity.

jbanks
  • 163
  • 1
  • 6
  • 17
  • Are you using any layouts, containers? Or you just put controls on canvas? Check this site: https://docs.oracle.com/javafx/2/layout/builtin_layouts.htm – dreamsComeTrue Sep 08 '15 at 08:51
  • @dreamsComeTrue Sorry I should add I am using an AnchorPane. – jbanks Sep 08 '15 at 08:53
  • OK, so what you need to do is to NEST containers inside containers - single AnchorPane is not enough. Try putting for example a row of buttons in HBox and then nest this box inside AnchorPane, and so on. For the top part of your window, I suggest also use AnchorPane, put your labels in there, and contain this AnchorPane in parent AnchorPane – dreamsComeTrue Sep 08 '15 at 08:55
  • Can you try using the scaling function by right clicking on the title bar? – Ryan Fung Sep 08 '15 at 08:56
  • Post your code if you want some help. We cannot guess what you have done. It's most probably that elements are not added correctly to layouts – Adel Boutros Sep 08 '15 at 09:00
  • @dreamsComeTrue you would suggest having the four buttons a HBox, in the AnchorPane then? How would I then resolve the issue of the elements not resizing properly? – jbanks Sep 08 '15 at 09:03
  • Do you want these buttons to stay at fixed space between them, or resize accordingly to the screen size? using HBox will give you fixed spacing, using GridPane - would arrange them in....well - grid-like layout, which offsets buttons of each other according to the window size. – dreamsComeTrue Sep 08 '15 at 09:04
  • Resize accordingly whilst keeping the correct distance between them preferrably. – jbanks Sep 08 '15 at 09:05
  • Then look at GridPane - it will fills all your needs (also - it's the most advanced layout in JFX :) – dreamsComeTrue Sep 08 '15 at 09:07
  • @dreamsComeTrue My issue is that in SceneBuilder you can choose which screen size to develop in, however how do the elements resize according to the users resolution? Users of my program all have different screen resolutions, so how do I make the entire GUI fluid when maximising the program? – jbanks Sep 08 '15 at 10:58
  • That's where ColumnConstraints and RowConstraints and Percentage Sizing comes int play. Check out documentation: https://docs.oracle.com/javafx/2/api/javafx/scene/layout/GridPane.html - it's not as easy in SceneBuilder as in plain Java code so you would need to add a little logic to steer layout resizing. Remember that you are sizing artificial cells in this grid - it's content will always behave according to cell rules, so i.e: when you set column to 50% width, and put one button in there, button's width will always take 50% of parent layout. – dreamsComeTrue Sep 08 '15 at 11:29
  • 2
    I recommend reading the [tutorial](http://docs.oracle.com/javase/8/javafx/layout-tutorial/builtin_layouts.htm#JFXLY102), which describes each layout pane in detail. I don't know why you say "for some bizarre reason" when describing the behavior you observe. You explicitly hard-code the layout coordinates of the buttons and labels and provide no other constraints: what else do you expect them to do other than always appear at the same coordinates, no matter the screen size? – James_D Sep 08 '15 at 12:20

0 Answers0