Javafx 简明教程

JavaFX - TabPane

TabPane 充当一个或多个 Tab 对象的容器。术语 tab 指代显示区域顶部的一个部分，它表示另一个网页或内容。某个网页的内容仅在其对应的选项卡被点击时才会变得可见。在下图中，我们可以看到三个打开的选项卡 −

A TabPane serves as a container for one or more Tab objects. The term tab refers to a section at the top of display area that represents another web page or content. The content of a web page becomes visible only when its corresponding tab is clicked. We can see three tabs are open in the below figure −

tabpane

TabPane in JavaFX

在 JavaFX 中，名为 TabPane 的类表示一个选项卡窗格。若要使用选项卡窗格的功能，我们需要创建一个 TabPane 类的实例，并在其内部添加我们想要显示的选项卡。这些选项卡可以包含任何 JavaFX 节点，作为选项卡的内容，例如标签、按钮、图像、文本字段、视频等等。我们可以使用以下任何构造函数来创建选项卡窗格 −

In JavaFX, the class named TabPane represents a tabpane. To use the feature of tabpane, we need to create an instance of the TabPane class and add the tabs we want to display inside it. These tabs can contain any JavaFX nodes as the content of a tab, such as labels, buttons, images, text fields, videos and so on. We can use any of the below constructors to create a tabpane −

  1. TabPane() − It is used to create an empty tabpane.

  2. TabPane(Tab tabs) − It is the parameterized constructor of TabPane class which will create a new tabpane with the specified set of tabs.

Steps to create a TabPane in JavaFX

要在 JavaFX 中创建一个 TabPane，请按照以下给定的步骤操作。

To create a TabPane in JavaFX, follow the steps given below.

Step 1: Create desired number of Tabs

如前所述，选项卡窗格包含一个或多个选项卡。因此，我们的第一步是在选项卡窗格内创建选项卡以供显示。此处，我们将创建三个标签，分别是 Label、Image 和 Video。在 JavaFX 中，通过实例化名为 Tab 的类来创建选项卡，该类属于 javafx.scene.control 包。Tab 对象有一个文本属性，用于设置选项卡的标题。使用以下代码创建选项卡 −

As discussed earlier, a tabpane contains one or more Tabs. Therefore, our first step would be creating tabs to display within the tabpane. Here, we are going to create three tabs namely Label, Image and Video. In JavaFX, the tabs are created by instantiating the class named Tab which belongs to a package javafx.scene.control. A Tab object has a text property that sets the title of the tab. Create the tabs using the following code −

// Creating a Label tab
Tab tab1 = new Tab("Label");
// Creating an Image tab
Tab tab2 = new Tab("Image");
// Creating a Video tab
Tab tab3 = new Tab("Video");

Step 2: Set the content of Tabs

Tab 对象有一个内容属性，用于设置要显示在选项卡正文中的节点。对于此操作，我们使用 setContent() 方法。它与 Tab 对象一起使用，并接受 Node 对象作为其构造函数的参数，如下面的代码所示 −

The Tab object has a content property that sets the node to be displayed in the tab body. For this action, we use the setContent() method. It is used along with the Tab object and accepts Node object as an argument to its constructor as shown in the below code −

// setting the Label tab
tab1.setContent(new Label("This is the first tab"));
// setting the Image tab
tab2.setContent(imageView);
// setting the Video tab
tab3.setContent(vbox);

Step 3: Instantiate the TabPane class

要创建选项卡窗格，请实例化 TabPane 包的 javafx.scene.control 类，而不向其构造函数传递任何参数值，并使用 getTabs() 方法将所有选项卡添加到选项卡窗格中。

To create the tabpane, instantiate the TabPane class of package javafx.scene.control without passing any parameter value to its constructor and add all the tabs to the tabpane using the getTabs() method.

// Creating a TabPane
TabPane tabPane = new TabPane();
// Adding all the tabs to the TabPane
tabPane.getTabs().addAll(tab1, tab2, tab3);

