JavaFX 二 First Blood(第一个小例子,拿起武器冲啊~)

万万没想到,上次写的JavaFX 一,回应那么激烈,令我有点小激动啊,这里感谢各位这么热心,大家的支持就是我最大的动力,让我们共同进步,共同学习.话题回归,今天我想给大家讲讲JavaFX的第一个小例子,顺便通过例子,给大家讲讲一些关于JavaFX的代码编写的一些心得体会.不多废话,好戏即将开始......

上次说到新手开发是先Fxml,再写代码,我们先来看看如何用JavaFX Scene Builder 2.0设计我们想要的界面,首先,我介绍下工具界面的一些小知识,

首先我们认识下这个FX的可视化开发工具:

1.最上面第一行的菜单栏,这没什么好说的

2.左上角区域是供我们设计界面拖拉控件用的工具栏,分了好几个类别,右上网下分别是:Containers(容器),Controls(控制器),Menu(菜单),Miscellaneous(杂项费),Shapes(图形),Charts(图表),3D

3.左下角区域是我们设计界面的构图结构

4.中间黑色区域是我们设计界面的区域

5.右边的局域是我们选中对应构图控件的设置信息,分三大类显示:Properties(属性),Layout(布局),Code(代码事件)

基本上就只有这些,非常简单容易,也便于运用和设计.图中我还自己画了个非常简单的例子,他的结构就如左下角显示一样,最外层是个Pane,我用了VBox布局(简单理解就是由上至下排列),里面插入三个最常用的小控件,由上至下分别是TextFiel(文本框),Lable(标签)和Button(按钮),然后在各自设置一个属性,比如大小,高度宽度什么的,这里就不一一介绍了.然后我面设计完之后,点保存之后,我们得到一个后缀为*.fxml的文件,这里我命名为lv_1.fxml.

我把我设计的代码页贡献出来让大家参考参考:

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

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

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="300.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <VBox layoutX="153.0" layoutY="94.0" prefHeight="400.0" prefWidth="600.0" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="50.0" AnchorPane.rightAnchor="50.0" AnchorPane.topAnchor="50.0">
         <children>
            <TextField fx:id="myTextField" promptText="我是一个TextFiel,你的第一个boss">
               <font>
                  <Font size="18.0" />
               </font>
            </TextField>
            <Label fx:id="myLabel" maxHeight="40.0" minHeight="40.0" prefHeight="40.0" prefWidth="502.0" text="我是一个Label小怪物,你的一个练级对象">
               <font>
                  <Font size="18.0" />
               </font>
            </Label>
            <Button fx:id="myButton" mnemonicParsing="false" text="我是按钮,你的武器哦">
               <VBox.margin>
                  <Insets left="100.0" top="50.0" />
               </VBox.margin>
               <font>
                  <Font size="18.0" />
               </font>
            </Button>
         </children>
      </VBox>
   </children>
</AnchorPane>

接着我们打开NetBeans,右键新建一个项目,类别选JavaFX,项目选JavaFX FXML 应用程序,项目名称命名为:Lv_1,完成即可.如图所示:

Ps:JDK,和Java环境我就不说了,网上搜索多得是,这里滤过,我的事JDK8.0的

然后双击项目默认生成的FXMLDocument.fxml文件,把我们刚刚设计完成的Lv_1.fxml代码,复制粘贴进去,点保存就可以了,点击运行,就可以看到我们设计的界面

由于我们没有做代码逻辑处理,所以你看到的只是界面,并不能完成相关操作,接下来我们就要让界面动起来,跟我走吧

打开Lv_1.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 lv_1;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author edao
 */
public class Lv_1 extends Application {

    @Override
    public void start(Stage stage) throws Exception {   //start方法,默认方法
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml")); //这里就是加载我们的fxml文件

        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.show();       //然后就是渲染,显示出来
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {           //main方法,大家都很熟悉,这里是程序的入口
        launch(args);
    }

}

由于我们只涉及一个几面,这里暂时不需要添加和修改代码,就这样放着就行了

打开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 lv_1;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;

/**
 *
 * @author edao
 */
public class FXMLDocumentController implements Initializable {

    @FXML
    private Label label;

