devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于JavaFx的GUI工具_javafx可视化界面工具

作者：从前慢现在也慢 | 2024-07-20 15:12:25

赞

踩

javafx可视化界面工具

简易JavaFX桌面应用

JavaFx概述

	 JavaFX是用于构建富互联网应用程序的Java库。 使用此库编写的应用程序可以跨多个平台一致运行。使用
JavaFX开发的应用程序可以在各种设备上运行，如台式计算机，手机，电视，平板电脑等。要使用Java编程语言
开发GUI应用程序，程序员依赖于诸如高级窗口工具包(AWT)和Swings之类的库。在JavaFX出现之后，这些Java
程序开发就可以有效地利用丰富的类库来开发GUI应用程序。

  • 1
  • 2
  • 3
  • 4

结构组成

	基于JavaFX的桌面客户端应用主要由fxml脚本文件（支持CSS、Script、Shell）和Java部分组成，Fxml文
件主要负责客户端的界面部分，而java负责对界面操作进行数据处理、计算、接收、业务的实现等。

  • 1
  • 2

项目结构示例（maven为例）

图中

	 如图，图中画框文件为本文主要讲解文件，这里只做简述，详述请往后看，LauncherMain.java文件为
项目的启动类（主函数所在的类），MainController.java文件主要用来处理与GUI界面间的交互，main.fxml则
为GUI界面的主要文件，对客户端界面进行渲染展示。至于jdk标注是由于JavaFX需要的版本最低在jdk1.8及以上，
特此标注提示下，至于1.7及以下的版本可以使用JavaSwing（后续更新具体实现）来对桌面应用进行开发。

  • 1
  • 2
  • 3
  • 4

环境以及工具

环境工具
系统win7/10/11/server等
JavaJDK1.8及以上
开发工具eclipse、ideal 、JavaFX Scene Builder 2.0

示例详解

项目主函数

主函数也就是项目的启动类，用于启动项目，也可作用于打可执行包时的主函数，下面给出主函数代码示例：

  • 1
// An highlighted block
package com.ktkj.TcpClient;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.stage.WindowEvent;
public class LauncherMain extends Application{

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

