有没有办法将我所有重复的 VBox 重新组织成自定义 JavaFX 标签?

Is there a way to reorganize all my repeated VBoxes into a custom JavaFX tag?

TL;DR 在底部。

我正在用 JavaFX 构建一个天气应用程序,我使用的设置是在 HBox 中水平显示 5 个 VBoxes,代表 5 天的天气预报数据。问题是所有这些 VBoxes 除了其中显示的实际数据外几乎完全相同。

例如,所有日期都有一个 Label,天气图标有一个 ImageView(多云、晴天、下雨等),温度等有一个 Label。这使得我的 Controller class 有很多 @FXML 带注释的标签和按钮,ImageVeiws,一切都是 5 的倍数。

有没有一种方法可以将我的所有元素组织在一个名为 WeatherBox 的自定义标签中,这几乎是一个 VBox 可以容纳我的所有组件?在我的 Controller class 中,不是每件事都重复 5 次,而是我只需要 5 WeatherBoxes。我已经查看了扩展 VboxesHBoxes 的其他一些问题,但我觉得我没有理解这个想法(或者他们正在解决的问题根本不同)。他们都建议用它自己的 FXML 文件制作 WeatherBox class 一个 Controller class 文件,我不确定如何将它们全部绑定到我的主 fxml 文件,WeatherBox 标签将位于其中。

扩展 VBox 似乎是可行的方法,但我不明白如何正确地做到这一点以及如何使用它来解决我的问题。有人有什么建议吗?

TL;DR 我正在构建一个天气应用程序,我有 5 个 VBoxes 几乎完全相同。他们都有子 Labels 和 ImageViews 等等。它让我的 Controller class 看起来很荒谬,因为每样东西都有 5 个(一点也不干)。 I/How 我可以将所有内容重新组织到扩展 VBox 的自定义标签中吗,我可以将其放入我的 FXML 中,其中将包含所有 LabelsButtonsImageViews 已经内置了?

package sample;

import javafx.event.Event;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.*;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import sample.datamodel.DataUtils;
import sample.datamodel.Location;

import java.io.IOException; 
import java.util.Optional;

