create note application from javafx - javafx

Question

How do I make textarea get user input from the textfield ? How to i control these buttons from the controller and is there any possible way that i can make the textfield act as textarea when the user submit , the user may edit it when click on the textarea to edit?
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxnote.Note2Controller">
<top>
<AnchorPane prefHeight="56.0" prefWidth="600.0" BorderPane.alignment="CENTER">
<children>
<Button fx:id="btn2" layoutX="555.0" layoutY="10.0" mnemonicParsing="false" onMouseClicked="#test" text="x" />
</children>
</AnchorPane>
</top>
<center>
<TextArea prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<BorderPane.margin>
<Insets left="10.0" right="10.0" />
</BorderPane.margin></TextArea>
</center>
<padding>
<Insets bottom="20.0" />
</padding>
<bottom>
<VBox prefHeight="149.0" prefWidth="600.0" BorderPane.alignment="CENTER">
<children>
<TextField prefHeight="111.0" prefWidth="600.0">
<VBox.margin>
<Insets />
</VBox.margin>
</TextField>
<AnchorPane prefHeight="38.0" prefWidth="580.0">
<children>
<Button fx:id="btsub" layoutX="434.0" layoutY="21.0" mnemonicParsing="false" text="submit" />
<Button fx:id="btcl" layoutX="518.0" layoutY="21.0" mnemonicParsing="false" text="clear" />
</children>
</AnchorPane>
</children>
<BorderPane.margin>
<Insets left="10.0" right="10.0" />
</BorderPane.margin>
</VBox>
</bottom>
</BorderPane>

Answer 1

To add actions in the controller for the buttons:
Add the controller class in SceneBuilder
To specify the controller's class check the right side of the SceneBuilder under the tab "Controller" is a text field named "Controller class". Also notice there is a list with all the node that have an "fx-id".
Add fx:id to all the nodes you need in controller
For any component that you need to work with in the controller add an fx:id. For actions check add a method name in the tab "Code" of any component. For example if you want an action for the button "Submit" add the name of the method there in the field "On Action" named "submitPushed"
In the controller's class add all the Nodes with fx:id
For every node you attributed with an fx:id you need to add it as a property in the controller class with the annotation #FXML. For a TextField with the fx:id textSubmit you will ad a property in the controller
#FXML TextField textSubmit
In the controller class define the methods for the actions
For the button named "Submit" with the action "submitPushed" you need to declare the method of the action
#FXML submitPushed(ActionEvent event){
//add code here for what the button should do
}
If you want to add the TextField's content to the TextArea when the button Submit is pushed
#FXML submitPushed(ActionEvent event){
String content=textField.getText();
String contentTextArea = textArea.getText();
textArea.setText(contentTextArea+"\n"+content);
}