如何使用JavaFX和Scene Builder的MySQL连接GUI设计

DebugUsery
463 阅读10分钟

使用JavaFX和Scene Builder进行MySQL连接GUI设计

JavaFX适用于桌面应用开发和其他应用。它是一组图形和媒体包，使设计、创建、调试、测试和部署应用程序变得更加容易。

这些应用程序几乎可以在任何平台上稳定运行，从Windows到Android到Mac操作系统。通过与桌面应用程序用户界面的互动，数据可以被保存在（MySQL）数据库中进行处理或任何其他操作。

在这篇文章中，我们将研究如何使用JavaFX场景生成器来设计和开发一个可以连接到MySQL数据库的应用程序。我们将研究如何使用JavaFX场景构建器设计和创建一个简单的GUI。

用户将输入数据库连接字符串，将连接字符串保存在一个XML文件中，并从文件中检索它们。之后，连接到数据库。

在这种情况下，将不需要从代码部分改变连接字符串，而是在用户界面上。这使得使用MySQL数据库工具作为存储资源的应用程序的部署更加容易。

先决条件

为了继续学习，读者将需要以下条件。

  • 安装好[JDK]。
  • [NetBeans]IDE。
  • [JavaFX Scene builder]。
  • Java编码的基础知识。
  • 安装[MySQL]。

JavaFX概述

JavaFX被定义为一组图形和媒体包，使设计者、开发者和测试者能够在不同的操作系统平台上设计、创建、调试和部署客户端应用程序。

因为JavaFX库纯粹是作为一个Java API编写的，所以JavaFX应用程序可以引用Java库中的任何API。也就是说，任何用JavaFX完成的应用程序都可以使用任何一个Java API库来访问并与本地系统功能进行通信。

JavaFX应用程序的外观和行为可以使用层叠样式表（CSS）进行定制。设计师可以通过使用CSS来改变应用程序的外观和感觉。

这使得UI设计与应用程序的后端逻辑分离成为可能。设计师可以用FXML语言设计用户界面，并使用Java代码来处理商业应用逻辑中的主要动作和事件。

JavaFX的API作为完全集成的JRE和JDK随时可以使用。它们不需要单独安装，但需要在IDE中激活才能开始开发JavaFX应用程序。

JavaFX场景生成器介绍

场景生成器是一个设计者的应用工具，它允许设计者规划、制作原型和设计JavaFX应用程序的用户界面。这样做无需对应用程序的用户界面进行硬编码。它允许拖放用户界面组件到工作区，以改变其属性。并且，将样式表应用到组件上。

当设计者拖放组件到工作区时，场景构建器将为设计创建一个单独的FXML代码。这有助于设计者和开发者将用户界面的设计与应用程序的动作和事件的系统业务逻辑分开。

JavaFX场景构建器可以很容易地与Java IDE集成，因为它是一个独立的开发工具。

FXML

FXML顾名思义，它是一种基于XML的脚本语言。它被设计用来帮助建立基于JavaFX的应用程序的用户接口。它可以用来构建整个JavaFX场景或只是其中的一部分。

当组件被拖放到工作区时，FXML文件会在场景构建器中自动创建。这使得FXML对设计师来说是必不可少的，因为它消除了设计的硬编码。

它还有助于将UI设计与应用程序的主要动作和事件编码分开。这使得整个过程更容易。

FXML有助于建立一个JavaFX图形化的用户界面，它被称为场景。其结果是一个FXML文件。当使用场景构建器时，一个代表JavaFX UI的XML文件格式。

MySQL的Java连接概述

MySQL通过MySQL连接器提供了一个与Java应用程序的连接。例如，一个实现Java数据库连接API的驱动程序。可以应用几个框架方法来连接到MySQL数据库。这些方法包括Hibernate、spring的JDBC模板和MyBatis SQL Maps。

MySQL JDBC接口允许连接到MySQL数据库。它执行SQL操作，发出查询，更新数据，以及数据库查询的结果。

本文将设计和开发一个UI，帮助连接到MySQL数据库。我们需要提供代码中提供的连接字符串。这使得应用程序的部署具有挑战性，因为它需要将数据库的凭证与代码中的凭证相匹配。

