JavaFx TabPane:想要一个控制器用于 2 个或更多选项卡
JavaFx TabPane : Want One Controller For 2 or more tab
我是 java Fx 的新手。我有一个带有 3 个选项卡的 TabPanel。每个选项卡都有很多控件(文本、按钮等),而我想要的是为所有选项卡分配一个控制器。 SceneBuilder 只让我为整个视图分配一个控制器,我的意思是,只有顶部面板(根)有 "Controller class" 选项,所以如何在一个 class 中编写所有选项卡的代码.
我有 .fxml 文件为:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<Pane lns="http://javafx.com/javafx/8"xmlns:fx="http://javafx.com/fxml/1"
fx:controller="Application.LoginController">
<children>
<TabPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight=" -
Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0"
tabClosingPolicy="UNAVAILABLE">
<tabs>
<Tab text="Register">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<Label layoutX="27.0" layoutY="45.0" text="Name" />
<Label layoutX="27.0" layoutY="102.0" text="Password"
/>
<Label layoutX="27.0" layoutY="151.0" text="City" />
<Label layoutX="27.0" layoutY="204.0" text="Email" />
<Label layoutX="27.0" layoutY="246.0" text="Phone" />
<TextField fx:id="name"
layoutX="164.0"layoutY="41.0"/>
<TextField fx:id="passwd" layoutX="164.0"
layoutY="98.0" />
<TextField fx:id="city" layoutX="164.0"
layoutY="147.0" />
<TextField fx:id="email" layoutX="164.0"
layoutY="200.0" />
<TextField fx:id="phone" layoutX="164.0"
layoutY="242.0" />
<Button fx:id="register" layoutX="129.0"
layoutY="308.0" mnemonicParsing="false" text="Register" />
<Button fx:id="cancle" cancelButton="true"
layoutX="274.0" layoutY="308.0" mnemonicParsing="false" text="Cancle" />
</children>
</AnchorPane>
</content>
</Tab>
<Tab text="Login">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<Label layoutX="26.0" layoutY="57.0" text="User Name"
/>
<Label layoutX="26.0" layoutY="103.0" text="Password"
/>
<Button fx:id="myLogin" layoutX="145.0"
layoutY="186.0" mnemonicParsing="false" text="Login" />
<Button fx:id="cancle" cancelButton="true"
layoutX="274.0" layoutY="186.0" mnemonicParsing="false" text="Cancle" />
<TextField fx:id="uName" layoutX="145.0"
layoutY="53.0" prefHeight="25.0" prefWidth="205.0" />
<TextField fx:id="pwd" layoutX="148.0" layoutY="99.0"
prefHeight="25.0" prefWidth="200.0" />
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</children>
</Pane>
您必须为选项卡创建一个新的 .fxml
文件然后设置 fx:controller=TabController
然后您可以 <fx:include source="myTab.fxml">
所以你可以包含这个 3 次然后你将有三个带有 sam 控制器的选项卡。
所以主要.fxml
:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.TabPane?>
<TabPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="TabPaneController">
<tabs>
<fx:include fx:id="FirstTab" source="CustomTab.fxml"/>
<fx:include fx:id="SecondTab" source="CustomTab.fxml"/>
<fx:include fx:id="ThirdTab" source="CustomTab.fxml"/>
</tabs>
</TabPane
>
和 child .fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Tab?>
<Tab xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="TabController">
<!--content-->
</Tab>
所以现在你有三个相同的选项卡 Controller
。
此应用程序演示了如何使用控制器与 TabPane
中不同 Tab
中的不同 Node
交互。
Main
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
*
* @author blj0011
*/
public class JavaFXApplication151 extends Application
{
@Override
public void start(Stage stage) throws Exception
{
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
/**
* @param args the command line arguments
*/
public static void main(String[] args)
{
launch(args);
}
}
Controller
import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
/**
*
* @author blj0011
*/
public class FXMLDocumentController implements Initializable
{
//Tab1 nodes
@FXML private Label lblTab1;
@FXML private TextField tfTab1;
//Tab2 nodes
@FXML private Label lblTab2;
@FXML private TextField tfTab2;
@Override
public void initialize(URL url, ResourceBundle rb)
{
//This code set the Tab1 label's text to what is show in the TextField on Tab1
tfTab1.setOnKeyReleased((event)->{
lblTab1.setText(tfTab1.getText());
});
//This code set the Tab2 label's text to what is show in the TextField on Tab2
tfTab2.setOnKeyReleased((event)->{
lblTab2.setText(tfTab2.getText());
});
}
}
FXML
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<AnchorPane id="AnchorPane" prefHeight="353.0" prefWidth="588.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.111" fx:controller="javafxapplication151.FXMLDocumentController">
<children>
<Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
<TabPane layoutX="87.0" layoutY="20.0" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<tabs>
<Tab text="Untitled Tab 1">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<TextField fx:id="tfTab1" layoutX="184.0" layoutY="84.0" prefHeight="25.0" prefWidth="220.0" />
<StackPane layoutX="27.0" layoutY="143.0" prefHeight="150.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<Label fx:id="lblTab1" text="Label" />
</children>
</StackPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab text="Untitled Tab 2">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<TextField fx:id="tfTab2" layoutX="220.0" layoutY="86.0" />
<StackPane layoutX="195.0" layoutY="140.0" prefHeight="150.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<Label fx:id="lblTab2" text="Label" />
</children>
</StackPane>
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</children>
</AnchorPane>
我是 java Fx 的新手。我有一个带有 3 个选项卡的 TabPanel。每个选项卡都有很多控件(文本、按钮等),而我想要的是为所有选项卡分配一个控制器。 SceneBuilder 只让我为整个视图分配一个控制器,我的意思是,只有顶部面板(根)有 "Controller class" 选项,所以如何在一个 class 中编写所有选项卡的代码.
我有 .fxml 文件为:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<Pane lns="http://javafx.com/javafx/8"xmlns:fx="http://javafx.com/fxml/1"
fx:controller="Application.LoginController">
<children>
<TabPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight=" -
Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0"
tabClosingPolicy="UNAVAILABLE">
<tabs>
<Tab text="Register">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<Label layoutX="27.0" layoutY="45.0" text="Name" />
<Label layoutX="27.0" layoutY="102.0" text="Password"
/>
<Label layoutX="27.0" layoutY="151.0" text="City" />
<Label layoutX="27.0" layoutY="204.0" text="Email" />
<Label layoutX="27.0" layoutY="246.0" text="Phone" />
<TextField fx:id="name"
layoutX="164.0"layoutY="41.0"/>
<TextField fx:id="passwd" layoutX="164.0"
layoutY="98.0" />
<TextField fx:id="city" layoutX="164.0"
layoutY="147.0" />
<TextField fx:id="email" layoutX="164.0"
layoutY="200.0" />
<TextField fx:id="phone" layoutX="164.0"
layoutY="242.0" />
<Button fx:id="register" layoutX="129.0"
layoutY="308.0" mnemonicParsing="false" text="Register" />
<Button fx:id="cancle" cancelButton="true"
layoutX="274.0" layoutY="308.0" mnemonicParsing="false" text="Cancle" />
</children>
</AnchorPane>
</content>
</Tab>
<Tab text="Login">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<Label layoutX="26.0" layoutY="57.0" text="User Name"
/>
<Label layoutX="26.0" layoutY="103.0" text="Password"
/>
<Button fx:id="myLogin" layoutX="145.0"
layoutY="186.0" mnemonicParsing="false" text="Login" />
<Button fx:id="cancle" cancelButton="true"
layoutX="274.0" layoutY="186.0" mnemonicParsing="false" text="Cancle" />
<TextField fx:id="uName" layoutX="145.0"
layoutY="53.0" prefHeight="25.0" prefWidth="205.0" />
<TextField fx:id="pwd" layoutX="148.0" layoutY="99.0"
prefHeight="25.0" prefWidth="200.0" />
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</children>
</Pane>
您必须为选项卡创建一个新的 .fxml
文件然后设置 fx:controller=TabController
然后您可以 <fx:include source="myTab.fxml">
所以你可以包含这个 3 次然后你将有三个带有 sam 控制器的选项卡。
所以主要.fxml
:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.TabPane?>
<TabPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="TabPaneController">
<tabs>
<fx:include fx:id="FirstTab" source="CustomTab.fxml"/>
<fx:include fx:id="SecondTab" source="CustomTab.fxml"/>
<fx:include fx:id="ThirdTab" source="CustomTab.fxml"/>
</tabs>
</TabPane
>
和 child .fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Tab?>
<Tab xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="TabController">
<!--content-->
</Tab>
所以现在你有三个相同的选项卡 Controller
。
此应用程序演示了如何使用控制器与 TabPane
中不同 Tab
中的不同 Node
交互。
Main
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
*
* @author blj0011
*/
public class JavaFXApplication151 extends Application
{
@Override
public void start(Stage stage) throws Exception
{
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
/**
* @param args the command line arguments
*/
public static void main(String[] args)
{
launch(args);
}
}
Controller
import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
/**
*
* @author blj0011
*/
public class FXMLDocumentController implements Initializable
{
//Tab1 nodes
@FXML private Label lblTab1;
@FXML private TextField tfTab1;
//Tab2 nodes
@FXML private Label lblTab2;
@FXML private TextField tfTab2;
@Override
public void initialize(URL url, ResourceBundle rb)
{
//This code set the Tab1 label's text to what is show in the TextField on Tab1
tfTab1.setOnKeyReleased((event)->{
lblTab1.setText(tfTab1.getText());
});
//This code set the Tab2 label's text to what is show in the TextField on Tab2
tfTab2.setOnKeyReleased((event)->{
lblTab2.setText(tfTab2.getText());
});
}
}
FXML
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<AnchorPane id="AnchorPane" prefHeight="353.0" prefWidth="588.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.111" fx:controller="javafxapplication151.FXMLDocumentController">
<children>
<Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
<TabPane layoutX="87.0" layoutY="20.0" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<tabs>
<Tab text="Untitled Tab 1">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<TextField fx:id="tfTab1" layoutX="184.0" layoutY="84.0" prefHeight="25.0" prefWidth="220.0" />
<StackPane layoutX="27.0" layoutY="143.0" prefHeight="150.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<Label fx:id="lblTab1" text="Label" />
</children>
</StackPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab text="Untitled Tab 2">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<TextField fx:id="tfTab2" layoutX="220.0" layoutY="86.0" />
<StackPane layoutX="195.0" layoutY="140.0" prefHeight="150.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<Label fx:id="lblTab2" text="Label" />
</children>
</StackPane>
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</children>
</AnchorPane>