有没有办法将我所有重复的 VBoxes 重新组织成自定义 JavaFX 标记？

【问题标题】：Is there a way to reorganize all my repeated VBoxes into a custom JavaFX tag?有没有办法将我所有重复的 VBoxes 重新组织成自定义 JavaFX 标记？
【发布时间】：2020-02-06 19:51:32
【问题描述】：

TL;DR 在底部。

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

例如，所有日期都有Label，天气图标（多云、晴天、下雨等）有ImageView，温度等都有Label。这使得我的 Controller 类有很多 @FXML 带注释的标签和按钮、ImageVeiws，所有内容都是 5 的倍数。

有没有办法在一个名为WeatherBox 的自定义标签中组织我的所有元素，这几乎是一个VBox，它将为我容纳所有组件？而不是在我的 Controller 类中重复 5 次，我只需要 5 个 WeatherBoxes。我查看了扩展Vboxes 和HBoxes 的其他一些问题，但我觉得我没有得到这个想法（或者他们解决的问题根本不同）。他们都建议将WeatherBox 类与它自己的FXML 文件一起制作为Controller 类，我不确定如何将它们与WeatherBox 标签所在的主要fxml 文件联系起来。

扩展VBox 似乎是可行的方法，但我不明白如何正确执行以及如何使用它来解决我的问题。有人有什么建议吗？

TL;DR 我正在构建一个天气应用程序，我有 5 个VBoxes，它们几乎完全相同。它们都有子标签和 ImageViews 等等。它让我的Controller class 看起来很荒谬，因为所有东西都有 5 个（根本不干）。我可以/如何将所有内容重新组织成一个扩展 VBox 的自定义标签，我可以将其放入我的 FXML 中，这将包含所有 Labels、Buttons 和 ImageViews 已经内置？

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>

【问题讨论】：

  • 您看过有关创建自定义控件的教程吗？这可以通过多种方式实现。这是一个例子：noblecodemonkeys.com/javafx-custom-controls-and-scenebuilder
  • 教我 JavaFX 的教程忽略了子类化。我确实给了 youtube 一个粗略的浏览，但我找不到任何关于子类化布局的具体信息。总的来说，一切似乎都是关于 JavaFX 布局的。认为你提供的看起来很有希望。我现在正在看视频。
  • 当然这可以扩展现有布局，但这是一种快速而肮脏的方法，因为该类的用户仍然可以完全访问children列表，并且可以通过修改该列表轻松搞乱您的班级内部。更好的方法是扩展Control 并从皮肤创建视觉结构。不过，这需要编写更多代码，并使集成 fxml 变得更加困难。无论您如何设计新的节点类型，您都应该能够将其用作 fxml 元素，并以类名作为 name...

标签： java inheritance javafx fxml


【解决方案1】：

这是一个例子：

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

您必须使用控制器类来定义逻辑的工作方式。

【讨论】：

  • 对不起，我还没有感谢你。你的解决方案正是我正在寻找的，它就像一个魅力。我想我的主要困惑是为什么我必须加载一个 fxml 文件来与该类关联并将该类功能也作为一个控制器。将其视为解决我的问题的方法使一切都得到了点击。再次感谢！
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-02-19
  • 1970-01-01
  • 2021-01-01
  • 1970-01-01
  • 2021-05-14
  • 2019-10-30
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode