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

这里写图片描述

版权声明:欢迎转载!

FXML入门

FXML入门   FXML是JavaFX 2.0提供的新技术。你可能会问“什么是FXML?”,“对我来说有什么用?”。 FXML是一种在JavaFX应用程序中定义用户界面的,基于XML的声明性标记...
  • pengpeng2395
  • pengpeng2395
  • 2012年08月29日 16:36
  • 15789

javaFX8初探(使用FXML创建登录表单)

这一节,我们讨论javaFX FXML 给我们带来的好处,FXML是基础xml的标记语言,我们可以使用FXML创建用户界面,这样我们可以把界面从代码中分离出来。如果你从第一篇开始看的话,你已经知道如何...
  • maosijunzi
  • maosijunzi
  • 2015年01月20日 11:54
  • 11279

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

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

使用Fxml作为界面的javafx

Fxml是一种以Xml的格式表示JavaFx界面对象的问价,Fxml文件中的每一个元素可以映射到JavaFx中的一个类,每个Fxml的元素的属性或者其子元素都可以为该对应JavaFxml类的属性。Fx...
  • Nikolaiunique
  • Nikolaiunique
  • 2017年08月25日 15:52
  • 538

JavaFX入门(二):JavaFX和FXML

在我的JavaFXML系列博客第一篇《JavaFX入门(一):我的第一个JavaFX程序 》中我们用纯Java代码写了一个很简单的JavaFXML程序,这一节中我们使用FXML编写程序界面,然后用Ja...
  • T_27080901
  • T_27080901
  • 2015年12月04日 23:33
  • 8927

Javafx利用fxml的方式添加对话框

参考的这个网址的方法http://statsciolist.blogspot.com/2013/04/javafx-modal-dialog-with-controller.html 在main函...
  • pbegonia
  • pbegonia
  • 2014年03月07日 11:09
  • 1418

JavaFX学习之道:FXML入门

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

JavaFX-FXML

FXML Enhancements Made in JavaFX 2.1 and 2.2
  • ice00mouse
  • ice00mouse
  • 2014年05月14日 11:32
  • 3937

javafx 之获取fxml的控制器(controller)

像对话框一样的弹出一个fxml界面的时候,往往需要获取
  • sunbirdhan
  • sunbirdhan
  • 2014年08月11日 22:40
  • 3343

javafx之CSS初探

javaFX 可以通过css来设计界面。javafx中的css只是w3c css2.1规范的一个扩展和子集,并不完全支持所有的css特性。 javafx中的css元素必须有-fx-前缀。 一、介绍...
  • xby1993
  • xby1993
  • 2014年05月01日 10:57
  • 2622
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javafx fxml form javascript css Example
举报原因:
原因补充:

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