TL;DR is at the bottom.
I am building a Weather App in JavaFX and the set up I am using is to have 5 VBoxes displayed horizontally in a HBox that represent 5 days of weather forecast data. The problem is that all these VBoxes are virtually identical except for the actual data displayed inside them.
For example all have a Label for the date, an ImageView for the weather icon (cloudy, sunny, rainy ect.), a Label for the temperature ect. This makes my Controller class have A LOT of @FXML annotated Labels and Buttons, ImageVeiws, everything in multiples of 5.
Is there a way to organize all my elements in a custom tag called WeatherBox which would pretty much be a VBox that would house all the components for me? Instead of everything being repeated 5 times in my Controller class I would just have 5 WeatherBoxes. I've looked at some other questions extending Vboxes and HBoxes and I don't feel like I am getting the idea (or the problem they are addressing is fundamentally different). They all suggest making the WeatherBox class a Controller class with it's own FXML file and I am not sure how I would tie that all into my main fxml file that the WeatherBox tags would sit in.
Extending VBox does seem like the way to go but I don't understand how to do it properly and how to use it to solve my issue. Does anyone have some suggestions?
TL;DR I am building a weather app and I have 5 VBoxes that are all pretty much identical. They all have child Labels and ImageViews and what not. Its making my Controller class look ridiculous because there is 5 of everything (Not DRY at all). Can I/How do I reorganize everything into a custom tag extending VBox that that I can drop into my FXML that will have all the Labels, Buttons and ImageViews already built in?
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();
}
}
And here is that FXML file associated with Controller. Note that all the VBoxes are pretty much the same and not following the DRY principle.
<?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>Here is an example:
main 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);
}
}
you have to use controller class in order to define how logic will work.