ServerListScreen.fxml

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

<!-- Importing necessary JavaFX components -->
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<!-- Importing TableView and TableColumn components for displaying device information -->
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.cell.PropertyValueFactory?>

<!-- The root GridPane element for the server list screen UI -->
<GridPane xmlns="http://javafx.com/javafx/null" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ServerListScreenController">
    <!-- Define column constraints -->
    <columnConstraints>
        <ColumnConstraints hgrow="ALWAYS" />
    </columnConstraints>

    <!-- Define row constraints -->
    <rowConstraints>
        <RowConstraints percentHeight="10" />
        <RowConstraints percentHeight="80" />
        <RowConstraints percentHeight="10" />
    </rowConstraints>

    <children>
        <!-- Label to display "Found Devices" -->
        <Label text="Found Devices :">
            <GridPane.margin>
                <Insets left="20.0" />
            </GridPane.margin>
        </Label>

        <!-- TableView to display list of devices -->
        <TableView fx:id="serverTable" GridPane.rowIndex="1">
            <GridPane.margin>
                <Insets left="20.0" right="20.0" />
            </GridPane.margin>
            <columns>
                <!-- TableColumn for device name -->
                <TableColumn text="Name">
                    <cellValueFactory>
                        <PropertyValueFactory property="deviceName" />
                    </cellValueFactory>
                </TableColumn>
                <!-- TableColumn for device address -->
                <TableColumn text="Address">
                    <cellValueFactory>
                        <PropertyValueFactory property="deviceAddress" />
                    </cellValueFactory>
                </TableColumn>
            </columns>
        </TableView>

        <!-- HBox for buttons at the bottom of the screen -->
        <HBox alignment="CENTER_RIGHT" cache="true" GridPane.rowIndex="2">
            <opaqueInsets>
                <Insets />
            </opaqueInsets>
            <GridPane.margin>
                <Insets left="20.0" right="20.0" />
            </GridPane.margin>
            <children>
                <!-- Refresh button -->
                <Button mnemonicParsing="false" text="Refresh" onAction="#refresh">
                    <HBox.margin>
                        <Insets right="10.0" />
                    </HBox.margin>
                </Button>
                <!-- Connect button -->
                <Button mnemonicParsing="false" text="Connect" defaultButton="true" onAction="#connectToDevice" />
            </children>
        </HBox>
    </children>
</GridPane>