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

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

<?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.CreateTransactionController"
            stylesheets="@style/create-transaction.css"
>
    <center>
        <ScrollPane fitToWidth="true" fitToHeight="true">
            <VBox styleClass="form-container">
                <!-- Basic properties -->
                <VBox>
                    <Label text="Timestamp" labelFor="${timestampField}" styleClass="bold-text"/>
                    <TextField fx:id="timestampField" styleClass="mono-font"/>
                    <Label fx:id="timestampInvalidLabel" text="Invalid timestamp." styleClass="error-text"/>
                    <Label fx:id="timestampFutureLabel" text="Timestamp cannot be in the future." styleClass="error-text"/>
                </VBox>
                <VBox>
                    <Label text="Amount" labelFor="${amountField}" styleClass="bold-text"/>
                    <TextField fx:id="amountField" styleClass="mono-font"/>
                </VBox>
                <VBox>
                    <Label text="Currency" labelFor="${currencyChoiceBox}" styleClass="bold-text"/>
                    <ChoiceBox fx:id="currencyChoiceBox"/>
                </VBox>
                <VBox>
                    <Label text="Description" labelFor="${descriptionField}" styleClass="bold-text"/>
                    <Label text="Maximum of 255 characters." styleClass="small-text"/>
                    <TextArea fx:id="descriptionField" styleClass="mono-font" wrapText="true"/>
                    <Label fx:id="descriptionErrorLabel" styleClass="error-text" wrapText="true"/>
                </VBox>
                <!-- Container for linked accounts -->
                <VBox>
                    <HBox spacing="3">
                        <VBox>
                            <Label text="Debited Account" labelFor="${linkDebitAccountComboBox}" styleClass="bold-text"/>
                            <ComboBox fx:id="linkDebitAccountComboBox">
                                <tooltip><Tooltip text="The account whose assets will increase as a result of this transaction."/></tooltip>
                            </ComboBox>
                        </VBox>
                        <VBox>
                            <Label text="Credited Account" labelFor="${linkCreditAccountComboBox}" styleClass="bold-text"/>
                            <ComboBox fx:id="linkCreditAccountComboBox">
                                <tooltip><Tooltip text="The account whose assets will decrease as a result of this transaction."/></tooltip>
                            </ComboBox>
                        </VBox>
                    </HBox>
                    <Label fx:id="linkedAccountsErrorLabel" styleClass="error-text" wrapText="true"/>
                    <Label
                            text="Every transaction must be linked to one of your accounts. In the case of transfer between accounts, then both the sender and receiver accounts should be linked."
                            styleClass="small-text"
                            style="-fx-min-width: 100px; -fx-min-height: 100px; -fx-alignment: top-left"
                            wrapText="true"
                            VBox.vgrow="NEVER"
                    />
                </VBox>
                <!-- Container for attachments -->
                <VBox>
                    <Label text="Attachments" styleClass="bold-text"/>
                    <Label text="Attach receipts, invoices, or other content to this transaction." styleClass="small-text" wrapText="true"/>
                    <VBox fx:id="selectedFilesVBox" style="-fx-spacing: 3px; -fx-padding: 3px;" VBox.vgrow="NEVER"/>
                    <Label text="No attachments selected." fx:id="noSelectedFilesLabel"/>
                    <Button text="Select attachments" onAction="#selectAttachmentFile"/>
                </VBox>
            </VBox>
        </ScrollPane>
    </center>
    <bottom>
        <HBox styleClass="buttons-container">
            <Button text="Save" onAction="#save"/>
            <Button text="Cancel" onAction="#cancel"/>
        </HBox>
    </bottom>
</BorderPane>