JavaFx TabPane：想要一個控制器對於2個或更多選項卡

Question

我是新來的Java Fx。我有一個TabPanel與3個選項卡。每個選項卡都有很多控件（文本，按鈕等），我想要的是爲所有選項卡分配一個控制器。 SceneBuilder只允許我爲整個視圖分配一個控制器，也就是說，只有頂部面板（根）具有「控制器類」選項，因此如何爲一個類中的所有選項卡編寫代碼。

我有.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> 

Answer 1

此應用程序演示瞭如何使用控制器與不同的中的不同Node s在TabPane中進行交互。

主要

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); 
    } 

} 

控制器

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> 

Answer 2

你必須創建一個新的文件.fxml的選項卡，然後設置fx:controller=TabController那麼你可以<fx:include source="myTab.fxml"> 所以，你可以包括這3次，那麼你將有三個與山姆控制器的標籤。

所以主要.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 

>

那孩子.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。