perfin/src/main/resources/edit-transaction.fxml

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

<?import com.andrewlalis.perfin.view.component.AccountSelectionBox?>
<?import com.andrewlalis.perfin.view.component.PropertiesPane?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<BorderPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.andrewlalis.perfin.control.EditTransactionController"
>
    <top>
        <Label fx:id="titleLabel" styleClass="large-font,bold-text,std-padding"/>
    </top>
    <center>
        <ScrollPane fitToWidth="true" fitToHeight="true">
            <VBox style="-fx-max-width: 500px;">
                <!-- Basic properties -->
                <PropertiesPane hgap="5" vgap="5" styleClass="std-padding">
                    <columnConstraints>
                        <ColumnConstraints hgrow="NEVER" halignment="LEFT" minWidth="150"/>
                        <ColumnConstraints hgrow="ALWAYS" halignment="RIGHT"/>
                    </columnConstraints>

                    <Label text="Timestamp" labelFor="${timestampField}" styleClass="bold-text"/>
                    <TextField fx:id="timestampField" styleClass="mono-font"/>

                    <Label text="Amount" labelFor="${amountField}" styleClass="bold-text"/>
                    <TextField fx:id="amountField" styleClass="mono-font"/>

                    <Label text="Currency" labelFor="${currencyChoiceBox}" styleClass="bold-text"/>
                    <ChoiceBox fx:id="currencyChoiceBox"/>

                    <Label text="Description" labelFor="${descriptionField}" styleClass="bold-text"/>
                    <TextArea
                            fx:id="descriptionField"
                            styleClass="mono-font"
                            wrapText="true"
                            style="-fx-pref-height: 100px;-fx-min-height: 100px;"
                    />
                </PropertiesPane>

                <!-- Container for linked accounts -->
                <HBox styleClass="std-padding,std-spacing" fx:id="linkedAccountsContainer">
                    <VBox>
                        <Label text="Debited Account" labelFor="${debitAccountSelector}" styleClass="bold-text"/>
                        <AccountSelectionBox fx:id="debitAccountSelector" allowNone="true"/>
                    </VBox>
                    <VBox>
                        <Label text="Credited Account" labelFor="${creditAccountSelector}" styleClass="bold-text"/>
                        <AccountSelectionBox fx:id="creditAccountSelector" allowNone="true"/>
                    </VBox>
                </HBox>
                <!-- Container for attachments -->
                <VBox fx:id="attachmentsVBox" styleClass="std-padding">
                    <Label text="Attachments" styleClass="bold-text"/>
                    <Label text="Attach receipts, invoices, or other content to this transaction." styleClass="small-font" wrapText="true"/>
                    <!-- FileSelectionArea inserted here! -->
                </VBox>

                <!-- Buttons -->
                <Separator/>
                <HBox styleClass="std-padding,std-spacing" alignment="CENTER_RIGHT">
                    <Button text="Save" fx:id="saveButton" onAction="#save"/>
                    <Button text="Cancel" onAction="#cancel"/>
                </HBox>
            </VBox>
        </ScrollPane>
    </center>
</BorderPane>