JavaFX Scene Builder的使用

Eclipse开发JavaFX项目入门

一、下载与安装

Eclipse中添加新插件:
Name: e(fx)clipse
Location: http://download.eclipse.org/efxclipse/updates-released/2.3.0/site

下载JavaFX Scene Builder 2.0
URL:http://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-1x-archive-2199384.html
安装很简单,略过。

启动eclipse:Window -> References->JavaFX
JavaFX Scene Builder的使用_第1张图片
加入JavaFX Scene Builder 2.0.exe
JavaFX Scene Builder的使用_第2张图片
第一步就完成了。

二、简单JavaFX项目

1.创建项目

选择javafx项目

JavaFX Scene Builder的使用_第3张图片

输入javafx名称,(环境:JDK8以上)

JavaFX Scene Builder的使用_第4张图片

自动生成的项目结构

JavaFX Scene Builder的使用_第5张图片

application包下创建fxml文件

File -> New -> Other
JavaFX Scene Builder的使用_第6张图片
输入名称。

2.进入JavaFX Scene Builder

打开JavaFX Scene Builder

JavaFX Scene Builder的使用_第7张图片

点击AnchorPane

JavaFX Scene Builder的使用_第8张图片

鼠标放在+ 拉大

JavaFX Scene Builder的使用_第9张图片

3.添加组件

Containers中选择Button组件

JavaFX Scene Builder的使用_第10张图片

点击Button组件,在右边设置其属性(默认也行)

JavaFX Scene Builder的使用_第11张图片
JavaFX Scene Builder的使用_第12张图片

设置Button的fx:id (重点)

右边->code->fx:id,输入一个名称
JavaFX Scene Builder的使用_第13张图片

我们在添加一个文本框,设置fx:id

JavaFX Scene Builder的使用_第14张图片

随意拖动,缩放。也可以设置其属性

JavaFX Scene Builder的使用_第15张图片

保存

JavaFX Scene Builder的使用_第16张图片

预览

JavaFX Scene Builder的使用_第17张图片
预览结果:
JavaFX Scene Builder的使用_第18张图片

关闭

三、引用fxml,编写Java代码

1.创建application.MyController类

打开fxml文件

JavaFX Scene Builder的使用_第19张图片
添加内容:fx:controller=”application.MyController”,保存

预览如下(MyController,可以自己命名)

JavaFX Scene Builder的使用_第20张图片

鼠标放在追加的内容上,右键->source->GenerateController

JavaFX Scene Builder的使用_第21张图片
JavaFX Scene Builder的使用_第22张图片

然后自动生成MyController类和字段

JavaFX Scene Builder的使用_第23张图片

2.MyController类中编写代码(事件)

例如给Button很简单的一个事件,MyController类代码如下

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
public class MyController {
    @FXML
    private Button btn_1;
    @FXML
    private TextField text_1;
    public void eventButton(){
        String text = text_1.getText();//获取文本框输入的内容
        System.out.println(text);
    }
}

再进入JavaFX Scene Builder 2.0添加Button的事件

选择Button,右边框->code->OnAction,选择eventButton
JavaFX Scene Builder的使用_第24张图片

保存

3.添加Main类中的代码

Main类中自动生成的代码如下

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = new BorderPane();
            Scene scene = new Scene(root,400,400);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
    public static void main(String[] args) {
        launch(args);
    }
}

Main类中修改如下

JavaFX Scene Builder的使用_第25张图片

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            Parent root = FXMLLoader.load(getClass().getResource("SceneDemo.fxml"));//修改了
            //BorderPane root = new BorderPane();
            //设置Scene的大小(SceneBuilder中点击AnchorPane右边Layout中会显示大小,不一样的可以)
            Scene scene = new Scene(root,500,522);//修改了
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.setResizable(false);//设置不能窗口改变大小
            primaryStage.setTitle("一个简单的JavaFX");//设置标题
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
    public static void main(String[] args) {
        launch(args);
    }
}

保存,运行Main类

JavaFX Scene Builder的使用_第26张图片

结束,如有错误,敬请指明。

到这里就结束了,刚开始使用CSDN,截图和排版不当,谅解。
喜欢JavaFx的同学可以看看易白教程,将就一下,JavaFx教程、视频都很少。
易白教程 :http://www.yiibai.com/javafx/javafx-tutorial-for-beginners.html
JavaFx 2.0 API(英文):http://pan.baidu.com/s/1hsnFRTU

你可能感兴趣的:(eclipse,javafx,Java学习日记)