javafx fxml form javascript css Example

原创 2015年11月19日 09:49:39

这里写图片描述

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

这里写图片描述

版权声明:欢迎转载!

相关文章推荐

javafx之fxml例子_用户登录

  • 2014年10月26日 15:28
  • 201KB
  • 下载

JavaFX2.0基础教程 之 FXML入门教程

1        FXML入门教程 本部分教程包括两部分内容:   1、为什么使用FXML(基本介绍以及用FXML创建用户界面的好处);   2、使用FXML创建用户界面(通过创建简单登录应用来...
  • s_ghost
  • s_ghost
  • 2012年03月29日 13:49
  • 11530

JavaFX学习之道:FXML入门

FXML是JavaFX 2.0提供的新技术。你可能会问“什么是FXML?”,“对我来说有什么用?”。 FXML是一种在JavaFX应用程序中定义用户界面的,基于XML的声明性标记语言。FXML非常适合...

JavaFX:Main,Controller,FXML之间的参数传递

JavaFX:Main,Controller,FXML之间的参数传递 Controller获取FXML数据 【.fxml文件】Pane fx:controller = "s...

javaFX——基于FXML创建用户界面

前面我们使用javaFX代码创建了一个用户界面,并用css装点了这么界面,现在在介绍一下在javaFX中另一种创建用户界面的形式——FXML。这种方式其实就是利用xml技术,搭建我们的用户界面,学过a...

javafx之FXML初探

FXML作为XML-based,UI构造器。其相关的规则值得我们去理解。 FXML元素分类: A class instanceA property of a class instanceA "st...
  • xby1993
  • xby1993
  • 2014年04月30日 22:04
  • 2718

JavaFX高级教程:JavaFX2.0的FXML语言

原文地址http://download.oracle.com/javafx/2.0/fxml_get_started/jfxpub-fxml_get_started.htm     ...

JavaFX文档(6)开始JavaFX之旅——4 使用FXML来创建用户界面

声明:如需转载,请注明出处:http://blog.csdn.net/originer 原文地址:http://docs.oracle.com/javase/8/javafx/get-started...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javafx fxml form javascript css Example
举报原因:
原因补充:

(最多只允许输入30个字)