该接口将允许输入这些凭证，并将其保存为应用程序可以访问的文件格式。其中可以用于连接，以避免上述情况。

使用JavaFX Scene Builder进行用户界面设计

我们将使用NetBeans IDE创建一个新的应用程序。

打开NetBeans IDE。

从文件菜单中，选择一个新项目，并选择JavaFX。

在项目窗格中，选择JavaFX FXML应用程序，如下图所示。

Figure 1

点击下一步，给项目命名为MySQLConnection，如下图所示，然后点击完成。

Figure 2

MySQLConnection JavaFX应用程序是在主源包内的mysqlconnection子包中创建的，如下图所示。

Figure 3

我们需要安装JavaFX场景生成器。按照这里的方法来安装场景构建器。

一旦场景构建器安装完毕，在IDE中右击项目中的FXML文件并点击打开。

该文件打开后会出现一个场景生成器，如下图所示。

Figure 4

场景构建器的左侧有组件库，可以将其拖放到窗口中间的场景中。右侧显示的是已经从场景中选择的组件库的属性。

场景构建器的文档窗格显示了组件的层次结构和控制。层次结构显示了组件的布局，按照它们被添加到场景中的顺序。而控制器窗格则显示了控制类。这个类包含用于执行动作和事件的业务逻辑代码。

我们的结果用户界面应该如下图所示。在我们的案例中，我们将需要使用一些CSS代码来实现界面。

Figure 5

我们从左侧的控制面板中拖放我们的场景组件，然后再向我们的设计中添加一个CSS文件。

它应该出现如下图所示。

Figure 6

创建CSS文件

在NetBeans IDE中右击我们的主程序，选择其他，在项目窗格中，选择层叠样式表，如下图所示。将其命名为mainCascadeStyleSheet ，然后点击完成。

Figure 7

下面是我们的CSS代码。

 .background {
    -fx-background-color: #ffffff;
}

.label{
    -fx-margin-bottom: 2pt;
    -fx-font-size: inherit;
    -fx-line-height: 1.5pt;
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI Black";
    -fx-text-fill: black;
    -fx-opacity: 1;
}
.label-bright {
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI Black";
    -fx-text-fill: #9999ff;
    -fx-opacity: 1;
}
 .textfield {
    -fx-font-size: 12pt;
    -fx-padding:inherit;
    -fx-font-family: "Segoe UI Semibold";
}

.password-field {
    -fx-font-size: 12pt;
    -fx-padding:inherit;
    -fx-font-family: "Segoe UI Semibold";
}
 .button {
     
    -fx-outline: 1.5pt;
    -fx-outline: 6pt;
    -fx-margin: 1pt;
    -fx-font-family: inherit;
    -fx-font-size: inherit;
    -fx-line-height: inherit;
}

.button:hover {

    -fx-background-color: #9fcdff;
}

.button:pressed, .button:default:hover:pressed {
  -fx-background-color: white;
  -fx-text-fill: #9fcdff;
}

.button:focused {
    -fx-outline: 1px;
    -fx-outline: 5px;
}

.button:disabled, .button:default:disabled {
    -fx-opacity: 0.5;
    -fx-background-color: #9fcdff;
    -fx-text-fill: #ffffff;
}

.button:default {
    -fx-background-color: -fx-focus-color;
    -fx-text-fill: #ffffff;
}
.button:default:hover {
    -fx-background-color: derive(-fx-focus-color,32%);
}

绑定CSS文件

要将CSS文件添加到我们的场景设计中，请进入场景构建器，从层次结构中选择构成我们的主场景的主ArchorPane。在场景构建器右侧的检查器上，包含了属性、布局和代码，选择下拉属性部分，向下滚动到样式表。

选择我们之前创建的CSS文件，如下图所示。

Figure 8

最终设计预览

在场景构建器菜单中，点击preview ，选择show preview 。

我们的设计看起来应该如下图所示。

Figure 9

设计FXML文件

场景生成器为UI设计自动生成了一个FXML文件。下面是为设计生成的FXML文件代码。


