万万没想到,上次写的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,意思同上
好了,今天就讲到这里吧,如果有不懂可以在下方留言,我会抽时间给大家一一回复的,再次感谢大家对我的支持,你们的热情,就是我写下去的动力,谢谢大家!我们下次再见