JavaFX学习笔记（三）　FXML与控制器(Java代码)

最新推荐文章于 2025-06-01 00:01:42 发布

oO临时工Oo

最新推荐文章于 2025-06-01 00:01:42 发布

阅读量1.7w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaFX 文章标签： javafx ria RIA

本文链接：https://blog.youkuaiyun.com/trocp/article/details/8190615

JavaFX 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了JavaFX中控制器的设计与实现，详细解释了如何将控制器应用于视图中，以及如何通过事件监听器来响应用户操作。通过实例代码，展示了如何在JavaFX应用中实现基本的交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每个FXML只有一个控制器（一个java类），用以响应页面的各种事件，就像html与js的关系。

引入控制器

在JavaFX Scene Builder设计视图中选中视图的根结点（每个视图只有一个根结点），在右边选择“代码”属性面板，第一个属性为“控制器类”，输入类路径，如t1.T1Controller。

使用控制器中的方法

选中视图树（分层结构）中的任意节点，在右边面板选择“代码”属性面板，有很多事件可供设置，其值为控制器中的方法名前面加上一个#。

以下为控制器的代码

package t1;

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

/**
 * 
 * @author root
 */
public class T1Controller implements Initializable {

	@FXML
	private Button btn1;
	@FXML
	private Button btn2;

	@FXML
	private void btn1Action(ActionEvent event) {
		System.out.println("You clicked btn1!");
	}

	@FXML
	private void btn2Action(ActionEvent event) {
		System.out.println("You clicked btn2!");
	}

	@Override
	public void initialize(URL url, ResourceBundle rb) {
		// TODO
	}
}

以下为FXML源文件中的配置

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.web.*?>

<BorderPane id="BorderPane" prefHeight="459.0" prefWidth="600.0" 
stylesheets="T1.css" styleClass="bg" 
 xmlns:fx="http://javafx.com/fxml" fx:controller="t1.T1Controller"> <!--配置控制器-->
 <bottom>
    <HTMLEditor htmlText="<html><head></head><body contenteditable="true"></body></html>" minWidth="485.0" opacity="1.0" prefHeight="153.0" prefWidth="597.0" />
  </bottom>
  <center>
    <TextArea prefHeight="351.0" prefWidth="572.0" text="this is center this is center this is center 
this is center this is center this is center 
this is center this is center this is center 
this is center this is center this is center 
this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center this is center " wrapText="true" />
  </center>
  <left>
    <ListView prefHeight="379.0" prefWidth="116.0" />
  </left>
  <padding>
    <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
  </padding>
  <right>
    <TableView prefHeight="291.0" prefWidth="78.0">
      <columns>
        <TableColumn prefWidth="75.0" text="列 X" />
      </columns>
    </TableView>
  </right>
  <top>
    <FlowPane prefHeight="25.0" prefWidth="601.0">
      <children>
        <!--使用函数-->
        <Button fx:id="btn1" mnemonicParsing="false" onAction="#btn1Action" style="-fx-background-color:red;" text="Button1" />
        <Button fx:id="btn2" mnemonicParsing="false" onAction="#btn2Action" text="Button2" styleClass="bg2"  />
        <Line endX="100.0" startX="-100.0" />
      </children>
      <padding>
        <Insets bottom="3.0" left="5.0" right="5.0" top="3.0" />
      </padding>
    </FlowPane>
  </top>
</BorderPane>