    @FXML
    private void handleButtonAction(ActionEvent event) {
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    

}

这个方法负责操控FXMLDocument.fxml(也就是我们设计的Lv_1fxml,只是复制了代码,并没有改文件名而已)里面各个空间的控制器了,理论上每一个fxml都对应一个controller,我们先看该方法有什么特别之处吧,我来一一讲解:

注解@FXMl,这个是JavaFX特有的注解方式,是方便开发这调用fxml里的控件用的,和fxml里的fx:id属性相对应使用.

handleButtonAction,某按钮的触发事件(系统默认生成的)

initialize初始化方法,这个暂时不讲,等用到的时候在给大家讲讲

我们把代码改成这样:

/*
 * 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 lv_1;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

/**
 *
 * @author edao
 */
public class FXMLDocumentController implements Initializable {

    @FXML
    private Label myLabel;
    @FXML
    private TextField myTextField;
    @FXML
    private Button myButton;

    @FXML
    private void myButtonAction(ActionEvent event) {
        myButton.setText("我的剑,就是你的剑");
        myLabel.setText("我输了,我还会回来的...");
        myTextField.setText("~胜利~");
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    

}

然后,在对应的fxml文件修改如下:

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

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

<AnchorPane fx:controller="lv_1.FXMLDocumentController" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="300.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <VBox layoutX="153.0" layoutY="94.0" prefHeight="400.0" prefWidth="600.0" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="50.0" AnchorPane.rightAnchor="50.0" AnchorPane.topAnchor="50.0">
         <children>
            <TextField fx:id="myTextField" promptText="我是一个TextFiel,你的第一个boss">
               <font>
                  <Font size="18.0" />
               </font>
            </TextField>
            <Label fx:id="myLabel" maxHeight="40.0" minHeight="40.0" prefHeight="40.0" prefWidth="502.0" text="我是一个Label小怪物,你的一个练级对象">
               <font>
                  <Font size="18.0" />
               </font>
            </Label>
            <Button fx:id="myButton" onAction="#myButtonAction"  mnemonicParsing="false" text="我是按钮,你的武器哦">
               <VBox.margin>
                  <Insets left="100.0" top="50.0" />
               </VBox.margin>
               <font>
                  <Font size="18.0" />
               </font>
            </Button>
         </children>
      </VBox>
   </children>
</AnchorPane>

好到这里,我们的小例子就基本完成了,运行,点击按钮,就跟我们写的剧本一样显示;

下面我给大家讲解一下相关注意事项:

1.在每个fxml的都要标注制定的对应controller路径:用属性fx:controller="lv_1.FXMLDocumentController"标示;如上诉代码所示,不然找不到对应的controller,控件无法操作

2.在fxml文件,我们要对每个控件都给标注一个重要的显示身份的属性:例如按钮的fx:id="myButton",这个有点类似于html里面<input id="su" type="button"  value="按钮">的id属性,

只不过fx这里的id是专门提供给controller调用的,只要fxml标有fx:id,就可以在对应的controller里面声明变量,并加上@FXMl注解如下:

@FXML
private Button myButton;

就可以在controller使用这个控件

3.事件触发也是要在fxml标记的,如例子的按钮事件在fxml标记如下

onAction="#myButtonAction"

切记前面有#号,含义是在制定的controller找方法名为:myButtonAction的控制方法

@FXML
    private void myButtonAction(ActionEvent event) {
        myButton.setText("我的剑,就是你的剑");
        myLabel.setText("我输了,我还会回来的...");
        myTextField.setText("~胜利~");
    }

当然,少不了注解@fxml,意思同上

好了,今天就讲到这里吧,如果有不懂可以在下方留言,我会抽时间给大家一一回复的,再次感谢大家对我的支持,你们的热情,就是我写下去的动力,谢谢大家!我们下次再见

时间： 2024-11-09 05:47:50

JavaFX 二 First Blood(第一个小例子,拿起武器冲啊~)的相关文章

《hadoop权威指南》关于hive的第一个小例子的演示

本文是<hadoop权威指南>关于hive的小例子,通过这个例子可以很好地看出来hive是个什么东西. 前提是已经配置好hive的远程连接版本的环境,我是用了MYSQL数据库保存元数据. 环境要求: -配置好了Hadoop的HDFS文件系统,启动hdfs和yarn -配置好了hive的远程连接模式 -配置好了MySQL用于metadata的储存 输入文件下载: https://github.com/tomwhite/hadoop-book/blob/master/input/ncdc/micr

软件工程 第一个小例子

1.生成加减号: Math.floor(Math.random()*2)随机产生数字1或2,用1表示+,2表示- 2.随机产生两个数: Math.floor(Math.random()*range),range表示范围 因为是小学简单数学,所以结果不能为负数,这就需要做减法是第二个数比第一个数小 3.访问链接   运行效果 4.具体代码如下: javascript <script type="text/javascript" > $(function(){ $('input

spring的一个小例子（二）--解析前面的小例子

接上篇:http://www.cnblogs.com/xuejupo/p/5236448.html 首先应该明白,一个web项目,web.xml是入口. 然后下面来分析上篇博客中出现的web.xml: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://ww

NodeJS系列~第一个小例子，实现了request.querystring功能

百度百科上: Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始,在Node中,Http是首要的.Node为创建http服务器作了优化,所以在网上看到的大部分示例和库都是集中在web上(http框架.模板库等). Node.js的优点 nodejs作为一个新兴的后台语言,有很多吸引人的地方: RESTful API 单线程 Node.js可以在不新增额外线程的情况下,依然可以对任务进行并行处理 —— Node.js是单线程的.它通过事件轮询(event

python速成第二篇（小爬虫+文件操作+socket网络通信小例子+oop编程）

大家好,由于前天熬夜写完第一篇博客,然后昨天又是没休息好,昨天也就不想更新博客,就只是看了会资料就早点休息了,今天补上我这两天的所学,先记录一笔.我发现有时候我看的话会比较敷衍,而如果我写出来(无论写到笔记本中还是博客中,我都有不同的感觉)就会有不同的想法,我看书或者看资料有时候感觉就是有一种惰性,得过且过的感觉,有时候一个知识想不通道不明,想了一会儿,就会找借口给自己说这个知识不重要,不需要太纠结了,还是去看下一个吧,然后就如此往复下去,学习就会有漏洞,所以这更加坚定了我写博客来记录的想法.

什么是nodejs？nodejs的作用？创建第一个小实例

以下只是本人的理解如果错误请纠正: 1.nodejs:node是一个平台,是服务器端JavaScript的解析器,nodejs本身运行Google V8 JavaScript引擎,所以速度和性能非常好 2.nodejs旨在解决创建高性能的网络应用程序,可以编写每秒处理上万条同时访问物理机器的连接代码,并且可处理高并发和异步I/O node小实例:创建自己的第一个小实例,我用的是webstorm开发工具 1.编写代码:步骤 (1).引入http模块:require('http') (2).创建ht

Android编程权威指南-读书笔记（二）-第一个小程序

Android编程权威指南-读书笔记(二) -第一个小程序 第一个例子介绍 应用名为GeoQuiz.用户通过单击True或False按钮来回答屏幕上的问题,GeoQuiz可即时反馈答案正确与否. 这个例子为我们简单介绍了几个基本组件的使用,以及基本的事件监听.让我们对基本组件的使用和事件的监听有一个基本的了解. 这篇文章分为2个部分,第一部分就是创建简单的UI.第二个部分就是对这个UI增加代码来响应一些操作. (注:所有不明白或者不理解的东西其实都不重要,后面都会有更详细的介绍.) 本章的目标

Python小程序练习二之装饰器小例子

Python小程序练习二之装饰器小例子 装饰器: 装饰器实际上就是为了给某程序增添功能,但该程序已经上线或已经被使用,那么就不能大批量的修改源代码,这样是不科学的也是不现实的,因为就产生了装饰器,使得其满足: 1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 那么根据需求,同时满足了这两点原则,这才是我们的目的. 装饰器的原则组成: < 函数+实参高阶函数+返回值高阶函数+嵌套函数+语法糖 = 装饰器 > 错误例子: 1.1Decorators.py 1 # The aut

python2.7练习小例子（二十八）

28):题目:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续判断第二个字母.     程序分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句或if语句判断第二个字母. #!/usr/bin/python # -*- coding: UTF-8 -*- letter = raw_input("please input:") #while letter != 'Y': if letter == 'S': print ('please input secon