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 | Templatesand 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);}