replace welcome dialog

src/main/java/com/sparrowwallet/sparrow/MainApp.java

@@ -3,7 +3,6 @@ package com.sparrowwallet.sparrow;
 import com.beust.jcommander.JCommander;
 import com.sparrowwallet.drongo.Network;
 import com.sparrowwallet.drongo.wallet.Wallet;
-import com.sparrowwallet.sparrow.control.WelcomeDialog;
 import com.sparrowwallet.sparrow.glyphfont.FontAwesome5;
 import com.sparrowwallet.sparrow.glyphfont.FontAwesome5Brands;
 import com.sparrowwallet.sparrow.io.Config;
@@ -52,7 +51,7 @@ public class MainApp extends Application {
         boolean createNewWallet = false;
         Mode mode = Config.get().getMode();
         if(mode == null) {
-            WelcomeDialog welcomeDialog = new WelcomeDialog(getHostServices());
+            WelcomeDialog welcomeDialog = new WelcomeDialog();
             Optional<Mode> optionalMode = welcomeDialog.showAndWait();
             if(optionalMode.isPresent()) {
                 mode = optionalMode.get();

src/main/java/com/sparrowwallet/sparrow/WelcomeController.java

@@ -0,0 +1,130 @@
+package com.sparrowwallet.sparrow;
+
+import com.sparrowwallet.sparrow.control.UnlabeledToggleSwitch;
+import javafx.animation.PauseTransition;
+import javafx.application.Platform;
+import javafx.beans.value.ChangeListener;
+import javafx.beans.value.ObservableValue;
+import javafx.event.ActionEvent;
+import javafx.event.Event;
+import javafx.fxml.FXML;
+import javafx.scene.input.MouseButton;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.VBox;
+import javafx.util.Duration;
+import org.controlsfx.control.StatusBar;
+
+public class WelcomeController {
+    @FXML
+    private VBox welcomeBox;
+
+    @FXML
+    private VBox step1;
+
+    @FXML
+    private VBox step2;
+
+    @FXML
+    private VBox step3;
+
+    @FXML
+    private VBox step4;
+
+    @FXML
+    private StatusBar serverStatus;
+
+    @FXML
+    private UnlabeledToggleSwitch serverToggle;
+
+    public void initializeView() {
+        step1.managedProperty().bind(step1.visibleProperty());
+        step2.managedProperty().bind(step2.visibleProperty());
+        step3.managedProperty().bind(step3.visibleProperty());
+        step4.managedProperty().bind(step4.visibleProperty());
+
+        step2.setVisible(false);
+        step3.setVisible(false);
+        step4.setVisible(false);
+
+        welcomeBox.getStyleClass().add("offline");
+        serverStatus.setText("Offline");
+        serverToggle.selectedProperty().addListener((observable, oldValue, newValue) -> {
+            serverStatus.setText(newValue ? "Connected" : "Offline");
+        });
+    }
+
+    public boolean next() {
+        if(step1.isVisible()) {
+            step1.setVisible(false);
+            step2.setVisible(true);
+            welcomeBox.getStyleClass().clear();
+            welcomeBox.getStyleClass().add("public-electrum");
+            PauseTransition wait = new PauseTransition(Duration.millis(200));
+            wait.setOnFinished((e) -> {
+                serverToggle.setSelected(true);
+                serverStatus.setText("Connected to a Public Server");
+            });
+            wait.play();
+            return true;
+        }
+
+        if(step2.isVisible()) {
+            step2.setVisible(false);
+            step3.setVisible(true);
+            welcomeBox.getStyleClass().clear();
+            welcomeBox.getStyleClass().add("bitcoin-core");
+            serverToggle.setSelected(true);
+            serverStatus.setText("Connected to Bitcoin Core");
+            return true;
+        }
+
+        if(step3.isVisible()) {
+            step3.setVisible(false);
+            step4.setVisible(true);
+            welcomeBox.getStyleClass().clear();
+            welcomeBox.getStyleClass().add("private-electrum");
+            serverToggle.setSelected(true);
+            serverStatus.setText("Connected to a Private Electrum Server");
+        }
+
+        return false;
+    }
+
+    public boolean back() {
+        if(step2.isVisible()) {
+            step2.setVisible(false);
+            step1.setVisible(true);
+            welcomeBox.getStyleClass().clear();
+            welcomeBox.getStyleClass().add("offline");
+            PauseTransition wait = new PauseTransition(Duration.millis(200));
+            wait.setOnFinished((e) -> {
+                serverToggle.setSelected(false);
+                serverStatus.setText("Offline");
+            });
+            wait.play();
+            return false;
+        }
+
+        if(step3.isVisible()) {
+            step3.setVisible(false);
+            step2.setVisible(true);
+            welcomeBox.getStyleClass().clear();
+            welcomeBox.getStyleClass().add("public-electrum");
+            serverToggle.setSelected(true);
+            serverStatus.setText("Connected to a Public Server");
+            return true;
+        }
+
+        if(step4.isVisible()) {
+            step4.setVisible(false);
+            step3.setVisible(true);
+            welcomeBox.getStyleClass().clear();
+            welcomeBox.getStyleClass().add("bitcoin-core");
+            serverToggle.setSelected(true);
+            serverStatus.setText("Connected to Bitcoin Core");
+            return true;
+        }
+
+        return false;
+    }
+}

src/main/java/com/sparrowwallet/sparrow/WelcomeDialog.java

@@ -0,0 +1,69 @@
+package com.sparrowwallet.sparrow;
+
+import javafx.event.ActionEvent;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.control.*;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+
+import java.io.IOException;
+
+public class WelcomeDialog extends Dialog<Mode> {
+    public WelcomeDialog() {
+        final DialogPane dialogPane = getDialogPane();
+        AppServices.setStageIcon(dialogPane.getScene().getWindow());
+
+        try {
+            FXMLLoader welcomeLoader = new FXMLLoader(AppServices.class.getResource("welcome.fxml"));
+            dialogPane.setContent(welcomeLoader.load());
+            WelcomeController welcomeController = welcomeLoader.getController();
+            welcomeController.initializeView();
+
+            dialogPane.setPrefWidth(600);
+            dialogPane.setPrefHeight(520);
+
+            dialogPane.getStylesheets().add(AppServices.class.getResource("welcome.css").toExternalForm());
+
+            final ButtonType nextButtonType = new javafx.scene.control.ButtonType("Next", ButtonBar.ButtonData.OK_DONE);
+            final ButtonType backButtonType = new javafx.scene.control.ButtonType("Back", ButtonBar.ButtonData.LEFT);
+            final ButtonType onlineButtonType = new javafx.scene.control.ButtonType("Configure Server", ButtonBar.ButtonData.APPLY);
+            final ButtonType offlineButtonType = new javafx.scene.control.ButtonType("Later or Offline Mode", ButtonBar.ButtonData.CANCEL_CLOSE);
+            dialogPane.getButtonTypes().addAll(nextButtonType, backButtonType, onlineButtonType, offlineButtonType);
+
+            Button nextButton = (Button)dialogPane.lookupButton(nextButtonType);
+            Button backButton = (Button)dialogPane.lookupButton(backButtonType);
+            Button onlineButton = (Button)dialogPane.lookupButton(onlineButtonType);
+            Button offlineButton = (Button)dialogPane.lookupButton(offlineButtonType);
+
+            nextButton.managedProperty().bind(nextButton.visibleProperty());
+            backButton.managedProperty().bind(backButton.visibleProperty());
+            onlineButton.managedProperty().bind(onlineButton.visibleProperty());
+            offlineButton.managedProperty().bind(offlineButton.visibleProperty());
+
+            backButton.setDisable(true);
+            onlineButton.visibleProperty().bind(nextButton.visibleProperty().not());
+            offlineButton.visibleProperty().bind(nextButton.visibleProperty().not());
+
+            nextButton.addEventFilter(ActionEvent.ACTION, event -> {
+                if(!welcomeController.next()) {
+                    nextButton.setVisible(false);
+                    onlineButton.setDefaultButton(true);
+                }
+                backButton.setDisable(false);
+                event.consume();
+            });
+
+            backButton.addEventFilter(ActionEvent.ACTION, event -> {
+                nextButton.setVisible(true);
+                if(!welcomeController.back()) {
+                    backButton.setDisable(true);
+                }
+                event.consume();
+            });
+
+            setResultConverter(dialogButton -> dialogButton == onlineButtonType ? Mode.ONLINE : Mode.OFFLINE);
+        } catch(IOException e) {
+            throw new RuntimeException(e);
+        }
+    }
+}

src/main/java/com/sparrowwallet/sparrow/control/WelcomeDialog.java

@@ -1,105 +0,0 @@
-package com.sparrowwallet.sparrow.control;
-
-import com.sparrowwallet.sparrow.AppServices;
-import com.sparrowwallet.sparrow.Mode;
-import com.sparrowwallet.sparrow.net.ServerType;
-import javafx.application.HostServices;
-import javafx.geometry.Insets;
-import javafx.scene.control.*;
-import javafx.scene.image.Image;
-import javafx.scene.image.ImageView;
-import javafx.scene.layout.VBox;
-import org.controlsfx.control.StatusBar;
-import org.controlsfx.control.ToggleSwitch;
-
-public class WelcomeDialog extends Dialog<Mode> {
-    private final HostServices hostServices;
-
-    private ServerType serverType = ServerType.ELECTRUM_SERVER;
-
-    public WelcomeDialog(HostServices services) {
-        this.hostServices = services;
-
-        final DialogPane dialogPane = getDialogPane();
-
-        setTitle("Welcome to Sparrow");
-        dialogPane.setHeaderText("Welcome to Sparrow!");
-        dialogPane.getStylesheets().add(AppServices.class.getResource("app.css").toExternalForm());
-        dialogPane.getStylesheets().add(AppServices.class.getResource("general.css").toExternalForm());
-        AppServices.setStageIcon(dialogPane.getScene().getWindow());
-        dialogPane.setPrefWidth(600);
-        dialogPane.setPrefHeight(520);
-
-        Image image = new Image("image/sparrow-small.png", 50, 50, false, false);
-        if (!image.isError()) {
-            ImageView imageView = new ImageView();
-            imageView.setSmooth(false);
-            imageView.setImage(image);
-            dialogPane.setGraphic(imageView);
-        }
-
-        final ButtonType onlineButtonType = new javafx.scene.control.ButtonType("Configure Server", ButtonBar.ButtonData.OK_DONE);
-        final ButtonType offlineButtonType = new javafx.scene.control.ButtonType("Later or Offline Mode", ButtonBar.ButtonData.CANCEL_CLOSE);
-        dialogPane.getButtonTypes().addAll(onlineButtonType, offlineButtonType);
-
-        final VBox content = new VBox(20);
-        content.setPadding(new Insets(20, 20, 20, 20));
-        content.getChildren().add(createParagraph("Sparrow can operate in both an online and offline mode. In the online mode it connects to your Bitcoin Core node or Electrum server to display transaction history. In the offline mode it is useful as a transaction editor and as an airgapped multisig coordinator."));
-        content.getChildren().add(createParagraph("Connecting Sparrow to your Bitcoin Core node ensures your privacy, while connecting Sparrow to your own Electrum server ensures wallets load quicker, you have access to a full blockchain explorer, and your public keys are always encrypted on disk. Examples of Electrum servers include ElectrumX and electrs."));
-        content.getChildren().add(createParagraph("Sparrow can also be configured to connect to a public Electrum server, but be aware that this configuration means that server can see your transactions."));
-        content.getChildren().add(createParagraph("You can change your mode at any time using the toggle in the status bar. A blue toggle indicates you are connected to an Electrum server, while a green toggle indicates you are connected to a Bitcoin Code node, and a yellow toggle means you are using a public server."));
-        content.getChildren().add(createStatusBar(onlineButtonType, offlineButtonType));
-
-        dialogPane.setContent(content);
-
-        setResultConverter(dialogButton -> dialogButton == onlineButtonType ? Mode.ONLINE : Mode.OFFLINE);
-    }
-
-    private Label createParagraph(String text) {
-        Label label = new Label(text);
-        label.setWrapText(true);
-
-        return label;
-    }
-
-    private StatusBar createStatusBar(ButtonType onlineButtonType, ButtonType offlineButtonType) {
-        StatusBar statusBar = new StatusBar();
-        statusBar.setText("Online Mode");
-        statusBar.getRightItems().add(createToggle(statusBar, onlineButtonType, offlineButtonType));
-
-        return statusBar;
-    }
-
-    private ToggleSwitch createToggle(StatusBar statusBar, ButtonType onlineButtonType, ButtonType offlineButtonType) {
-        ToggleSwitch toggleSwitch = new UnlabeledToggleSwitch();
-        toggleSwitch.setStyle("-fx-padding: 1px 0 0 0");
-
-        toggleSwitch.selectedProperty().addListener((observable, oldValue, newValue) -> {
-            Button onlineButton = (Button) getDialogPane().lookupButton(onlineButtonType);
-            onlineButton.setDefaultButton(newValue);
-            Button offlineButton = (Button) getDialogPane().lookupButton(offlineButtonType);
-            offlineButton.setDefaultButton(!newValue);
-
-            if(!newValue) {
-                serverType = (serverType == ServerType.BITCOIN_CORE ? ServerType.PUBLIC_ELECTRUM_SERVER : (serverType == ServerType.PUBLIC_ELECTRUM_SERVER ? ServerType.ELECTRUM_SERVER : ServerType.BITCOIN_CORE));
-
-                if(serverType == ServerType.PUBLIC_ELECTRUM_SERVER && !toggleSwitch.getStyleClass().contains("public-server")) {
-                    toggleSwitch.getStyleClass().add("public-server");
-                } else {
-                    toggleSwitch.getStyleClass().remove("public-server");
-                }
-
-                if(serverType == ServerType.BITCOIN_CORE && !toggleSwitch.getStyleClass().contains("core-server")) {
-                    toggleSwitch.getStyleClass().add("core-server");
-                } else {
-                    toggleSwitch.getStyleClass().remove("core-server");
-                }
-            }
-
-            statusBar.setText(newValue ? "Online Mode: " + serverType.getName() : "Offline Mode");
-        });
-
-        toggleSwitch.setSelected(true);
-        return toggleSwitch;
-    }
-}

src/main/resources/com/sparrowwallet/sparrow/preferences/server.fxml

@@ -38,7 +38,7 @@
                         <ToggleGroup fx:id="serverTypeToggleGroup" />
                     </toggleGroup>
                     <buttons>
-                        <ToggleButton fx:id="publicElectrumToggle" text="Public Electrum" toggleGroup="$serverTypeToggleGroup">
+                        <ToggleButton fx:id="publicElectrumToggle" text="Public Server" toggleGroup="$serverTypeToggleGroup">
                             <graphic>
                                 <Glyph fontFamily="Font Awesome 5 Free Solid" fontSize="12" icon="TOGGLE_ON" styleClass="public-electrum" />
                             </graphic>
@@ -69,20 +69,7 @@
     </Form>
 
     <Form fx:id="publicElectrumForm" GridPane.columnIndex="0" GridPane.rowIndex="1">
-        <Fieldset inputGrow="SOMETIMES" text="Public Electrum Server">
+        <Fieldset inputGrow="SOMETIMES" text="Public Server">
-            <Field text="URL:">
-                <ComboBox fx:id="publicElectrumServer">
-                    <items>
-                        <FXCollections fx:factory="observableArrayList">
-                            <PublicElectrumServer fx:constant="BLOCKSTREAM_INFO" />
-                            <PublicElectrumServer fx:constant="ELECTRUM_BLOCKSTREAM_INFO" />
-                            <PublicElectrumServer fx:constant="LUKECHILDS_CO" />
-                            <PublicElectrumServer fx:constant="EMZY_DE" />
-                            <PublicElectrumServer fx:constant="BITAROO_NET" />
-                        </FXCollections>
-                    </items>
-                </ComboBox>
-            </Field>
             <Field text="">
                 <Label alignment="CENTER" translateY="-1">
                     <graphic>
@@ -97,6 +84,19 @@
             <Field text="">
                 <CopyableLabel text="Using a public server means it can see your transactions."/>
             </Field>
+            <Field text="URL:">
+                <ComboBox fx:id="publicElectrumServer">
+                    <items>
+                        <FXCollections fx:factory="observableArrayList">
+                            <PublicElectrumServer fx:constant="BLOCKSTREAM_INFO" />
+                            <PublicElectrumServer fx:constant="ELECTRUM_BLOCKSTREAM_INFO" />
+                            <PublicElectrumServer fx:constant="LUKECHILDS_CO" />
+                            <PublicElectrumServer fx:constant="EMZY_DE" />
+                            <PublicElectrumServer fx:constant="BITAROO_NET" />
+                        </FXCollections>
+                    </items>
+                </ComboBox>
+            </Field>
             <Field text="Use Proxy:">
                 <UnlabeledToggleSwitch fx:id="publicUseProxy"/>
             </Field>

src/main/resources/com/sparrowwallet/sparrow/welcome.css

@@ -0,0 +1,64 @@
+.welcome-pane {
+    -fx-padding: 0;
+}
+
+.title-area {
+    -fx-background-color: -fx-control-inner-background;
+    -fx-padding: 10 25 10 25;
+    -fx-border-width: 0px 0px 1px 0px;
+    -fx-border-color: #e5e5e6;
+}
+
+#welcomeBox, .button-bar {
+    -fx-padding: 10 25 25 25;
+}
+
+.button-bar .container {
+    -fx-padding: 0 0 15px 0;
+}
+
+.title-label {
+    -fx-font-size: 24px;
+}
+
+.title-text {
+    -fx-font-size: 20px;
+    -fx-padding: 0 0 15px 0;
+    -fx-graphic-text-gap: 10px;
+}
+
+.content-text {
+    -fx-font-size: 16px;
+    -fx-text-fill: derive(-fx-text-base-color, 15%);
+}
+
+.offline .title-icon {
+    -fx-text-fill: linear-gradient(to bottom, derive(-fx-text-base-color, 30%), -fx-text-base-color);
+}
+
+.public-electrum .title-icon {
+    -fx-text-fill: linear-gradient(to bottom, derive(rgb(238, 210, 2), 30%), rgb(238, 210, 2));
+}
+
+.bitcoin-core .title-icon {
+    -fx-text-fill: linear-gradient(to bottom, derive(#50a14f, 30%), #50a14f);
+}
+
+.private-electrum .title-icon {
+    -fx-text-fill: linear-gradient(to bottom, derive(#0b99c9, 30%), #0b99c9);
+}
+
+.public-electrum .toggle-switch:selected .thumb-area, .offline .toggle-switch:selected .thumb-area {
+    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)), linear-gradient(to bottom, derive(gold, 30%), gold);
+    -fx-background-insets: 0, 1;
+}
+
+.bitcoin-core .toggle-switch:selected .thumb-area {
+    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)), linear-gradient(to bottom, derive(#50a14f, 30%), #50a14f);
+    -fx-background-insets: 0, 1;
+}
+
+.private-electrum .toggle-switch:selected .thumb-area {
+    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)), linear-gradient(to bottom, derive(#0b99c9, 30%), #0b99c9);
+    -fx-background-insets: 0, 1;
+}

src/main/resources/com/sparrowwallet/sparrow/welcome.fxml

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import java.lang.*?>
+<?import java.util.*?>
+<?import javafx.scene.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+
+<?import org.controlsfx.control.StatusBar?>
+<?import com.sparrowwallet.sparrow.control.UnlabeledToggleSwitch?>
+<?import org.controlsfx.glyphfont.Glyph?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.image.Image?>
+<StackPane prefHeight="460.0" prefWidth="600.0" stylesheets="@welcome.css, @general.css" styleClass="welcome-pane" fx:controller="com.sparrowwallet.sparrow.WelcomeController" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml">
+    <VBox spacing="20">
+        <HBox styleClass="title-area">
+            <HBox alignment="CENTER_LEFT">
+                <Label fx:id="title" text="Welcome to Sparrow" styleClass="title-label" />
+            </HBox>
+            <Region HBox.hgrow="ALWAYS"/>
+            <ImageView AnchorPane.rightAnchor="0">
+                <Image url="/image/sparrow-small.png" requestedWidth="50" requestedHeight="50" smooth="false" />
+            </ImageView>
+        </HBox>
+        <VBox fx:id="welcomeBox" styleClass="content-area" spacing="20" prefHeight="350">
+            <VBox fx:id="step1" spacing="15">
+                <Label text="Introduction" styleClass="title-text">
+                    <graphic>
+                        <Glyph fontFamily="Font Awesome 5 Free Solid" fontSize="20" icon="TOGGLE_OFF" styleClass="title-icon" />
+                    </graphic>
+                </Label>
+                <Label text="Sparrow is a Bitcoin wallet with a focus on security and usability." wrapText="true" styleClass="content-text" />
+                <Label text="Sparrow can operate in both an online and offline mode. In the online mode it connects to a server to display transaction history. In the offline mode it is useful as a transaction editor and as an airgapped multisig coordinator." wrapText="true" styleClass="content-text" />
+                <Label text="The status bar at the bottom displays the current connection status:" wrapText="true" styleClass="content-text" />
+            </VBox>
+            <VBox fx:id="step2" spacing="15">
+                <Label text="Connecting to a Public Server" styleClass="title-text">
+                    <graphic>
+                        <Glyph fontFamily="Font Awesome 5 Free Solid" fontSize="20" icon="TOGGLE_ON" styleClass="title-icon" />
+                    </graphic>
+                </Label>
+                <Label text="If you are beginning your journey in self custody, or just storing a small amount, the easiest way to connect Sparrow to the Bitcoin blockchain is via one of the preconfigured public Electrum servers. " wrapText="true" styleClass="content-text" />
+                <Label text="However, although Sparrow only connects to servers that have a record of respecting privacy, it is still not ideal as you are sharing your transaction history and balance with them." wrapText="true" styleClass="content-text" />
+                <Label text="A yellow toggle means you are connected to a public server." wrapText="true" styleClass="content-text" />
+            </VBox>
+            <VBox fx:id="step3" spacing="15">
+                <Label text="Connecting to a Bitcoin Core node" styleClass="title-text">
+                    <graphic>
+                        <Glyph fontFamily="Font Awesome 5 Free Solid" fontSize="20" icon="TOGGLE_ON" styleClass="title-icon" />
+                    </graphic>
+                </Label>
+                <Label text="If you are running your own Bitcoin Core node, you can configure Sparrow to connect to it directly. " wrapText="true" styleClass="content-text" />
+                <Label text="This means you are not sharing your transaction data, but be aware Bitcoin Core stores your balance, transactions and public keys unencrypted on that node, which is not ideal for true cold storage." wrapText="true" styleClass="content-text" />
+                <Label text="A green toggle means you are connected to a Bitcoin Core node." wrapText="true" styleClass="content-text" />
+            </VBox>
+            <VBox fx:id="step4" spacing="15">
+                <Label text="Connecting to a Private Electrum Server" styleClass="title-text">
+                    <graphic>
+                        <Glyph fontFamily="Font Awesome 5 Free Solid" fontSize="20" icon="TOGGLE_ON" styleClass="title-icon" />
+                    </graphic>
+                </Label>
+                <Label text="The most private way to connect is to your own Electrum server, which runs alongside your Bitcoin Core node." wrapText="true" styleClass="content-text" />
+                <Label text="Because these servers index all Bitcoin transactions equally, your wallet transactions are never stored on the server in an identifiable way, and your server forgets your requests immediately after serving them." wrapText="true" styleClass="content-text" />
+                <Label text="A blue toggle means you are connected to a private Electrum server." wrapText="true" styleClass="content-text" />
+                <Label text="You're now ready to configure a server and start using Sparrow!" wrapText="true" styleClass="content-text" />
+            </VBox>
+            <Region VBox.vgrow="ALWAYS" />
+            <StatusBar fx:id="serverStatus">
+                <rightItems>
+                    <UnlabeledToggleSwitch fx:id="serverToggle" />
+                </rightItems>
+            </StatusBar>
+        </VBox>
+    </VBox>
+</StackPane>