<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.paint.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.text.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" fx:id="main" focusTraversable="true" prefHeight="308.0" prefWidth="506.0" stylesheets="@mainCascadeStyleSheet.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="mysqlconnection.FXMLDocumentController">
    <children>
        <Label fx:id="label" alignment="CENTER" layoutY="40.0" minHeight="16" minWidth="69" prefHeight="37.0" prefWidth="524.0" styleClass="label-bright" />
      <Button id="submit" fx:id="submit" layoutX="129.0" layoutY="248.0" mnemonicParsing="false" onAction="#handleButtonAction" text="Save" />
      <Label alignment="CENTER_RIGHT" layoutY="93.0" prefHeight="44.0" prefWidth="127.0" text="Database name" />
      <Label alignment="CENTER_RIGHT" layoutX="4.0" layoutY="130.0" prefHeight="37.0" prefWidth="120.0" text="Username" />
      <Label alignment="CENTER_RIGHT" layoutY="165.0" prefHeight="44.0" prefWidth="120.0" text="Password" />
      <Label alignment="CENTER_RIGHT" layoutX="1.0" layoutY="205.0" prefHeight="37.0" prefWidth="120.0" text="Server" />
      <PasswordField fx:id="txtdbPassword" alignment="CENTER" layoutX="129.0" layoutY="167.0" prefHeight="44.0" prefWidth="380.0" />
      <TextField fx:id="txtdbName" alignment="CENTER" layoutX="129.0" layoutY="94.0" prefHeight="37.0" prefWidth="380.0" />
      <TextField fx:id="txtdbUserName" alignment="CENTER" layoutX="129.0" layoutY="130.0" prefHeight="37.0" prefWidth="380.0" />
      <TextField fx:id="txtdbServer" alignment="CENTER" layoutX="129.0" layoutY="211.0" prefHeight="37.0" prefWidth="380.0" />
      <Button fx:id="bntConString" layoutX="187.0" layoutY="248.0" mnemonicParsing="false" onAction="#getString" text="Get Connection String" />
      <Button fx:id="bntTest" layoutX="370.0" layoutY="248.0" mnemonicParsing="false" onAction="#testConnectionAction" text="Test Connection" />
      <Label alignment="CENTER" contentDisplay="CENTER" layoutX="-1.0" layoutY="6.0" prefHeight="21.0" prefWidth="524.0" text="MySQL CONNECTION GRAPHICAL USER INTERFACE" textAlignment="RIGHT" textFill="#cfcee4" wrapText="true">
         <font>
            <Font size="14.0" />
         </font>
      </Label>
    </children>
   <effect>
      <DisplacementMap>
         <mapData>
            <FloatMap />
         </mapData>
      </DisplacementMap>
   </effect>
   <styleClass>
      <String fx:value="background" />
      <String fx:value="label-bright" />
      <String fx:value="password-field" />
      <String fx:value="textfield" />
   </styleClass>
</AnchorPane>

设计描述

我们设计的主要字段包括以下内容。

文本字段

  1. 数据库名称文本字段- 这允许用户给出应用程序应该与之通信的数据库的名称。数据库名称应该在这个字段中提供，因为它是写在数据库应用程序中的。
  2. 用户名文本字段- 这允许用户提供连接到数据库的数据库用户名。用于登录的数据库用户名在此字段中给出，以使我们的应用程序能够登录到数据库中。
  3. 密码- 这是为用户提供的数据库密码，用于访问给定的数据库。它将允许应用程序被验证和授权。
  4. 服务器- 这是数据库存储的主要位置。它可以是一个本地主机或远程服务器。

按钮

  1. **保存--**该按钮在点击时触发一个事件，将文本字段的信息以文件格式存储。获取这些信息的代码会创建一个XML文件，并将该文件保存在root lib 。
  2. 获取连接字符串- 这个按钮的动作事件是读取保存的文件。它访问文件中的连接信息，获得这些信息，并在各自的文本字段中显示它们。用户可以在再次保存前检查、验证并进行修改。如果文件没有连接字符串值，将返回空字符串，文本字段将是空的。
  3. 测试连接- 这个按钮的动作事件是与数据库通信，以检查提供的连接字符串是否正确，以及应用程序是否能与数据库通信。

事件处理程序代码

创建连接字符串代码的XML文件

