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

每个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>




JavaFX中提供了FXML来将UI界面与Java代码分离,使得UI设计师可以专注于设计UI界面,而Java开发者可以专注于编写业务逻辑代码。因此,将JavaFX代码转换为FXML文件可以提高开发效率和可维护性。 下面是将JavaFX代码转换为FXML的步骤: 1. 创建FXML文件 在项目的src/main/resources目录下创建一个新的FXML文件。可以使用FXML Editor或者任何文本编辑器来创建和编辑FXML文件。 2. 将JavaFX代码复制到FXML文件中 将JavaFX代码中的UI界面部分复制到FXML文件中的fx:root标签内。如下所示: ``` <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <fx:root type="AnchorPane" xmlns:fx="http://javafx.com/fxml/1"> <children> <Button text="Click Me!" /> </children> </fx:root> ``` 3. 添加FXML注释 在FXML文件中添加FXML注释,以指定FXML文件和Java类之间的关联。如下所示: ``` <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <!-- Sample.fxml --> <fx:root type="AnchorPane" xmlns:fx="http://javafx.com/fxml/1"> <children> <Button text="Click Me!" /> </children> </fx:root> ``` 4. 在Java类中加载FXML文件 在Java类中使用FXMLLoader类来加载FXML文件,并将其与UI界面关联。如下所示: ``` public class Main extends Application { @Override public void start(Stage primaryStage) throws Exception{ FXMLLoader loader = new FXMLLoader(getClass().getResource("Sample.fxml")); Parent root = loader.load(); primaryStage.setScene(new Scene(root)); primaryStage.show(); } public static void main(String[] args) { launch(args); } } ``` 以上就是将JavaFX代码转换为FXML文件的步骤。通过使用FXML,可以更好地管理UI界面和业务逻辑代码,提高开发效率和可维护性。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值