本节概要:实现本项目的界面设计
01 创建一个基于maven的JavaFX项目
第一步:首先创建一个maven项目
第二步:设置GroupId和ArtifactId
GroupId为:com.mycom.myapp
ArtifactId为:mailsendsystem
第三步:设置项目名称和项目路径
第四步:按照如下图创建文件夹
注意:不要按照第一节的文件夹目录结构创建包,虽然那也是能够成功,但那并不是一个maven项目,所以请按照下图来创建文件夹包。
第五步:创建两个fxml文件,分别名为:MainFrame.fxml和SendAccountOptionFrame.fxml。
可以看到有红色错误,先不用管。
注意:出现红色的原因是fxml界面文件没用同controller类相关联。
第六步:设计MainFrame.fxml
界面效果如下:
02 实现fxml内容
其中MainFrame.fxml内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.web.HTMLEditor?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="641.0"
prefWidth="719.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="MainSendSystem.controller.MainFrameController">
<children>
<VBox alignment="CENTER" prefHeight="641.0" prefWidth="719.0">
<children>
<HBox alignment="CENTER_RIGHT" prefHeight="100.0" prefWidth="200.0">
<children>
<Button fx:id="optionButton" mnemonicParsing="false" onAction="#do_optionButton_event"
text="设置"/>
</children>
</HBox>
<HBox alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0" spacing="50.0">
<children>
<Label text="收信人:"/>
<TextField fx:id="addresseeTextField" prefHeight="30.0" prefWidth="507.0"
promptText="请输入收件人邮箱:"/>
</children>
<padding>
<Insets left="50.0"/>
</padding>
</HBox>
<HBox alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0" spacing="50.0">
<children>
<Label text="主 题:"/>
<TextField fx:id="subjectTextField" prefHeight="30.0" prefWidth="504.0" promptText="请输入邮件主题:"/>
</children>
<padding>
<Insets left="50.0"/>
</padding>
</HBox>
<HBox alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0" spacing="100.0">
<children>
<Button fx:id="addAppendixButton" mnemonicParsing="false" onAction="#do_addAppendixButton_event"
text="添加附件"/>
<Label fx:id="appendixNameLabel"/>
</children>
<padding>
<Insets left="50.0"/>
</padding>
</HBox>
<HBox alignment="CENTER" prefHeight="377.0" prefWidth="715.0">
<children>
<HTMLEditor fx:id="contentHTMLEditor"
htmlText="<html><head></head><body contenteditable="true"></body></html>"
prefHeight="309.0" prefWidth="632.0"/>
</children>
</HBox>
<HBox alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0">
<children>
<Label fx:id="addresseeLabel"/>
</children>
<padding>
<Insets left="50.0"/>
</padding>
</HBox>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="50.0">
<children>
<Button fx:id="sendButton" mnemonicParsing="false" onAction="#do_sendButton_event" text="发送"/>
<Button fx:id="resetButton" mnemonicParsing="false" onAction="#do_resetButton_event" text="重置"/>
<Button fx:id="exitButton" mnemonicParsing="false" onAction="#do_exitButton_event" text="退出"/>
</children>
</HBox>
</children>
</VBox>
</children>
</AnchorPane>
可以直接将上面的代码复制到MainFrame.fxml中,当然也可以自己设计界面,熟练使用SceneBuilder。
注意:里面的组件对象和事件方法可以自己用SceneBuilder打开查看,在这里就不一一列举。
复制过去仍然会报错,因为还没有将其与controller类关联起来。
同理,SendAccountOptionFrame.fxml界面效果如下:
其源代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane prefHeight="516.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="MainSendSystem.controller.SendAccountOptionFrameController">
<children>
<VBox prefHeight="516.0" prefWidth="448.0">
<children>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="50.0">
<children>
<Label text="发件人:"/>
<TextField fx:id="addresserTextField" promptText="请输入发件人邮箱:"/>
</children>
</HBox>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="50.0">
<children>
<Label text="密 码:"/>
<PasswordField fx:id="passwordField" promptText="请输入密码或授权码:"/>
</children>
</HBox>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="50.0">
<children>
<Label text="服务器:"/>
<TextField fx:id="serverTextField" promptText="请输入服务器:"/>
</children>
</HBox>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="50.0">
<children>
<Button fx:id="saveButton" mnemonicParsing="false" onAction="#do_saveButton_event" text="保存"/>
<Button fx:id="cancelButton" mnemonicParsing="false" onAction="#do_ccancelButton_event"
text="取消"/>
</children>
</HBox>
</children>
</VBox>
</children>
</AnchorPane>
对于报错仍然忽略。
接下来在controller创建一个名为MainFrameController的类。
其中的内容即对界面的事件处理。
那么如何获取其组件对象和事件处理方法呢?
选中MainFrame.fxml文件,右键用SceneBuilder打开。
然后View——>Show Sample Controller Skeleton
复制打开面板中的内容到MainFrameController.java中,全部覆盖。
其中报错有两个,分别是包路径错误以及未导入类错误。
最后修改成功不报错的代码如下:
package com.mycom.myapp.mailsendsystem.controller;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.web.HTMLEditor;
public class MainFrameController {
@FXML
private HTMLEditor contentHTMLEditor;
@FXML
private Label appendixNameLabel;
@FXML
private Button exitButton;
@FXML
private Button optionButton;
@FXML
private Button addAppendixButton;
@FXML
private TextField subjectTextField;
@FXML
private TextField addresseeTextField;
@FXML
private Label addresseeLabel;
@FXML
private Button resetButton;
@FXML
private Button sendButton;
@FXML
void do_optionButton_event(ActionEvent event) {
}
@FXML
void do_addAppendixButton_event(ActionEvent event) {
}
@FXML
void do_sendButton_event(ActionEvent event) {
}
@FXML
void do_resetButton_event(ActionEvent event) {
}
@FXML
void do_exitButton_event(ActionEvent event) {
}
}
同理,在controller下创建一个名为SendAccountOptionFrameController的类。
内容如下:
package com.mycom.myapp.mailsendsystem.controller;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
public class SendAccountOptionFrameController {
@FXML
private TextField addresserTextField;
@FXML
private Button cancelButton;
@FXML
private PasswordField passwordField;
@FXML
private TextField serverTextField;
@FXML
private Button saveButton;
@FXML
void do_saveButton_event(ActionEvent event) {
}
@FXML
void do_ccancelButton_event(ActionEvent event) {
}
}
好,界面弄好了,现在就是启动程序了。
在运行之前,先解决fxml文件中错误。
将MainFrame.fxml文件中的fx:controller="MainSendSystem.controller.MainFrameController"修改成fx:controller="com.mycom.myapp.mailsendsystem.controller.MainFrameController"。
同时还有将SendAccountOptionFrame.fxml文件中的fx:controller="MainSendSystem.controller.SendAccountOptionFrameController"改成fx:controller="com.mycom.myapp.mailsendsystem.controller.SendAccountOptionFrameController"。
好的,报错解决,下面就是最后一步,创建一个启动类启动该程序了。
在mailsendsystem包创建一个MainApp类。
内容如下:
package com.mycom.myapp.mailsendsystem;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import java.io.IOException;
public class MainApp extends Application {
private Stage primaryStage;
@Override
public void start(Stage primaryStage) {
this.primaryStage = primaryStage;
// 设置标题
this.primaryStage.setTitle("邮件发送器");
// 在程序启动的时候加载主界面
initMainFrame();
}
/**
* 加载主界面
*/
public void initMainFrame() {
try {
// 加载FXML界面文件
FXMLLoader loader = new FXMLLoader();
loader.setLocation(getClass().getResource("/view/MainFrame.fxml"));
Parent root = loader.load();
// 实例化场景
Scene scene = new Scene(root);
// 将场景设置到舞台
primaryStage.setScene(scene);
// 展示舞台
primaryStage.show();
} catch (IOException e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
点击运行,效果如下: