Java GUI程序-FX

FX简介

Sun公司已于2008年12月05日发布了JavaFX技术的正式版，它使您能利用 JavaFX 编程语言开发互联网应用程序(RIA）。该产品于2007年5月在JavaOne大会上首次对外公布。JavaFX技术主要应用于创建Rich Internet Applications（RIAs）。当前的JavaFX包括JavaFX脚本和JavaFX Mobile（一种运营于行动装置的操作系统），今后JavaFX将包括更多的产品。JavaFX Script编程语言（以下称为JavaFX）是一种declarative, statically typed（声明性的、静态类型）脚本语言。
——————————简单来说fx弥补了Java GUI 开发的不足

项目创建

fx是一个独立的库，在eclipse当中需要对其集成插件，在idea当中就省去了这些操作，because idea already be ready

运行当前页面代码，将会得到一个空白的窗口程序，当然它比swing有着卓越，显著的特性。

设置按钮及事件响应

相关代码

package sample;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.awt.*;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        try{
//          Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
            BorderPane rt=new BorderPane();
            //创建根容器
            primaryStage.setTitle("Super web spider-Writer mailbox:2503963481@qq.com");
            //设置标题内容
            primaryStage.setScene(new Scene(rt, 650, 375));
            //放入root容器并设置其布局
            Button btn=new Button("click");
            //设置按钮及按钮文字
            rt.setCenter(btn);
            //设置按钮居中
            btn.setOnAction(new EventHandler(){
            //匿名内部类写法
                @Override
                public void handle(ActionEvent event) {
                    System.out.println("事件触发！");
                }
            });
            primaryStage.show();
            //布局显现
        }catch (Exception e){

        }



    }


    public static void main(String[] args) {
        launch(args);
    }
}

设置图片

美化GUI自然少不了图片的装饰

源码

package sample;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.awt.*;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        try{
//          Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
            BorderPane rt=new BorderPane();
            //创建根容器
            primaryStage.setTitle("Super web spider-Writer mailbox:2503963481@qq.com");
            //设置标题内容
            primaryStage.setScene(new Scene(rt, 650, 375));
            //放入root容器并设置其布局
            Image img=new Image("http://pic.netbian.com/uploads/allimg/180803/084010-15332568109b5b.jpg");
			//url路径
            ImageView imageView =new ImageView();
			//设置控件用于显示
            imageView.setImage(img);
            rt.setCenter(imageView);
			//放入容器

            primaryStage.show();
            //布局显现
        }catch (Exception e){

        }



    }


    public static void main(String[] args) {
        launch(args);
    }
}

设置图片大小

	double with =image.getWidth();
	double hight=imge.getHeiget();
	primaryStage.setScene(new Scene(rt, 宽, 高));

加载本地图片

		File file =new File("file:");
        String url =file.toURI().toString();

图片也可放在项目内，称为资源文件

容器布局

水平布局

HBOX:该布局使控件水平排放并且具有拉伸作用

		相关代码-已优化布局
		HBox hBox=new HBox();
        hBox.setPadding(new Insets(10));
		hBox.setAlignment(Pos.CENTER);
        TextField textField =new TextField("请选择文件内容");
        Button select =new Button("选择文件");
        Button upload =new Button("上传文件");
        hBox.getChildren().addAll(textField,select,upload);
        HBox.setHgrow(textField, Priority.ALWAYS);

边缘布局

BorderPane:使控件按照上下左右中的位置摆放

控件尺寸设置

控件的大小有些时候不是自己能决定的，很大程度取决于使用的容器，当设置控件大小失效时，属于正常显现

控件布局

布局嵌套

布局可以嵌套使用

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;


public class Main extends Application {
    HBox hbox = new HBox();
    TextField textField = new TextField("Please use URL");
    Button button = new Button("检测站点");
    javafx.scene.control.TextArea textArea = new TextArea();
    @Override
    public void start(Stage primaryStage) throws Exception{
        try{
            //创建根容器
            hbox.getChildren().addAll(textField, button);
            HBox.setHgrow(textField, Priority.ALWAYS);

            // BorderPane里嵌套HBox
            BorderPane root = new BorderPane();
            root.setTop(hbox);
            root.setCenter(textArea);
            //布局设置
            HBox.setHgrow(textField, Priority.ALWAYS);
            primaryStage.setTitle("Super web spider-Writer mailbox:2503963481@qq.com");
            //设置标题内容
            primaryStage.setScene(new Scene(root, 650, 500));
            //放入root容器并设置其布局
            Image img=new Image("http://pic.netbian.com/uploads/allimg/180803/084010-15332568109b5b.jpg");
            ImageView imageView =new ImageView();
            imageView.setImage(img);
//            rt.setCenter(imageView);

            primaryStage.show();
            button.setOnAction(new EventHandler() {            //匿名内部类按钮事件响应

                @Override
                public void handle(ActionEvent event)
                {
                    onAdd();
                }

            });
            //布局显现
        }catch (Exception e){

        }



    }

    public void onAdd()
    {
        String str = textField.getText();           //获取用户输入的字符串
        textArea.appendText(str + "\n");            //将用户输入的字符串放入到textArea
    }
    public static void main(String[] args) {
        launch(args);
    }
}

CSS引入及样式设置

RGB工具
与web界面类似，FX提供了css样式来优化界面，

读入css后，对场景scene插入css条目
scene.getStylesheets().add(getClass().getResource("Login.css").toExternalForm());
也可以改变某个具体节点
node.setStyle("font-size:15px"); //设置具体风格
node.setStyleClass("title_class");//设置风格类

将css与Main.java处于同一路径下

点号与警号命名的作用

.xxx{}//通用样式
#xxxx{}//特定样式，单独样式
如何引用:
 控件.getStyleClass().add("通用名");
 控件.setId("特定样式名");

常用样式设置

-fx-background-color: #00000;

设置背景颜色

设置边界(边缘线颜色)

-fx-border-radius: 4;

设置边界圆滑度

-fx-text-fill: #fff;

设置字体颜色

-fx-font-size 16;

设置字体大小

关于默认样式的修改

在Fx当中每个控件其实都有一个默认的样式
当你不想使用默认控件的样式的时候你可在css中重新定义，此时原有的默认样式将会被覆盖掉。

可以使用:

System.out.println(a.getClassStyle().toString());

来查看默认样式。

exe文件打包

这块百度吧，我学着学着后来也是放弃了！，因为Java的Gui实在不被看好！

什么是JavaFX Scene Builder?

JavaFX Scene Builder是一种可视布局工具，允许用户快速设计JavaFX应用程序用户界面，而无需编码。用户可以将UI组件拖放到工作区，修改其属性，应用样式表，并且它们正在创建的布局的FXML代码将在后台自动生成。它的结果是一个FXML文件，然后可以通过绑定到应用程序的逻辑与Java项目组合。

类似于C#拖拽式开发GUI界面

下载Scene Builder

官方地址

这期间会让你登录Oracle账号，注册账号才能下载它的产品，
下载好后桌面会出现手指样图标。

IDEA引用sencebuilder插件

1.打开settings，选择plugins，启用FX插件，打勾即可

2.在settings中找到，Languages and Framework，选择FX,将sencebuilder的启动地址(.exe文件)设置进去。

新建FX项目，调用插件

在此调用插件，打开工具，配置完成。