javafx fxml form javascript css Example

FXMLDocument.fxml

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

<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<!--<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fxmlexample.FXMLDocumentController">
    <children>
        <Button layoutX="126" layoutY="90" text="Click Me!" onAction="#handleButtonAction" fx:id="button" />
        <Label layoutX="126" layoutY="120" minHeight="16" minWidth="69" fx:id="label" />
    </children>
</AnchorPane>-->
<GridPane fx:controller="fxmlexample.FXMLExampleController" 
          xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" styleClass="root" >

    <padding>
        <Insets top="25" right="25" bottom="10" left="25"/>
    </padding>
    <Text text="Welcome" 
          GridPane.columnIndex="0" GridPane.rowIndex="0"
          GridPane.columnSpan="2"/>

    <Label text="User Name:"
           GridPane.columnIndex="0" GridPane.rowIndex="1"/>

    <TextField 
        GridPane.columnIndex="1" GridPane.rowIndex="1"/>

    <Label text="Password:"
           GridPane.columnIndex="0" GridPane.rowIndex="2"/>

    <PasswordField fx:id="passwordField" 
                   GridPane.columnIndex="1" GridPane.rowIndex="2"/>
    <HBox spacing="10" alignment="bottom_right" 
          GridPane.columnIndex="1" GridPane.rowIndex="4">
        <Button text="Sign In"     
                onAction="handleSubmitButtonAction(event);"/>
    </HBox>

    <Text fx:id="actiontarget"
          GridPane.columnIndex="0" GridPane.columnSpan="2"
          GridPane.halignment="RIGHT" GridPane.rowIndex="6"/>

    <stylesheets>
        <URL value="@Login.css" />
    </stylesheets>

    <Text id="welcome-text" text="Welcome" 
          GridPane.columnIndex="0" GridPane.rowIndex="0" 
          GridPane.columnSpan="2"/>

    <fx:script>
        function handleSubmitButtonAction() {
            actiontarget.setText("Calling the JavaScript");
        }
    </fx:script>
</GridPane>

FXMLDocumentController.java

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package fxmlexample;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.text.Text;
/**
 *
 * @author L
 */
public class FXMLExampleController {
    @FXML private Text actiontarget;

    @FXML protected void handleSubmitButtonAction(ActionEvent event) {
        actiontarget.setText("Sign in button pressed");
    }

}

Login.css

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 18, 2015, 4:59:48 PM
    Author     : L
*/
.root {
    -fx-background-image: url("Tulips.jpg");
}
.label {
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}
#welcome-text {
    -fx-font-size: 32px;
    -fx-font-family: "Arial Black";
    -fx-fill: #818181;
    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
#actiontarget {
    -fx-fill: FIREBRICK;
    -fx-font-weight: bold;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}
.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}
.button:hover {
    -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}