该代码创建了一个XML文件，其中存储了MySQL连接证书。

 public void createDbConnectionXmlFile(Document doc, String user, String database, String password, String serverName) throws Exception {
        Element root = doc.createElement("dbConnectionFile");
        doc.appendChild(root);
        Element dbuser = doc.createElement("user");
        root.appendChild(dbuser);
        Text text1 = doc.createTextNode(user);
        dbuser.appendChild(text1);

        Element dbName = doc.createElement("database");
        root.appendChild(dbName);
        Text text2 = doc.createTextNode(database);
        dbName.appendChild(text2);

        Element dbPassword = doc.createElement("password");
        root.appendChild(dbPassword);
        Text text3 = doc.createTextNode(password);
        dbPassword.appendChild(text3);

        Element dbServer = doc.createElement("server");
        root.appendChild(dbServer);
        Text text4 = doc.createTextNode(serverName);
        dbServer.appendChild(text4);
         //Creating transformer object to perform our document file transformation
        TransformerFactory Tfactory = TransformerFactory.newInstance();
        Transformer Tformer = Tfactory.newTransformer();
        Tformer.setOutputProperty(OutputKeys.INDENT, "yes");
        //Contructing string outputs to the file
        StringWriter StringW = new StringWriter();
        StreamResult result = new StreamResult(StringW);
        
        DOMSource Dsource = new DOMSource(doc);
        Tformer.transform(Dsource, result);
        String xmlString = StringW.toString();

        try (
                BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(file, true)))) {
            bw.write(xmlString);
            bw.flush();
        }
    }

从XML中读取代码

public void readDbConnectionFile() {
        try {

            dbuilder_Factory = DocumentBuilderFactory.newInstance();
            document_Builder = dbuilder_Factory.newDocumentBuilder();
            document = document_Builder.parse(file);
            document.getDocumentElement().normalize();
            NodeList nList = document.getElementsByTagName("dbConnectionFile");
            
            for (int temp = 0; temp < nList.getLength(); temp++) {
                Node nNode = nList.item(temp);
                if (nNode.getNodeType() == Node.ELEMENT_NODE) {

                    Element eElement = (Element) nNode;
                    //Using the setters to set the values of the components read from the connection file
                    txtdbUserName.setText(eElement.getElementsByTagName("user").item(0).getTextContent());
                    txtdbName.setText(eElement.getElementsByTagName("database").item(0).getTextContent());
                    txtdbPassword.setText(eElement.getElementsByTagName("password").item(0).getTextContent());
                    txtdbServer.setText(eElement.getElementsByTagName("server").item(0).getTextContent());
                }
            }
        } catch (ParserConfigurationException | SAXException | IOException | DOMException e) {

        }
    }

连接到数据库的代码

   public void dbConnectionMethod() {

        readDbConnectionFile(); //Calls the method which reads the file and sets the values to the components

        //Using the components getter methods to get the values and assign the connection required strings
        pass = txtdbPassword.getText();
        url = "jdbc:mysql://" + txtdbServer.getText() + ":3306/" + txtdbName.getText();
        user = txtdbUserName.getText();
        pass = txtdbPassword.getText();

        try { //sets the connection to the database
            conect = DriverManager.getConnection(url, user, pass);
            state = conect.createStatement();
            label.setText("CONNECTED TO THE DATABASE");
            
        } catch (SQLException e) {
            label.setText("NOT CONNECTED TO THE DATABASE" + " " + e);
             
        }

    }

最终的GUI应用程序

Figure 10

随着点击保存按钮，创建一个XML文件并保存到文件夹的方法被调用。

Figure 11

点击后，应用程序读取XML文件，获得连接字符串，并尝试与MySQL数据库连接。如果连接成功，就会显示 "连接 "到数据库，如上面的截图所示。

总结

在这篇文章中，我们学习了JavaFX场景构建器如何设计一个可以连接到数据库的桌面应用程序。通过与桌面应用程序用户界面的交互，数据可以被保存在数据库（MySQL）中进行处理或任何其他操作。

我们还学习了JavaFX场景生成器如何为用户界面自动编写FXML代码，使设计非常简单。我们能够了解到MySQL连接字符串如何从用户界面输入，保存为XML文件格式，并在以后需要我们的应用程序与数据库通信时随时调用。

avatar
文章
阅读
粉丝