使用JavaFX开发桌面程序

使用JavaFX开发桌面程序

注:我也是JAVA FX的初学者之一,自己在学习的时候踩了许多的坑,中文英文的资料查了不少,但是觉得FX技术和其他热门技术相比,教程还是太少了。这里就尽量做一点微小的贡献吧

使用环境

注:写这个只是为了说明我的环境,使用和我的不一样的环境在理解这篇教程的时候并没有什么问题,例如使用Windows平台、使用Oracle JDK(这样就不需要再单独安装FX组件了,可以不用MAVEN)、使用Oracle的SceneBuilder。可能唯一一个比较影响体验的就是不使用IDEA而是使用eclipse了

  • Ubuntu18.04LTS
  • OpenJDK 1.8
  • IDEA(with MAVEN):使用MAVEN安装FX环境(OpenJDK不附带FX环境)
  • SceneBuilder(glounhq):这是一个fxml可视化设计环境,使用上不如C#,但起码比纯命令设计强一百倍

搭建JAVA FX环境

  1. 下载IDEA、OpenJDK1.8、SceneBuilder(glounhq).

    SceneBuilder下载地址:https://gluonhq.com/products/scene-builder/#download

  2. 在IDEA中关联SceneBuilder.关联的目的是为了之后可以从IDEA快速打开SceneBuilder来设计页面

    IDEA->File->Settings->Language->Java FX->输入SceneBuilder的路径

    如果是Linux环境,你会发现这个路径还不好找,我是使用locate SceneBuilder命令找到的,路径是:/opt/SceneBuilder/SceneBuilder

  3. 因为OpenJDK没有FX环境,需要我们自己安装。为了便于管理,我们在这里使用MAVEN
    1. 在IDEA中创建一个Java FX项目
    2. 在项目名上右键,选择‘Add framework support‘,选择MAVEN
    3. 在pom.xml文件中加入以下依赖:
      <dependencies>
              <!-- https://mvnrepository.com/artifact/org.openjfx/javafx-controls -->
              <dependency>
                  <groupId>org.openjfx</groupId>
                  <artifactId>javafx-controls</artifactId>
                  <version>13</version>
              </dependency>
              <!-- https://mvnrepository.com/artifact/org.openjfx/javafx-fxml -->
              <dependency>
                  <groupId>org.openjfx</groupId>
                  <artifactId>javafx-fxml</artifactId>
                  <version>13</version>
              </dependency>
          </dependencies>

      设计流程

      这里只写一些我已经探索出来的设计流程,如果有不对的请指出~

      1. 先在Resources中创建fxml文件(之所以放在Resources文件夹下,是为了加载的时候方便,之后能看到),创建完成后在文件名上右击,选择‘Open in SceneBuilder‘,之后就可以在SceneBuilder中进行可视化设计了。设计时要注意,对有响应的元素要在code栏下的fx:id中设置id,以便于之后的调用。设计完成后Ctrl+s保存文件
      2. 设计第一个加载的界面。这个可以放在入口的java类的main方法下,举个例子:
        package sample;
        
        import javafx.application.Application;
        import javafx.fxml.FXMLLoader;
        import javafx.scene.Parent;
        import javafx.scene.Scene;
        import javafx.stage.Stage;
        
        public class Main extends Application {
        
            @Override
            public void start(Stage primaryStage) throws Exception{
        
                Parent root = FXMLLoader.load(getClass().getClassLoader().getResource("Entry.fxml"));//从Resources中获取资源
                primaryStage.setTitle("Course Registration System");
                primaryStage.setScene(new Scene(root, 800, 600));
                primaryStage.show();
            }
      3. 设计触发器:

        对于每一个Panel,我们要指定一个触发器类,这个是放在该fxml文件中的,例如IDEA中默认创建的就是AnchorPane对象,在它那一行就能找到:fx:controller="sample.MainController",这个MainController就是我创建的一个类

        之后,我们可以对该panel下各个控件设计触发事件后的反映,这个可以在SceneBuilder中填写,在Code那一栏下面。设计了之后,它就会到我们指定的那个触发器类下寻找这个方法,如果没有的话IDEA会提示你创建

        注意,触发器类可以创建多个,这样更便于管理,降低耦合度

      4. 在触发器中获取fxml中的控件对象

        有时候,我们需要在事件相应中获取对象的值,例如设计登录页面时点击‘提交‘的按钮,我们需要知道输入框的字符串。这时候我们可以在触发器中获取这些元素,前提是我们为这些控件输入了fx:id,它是全局性的,不允许重复。例如我们可以通过声明:

           @FXML
            private TextField username;
            @FXML
            private TextField password;

        获取两个TextField对象下的值:

        usernameString=username.getText();
        passwordString=password.getText();
      5. 页面跳转

        我们需要为每一个页面设计一个Java类,例如我设计了一个SignIn_Student.java:

        package sample;
        
        import javafx.application.Application;
        import javafx.fxml.FXMLLoader;
        import javafx.scene.Parent;
        import javafx.scene.Scene;
        import javafx.stage.Stage;
        public class SignIn_Student extends Application{
            private  String usernameString;
            private  String passwordString;
            @Override
            public void start(Stage stage) throws Exception{
                Parent root = FXMLLoader.load(getClass().getClassLoader().getResource("SignIn_Student.fxml"));//加载页面
                Scene anotherScene=new Scene(root);
                stage.setTitle("Please log in");
                stage.setScene(anotherScene);
                stage.show();
            }
        
        }
      6. TableView的使用

        这个控件用起来着实有点麻烦。折腾了好久。

        1. 我们肯定需要在某一个fxml页面中加入了这个TableView,并且输入了Table和它每一个TableColumn的fx:id.
        2. 我们需要为有TableView的fxml文件单独创建一个控制器类,之后会说为什么
        3. 我们需要创建一个类来表示要储存的数据,例如我这里创建了一个Courses.class:(下面的get和set方法是IDEA自动生成的)
          package sample;
          
          import javafx.beans.property.*;
          
          import java.time.LocalDate;
          import java.time.LocalTime;
          
          public class Courses {
          
              private final StringProperty department;
              private final StringProperty lecturer;
              private final ObjectProperty<LocalDate> Time;
              private final StringProperty location;
              private final IntegerProperty ID;
          
              public Courses(String name, String department, String lecturer, LocalDate time, String location, Integer ID) {
                  this.name = new SimpleStringProperty(name);
                  this.department = new SimpleStringProperty(department);
                  this.lecturer = new SimpleStringProperty(lecturer);
                  this.Time = new SimpleObjectProperty<LocalDate>(time);
                  this.location = new SimpleStringProperty(location);
                  this.ID = new SimpleIntegerProperty(ID);
              }
              //String,String,String, Date,String,Integer
              private final StringProperty name;
          
              public String getName() {
                  return name.get();
              }
          
              public StringProperty nameProperty() {
                  return name;
              }
          
              public void setName(String name) {
                  this.name.set(name);
              }
          
              public String getDepartment() {
                  return department.get();
              }
          
              public StringProperty departmentProperty() {
                  return department;
              }
          
              public void setDepartment(String department) {
                  this.department.set(department);
              }
          
              public String getLecturer() {
                  return lecturer.get();
              }
          
              public StringProperty lecturerProperty() {
                  return lecturer;
              }
          
              public void setLecturer(String lecturer) {
                  this.lecturer.set(lecturer);
              }
          
              public LocalDate getTime() {
                  return Time.get();
              }
          
              public ObjectProperty<LocalDate> timeProperty() {
                  return Time;
              }
          
              public void setTime(LocalDate time) {
                  this.Time.set(time);
              }
          
              public String getLocation() {
                  return location.get();
              }
          
              public StringProperty locationProperty() {
                  return location;
              }
          
              public void setLocation(String location) {
                  this.location.set(location);
              }
          
              public int getID() {
                  return ID.get();
              }
          
              public IntegerProperty IDProperty() {
                  return ID;
              }
          
              public void setID(int ID) {
                  this.ID.set(ID);
              }
          }
        4. 我们需要实现的效果是,在加载这个页面时,表格中自动加载数据。填写我们创建的控制器类如下:
          package sample;
          
          import javafx.collections.FXCollections;
          import javafx.collections.ObservableList;
          import javafx.fxml.FXML;
          import javafx.scene.control.TableColumn;
          import javafx.scene.control.TableView;
          import javafx.scene.control.TextField;
          
          import java.time.LocalDate;
          
          public class MainController {
              @FXML
              private TextField username;
              @FXML
              private TextField password;
              @FXML
              private TableView<Courses> allCoursesTable;
              @FXML
              private TableColumn<Courses,String> CourseNameAttribute;
              @FXML
              private TableColumn<Courses,String> DepartmentAttribute;
              @FXML
              private TableColumn<Courses,String> LectureAttribute;
              @FXML
              private TableColumn<Courses, LocalDate> TimeAttribute;
              @FXML
              private TableColumn<Courses,String> LocationAttribute;
              @FXML
              private TableColumn<Courses,Number> CourseIDAttribute;
              @FXML
              private void initialize() {
                  ObservableList<Courses> data= FXCollections.observableArrayList(new Courses("MACHINE LEARNING","COMPUTER","ZHANGYI",LocalDate.of(2012,01,01),"A101",4011));//创建ObservableList对象,将数据装进去
                  CourseNameAttribute.setCellValueFactory(cellData->cellData.getValue().nameProperty());
                  DepartmentAttribute.setCellValueFactory(cellData->cellData.getValue().departmentProperty());
                  LectureAttribute.setCellValueFactory(cellData->cellData.getValue().lecturerProperty());
                  TimeAttribute.setCellValueFactory(cellData->cellData.getValue().timeProperty());
                  LocationAttribute.setCellValueFactory(cellData->cellData.getValue().locationProperty());
                  CourseIDAttribute.setCellValueFactory(cellData->cellData.getValue().IDProperty());
                  allCoursesTable.setItems(data);//加载数据
              }
          }

          这就是为什么要用单独的控制器类了,否则initialize方法会在每次创建页面的时候都加载一次,而只有某一个页面有我们说的这些Tabel和Column对象,会报错的。

        5. 写一个方法来跳转到这个页面。

        这就是入门的FX教程了,有了这些基本的方法,相信设计一个稍微复杂一点的桌面应用程序已经不是问题了。

原文地址:https://www.cnblogs.com/jiading/p/11823872.html

时间: 2024-10-11 12:53:15

使用JavaFX开发桌面程序的相关文章

Atitit.使用引擎加脚本架构的设计&#160;使用php,js来开发桌面程序。。

Atitit.使用引擎加脚本架构的设计 使用php,js来开发桌面程序.. 1. 引擎加脚本架构 跨平台,桌面与web的优势1 2. 架构桌面引擎(java,c#)2 3. php桌面引擎要点2 3.1. 运行环境:同时支持cs桌面与web方式2 3.2. 界面使用html5+css+js实现2 3.3. Cli接口互操作,与web接口互操作2 3.4. 其他----------流程2 3.4.1. Html5界面确定要是有的后台引擎$parser=php c# java js2 3.4.2. 

Eclipse RCP开发桌面程序

所谓RCP,就是Rich Client Platform的缩写,即富客户平台,是Eclipse进化的产物(自3.0版以后出现),是Eclipse组织向用户提供的强大的开放性开发平台,能够使用户方便地创建自己的基于Eclipse的应用程序,并且这些应用程序能够得到Eclipse的底层支持.更重要的是,我们可以利用Java创建象Eclipse这么漂亮的桌面程序. 我相信,在未来的几年里,RCP一定会变得非常流行.使用RCP,我们可以开发界面象Eclipse这样漂亮的桌面程序,比如医院管理系统啊.CA

Java开发桌面程序学习(四)——常用应用布局模板和简单分析

布局 前言 刚开始的时候,不知道使用什么布局,发现SceneBuilder其实有8.5版本的,里面就是有提供一个简单的桌面程序模板,8.5可以去官网下载,不过网速好像有点慢,慢慢等吧,官网下载地址 布局分析 外层是一个VBox,然后使用MenuBar,MenuBar的宽度就会自动和VBox的宽度保持一致(之前我使用的是FlowPane,弄了半天都不能自动适应宽度). MenuBar中有很多常用的MenuItem选项,我们可以根据自己的选择删除,并修改文字 中间的空白面板就是一个AnchorPan

Java开发桌面程序学习(八)——开源库 JFXUtils 让你更简单地进行JavaFX开发

JFxUtils 项目地址 介绍 这是一个JFX的工具库,Intent可以简单地实现打开一个新窗口并传递数据,DialogBuilder可以简单地生成对话框,MyUtils有些常用的功能 使用 JFxUtils与JavaFxTemplate是配套使用的,想要使用的话,请下载JavaFxTemplate模板 JavaFxTemplate模版已经整合了JFxUtils,直接使用即可 JavaFxTemplate项目地址 下载jar包 ,把jar包导入到项目中 下载地址 Intent的使用 使用Int

nw.js开发第一个程序(html开发桌面程序exe)

一.环境配置 windows系统 cnpm install node 下载nw.js https://github.com/nwjs/nw.js 找到download下载合适的版本 二.开发 项目目录如下: node_modules存放用到的node模块,package.json是入口文件 package.json内容为 {"name": "nw-app","version": "1.0.0","descriptio

Java开发桌面程序学习(三)——基于Jfoenix库的JFXDialog封装仿Android对话框的工具DialogBuilder

对话框的封装使用 前言 登录需要弹出登录对话框,但是,Jfoenix库使用对话框比较难受,还得动态去生成布局,我想起了Android的对话框生成,便是封装了一个,一行代码即可生成 使用 使用的话,直接一行代码即可 ,下面的几种常用的情况! 只有一个确定按钮,按下esc可以退出 //tfOutPath是一个控件(controller) new DialogBuilder(tfOutPath).setTitle("提示").setMessage("登录成功").setN

Java开发桌面程序学习(五)——文件选择器和目录选择器的使用

选择器的使用 DirectoryChooser目录选择器官方文档 FileChooser文件选择器官方文档 文件选择器的使用 JavaFx中有个FileChoser,可以打开一个对话框来选择文件 FileChooser fileChooser = new FileChooser(); //添加扩展名过滤器,过滤文件 //注意,这个过滤器添加得在showOpenDialog方法之前,不然会没有效果 fileChooser.getExtensionFilters().add(new FileChoo

Java开发桌面程序学习(七)——ImageView设置图片以及jar包读取fxml文件

ImageView设置图片 JavaFx的ImageView,设置图片不能直接通过属性设置,只能通过代码来设置 ImageView设置图片 首先,我们让fxml对应的那个controller的java文件实现Initializable接口,之后就在复写的该接口的initialize方法中设置我们ImageView的图片 我的图片是放在了一个img文件夹里 之后,和之前的fxml一样,得去修改pom.xml,不然maven就会把img这个文件夹的内容全部忽略掉,之后就会找不到图片文件 @Overr

Java开发桌面程序学习(十)——css样式表使用以及Button悬浮改变样式实现

css样式表使用 javafx中的css样式,与html的有些不一样,javafx中的css,是以-fx-background-color这种样子的,具体可以参考文档JavaFx css官方文档 javafx中,css样式有两种使用方法 直接在fxml中使用 fxml引用css文件 fxml直接使用样式 在某个控件中使用style属性即可 <Text layoutX="235.0" layoutY="173.0" style="-fx-backgro