Stretch Pane when re-sizing window

Question

For some reason both my panes: gas-pumps-header and coffee-house-header won't stretch on window re-size. I'm using JavaFX Scene Builder, and I'm new to JavaFX (in case the answer is pretty basic...)

I want the panes to stretch to the sides (left and right), and fill the entire width of the window.

Here's my FXML

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

<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>

<AnchorPane prefHeight="768.0" prefWidth="1024.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <HBox id="action-buttons-section" alignment="CENTER_LEFT" layoutY="14.0" spacing="5.0" 

AnchorPane.leftAnchor="14.0">
      <children>
        <Button mnemonicParsing="false" text="Add Customer" />
        <Button mnemonicParsing="false" text="Move Customer" />
      </children>
    </HBox>
    <HBox id="fuel-pool-section" alignment="CENTER_LEFT" layoutY="14.0" spacing="5.0" AnchorPane.rightAnchor="16.0">
      <children>
        <Label text="Main Fuel Pool" />
        <ProgressBar prefHeight="20.0" prefWidth="200.0" progress="0.0" />
        <Button mnemonicParsing="false" text="Fill" />
      </children>
    </HBox>
    <VBox alignment="CENTER" spacing="10.0" AnchorPane.bottomAnchor="14.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="44.0">
      <children>
        <VBox alignment="CENTER" spacing="5.0">
          <children>
            <Pane id="gas-pumps-header" prefHeight="100.0" prefWidth="996.0"> <!-- first one -->
              <children>
                <Label layoutX="14.0" layoutY="15.0" text="Gas Pumps">
                  <font>
                    <Font name="System Bold" size="16.0" fx:id="x2" />
                  </font>
                </Label>
                <HBox id="gas-pumps-income-section" alignment="CENTER_RIGHT" layoutX="893.0" layoutY="15.0" spacing="5.0">
                  <children>
                    <Label text="Income">
                      <font>
                        <Font size="14.0" fx:id="x1" />
                      </font>
                    </Label>
                    <Label fx:id="gasPumpsIncomeValue" font="$x1" text="Value" />
                  </children>
                </HBox>
              </children>
            </Pane>
            <HBox id="gas-pumps-section" prefHeight="378.0" prefWidth="996.0" styleClass="layout" VBox.vgrow="ALWAYS">
              <padding>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" fx:id="x3" />
              </padding>
            </HBox>
          </children>
        </VBox>
        <VBox alignment="CENTER" spacing="5.0">
          <children>
            <Pane id="coffee-house-header" prefHeight="100.0" prefWidth="996.0"> <!-- second one -->
              <children>
                <Label font="$x2" layoutX="14.0" layoutY="15.0" text="Coffee House" />
                <HBox id="coffee-house-income-section" alignment="CENTER_RIGHT" layoutX="893.0" layoutY="15.0" spacing="5.0">
                  <children>
                    <Label font="$x1" text="Income" />
                    <Label fx:id="coffeeHouseIncomeValue" font="$x1" text="Value" />
                  </children>
                </HBox>
              </children>
            </Pane>
            <HBox id="coffee-house-section" padding="$x3" prefHeight="378.0" prefWidth="996.0" styleClass="layout" VBox.vgrow="ALWAYS" />
          </children>
        </VBox>
      </children>
    </VBox>
  </children>
  <stylesheets>
    <URL value="@style.css" />
  </stylesheets>
</AnchorPane>

Answer 1

After playing with different kinds of Panes I managed to get it to work.

I used a BorderPane and added the child nodes to the left and right of the BorderPane. Now when I re-size the window every element gets re-positioned to its relative position in the starting layout.

Here is the BorderPane part

<BorderPane id="gas-pumps-header" VBox.vgrow="SOMETIMES">
    <left>
        <Label text="Gas Pumps" BorderPane.alignment="CENTER_LEFT">
            <font>
                <Font name="System Bold" size="16.0" fx:id="x2" />
            </font>
        </Label>
    </left>
    <padding>
        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" fx:id="x3" />
    </padding>
    <right>
        <HBox id="gas-pumps-income-section" alignment="CENTER_RIGHT" spacing="5.0" BorderPane.alignment="CENTER_RIGHT">
            <children>
                <Label text="Income">
                    <font>
                        <Font size="14.0" fx:id="x1" />
                    </font>
                </Label>
                <Label fx:id="gasPumpsIncomeValue" font="$x1" text="Value" />
            </children>
        </HBox>
    </right>              
</BorderPane>

Answer 2

gas-pumps-header already resizes automatically as the application window size changes.

Open your fxml file in SceneBuilder (I used 1.1-b28 on win7), click on the gas-pumps-header pane in the SceneBuilder Hierarchy pane, set the style to -fx-border-color: red; choose SceneBuilder menu item Preview | Show Preview and Window and resize the preview window, you will see the red border of the gas-pumps-header change size as you resize the preview window.

I'm pretty sure the above doesn't help you that much as you probably have some issue with the layout which I can't understand from your question.

In general, I'd recommend using an appropriate subclass of Pane rather than Pane for most layouts as Pane subclasses will do more work for layout work you. Perhaps in your case a HBox would be more appropriate.