public class Controller {

@FXML
private BorderPane borderPane;
@FXML
private VBox forecast1;
@FXML
private VBox forecast2;
@FXML
private VBox forecast3;
@FXML
private VBox forecast4;
@FXML
private VBox forecast5;
@FXML
private Label date1;
@FXML
private Label date2;
@FXML
private Label date3;
@FXML
private Label date4;
@FXML
private Label date5;
@FXML
private Label description1;
@FXML
private Label description2;
@FXML
private Label description3;
@FXML
private Label description4;
@FXML
private Label description5;
@FXML
private Label percipitation1;
@FXML
private Label percipitation2;
@FXML
private Label percipitation3;
@FXML
private Label percipitation4;
@FXML
private Label percipitation5;
@FXML
private Label temperature1;
@FXML
private Label temperature2;
@FXML
private Label temperature3;
@FXML
private Label temperature4;
@FXML
private Label temperature5;
@FXML
private ImageView img1;
@FXML
private ImageView img2;
@FXML
private ImageView img3;
@FXML
private ImageView img4;
@FXML
private ImageView img5;
@FXML
private Button details1;
@FXML
private Button details2;
@FXML
private Button details3;
@FXML
private Button details4;
@FXML
private Button details5;
@FXML
private Button otherLocsButton;
@FXML
private Button todaysWeatherButton;
@FXML
private Button fiveDayButton;
@FXML
private Button refreshButton;
@FXML
private ListView<Location> locListView;

public void initialize() {
    locListView.setItems(DataUtils.getInstance().getLocations());
    locListView.getSelectionModel().selectFirst();
    fiveDayButton.fire();
}

@FXML
public void refresh() {
    Location location = locListView.getSelectionModel().getSelectedItem();
    location.updateWeather();
    fiveDayForecast();

}

@FXML
public void fiveDayForecast() {
    Location location = locListView.getSelectionModel().getSelectedItem();
    location.updateWeather();
    Location.Day[] days = location.getDays();
    Location.Weather weather;
    VBox[] wthrPanes = {forecast1, forecast2, forecast3, forecast4, forecast5};
    Label[] dates = {date1, date2, date3, date4, date5};
    Label[] description = {description1, description2, description3, description4, description5};
    Label[] percipitation = {percipitation1, percipitation2, percipitation3, percipitation4, percipitation5};
    Label[] temp = {temperature1, temperature2, temperature3, temperature4, temperature5};
    ImageView[] images = {img1, img2, img3, img4, img5};

    for (int i = 0; i < days.length; i++) {
        weather = days[i].getWeather()[0];
        String date = days[i].getDate();
        String dateFormat = date.substring(5, 7) + "." + date.substring(8, 10);
        dates[i].setText(dateFormat);
        Image image = new Image("WeatherIcons/png/001-windy-2.png");
        images[i].setImage(image);
        images[i].setFitHeight(50);
        images[i].setPreserveRatio(true);
        String des = weather.getDescription();
        double tempMax = weather.getMaxTemp();
        double tempMin = weather.getMinTemp();
        double percip = weather.getPrecipitation();
        temp[i].setText(tempMax + "\" + tempMin);
        percipitation[i].setText(Double.toString(percip));
    }
}



@FXML
public void addLocationDialog() {
    Dialog<ButtonType> dialog = new Dialog<>();
    dialog.initOwner(borderPane.getScene().getWindow());
    FXMLLoader loader = new FXMLLoader();
    loader.setLocation(getClass().getResource("newLocationDialog.fxml"));
    try {
        dialog.getDialogPane().setContent(loader.load());

    } catch (IOException e) {
        System.out.printf("New Item Dialog didn't load.");
        e.printStackTrace();
        return;
    }
    dialog.getDialogPane().getButtonTypes().add(ButtonType.OK);
    dialog.getDialogPane().getButtonTypes().add(ButtonType.CANCEL);

    Optional<ButtonType> result = dialog.showAndWait();
    if (result.isPresent() && result.get() == ButtonType.OK) {
        NewLocationController controller = loader.getController();
        Location location = controller.newLocation();
        location.updateWeather();
    }
}

@FXML
public void forecastDetails(Event event) {
    System.out.println(event.getEventType().getName());
    Button button = (Button) event.getSource();
    button.getId();
}

}

这是与 Controller 关联的 FXML 文件。请注意,所有 VBox 几乎相同,并且不遵循 DRY 原则。

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

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.image.ImageView?>
<BorderPane fx:id="borderPane" xmlns="http://javafx.com/javafx/10.0.2-internal"
            xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
    <center>
        <GridPane fx:id="gridPane" alignment="TOP_CENTER" hgap="50" prefHeight="400.0" vgap="30" gridLinesVisible="true">
            <columnConstraints>
                <ColumnConstraints percentWidth="15"/>
                <ColumnConstraints percentWidth="15"/>
                <ColumnConstraints percentWidth="15"/>
                <ColumnConstraints percentWidth="15"/>
                <ColumnConstraints percentWidth="15"/>
            </columnConstraints>

            <VBox fx:id="forecast1" GridPane.columnIndex="0" GridPane.rowIndex="0" alignment="TOP_CENTER">
                <Label fx:id="date1">
               <font>
                  <Font size="18.0" />
               </font></Label>
                <ImageView fx:id="img1"/>
                <Label fx:id="description1"/>
                <Label fx:id="temperature1"/>
                <Label fx:id="percipitation1"/>
                <Button fx:id="details1" text="Details" onAction="#forecastDetails"/>
            </VBox>

            <VBox fx:id="forecast2" GridPane.columnIndex="1" GridPane.rowIndex="0" alignment="TOP_CENTER">
                <Label fx:id="date2">
               <font>
                  <Font size="18.0" />
               </font></Label>
                <ImageView fx:id="img2"/>
                <Label fx:id="description2"/>
                <Label fx:id="temperature2"/>
                <Label fx:id="percipitation2"/>
                <Button fx:id="details2" text="Details" onAction="#forecastDetails"/>
            </VBox>

