CODEWITHSUNDEEP
javajavafxnetbeansfxml
Roger
Roger

Reputation: 597

display issue between running program with netbeans and scene-builder

I am facing a display issue where in my scene-builder output looks different from my actual output when running the program. Here is an example: on the left is the one from scene-builder and on the right is the one from running the program on netbeans. The one from scene-builder(left image) has equal sides based on the black squares. On the other hand, the one from netbeans (right image) has unequal sides based on the black box. It is also clearly visible that the right image is bigger in size then the left image. How can I fix this? How can I display the right image so that both sides are equal? Why does it display differently when running it on netbeans?

Image: enter image description here

Attached you may also find the fxml code:

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

<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXPasswordField?>
<?import com.jfoenix.controls.JFXTextField?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import java.lang.String?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<AnchorPane id="AnchorPane" prefHeight="439.0" prefWidth="300.0" styleClass="darkBackground" stylesheets="@../../resources/css/Consolidated.css" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="gui.controllers.LoginController">
   <children>
      <Pane prefHeight="148.0" prefWidth="300.0" styleClass="loginPaneBackground" AnchorPane.bottomAnchor="291.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <Label fx:id="isConnected" alignment="CENTER" contentDisplay="CENTER" layoutX="25.0" layoutY="96.0" prefHeight="38.0" prefWidth="273.0" stylesheets="@../../resources/css/Consolidated.css" text="Login" textAlignment="CENTER" textFill="WHITE">
               <font>
                  <Font name="Roboto Regular" size="24.0" />
               </font>
               <styleClass>
                  <String fx:value="robotBold" />
                  <String fx:value="loginLabel" />
               </styleClass>
            </Label>
            <ImageView fitHeight="70.0" fitWidth="70.0" layoutX="126.0" layoutY="14.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../../resources/imgs/login_img.png" />
               </image>
            </ImageView>
         </children>
      </Pane>
      <VBox layoutX="6.0" layoutY="173.0" prefHeight="266.0" prefWidth="300.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
         <children>
            <HBox>
               <children>
                  <FontAwesomeIconView fill="WHITE" glyphName="USER" size="30" styleClass="icon_color">
                     <HBox.margin>
                        <Insets left="20.0" right="20.0" />
                     </HBox.margin>
                  </FontAwesomeIconView>
                  <JFXTextField fx:id="txtUsername" focusColor="#03a9f4" labelFloat="true" prefHeight="25.0" prefWidth="175.0" promptText="Username" stylesheets="@../../resources/css/Consolidated.css" unFocusColor="#bdbdbd">
                     <font>
                        <Font name="Century Gothic" size="12.0" />
                     </font>
                     <styleClass>
                        <String fx:value="txtFields" />
                        <String fx:value="robotReg" />
                     </styleClass>
                     <HBox.margin>
                        <Insets left="20.0" right="20.0" />
                     </HBox.margin>
                  </JFXTextField>
               </children>
               <VBox.margin>
                  <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
               </VBox.margin>
            </HBox>
            <HBox>
               <children>
                  <FontAwesomeIconView fill="WHITE" glyphName="LOCK" size="30" styleClass="icon_color">
                     <HBox.margin>
                        <Insets left="20.0" right="20.0" />
                     </HBox.margin>
                  </FontAwesomeIconView>
                  <JFXPasswordField fx:id="txtPassword" focusColor="#03a9f4" labelFloat="true" prefHeight="23.0" prefWidth="175.0" promptText="Password" stylesheets="@../../resources/css/Consolidated.css" unFocusColor="#bdbdbd">
                     <font>
                        <Font name="Century Gothic Bold" size="12.0" />
                     </font>
                     <HBox.margin>
                        <Insets left="25.0" right="20.0" />
                     </HBox.margin>
                     <styleClass>
                        <String fx:value="txtFields" />
                        <String fx:value="robotReg" />
                     </styleClass>
                  </JFXPasswordField>
               </children>
               <VBox.margin>
                  <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
               </VBox.margin>
            </HBox>
            <HBox>
               <children>
                  <FontAwesomeIconView fill="WHITE" glyphName="GEAR" size="30" styleClass="icon_color">
                     <HBox.margin>
                        <Insets left="18.0" right="20.0" />
                     </HBox.margin>
                  </FontAwesomeIconView>
                  <ComboBox fx:id="comboType" prefHeight="27.0" prefWidth="175.0" promptText="Type" stylesheets="@../../resources/css/Consolidated.css">
                     <styleClass>
                        <String fx:value="comboBox" />
                        <String fx:value="robotReg" />
                     </styleClass>
                     <opaqueInsets>
                        <Insets />
                     </opaqueInsets>
                     <HBox.margin>
                        <Insets left="20.0" right="20.0" />
                     </HBox.margin>
                     <padding>
                        <Insets bottom="3.0" left="-8.0" />
                     </padding>
                  </ComboBox>
               </children>
               <VBox.margin>
                  <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
               </VBox.margin>
            </HBox>
            <HBox prefHeight="38.0" prefWidth="300.0">
               <children>
                  <JFXButton onAction="#Login" prefHeight="38.0" prefWidth="109.0" stylesheets="@../../resources/css/Consolidated.css" text="Login">
                     <styleClass>
                        <String fx:value="btns" />
                        <String fx:value="robotReg" />
                     </styleClass>
                     <HBox.margin>
                        <Insets left="27.25" right="27.25" />
                     </HBox.margin>
                  </JFXButton>
                  <JFXButton onAction="#cancel" prefHeight="38.0" prefWidth="109.0" stylesheets="@../../resources/css/Consolidated.css" text="Cancel">
                     <styleClass>
                        <String fx:value="btns" />
                        <String fx:value="robotReg" />
                     </styleClass>
                     <HBox.margin>
                        <Insets left="27.25" right="27.25" />
                     </HBox.margin>
                  </JFXButton>
               </children>
               <VBox.margin>
                  <Insets top="30.0" />
               </VBox.margin>
            </HBox>
         </children>
      </VBox>
   </children>
</AnchorPane>

Upvotes: 0

Views: 511

Answers (1)

fabian
fabian

Reputation: 82461

You're setting position and size of the Label to absolute sizes in a Pane which means the Label keeps it's top left coordinate but is resized according to it's preferred size.

Instead of doing this you should use a parent layout that does resize it's resizable children, e.g. VBox.
Replace the Pane with something like this:

<VBox alignment="TOP_CENTER" prefHeight="148.0" prefWidth="300.0" styleClass="loginPaneBackground" AnchorPane.bottomAnchor="291.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" spacing="12.0">
   <children>
      <ImageView fitHeight="70.0" fitWidth="70.0" pickOnBounds="true" preserveRatio="true">
          <image>
              <Image url="@../../resources/imgs/login_img.png" />
          </image>
      </ImageView>
      <Label fx:id="isConnected" alignment="CENTER" maxWidth="Infinity"  text="Login" textFill="WHITE">
          <font>
              <Font name="Roboto Regular" size="24.0" />
          </font>
          <styleClass>
              <String fx:value="robotBold" />
              <String fx:value="loginLabel" />
          </styleClass>
       </Label>
   </children>
   <padding>
      <Insets bottom="24.0" top="14.0" />
   </padding>
</VBox>

Upvotes: 1

Related Questions