Making an AnchorPane scrollable - javafx

Question

Following is the fxml I am using for one of the Javafx forms:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<AnchorPane fx:id="CustomerAddLabel" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="683.0" prefWidth="824.0" style="-fx-background-color: aliceblue; -fx-border-color: black; -fx-border-radius: 5;" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="c195.View_Controller.CustomerScreenController">
<children>
<Label alignment="TOP_CENTER" layoutX="300.0" layoutY="14.0" prefHeight="38.0" prefWidth="226.0" style="-fx-border-color: gray; -fx-border-radius: 5;" text="Customer" textAlignment="CENTER">
<font>
<Font name="System Bold Italic" size="25.0" />
</font>
</Label>
<AnchorPane layoutX="16.0" layoutY="102.0" prefHeight="404.0" prefWidth="363.0" style="-fx-background-color: white;">
<children>
<TableView fx:id="CustomerTable" layoutY="1.0" style="-fx-border-color: black; -fx-border-radius: 5;">
<columns>
<TableColumn fx:id="CustomerIDColumn" prefWidth="63.0" text="ID" />
<TableColumn fx:id="CustomerNameColumn" prefWidth="175.0" text="Customer Name" />
<TableColumn fx:id="CustomerPhoneColumn" prefWidth="123.0" text="Phone" />
<TableColumn fx:id="CustomerAddressColumn" prefWidth="123.0" text="Address" />
<TableColumn fx:id="CustomerPostalCodeColumn" prefWidth="123.0" text="Postal Code" />
<TableColumn fx:id="CustomerDivisionColumn" prefWidth="123.0" text="Division" />
<TableColumn fx:id="CustomerCountryColumn" prefWidth="123.0" text="Country" />
</columns>
</TableView>
</children>
</AnchorPane>
<ButtonBar layoutX="587.0" layoutY="564.0" prefHeight="40.0" prefWidth="200.0">
</ButtonBar>
<ButtonBar layoutX="500.0" layoutY="613.0" prefHeight="40.0" prefWidth="200.0">
<buttons>
<Button fx:id="CustomerBackButton" mnemonicParsing="false" onAction="#CustomerBackButtonHandler" text="Back" />
<Button fx:id="CustomerDeleteButton" mnemonicParsing="false" onAction="#CustomerDeleteButtonHandler" text="Delete" />
</buttons>
</ButtonBar>
<Label fx:id="CustomerLabel" layoutX="542.0" layoutY="52.0" prefHeight="40.0" prefWidth="90.0" textFill="#1924e8">
<font>
<Font name="System Bold Italic" size="20.0" />
</font>
</Label>
</children>
</AnchorPane>
Following is a snippet of the corresponding controller:
public class CustomerScreenController implements Initializable {
#FXML
private TableView<Customer> CustomerTable;
#FXML
private TableColumn<Customer, String> CustomerIDColumn;
#FXML
private TableColumn<Customer, String> CustomerNameColumn;
#FXML
private TableColumn<Customer, String> CustomerPhoneColumn;
#FXML
private TableColumn<Customer, String> CustomerAddressColumn;
#FXML
private TableColumn<Customer, String> CustomerPostalCodeColumn;
#FXML
private TableColumn<Customer, String> CustomerDivisionColumn;
#FXML
private TableColumn<Customer, String> CustomerCountryColumn;
#FXML
private Button CustomerBackButton;
private Parent root;
private Stage stage;
private ObservableList<Customer> customerOL = FXCollections.observableArrayList();
#Override
public void initialize(URL url, ResourceBundle rb) {
PropertyValueFactory<Customer, String> custCustomerIDFactory = new PropertyValueFactory<>("customerID");
PropertyValueFactory<Customer, String> custNameFactory = new PropertyValueFactory<>("customerName");
PropertyValueFactory<Customer, String> custPhoneFactory = new PropertyValueFactory<>("phone"); //String value "CustomerPhone" calls getCustomerPhone method
PropertyValueFactory<Customer, String> custCountryFactory = new PropertyValueFactory<>("country");
PropertyValueFactory<Customer, String> custDivisionFactory = new PropertyValueFactory<>("division");
PropertyValueFactory<Customer, String> custAddressFactory = new PropertyValueFactory<>("address");
PropertyValueFactory<Customer, String> custPostalCodeFactory = new PropertyValueFactory<>("postalCode");
CustomerIDColumn.setCellValueFactory(custCustomerIDFactory);
CustomerNameColumn.setCellValueFactory(custNameFactory);
CustomerPhoneColumn.setCellValueFactory(custPhoneFactory);
CustomerCountryColumn.setCellValueFactory(custCountryFactory);
CustomerDivisionColumn.setCellValueFactory(custDivisionFactory);
CustomerAddressColumn.setCellValueFactory(custAddressFactory);
CustomerPostalCodeColumn.setCellValueFactory(custPostalCodeFactory);
try {
updateCustomerTableView();
} catch (Exception ex) {
ex.printStackTrace();
}
}
}
My UI is appearing like this:
This is appearing cropped. And the full column name Country is not visible. But if I resize it to maximum, then I do see the buttons. How can I make it scrollable? Both the full pane and the TableView inside it so that this issue doesn't appear on the screen.

Answer 1

It looks like you are using AnchorPane incorrectly. I would use VBox or BorderPane. This example uses VBox.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<VBox alignment="TOP_CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="683.0" prefWidth="824.0" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Label alignment="CENTER" prefHeight="38.0" prefWidth="226.0" style="-fx-border-color: gray; -fx-border-radius: 5;" text="Customer" textAlignment="CENTER">
<font>
<Font name="System Bold Italic" size="25.0" />
</font>
<VBox.margin>
<Insets bottom="60.0" top="20.0" />
</VBox.margin>
</Label>
<TableView fx:id="CustomerTable" style="-fx-border-color: black; -fx-border-radius: 5;" VBox.vgrow="ALWAYS">
<columns>
<TableColumn fx:id="CustomerIDColumn" prefWidth="63.0" text="ID" />
<TableColumn fx:id="CustomerNameColumn" prefWidth="175.0" text="Customer Name" />
<TableColumn fx:id="CustomerPhoneColumn" prefWidth="123.0" text="Phone" />
<TableColumn fx:id="CustomerAddressColumn" prefWidth="123.0" text="Address" />
<TableColumn fx:id="CustomerPostalCodeColumn" prefWidth="123.0" text="Postal Code" />
<TableColumn fx:id="CustomerDivisionColumn" prefWidth="123.0" text="Division" />
<TableColumn fx:id="CustomerCountryColumn" prefWidth="123.0" text="Country" />
</columns>
<VBox.margin>
<Insets left="10.0" right="10.0" />
</VBox.margin>
</TableView>
<ButtonBar>
<buttons>
<Button fx:id="CustomerBackButton" mnemonicParsing="false" onAction="#CustomerBackButtonHandler" text="Back" />
<Button fx:id="CustomerDeleteButton" mnemonicParsing="false" onAction="#CustomerDeleteButtonHandler" text="Delete" />
</buttons>
<VBox.margin>
<Insets bottom="20.0" right="20.0" top="20.0" />
</VBox.margin>
</ButtonBar>
</children>
</VBox>