            <VBox fx:id="forecast3" GridPane.columnIndex="2" GridPane.rowIndex="0" alignment="TOP_CENTER">
                <Label fx:id="date3">
               <font>
                  <Font size="18.0" />
               </font></Label>
                <ImageView fx:id="img3"/>
                <Label fx:id="description3"/>
                <Label fx:id="temperature3"/>
                <Label fx:id="percipitation3"/>
                <Button fx:id="details3" text="Details" onAction="#forecastDetails"/>
            </VBox>

            <VBox fx:id="forecast4" GridPane.columnIndex="3" GridPane.rowIndex="0" alignment="TOP_CENTER">
                <Label fx:id="date4">
               <font>
                  <Font size="18.0" />
               </font></Label>
                <ImageView fx:id="img4"/>
                <Label fx:id="description4"/>
                <Label fx:id="temperature4"/>
                <Label fx:id="percipitation4"/>
                <Button fx:id="details4" text="Details" onAction="#forecastDetails"/>
            </VBox>

            <VBox fx:id="forecast5" GridPane.columnIndex="4" GridPane.rowIndex="0" alignment="TOP_CENTER">
                <Label fx:id="date5">
               <font>
                  <Font size="18.0" />
               </font></Label>
                <ImageView fx:id="img5"/>
                <Label fx:id="description5"/>
                <Label fx:id="temperature5"/>
                <Label fx:id="percipitation5"/>
                <Button fx:id="details5" text="Details" onAction="#forecastDetails"/>
            </VBox>
        </GridPane>
    </center>

    <top>
        <VBox>
            <MenuBar>
                <Menu text="Location">
                    <MenuItem text="Change Location" />
                    <MenuItem onAction="#addLocationDialog" text="Add New Location" />
                </Menu>
            </MenuBar>
            <ToolBar>
                <Button fx:id="otherLocsButton" text="Other Locations" />
                <Button fx:id="todaysWeatherButton" text="Today" />
                <Button fx:id="fiveDayButton" onAction="#fiveDayForecast" text="5 day" />
                <Button fx:id="refreshButton" onAction="#refresh" text="Refresh" />
            </ToolBar>
        </VBox>
    </top>
    <left>
        <VBox>
            <ListView fx:id="locListView" />
        </VBox>
    </left>
</BorderPane>

这是一个例子:

主要 FXML:

<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>

<?import sample.WeatherBox?>

<GridPane alignment="center" hgap="10" vgap="10" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <children>
      <VBox prefHeight="200.0" prefWidth="294.0">
         <children>
            <Button mnemonicParsing="false" text="Button" />
               <WeatherBox dateText="example1" descriptionText="description1"/>
               <WeatherBox dateText="example2" descriptionText="description2"/>
         </children></VBox>
   </children>
   <columnConstraints>
      <ColumnConstraints />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints />
   </rowConstraints>
</GridPane>

WeatherBox.fxml:

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


<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.text.Font?>
<fx:root type="VBox" xmlns:fx="http://javafx.com/fxml">
    <Label fx:id="date">
        <font>
            <Font size="18.0" />
        </font></Label>
    <ImageView fx:id="img"/>
    <Label fx:id="description"/>
    <Label fx:id="temperature"/>
    <Label fx:id="percipitation"/>
    <Button fx:id="details" text="Details" onAction="#forecastDetails"/>
</fx:root>

WeatherBox.java

import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;

import java.io.IOException;


public class WeatherBox extends VBox {

    @FXML
    private Label date;
    @FXML
    private Label description;
    @FXML
    private Label temperature;
    @FXML
    private Label percipitation;
    @FXML
    private Button details;
    @FXML
    private ImageView img;

    public WeatherBox() {
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("WeatherBox.fxml"));
        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);

        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
        }
    }


    @FXML
    protected void forecastDetails() {
        System.out.println("The button was clicked!");
    }


    public String getDateText() {
        return date.getText();
    }

    public void setDateText(String dateText) {
        this.date.setText(dateText);
    }

    public String getDescriptionText() {
        return description.getText();
    }

    public void setDescriptionText(String dateText) {
        this.description.setText(dateText);
    }
}

您必须使用控制器 class 才能定义逻辑的工作方式。