	@Override
	public void start(Stage primaryStage) throws Exception {
		//加载FXML文件
		FXMLLoader fxmlLoader=new FXMLLoader(getClass().getClassLoader().getResource("fxmlFile/main.fxml"));
        Parent root = fxmlLoader.load();
        //设置标题
        primaryStage.setTitle("XXXXv2.0");
        //场景初始化
        primaryStage.setScene(new Scene(root, 862, 475));
        primaryStage.show();
        primaryStage.setOnCloseRequest(new EventHandler<WindowEvent>() {
            public void handle(WindowEvent event) {
            	System.exit(0);
            }
          });
	}

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

代码中main.fxml文件放在了src/main/resources下的fxmlFile目录下

创建窗口文件FXML

界面的可视化构建主要通过JavaFX Scene Builder 2.0工具进行，按钮、输入框等组件可以通过拖拽的方式进行，最终保存为FXML文件
在这里插入图片描述
构建完成后保存为FXML文件，自动生成FXML可视化界面代码，FXML代码示例如下：

// An highlighted block
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="464.0" prefWidth="864.0" style="-fx-background-color: #123456;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.ktkj.TcpClient.controller.MainController">
   <children>
      <TextField fx:id="commjsFiled" layoutX="128.0" layoutY="158.0" text="C:\APM\htdocs\root\js\" />
      <Button layoutX="313.0" layoutY="158.0" mnemonicParsing="false" onMouseClicked="#getCommJs" text="选择位置" textFill="#141414" />
      <Label layoutX="43.0" layoutY="255.0" text="服务信息" textFill="#19e0ea" />
      <TextArea fx:id="jdText" layoutX="42.0" layoutY="284.0" prefHeight="122.0" prefWidth="464.0" />
      <TextField fx:id="serverPort" layoutX="128.0" layoutY="122.0" prefHeight="23.0" prefWidth="64.0" text="9997" />
      <Label layoutX="55.0" layoutY="162.0" text="存放路径：" textFill="#19e0ea" />
      <Label layoutX="246.0" layoutY="25.0" prefHeight="37.0" prefWidth="198.0" text="数据采集平台文件接收服务">
         <font>
            <Font size="16.0" />
         </font>
         <textFill>
            <RadialGradient centerX="0.45555555555555555" centerY="0.5" radius="0.5">
               <stops>
                  <Stop color="#19e0ea" />
                  <Stop color="WHITE" offset="1.0" />
               </stops>
            </RadialGradient>
         </textFill></Label>
      <Button fx:id="onkeyB" layoutX="132.0" layoutY="221.0" mnemonicParsing="false" onMouseClicked="#playXz" text="服务关闭" textFill="#e11111" />
      <Button layoutX="48.0" layoutY="221.0" mnemonicParsing="false" onMouseClicked="#playServer" text="服务启动" textFill="#1fcd42" />
      <ProgressBar fx:id="progressBar" layoutX="113.0" layoutY="422.0" prefHeight="18.0" prefWidth="391.0" progress="0.0" />
      <Label layoutX="78.0" layoutY="126.0" text="端口：" textFill="#19e0ea" />
      <Label layoutX="43.0" layoutY="424.0" text="接收进度：" textFill="#19e0ea" />
      <MenuBar prefHeight="25.0" prefWidth="864.0">
        <menus>
          <Menu mnemonicParsing="false" text="工具">
            <items>
              <MenuItem fx:id="cjCk" mnemonicParsing="false" onAction="#playHtml" text="识别筛选" />
              <MenuItem mnemonicParsing="false" text="关闭" />
            </items>
          </Menu>
          <Menu mnemonicParsing="false" text="帮助">
            <items>
              <MenuItem mnemonicParsing="false" text="关于" />
            </items>
          </Menu>
        </menus>
      </MenuBar>
      <Separator layoutX="42.0" layoutY="75.0" prefHeight="1.0" prefWidth="464.0" />
      <Separator layoutX="40.0" layoutY="75.0" orientation="VERTICAL" prefHeight="132.0" prefWidth="6.0" style="-fx-background-color:#19e0ea" />
      <Separator layoutX="505.0" layoutY="75.0" orientation="VERTICAL" prefHeight="132.0" prefWidth="6.0" style="-fx-background-color:#19e0ea" />
      <Separator layoutX="42.0" layoutY="206.0" prefHeight="1.0" prefWidth="464.0" />
      <TableView fx:id="tableV" layoutX="522.0" layoutY="75.0" prefHeight="363.0" prefWidth="327.0">
        <columns>
          <TableColumn fx:id="tableCrq" prefWidth="140.0" text="接收日期" />
          <TableColumn fx:id="tableCwj" prefWidth="185.0" text="文件" />
        </columns>
      </TableView>
      <Label layoutX="68.0" layoutY="90.0" text="服务IP：" textFill="#19e0ea" />
      <TextField fx:id="serverIp" layoutX="127.0" layoutY="86.0" prefHeight="23.0" prefWidth="113.0" text="127.0.0.1" />
   </children>
   <effect>
      <InnerShadow color="#0930bf" />
   </effect>
</AnchorPane>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67

FXML代码中有几个关键位置需要注意
1.fx:controller=“XX.MainController”
fx:controller用于绑定事件交互的controller.java文件
2.fx:id
fx:id用于绑定事件（按钮事件、输入框文字获取、文件路径获取等）

创建Controller文件

Controller文件用来处理与窗口的事件交互，数据传输等，部分（删除了具体实现）代码示例如下：

// An highlighted block
package com.ktkj.TcpClient.controller;

import java.io.BufferedOutputStream;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.math.BigDecimal;
import java.math.RoundingMode;
import java.net.InetAddress;
import java.net.MalformedURLException;
import java.net.Socket;
import java.net.URI;
import java.net.URISyntaxException;
import java.net.URL;
import java.net.URLConnection;
import java.net.UnknownHostException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import javax.swing.JFileChooser;
import javax.swing.JLabel;
import org.java_websocket.client.WebSocketClient;
import org.java_websocket.handshake.ServerHandshake;

import com.ktkj.TcpClient.Enum.WebClientEnum;
import com.ktkj.TcpClient.utils.PropertyUtil;

import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.MenuItem;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.control.cell.PropertyValueFactory;
import sun.misc.BASE64Decoder;

public class MainController {
	
	
	//列表数据集
	private final ObservableList<Person> data = FXCollections.observableArrayList();
	