Step 4: Launching Application

在创建 TabPane 并向其中添加选项卡后，请按照以下给定步骤正确启动应用程序 −

After creating the TabPane and adding the tabs to it, follow the given steps below to launch the application properly −

  1. Firstly, instantiate the class named Scene by passing the TabPane object as a parameter value to its constructor. Also, pass the dimensions of the application screen as optional parameters to this constructor.

  2. Then, set the title to the stage using the setTitle() method of the Stage class.

  3. Now, a Scene object is added to the stage using the setScene() method of the class named Stage.

  4. Display the contents of the scene using the method named show().

  5. Lastly, the application is launched with the help of the launch() method.

Example

在以下示例中，我们将在 JavaFX 应用程序中创建一个 TabPane。将此代码另存为名称为 JavafxtabsDemo.java 的文件。

In the following example, we are going to create a TabPane in JavaFX application. Save this code in a file with the name JavafxtabsDemo.java.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.stage.Stage;
import java.io.File;
import javafx.scene.layout.VBox;
import javafx.scene.layout.HBox;
import javafx.scene.control.Button;
import javafx.geometry.Pos;
public class JavafxtabsDemo extends Application {
   @Override
   public void start(Stage stage) {
      // Creating a Label tab
      Tab tab1 = new Tab("Label");
      tab1.setContent(new Label("This is the first tab"));
      // Creating an Image tab
      Tab tab2 = new Tab("Image");
      Image image = new Image("tutorials_point.jpg");
      ImageView imageView = new ImageView(image);
      tab2.setContent(imageView);
      // Creating a Video tab
      Tab tab3 = new Tab("Video");
      // Passing the video file to the File object
      File videofile = new File("sampleTP.mp4");
      // creating a Media object from the File Object
      Media videomedia = new Media(videofile.toURI().toString());
      // creating a MediaPlayer object from the Media Object
      MediaPlayer mdplayer = new MediaPlayer(videomedia);
      // creating a MediaView object from the MediaPlayer Object
      MediaView viewmedia = new MediaView(mdplayer);
      //setting the fit height and width of the media view
      viewmedia.setFitHeight(350);
      viewmedia.setFitWidth(350);
      // creating video controls using the buttons
      Button pause = new Button("Pause");
      Button resume = new Button("Resume");
      // creating an HBox
      HBox box = new HBox(20);
      box.setAlignment(Pos.CENTER);
      box.getChildren().addAll(pause, resume);
      // function to handle play and pause buttons
      pause.setOnAction(act -> mdplayer.pause());
      resume.setOnAction(act -> mdplayer.play());
      // creating the root
      VBox vbox = new VBox(20);
      vbox.setAlignment(Pos.CENTER);
      vbox.getChildren().addAll(viewmedia, box);
      tab3.setContent(vbox);
      // Creating a TabPane
      TabPane tabPane = new TabPane();
      // Adding all the tabs to the TabPane
      tabPane.getTabs().addAll(tab1, tab2, tab3);
      // Create a Scene with the TabPane as its root
      Scene scene = new Scene(tabPane, 400, 400);
      // Set the Title on the Stage
      stage.setTitle("TabPane in JavaFX");
      // Set the Scene on the Stage
      stage.setScene(scene);
      stage.show();
   }
   public static void main(String[] args) {
      launch(args);
   }
}

要从命令提示符编译并执行已保存的 Java 文件，请使用以下命令−

To compile and execute the saved Java file from the command prompt, use the following commands −

javac --module-path %PATH_TO_FX% --add-modules javafx.controls,javafx.media JavafxtabsDemo.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls,javafx.media JavafxtabsDemo

当我们执行上述代码时，它将生成一个 TabPane，其中包含三个选项卡，分别是 Label、Image 和 Video。

When we execute the above code, it will generate a TabPane with three tabs namely Label, Image and Video.

tabpane output