I want to have a collapsible list so I'm using a TreeView, but longer strings are giving horizontal scrollbars instead of word wrapping. I've tried using the CSS property -fx-wrap-text on the .tree-cell class but unfortunately nothing seems to happen.
Are TreeCells not meant to span more than one line? What alternative is there if that's the case?
Here's an image of what it looks like now:
test.css
.tree-cell {
-fx-wrap-text: true;
-fx-text-fill: blue;
}
subjects.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import java.net.URL?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.TreeView?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication1.FXMLDocumentController">
<Button fx:id="button" layoutX="182.0" layoutY="14.0" onAction="#handleButtonAction" text="Click Me!" />
<TextField fx:id="filterSubject" layoutX="21.0" layoutY="14.0" />
<TreeView fx:id="subjectList" editable="true" layoutX="14.0" layoutY="61.0" prefHeight="200.0" prefWidth="365.0" />
<stylesheets>
<URL value="#test.css" />
</stylesheets>
</AnchorPane>
subjects.txt - just pairs of text where the first is subject, and second is description.
1
Somewhat long string that I want to wordwrap.
2
Somewhat long string that I want to wordwrap.
3
Somewhat long string that I want to wordwrap.
FXMLDocumentController.java
package javafxapplication1;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.TreeView;
import javafx.scene.control.TreeItem;
import java.io.*;
public class FXMLDocumentController implements Initializable {
#FXML
private TreeView<String> subjectList;
#FXML
private void handleButtonAction(ActionEvent event) {
System.out.println("You clicked me!");
}
private void getSubjects(){
TreeItem<String> subjectRoot = new TreeItem<String> ("Subject");
subjectRoot.setExpanded(true);
try {
BufferedReader fileReader = new BufferedReader(
new FileReader("subjects.txt")
);
String subject = null;
String description = null;
while((subject = fileReader.readLine()) != null) {
description = fileReader.readLine();
TreeItem<String> subjectTree = new TreeItem<String> (subject);
TreeItem<String> descriptionItem = new TreeItem<String> (description);
subjectTree.getChildren().add(descriptionItem);
subjectRoot.getChildren().add(subjectTree);
}
} catch(FileNotFoundException e) {
System.out.println("File not found");
} catch(IOException e) {
e.printStackTrace();
}
subjectList.setRoot(subjectRoot);
}
#Override
public void initialize(URL url, ResourceBundle rb) {
getSubjects();
}
}
JavaFXApplication1.Java
package javafxapplication1;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class JavaFXApplication1 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();
}
public static void main(String[] args) {
launch(args);
}
}
Actually the CSS class is working as you expect.
The problem is: The TreeView contains TreeCells. These TreeCells will wrap its text, in case of they will have not enough vertical space to grow vertically. As the TreeView has a built in "ScrollPane" which ones view-port will grow vertically, it will provide enouth space for the TreeCell instances in any case to grow, therefore the wrapping will never be enabled.
To avoid this you could set the cell factory to generate the TreeCell instances manually. And then you can bind the prefWidthProperty of these elements to the widthProperty of the TreeView.
Example
public class WrappedTreeView extends Application {
#Override
public void start(Stage stage) {
final Scene scene = new Scene(new Group(), 200, 400);
Group sceneRoot = (Group) scene.getRoot();
scene.getStylesheets().add(getClass().getResource("application.css").toString());
TreeItem<String> root = new TreeItem<>("Root");
root.setExpanded(true);
TreeItem<String> childNode1 = new TreeItem<>("I am a very long node - the first one -, my text must be wrapped! If it is not wrapped, it's a problem!");
TreeItem<String> childNode2 = new TreeItem<>("I am a very long node - the second one -, my text must be wrapped! If it is not wrapped, it's a problem!");
TreeItem<String> childNode3 = new TreeItem<>("I am a very long node - the third one -, my text must be wrapped! If it is not wrapped, it's a problem!");
root.getChildren().addAll(childNode1, childNode2, childNode3);
childNode2.getChildren().add(new TreeItem<>("And I am a very long embedded node, so my text must be wrapped!"));
TreeView<String> treeView = new TreeView<>(root);
treeView.setCellFactory(item -> {
TreeCell<String> treeCell = new TreeCell<String>() {
#Override
protected void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (item != null && !empty)
setText(item);
else
setText("");
}
};
treeCell.prefWidthProperty().bind(treeView.widthProperty().subtract(5.0));
return treeCell;
});
treeView.setMaxWidth(200);
sceneRoot.getChildren().add(treeView);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
The content of application.css
.tree-cell {
-fx-wrap-text: true;
-fx-text-fill: blue;
}
And the generated TreeView:
You can do this by setting the tree cell's prefWidth value in a treecell cellfactory (along with the treecell's wraptext value to true), which will then stop the cell from expanding horizontally with a scrollPane.
Related
SUMMARY: I am trying to design an application where the user inputs into TextFields, and upon clicking a button ONCE:
The values are retrieved
The scene switches to one containing a lineChart
The number axes' bounds are set corresponding to the values entered before.
However I'm finding it very hard to understand how to make the program flow correctly for this to work. My main issues are with switching the scene then accessing x_axis and y_axis, where for some reason "this.x_axis" is null.
Main Class:
public class Main extends Application {
#Override
public void start(Stage stage) throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("menuScene.fxml"));
Scene scene = new Scene(root);
stage.setTitle("FT_Tool");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
Controller: (calculate is called after clicking button)
public class MenuController {
private Stage stage;
private Scene scene;
private Parent root;
#FXML
private TextField funcBox;
#FXML
private TextField sampBox;
#FXML
private TextField limitBox;
Expression func;
double sampFreq;
double limit;
#FXML
public void calculate(ActionEvent event) throws IOException{
func = new ExpressionBuilder(funcBox.getText()).variables("x").build();
sampFreq = Double.parseDouble(sampBox.getText());
limit = Double.parseDouble(limitBox.getText());
//=== SWITCHING SCENES ===//
root = FXMLLoader.load(getClass().getResource("graphScene.fxml"));
stage = (Stage) ((Node) event.getSource()).getScene().getWindow();
scene = new Scene(root);
stage.setScene(scene);
stage.show();
graphing();
}
#FXML
private LineChart sampleGraph;
#FXML
private NumberAxis x_axis;
#FXML
private NumberAxis y_axis;
public void graphing(){
x_axis.setUpperBound(limit);
}
}
2nd Scene:
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1">
<children>
<LineChart fx:id="sampleGraph" layoutX="24.0" layoutY="16.0" prefHeight="368.0" prefWidth="552.0" title="Samples taken">
<xAxis>
<NumberAxis fx:id="x_axis" autoRanging="false" label="Time (s)" tickUnit="1.0"/>
</xAxis>
<yAxis>
<NumberAxis fx:id="y_axis" autoRanging="false" label="Amplitude (m)"/>
</yAxis>
</LineChart>
</children>
</AnchorPane>
When I run it, application runs fine and after clicking button the scene switches and linechart is shown but without the right bounds.
This line of code: x_axis.setUpperBound(limit) causes the following error:
Caused by: java.lang.NullPointerException: Cannot invoke "javafx.scene.chart.NumberAxis.setUpperBound(double)" because "this.x_axis" is null
Despite not having the fx:controller attribute defined in your FXML file, it looks like—based on your FXML controller class—you're trying to use the same FXML controller class with multiple FXML files. This is strongly discouraged. By default, a new controller instance is created every time the FXML file is loaded. Consequently, it quickly becomes difficult to reason about which fields should have been injected (i.e., non-null) at any given time. An FXML file should have a one-to-one mapping with an FXML controller class (or possibly no controller).
You have two views, which suggests two FXML files and thus two FXML controller classes. When you load the second view, you should communicate to its controller the needed information. For trivial applications you can do this directly, but for more complex applications it would be better to communicate via a model shared between the two controllers.
Example
Here's an example (based on your code but simplified for demonstration). It only asks for the upper bounds of the X and Y axes and then graphs random data within those bounds. It also makes use of TextFormatter to make it easier to grab the values out of the TextFields, and to ensure the user only enters positive integers.
FXML files are assumed to be located in the com.example package.
Main.java:
package com.example;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
var root = FXMLLoader.<Parent>load(Main.class.getResource("Form.fxml"));
primaryStage.setScene(new Scene(root, 1000, 650));
primaryStage.show();
}
}
Form.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.GridPane?>
<GridPane xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"
fx:controller="com.example.FormController" alignment="CENTER" vgap="20" hgap="15">
<Label text="Upper X Bound:" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
<TextField fx:id="xField" GridPane.rowIndex="0" GridPane.columnIndex="1" GridPane.columnSpan="2"/>
<Label text="Upper Y Bound:" GridPane.rowIndex="1" GridPane.columnIndex="0"/>
<TextField fx:id="yField" GridPane.rowIndex="1" GridPane.columnIndex="1" GridPane.columnSpan="2"/>
<Button text="Graph" onAction="#handleOnGraph" defaultButton="true" GridPane.rowIndex="2"
GridPane.columnIndex="2" GridPane.halignment="RIGHT"/>
</GridPane>
FormController.java:
package com.example;
import java.io.IOException;
import java.util.function.UnaryOperator;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.TextField;
import javafx.scene.control.TextFormatter;
import javafx.util.converter.IntegerStringConverter;
public class FormController {
#FXML private TextField xField;
#FXML private TextField yField;
private TextFormatter<Integer> xFieldFormatter;
private TextFormatter<Integer> yFieldFormatter;
#FXML
private void initialize() {
UnaryOperator<TextFormatter.Change> filter =
change -> {
if (change.getControlNewText().matches("\\d*")) {
return change;
}
return null;
};
xFieldFormatter = new TextFormatter<>(new IntegerStringConverter(), 50, filter);
xField.setTextFormatter(xFieldFormatter);
yFieldFormatter = new TextFormatter<>(new IntegerStringConverter(), 50, filter);
yField.setTextFormatter(yFieldFormatter);
}
#FXML
private void handleOnGraph(ActionEvent event) throws IOException {
event.consume();
int upperX = xFieldFormatter.getValue();
int upperY = yFieldFormatter.getValue();
var loader = new FXMLLoader(FormController.class.getResource("Chart.fxml"));
xField.getScene().setRoot(loader.load());
loader.<ChartController>getController().graph(upperX, upperY);
}
}
Chart.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<LineChart fx:id="chart" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"
fx:controller="com.example.ChartController">
<xAxis>
<NumberAxis fx:id="xAxis" upperBound="50" autoRanging="false"/>
</xAxis>
<yAxis>
<NumberAxis fx:id="yAxis" upperBound="50" autoRanging="false"/>
</yAxis>
</LineChart>
ChartController.java:
package com.example;
import javafx.collections.FXCollections;
import javafx.fxml.FXML;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
public class ChartController {
#FXML private LineChart<Number, Number> chart;
#FXML private NumberAxis xAxis;
#FXML private NumberAxis yAxis;
void graph(int upperX, int upperY) {
xAxis.setUpperBound(upperX);
yAxis.setUpperBound(upperY);
generateAndGraphRandomData();
}
private void generateAndGraphRandomData() {
var data = FXCollections.<XYChart.Data<Number, Number>>observableArrayList();
for (int x = 0; x <= xAxis.getUpperBound(); x++) {
int y = (int) (Math.random() * yAxis.getUpperBound());
data.add(new XYChart.Data<>(x, y));
}
var series = new XYChart.Series<>("Random Demo Data", data);
chart.getData().add(series);
}
}
Left column: Checkboxes to select or deselect rows, selected by default. Right column: a String representing the amount of selected rows up to and including the row. So deselecting a checkbox in a row changes the values in the rows underneath.
The bug: Scroll down to the bottom of the table. Deselect the checkbox in the row with invite code 74. Select it again. The last three invite codes should read 73, 74 and 75 again. But quite often, they show 73, 73, 74 or 73, 74, 74.
The bug does not always occur! If it does not occur, scrolling up and down a bit with the scrollbar of the table and repeating the procedure above can make it occur.
It seems that the bug is only visual - I made it dump the contents of the ObservableList to the console and it shows the correct values. Other than this visual glitch, my app works correctly. Clicking any other control in the window (e.g. the scrollbar of the table) flips the invite codes in the table to the correct value. Switching to another workspace on my desktop and going back makes it show the right values as well.
Small image, showing the console dump of the ObservableList on the left, the bugged table on the right.
The Question, quite logically:
How can I squash this bug!?
EDIT: threw out more code as advised by Kleopatra. Thanks!
MCV:
FXMLDocumentController.java
package invcodebug;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.CheckBoxTableCell;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.util.Callback;
public class FXMLDocumentController implements Initializable {
#FXML private TableView<Person> personTable;
#FXML private TableColumn<Person, Boolean> invitedCol;
#FXML private TableColumn<Person, String> inviteCodeCol;
private final ObservableList<Person> persons
= FXCollections.observableArrayList();
#Override
public void initialize(URL location, ResourceBundle resources) {
initPersonTable();
populatePersons();
}
private void initPersonTable() {
invitedCol.setCellValueFactory(new PropertyValueFactory<>("invited"));
inviteCodeCol.setCellValueFactory(new PropertyValueFactory<>("inviteCode"));
invitedCol.setCellFactory(CheckBoxTableCell.forTableColumn(new Callback<Integer, ObservableValue<Boolean>>() {
#Override
public ObservableValue<Boolean> call(Integer param) {
doInvCode();
// SHOWS: underlying ObservableList has correct values
System.out.println("--------------------------");
for (Person p : persons) {
System.out.println(p.isInvited() + " " + p.getInviteCode()
);
}
return persons.get(param).invitedProperty();
}
}));
personTable.setItems(persons);
}
private void doInvCode() {
int invCounter = 1;
for (Person p : persons) {
if (p.isInvited()) {
p.setInviteCode(((Integer) invCounter).toString());
invCounter++;
} else p.setInviteCode("");
}
}
private void populatePersons() {
for (int i = 0; i < 75; i++) {
persons.add(new Person(true, ""));
}
}
}
Person.java
package invcodebug;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.beans.property.SimpleStringProperty;
public class Person {
private final SimpleBooleanProperty invited;
private final SimpleStringProperty inviteCode;
public Person(boolean invited, String inviteCode) {
this.invited = new SimpleBooleanProperty(invited);
this.inviteCode = new SimpleStringProperty(inviteCode);
}
public boolean isInvited() {
return invited.get();
}
public SimpleBooleanProperty invitedProperty() {
return invited;
}
public String getInviteCode(){
return inviteCode.get();
}
public void setInviteCode(String invCode) {
this.inviteCode.set(invCode);
}
public SimpleStringProperty inviteCodeProperty() {
return inviteCode;
}
}
FXMLDocument.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane id="AnchorPane" prefHeight="464.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="invcodebug.FXMLDocumentController">
<children>
<TableView fx:id="personTable" editable="true" layoutX="26.0" layoutY="28.0" prefHeight="347.0" prefWidth="572.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="20.0">
<columns>
<TableColumn fx:id="invitedCol" prefWidth="27.0" sortable="false" />
<TableColumn fx:id="inviteCodeCol" editable="false" prefWidth="110.0" resizable="false" sortable="false" text="Invite Code" />
</columns>
</TableView>
</children>
</AnchorPane>
InvCodeBug.java
package invcodebug;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class InvCodeBug 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();
}
public static void main(String[] args) {
launch(args);
}
}
Probably not the most technical answer, but by using personTable.requestFocus(); at the end of the doInvCode() method, the table is refreshed visually and seems to fix the problem.
I'm new to Java and JavaFX -- I'm making a small player application and are finding it a challenge to get the duration timer to display on a label on my display.
My latest attempt was creating a TimeListener.java class which would change the duration values for each new song played and set them on the label in another class but that idea is flawed as I came across a non-static error.
TrackPlayer object class
private MediaPlayer player;
private Media track;
private String filepath;
private Duration duration;
public TrackPlayer(String filepath) {
this.filepath = filepath;
track = new Media(filepath);
player = new MediaPlayer(track);
player.setOnReady(() -> {
duration = track.getDuration();
System.out.println("Duration: " + duration);
});
player.currentTimeProperty().addListener(new TimeListener());
}
TimeListener class
public class TimeListener implements ChangeListener<Duration> {
#Override
public void changed(ObservableValue<? extends Duration> observable, Duration oldValue, Duration newValue) {
TrackPlayerController.setTime(newValue.toString());
}
}
FXML Controller class
#FXML
private Label runTime;
...
public void setTime(String time) {
//runTime.setText(time);
}
How else could I approach this problem? I want a label which would display something like 00:00:00 (elapsed) / 00:00:00 (duration) but I'm sure if I just get the duration working I can also get the elapsed time working.
Example with the same problem but most if not all features removed
TrackPlayer class
package logic;
import javafx.beans.property.ReadOnlyObjectProperty;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaPlayer.Status;
import javafx.util.Duration;
public class TrackPlayer {
private MediaPlayer player;
private Media track;
private String filepath;
private Duration duration;
public TrackPlayer(String filepath) {
this.filepath = filepath;
track = new Media(filepath);
player = new MediaPlayer(track);
player.setOnReady(() -> {
duration = track.getDuration();
System.out.println("Duration: " + duration);
});
}
public void playSong() {
System.out.println("Playing song");
player.play();
}
public void pauseSong() {
System.out.println("Pausing song");
player.pause();
}
public void stopSong() {
System.out.println("Stopping song");
player.stop();
}
public Status getStatus() {
return player.getStatus();
}
public Duration getDuration() {
return duration;
}
public Duration getCurrentTime() {
return player.getCurrentTime();
}
public Duration getStartTime() {
return player.getStartTime();
}
public void setSeek(Duration duration) {
player.seek(duration);
}
public Media getMedia() {
return player.getMedia();
}
public ReadOnlyObjectProperty<Duration> currentTimeProperty() {
return player.currentTimeProperty();
}
public Duration getTotalDuration() {
return player.getTotalDuration();
}
}
TrackPlayerController class
package gui;
import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import logic.TrackPlayer;
import logic.Track;
public class TrackPlayerController implements Initializable {
#FXML
private TableView<Track> playingTable;
#FXML
private TableColumn<Track, String> playingTitleCol;
#FXML
private TableColumn<Track, String> playingArtistCol;
#FXML
private TableColumn<Track, String> playingGenreCol;
#FXML
private TableColumn<Track, String> playingRunTimeCol;
#FXML
private Label runTime;
private TrackPlayer player;
#Override
public void initialize(URL fxmlFileLocation, ResourceBundle resources) {
playingTitleCol.setCellValueFactory(new PropertyValueFactory<>("TrackTitle"));
playingArtistCol.setCellValueFactory(new PropertyValueFactory<>("TrackArtist"));
playingGenreCol.setCellValueFactory(new PropertyValueFactory<>("TrackGenre"));
playingRunTimeCol.setCellValueFactory(new PropertyValueFactory<>("RunTime"));
player.currentTimeProperty().addListener(observable -> {
setTime(player.getCurrentTime()
+ " / "
+ player.getTotalDuration());
});
playingTable.setRowFactory(tv -> { // Function for double-click to play (load)
TableRow<Track> row = new TableRow<>();
row.setOnMouseClicked(event -> {
if (event.getClickCount() == 2 && (!row.isEmpty())) {
play();
}
});
return row;
});
}
#FXML
private void play() {
}
#FXML
private void reset(ActionEvent e) {
}
#FXML
private void remove(ActionEvent e) {
}
#FXML
private void removeAll(ActionEvent e) {
}
#FXML
private void search(ActionEvent e) throws IOException {
}
public void setTime(String time) {
runTime.setText(time);
}
}
TrackPlayerMain class
package gui;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.fxml.FXMLLoader;
import javafx.scene.layout.BorderPane;
public class TrackPlayerMain extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
BorderPane root = new BorderPane();
FXMLLoader trackPlayerLoader = new FXMLLoader(getClass().getResource("TrackPlayer.fxml"));
root.setCenter(trackPlayerLoader.load());
TrackPlayerController trackPlayerController = trackPlayerLoader.getController();
Scene scene = new Scene(root, 600, 400);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
TrackPlayer FXML
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="gui.TrackPlayerController">
<children>
<Slider fx:id="timeSlider" layoutX="9.0" layoutY="333.0" prefHeight="25.0" prefWidth="582.0" />
<Label alignment="BOTTOM_LEFT" layoutX="23.0" layoutY="10.0" prefHeight="17.0" prefWidth="75.0" text="Now Playing" />
<Button fx:id="play" layoutX="250.0" layoutY="361.0" mnemonicParsing="false" onAction="#play" prefHeight="25.0" prefWidth="100.0" text="Play" />
<Button fx:id="ff" layoutX="356.0" layoutY="361.0" mnemonicParsing="false" text=">>" />
<Button fx:id="rw" layoutX="211.0" layoutY="361.0" mnemonicParsing="false" text="<<" />
<Button fx:id="reset" layoutX="22.0" layoutY="361.0" mnemonicParsing="false" onAction="#reset" prefWidth="59.0" text="Reset" />
<Button fx:id="remove" layoutX="498.0" layoutY="305.0" mnemonicParsing="false" onAction="#remove" prefWidth="83.0" text="Remove" />
<Label fx:id="runTime" alignment="TOP_CENTER" layoutX="516.0" layoutY="350.0" prefHeight="17.0" prefWidth="75.0" text="00:00 / 00:00" textFill="#00000065">
<font>
<Font size="11.0" />
</font>
</Label>
<Button fx:id="removeAll" layoutX="401.0" layoutY="305.0" mnemonicParsing="false" onAction="#removeAll" prefHeight="25.0" prefWidth="83.0" text="Remove All" />
<TableView fx:id="playingTable" layoutX="18.0" layoutY="32.0" prefHeight="263.0" prefWidth="563.0">
<columns>
<TableColumn fx:id="playingTitleCol" editable="false" prefWidth="140.75" resizable="false" text="Title" />
<TableColumn fx:id="playingArtistCol" editable="false" prefWidth="140.75" resizable="false" text="Artist" />
<TableColumn fx:id="playingGenreCol" editable="false" prefWidth="140.75" resizable="false" text="Genre" />
<TableColumn fx:id="playingRunTimeCol" prefWidth="140.75" resizable="false" text="Run Time" />
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
</TableView>
<Button fx:id="search" layoutX="303.0" layoutY="305.0" mnemonicParsing="false" onAction="#search" prefHeight="0.0" prefWidth="83.0" text="Search" />
</children>
</AnchorPane>
From what I assume it is throwing NullPointerException because it's trying to initalize the listener with the current time and duration however the player object has not been created yet (as no song is played right from the start, only when selected and pressed play) -- if that is the case how can I add the listener?
Edit: Okay so I've tested what causes the NullPointerException and it's the player being null, as the program launches when I do this.
if (player != null) {
player.currentTimeProperty().addListener(observable -> {
runTime.setText(player.getCurrentTime()
+ " / "
+ player.getTotalDuration());
});
}
However when I do this the listener doesn't get initialized as the runTime label does not change at all. This is my problem that I'm trying to solve. How can I go about fixing it?
Non-FXML Based Sample
Here is some sample code, it doesn't use FXML, but the principles are the same whether you have FXML involved or not. You just add a listener to the relevant property and take action as it changes. I didn't format the duration as you have in your question, but that is trivial and different from the problem of responding to changes in the listener.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.media.*;
import javafx.stage.Stage;
public class VideoPlayerExample extends Application {
private static final String MEDIA_LOC =
"http://download.oracle.com/otndocs/products/javafx/oow2010-2.flv";
#Override
public void start(final Stage stage) throws Exception {
final MediaPlayer oracleVid = new MediaPlayer(
new Media(MEDIA_LOC)
);
Label progress = new Label();
oracleVid.currentTimeProperty().addListener(observable -> {
progress.setText(
oracleVid.getCurrentTime()
+ " / "
+ oracleVid.getTotalDuration()
);
});
VBox layout = new VBox(10, progress, new MediaView(oracleVid));
stage.setScene(new Scene(layout, 540, 208));
stage.show();
oracleVid.play();
}
public static void main(String[] args) throws Exception {
launch(args);
}
}
where should I place the listener?
It's difficult to recommend without seeing full code, so I'll just make some assumptions and provide advice on that to get you started. So, let's assume that:
You are defining and embedding your custom media player control in FXML similar to the mechanism outlined in:
How to create an FXML file for an already created new component in java than add it to scene builder?
The duration tracking label is (for some reason) not part of the custom media control.
Your encompassing FXML therefore includes two components, your custom media player and the duration label.
In this case the listener is situated in the controller for the encompassing FXML file that includes the media player and the duration label and is set up during the initialize() call for that controller.
FXML Based Sample
In general, for something like this for generic reuse you might create a custom control as outlined previously, but for brevity this sample will just use the in-built MediaView and Label controls rather than a custom control.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.media.MediaView?>
<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" spacing="10.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="plot.VideoPlayerController">
<children>
<Label fx:id="progress" text="Label" />
<MediaView fx:id="mediaView" fitHeight="208.0" fitWidth="540.0" />
</children>
</VBox>
App
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class VideoPlayerApp extends Application {
#Override
public void start(final Stage stage) throws Exception {
FXMLLoader loader = new FXMLLoader(getClass().getResource("player.fxml"));
Parent root = loader.load();
stage.setScene(new Scene(root));
stage.show();
}
public static void main(String[] args) throws Exception {
launch(args);
}
}
Controller
import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
public class VideoPlayerController {
private static final String MEDIA_LOC =
"http://download.oracle.com/otndocs/products/javafx/oow2010-2.flv";
#FXML
MediaView mediaView;
#FXML
Label progress;
public void initialize() {
final MediaPlayer oracleVid = new MediaPlayer(
new Media(MEDIA_LOC)
);
oracleVid.currentTimeProperty().addListener(observable -> {
progress.setText(
oracleVid.getCurrentTime()
+ " / "
+ oracleVid.getTotalDuration()
);
});
mediaView.setMediaPlayer(oracleVid);
oracleVid.play();
}
}
I am new to JavafX. I wanted to change the CSS file of my first GUI through the second one.
I have the following code:
Main1.java
package javafxapplication3.a;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Main1 extends Application{
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
Parent root = null;
try {
root = FXMLLoader.load(getClass().getResource("/main1.fxml"));
} catch (Exception e) {
}
String css = Main1.class.getResource("/main1.css").toExternalForm();
Scene scene = new Scene(root, 400, 400);
scene.getStylesheets().clear();
scene.getStylesheets().add(css);
primaryStage.setResizable(false);
primaryStage.setScene(scene);
primaryStage.setTitle("JCal");
primaryStage.show();
}
}
Main1Controller.java
package javafxapplication3.a;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
public class Main1Controller {
#FXML
private Button button1;
public void initialize() {
button1.setOnAction(value -> {
Stage primaryStage = new Stage();
Parent root = null;
try {
root = FXMLLoader.load(getClass().getResource("/main2.fxml"));
} catch (Exception e) {
}
Scene scene = new Scene(root, 400, 400);
primaryStage.setResizable(false);
primaryStage.setScene(scene);
primaryStage.setTitle("JCal");
primaryStage.show();
});
}
}
main1.fxml
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication3.a.Main1Controller">
<children>
<Button fx:id="button1" layoutX="271.0" layoutY="173.0" mnemonicParsing="false" text="Main-1" />
</children>
</AnchorPane>
main2.fxml
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication3.a.Main2Controller">
<children>
<Button fx:id="button" layoutX="271.0" layoutY="173.0" mnemonicParsing="false" text="Main-2" />
</children>
</AnchorPane>
In the FXML I have a Button called button1, when ever I click on it, it opens a new GUI which has another button in it called button. In the end what I wanted to do was that when ever I click on the second button i.e. button the colour of the button in the primary GUI should change should change.
I did try getting the controllers shown in this example, But this dint help me.
Do I need to create a second controller and create a new stage and scene all together? or is there any alternative way to it?
In the controller for your main2.fxml, provide a mechanism in it for setting an action to be executed when the button is pressed. For example:
public class Main2Controller {
#FXML
private Button button ;
private Runnable buttonAction = () -> {} ; // do nothing by default
public void setButtonAction(Runnable action) {
this.buttonAction = action ;
}
public void initialize() {
button.setOnAction(e -> buttonAction.run());
}
}
Now in your Main1Controller you can retrieve the controller when you load the FXML, and set the button action:
button1.setOnAction(value -> {
Stage primaryStage = new Stage();
Parent root = null;
try {
FXMLLoader loader = new FXMLLoader(getClass().getResource("/main2.fxml"));
root = loader.load();
Main2Controller controller = loader.getController();
controller.setButtonAction(() -> {
// perform button action here...
});
} catch (Exception e) {
e.printStackTrace();
}
Scene scene = new Scene(root, 400, 400);
primaryStage.setResizable(false);
primaryStage.setScene(scene);
primaryStage.setTitle("JCal");
primaryStage.show();
});
An alternative approach is to let both controllers have access to the same observable state, e.g. an ObjectProperty<Color>. This approach might be better if you have a lot of actions in one controller that affect state elsewhere (you just bundle all the data into a single "model" class that you pass). This looks like:
public class Main1Controller {
private final ObjectProperty<Color> color = new SimpleObjectProperty<>();
#FXML
private Button button1;
public void initialize() {
color.addListener((obs, oldColor, newColor) -> {
String style = String.format("-fx-background-color: #%02x%02x%02x;",
(int) (newColor.getRed() * 255),
(int) (newColor.getGreen() * 255),
(int) (newColor.getBlue() * 255));
button1.setStyle(style);
});
button1.setOnAction(value -> {
Stage primaryStage = new Stage();
Parent root = null;
try {
FXMLLoader loader = new FXMLLoader(getClass().getResource("/main2.fxml"));
root = loader.load();
Main2Controller controller = loader.getController();
controller.setColorModel(color);
} catch (Exception e) {
e.printStackTrace();
}
Scene scene = new Scene(root, 400, 400);
primaryStage.setResizable(false);
primaryStage.setScene(scene);
primaryStage.setTitle("JCal");
primaryStage.show();
});
}
}
and Main2Controller looks like
public class Main2Controller {
#FXML
private Button button ;
private ObjectProperty<Color> colorModel = new SimpleObjectProperty<>();
public void setColorModel(ObjectProperty<Color> color) {
this.colorModel = color ;
}
public void initialize() {
button.setOnAction(e -> {
colorModel.set(/* some color */);
});
}
}
In jquery, there is the on feature which will automatically bind events to items that are added at a later time (such as an ajax call), it looks something like this:
$(document).on("click", ".my-class", function(){
// Do my event task here
});
Now with that every time an item with the class my-class is added to the dom that event is automatically attached.
Is there anything like that in Java or JavaFx? I would like to keep my events in my controller, and have other methods in what I like to call Helper Classes with the code that I am working on I am not sure how I can achieve that.
So I have this in my controller:
Tree tree = new Tree(currentMysqlConn);
tree.addDatabases(treeItem);
That then creates TreeItem's then that creates child items, and those child items have events when clicked. Here is an example one:
TreeItem<String> tableNode = new TreeItem<>("Tables", tableIcon);
tableNode.expandedProperty().addListener(new ChangeListener(){
#Override
public void changed(ObservableValue observable, Object oldValue, Object newValue){
if((boolean) newValue){
TableActions ta = new TableActions(tableNode);
ta.getTables(conn);
}
}
});
The issue is, that I have that in my Helper Class, so is there anything I can do to move that into my controller? Because that is inside a loop.
You can register a listener with any observable list (e.g. the list you get from TreeItem.getChildren(), or Parent.getChildren()), and recursively have that listener register the same listener with any children added to the list.
The following example updates a label displaying the total number of nodes in a tree view. To do this, we need to know when child nodes are added to any node, so we need listeners associated with the dynamically added nodes. Your use case might be a bit different, but if you understand how this works you should be able to implement what you need. Note that while I don't have any other classes here, if the contents of the UI are changed from anywhere, the controller is notified appropriately via the listeners.
CountingTreeViewController.java:
import java.util.concurrent.atomic.AtomicInteger;
import javafx.beans.binding.Bindings;
import javafx.beans.binding.IntegerBinding;
import javafx.collections.ListChangeListener;
import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
public class CountingTreeViewController {
#FXML
private TextField itemTextField ;
#FXML
private TreeView<String> tree ;
#FXML
private Label countLabel ;
// binding that contains the total count of all nodes
// the computeValue() method recursively counts the number of children
// of each node
// This binding needs to be invalidated if the list of child nodes of any
// tree node changes...
private final IntegerBinding count = new IntegerBinding() {
#Override
protected int computeValue() {
// Note the AtomicInteger here is just used as a mutable wrapper.
// We don't care about the atomicity since it's only updated from
// one thread
return countNodes(tree.getRoot(), new AtomicInteger());
}
private int countNodes(TreeItem<?> node, AtomicInteger count) {
count.incrementAndGet();
for (TreeItem<?> child : node.getChildren()) {
countNodes(child, count);
}
return count.intValue();
}
};
// A ListChangeListener that will be associated with any tree node. It does two things:
// First, it invalidates the count binding above if the number of child nodes changes.
// Second, it adds the same listener to any new child nodes, and removes it from any nodes
// that are removed from the tree.
private final ListChangeListener<TreeItem<String>> childrenChanged
= new ListChangeListener<TreeItem<String>>() {
#Override
public void onChanged(
javafx.collections.ListChangeListener.Change<? extends TreeItem<String>> change) {
while (change.next()) {
if (change.wasAdded() || change.wasRemoved()) {
count.invalidate();
}
if (change.wasAdded()) {
for (TreeItem<String> item : change.getAddedSubList()) {
item.getChildren().addListener(childrenChanged);
}
} else if (change.wasRemoved()) {
for (TreeItem<String> item : change.getRemoved()) {
item.getChildren().removeListener(childrenChanged);
}
}
}
}
};
public void initialize(){
tree.getRoot().getChildren().addListener(childrenChanged);
countLabel.textProperty().bind(Bindings.format("Count: %s", count));
}
// add a new child node to the selected node (or the root if nothing's selected)
#FXML
private void addItem() {
TreeItem<String> item = tree.getSelectionModel().getSelectedItem();
if (item == null) {
item = tree.getRoot();
}
TreeItem<String> newItem = new TreeItem<>(itemTextField.getText());
newItem.setExpanded(true);
item.getChildren().add(newItem);
itemTextField.setText("");
itemTextField.requestFocus();
}
}
CountingTree.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.TreeView?>
<?import javafx.scene.control.TreeItem?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="CountingTreeViewController">
<center>
<TreeView fx:id="tree">
<root>
<TreeItem value="Root" expanded="true" />
</root>
</TreeView>
</center>
<right>
<HBox alignment="CENTER" spacing="5">
<padding>
<Insets top="10" right="10" left="10" bottom="10"/>
</padding>
<TextField fx:id="itemTextField" onAction="#addItem"/>
<Button text="Add" onAction="#addItem"/>
</HBox>
</right>
<bottom>
<Label text="Count: 1" fx:id="countLabel"/>
</bottom>
</BorderPane>
CountingTree.java:
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class CountingTree extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
FXMLLoader loader = new FXMLLoader(getClass().getResource("CountingTree.fxml"));
primaryStage.setScene(new Scene(loader.load(), 800, 600));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
If you have access to the root node of your TreeView this is quite simply done:
Have a look at the TreeItem and the TreeModificationEvent docs. You can add a listener to the root node for the childrenModificationEvent. Any time a node is added or removed below your root node you will get the TreeModificationEvent where you can retrieve the added and deleted nodes.