	private final ByteArrayOutputStream bos = new ByteArrayOutputStream(1000);
	
	public String fileurl="";
	public String filetype="";
	public String fileSize="";
	public int nowSize;
	public int oldSize;
	public int index;
	public boolean initClient;
	//
	@FXML
	Button onkeyB;
	//
	@FXML
	TextField commjsFiled;
	//进度条
	@FXML
	ProgressBar progressBar;
	//服务端口
	@FXML
	TextField serverPort;
	//获取界面中输入框，使用getText和setText可以获取值和赋值
	@FXML
	TextArea jdText;
	@FXML
	TextField serverIp;
	//表格
	@FXML
	TableView<Person>  tableV;
	@FXML
	TableColumn<Person, String> tableCrq;
	@FXML
	TableColumn<Person, String> tableCwj;
	@FXML
	MenuItem cjCk;
	
	private int type=0;
	
	private StringBuffer strb;
	
	public void playServer() {
								
	}
	/**
	 * 打开系统默认浏览器
	 */
	@FXML
	private void playHtml(ActionEvent event) {
		
	}
	
	/**
	 * 关闭服务
	 */
	public void playXz() {
		
	}
	
	
	public void getCommJs() {
	}
	
	
	public String fileChoosergetUrl() {
	
        return fileUrl;
	}
	
	public void folderDoesItExist(String url) {
		File file1 = new File(url); 
		if(!file1.exists()) { 
			file1.mkdirs();//文件夹不存在创建目录
			}
		}
	
	
public  class SocketC  extends WebSocketClient{
		public SocketC(URI serverUri) {
			super(serverUri);
		}
		
		@Override
		public void onOpen(ServerHandshake shake) {
			// TODO Auto-generated method stub
		
		}

		@Override
		public void onMessage(String paramString) {
		
		}

		public boolean jsFile(String url,String filesizeval,int kdport) {
					       
		}


	
		@Override
		public void onClose(int paramInt, String paramString, boolean paramBoolean) {
			
		}

		@Override
		public void onError(Exception e) {
			
		}
		
		/**
	     * 实现客户端发送
	     */
	    public void sendMessage(String message) throws IOException {
	        this.send(message);
	    }
	    
	    /**
	     * base64字符串转化成文件，可以是JPEG、PNG、TXT和AVI等等
	     *
	     * @param base64FileStr
	     * @param filePath
	     * @return
	     * @throws Exception
	     */
	    public  boolean generateFile(String base64FileStr, String filePath) throws Exception {
	       
	        return true;
	    }
	    
	  //将Byte数组转换成文件
	    public  boolean getFileByBytes(byte[] bytes, String filePath, String fileName) {
	    }
	    public  Double divide(Double dividend, Double divisor) {

	    	}
}
	

//内部类
public static class Person {
   
    private final StringProperty rq;
    private final StringProperty filename;

    public Person(String rq,  String filename) {
       
        this.rq = new SimpleStringProperty(rq);
        this.filename = new SimpleStringProperty(filename);
    }

	public String getRq() {
		return rq.getValue();
	}

	public String getFilename() {
		return filename.getValue();
	}
   
}

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217

用法解释：
1.onMouseClicked=“#playServer” 用来绑定事件，点击按钮后出发事件调用controller中的playServer函数
2.fx:id用来绑定controller中@FXML注解对应的按钮、输入框等，可以获取输入框字符串、为输入框、列表、进度条等赋值或调整属性
以上两点为JavaFX示例核心需要注意的内容，用于实现界面与Java代码的实现

总结

1.使用JavaFX Scene Builder 2.0构建界面，生成FXML文件
2.创建Java项目
3.新建启动函数类
4.将FXML放入resources目录下
5.编辑FXML文件，绑定controller、事件
6.编辑controller，创建事件，实现绑定事件
7.在启动函数中运行主函数main方法
8.完成简单的FX实例

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/857368
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号