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

时间：2022-08-04 17:02:14

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

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

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

首先我们认识下这个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,完成即可.如图所示:

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

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

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

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

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

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

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

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

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

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,意思同上


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

标签：

相关文章