I am making a highly interactive TabPane for viewing contact lists in JavaFX 8. For this I have made my own subclass of Tab, EditableTab, which has functionality for changing the name of the tab by double clicking on the name in the overview. When the user clicks the + sign to create a new contact list, I want the program to create a new tab, select it, then focus the name and select all the text - it is natural to name the contact list at once (similar to when you create a new file in windows).
My problem: This seems to be very unstable. Most of the times, it seems some kind of animation/transition problem arises, and the tab name ends up empty. Here is a screenshot of what usually, but not always, happens when the + button is clicked:
And here is what I want:
Here is the code for my EditableTab:
public class EditableTab extends Tab {
private Label lbl;
private TextField txtField;
public EditableTab(String text, Node content) {
super();
setContent(content);
lbl = new Label(text);
txtField = new TextField(text);
txtField.setStyle("-fx-background-color: transparent");
setGraphic(lbl);
setupInteractivity();
}
public TextField getTextField() {
return txtField;
}
private void setupInteractivity() {
lbl.setOnMouseClicked((mouseEvent) -> {
if (mouseEvent.getClickCount() == 2) {
showTextField();
}
});
txtField.setOnAction(event -> setGraphic(lbl));
txtField.focusedProperty().addListener(
(observable, oldValue, newValue) -> {
if (! newValue) {
lbl.setText(txtField.getText());
setGraphic(lbl);
}
});
}
public void showTextField() {
txtField.setPrefWidth(lbl.getWidth());
txtField.setText(lbl.getText());
setGraphic(txtField);
txtField.selectAll();
txtField.requestFocus();
}
}
And here is the code where the functionality is implemented:
private void addNewContactlist() {
Contactlist newList = new Contactlist();
newList.setName("New contact list");
contactlistApp.getContactlistData().add(newList);
ListView<Person> lv = new ListView<Person>(newList.getContacts());
setupListView(lv);
int position = tabPane.getTabs().size() - 1;
EditableTab tab = createEditableTab("New contact list", lv);
tabPane.getTabs().add(position, tab);
tabPane.getSelectionModel().select(tab);
tab.showTextField();
}
I suspect that the problem comes from some animation/transition timings, but that is really just a guess. I tried wrapping the showTextField() call in a Platform.runLater() with no luck.
Here is a small test app to replicate the issue:
public class TestApp extends Application {
TabPane tabPane = new TabPane();
#Override
public void start(Stage primaryStage) throws Exception {
Tab addNewContactlistTab = new Tab();
addNewContactlistTab.setClosable(false);
Label lbl = new Label("\u2795");
lbl.setOnMouseClicked(mouseEvent -> {
if (tabPane.getTabs().size() == 1) {
addNewTab();
}
});
addNewContactlistTab.setGraphic(lbl);
tabPane.getTabs().add(addNewContactlistTab);
addNewContactlistTab.selectedProperty().addListener(
(observable, oldValue, newValue) -> {
if (newValue && tabPane.getTabs().size() != 1) {
addNewTab();
}
});
Scene scene = new Scene(tabPane);
primaryStage.setScene(scene);
primaryStage.setWidth(600);
primaryStage.setHeight(400);
primaryStage.show();
}
private void addNewTab() {
int insertionIndex = tabPane.getTabs().size() - 1;
ListView<String> lv = new ListView<String>();
EditableTab tab = new EditableTab("Unnamed", lv);
tabPane.getTabs().add(insertionIndex, tab);
tabPane.getSelectionModel().select(tab);
tab.showTextField();
}
public static void main(String[] args) {
launch();
}
}
Here is my code for the RenamableTab class:
import javafx.application.Platform;
import javafx.scene.Node;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TextField;
public class RenamableTab extends Tab {
private final Label label;
private final TextField textField;
public RenamableTab() {
this("New Tab", null);
}
public RenamableTab(String text) {
this(text, null);
}
public RenamableTab(String text, Node content) {
super();
label = new Label(text);
textField = new TextField(text);
setContent(content);
textField.setStyle("-fx-background-color: transparent");
setGraphic(label);
label.setOnMouseClicked((mouseEvent) -> {
if (mouseEvent.getClickCount() == 2) {
rename();
}
});
textField.setOnAction(event -> setGraphic(label));
textField.focusedProperty().addListener((observable, oldValue, newValue) -> {
if (!newValue) {
label.setText(textField.getText());
setGraphic(label);
}
});
}
public TextField getTextField() {
return textField;
}
public void rename() {
//textField.setPrefWidth(label.getWidth());
//textField.setText(label.getText());
setGraphic(textField);
new Thread() {
#Override
public void run() {
try {
Thread.sleep(300);
} catch (InterruptedException e) {
e.printStackTrace();
}
Platform.runLater(new Runnable() {
#Override
public void run() {
textField.selectAll();
textField.requestFocus();
}
});
}
}.start();
}
}
And here is my code for the FancyTabPane:
import javafx.event.EventHandler;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.input.MouseEvent;
public class FancyTabPane extends TabPane {
public FancyTabPane() {
Tab newTabTab = new Tab();
newTabTab.setClosable(false);
Label addLabel = new Label("\u2795");
addLabel.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent paramT) {
System.out.println("mouse click");
addTab();
}
});
/*
* getSelectionModel().selectedItemProperty().addListener(new ChangeListener<Tab>() {
* #Override
* public void changed(ObservableValue<? extends Tab> paramObservableValue, Tab paramT1, Tab
* paramT2) {
* System.out.println("model");
* if (paramT1 == newTabTab) {
* System.out.println("tab");
* addTab();
* }
* }
* });
*/
newTabTab.setGraphic(addLabel);
getTabs().add(newTabTab);
}
public void addTab() {
RenamableTab newTab = new RenamableTab();
getTabs().add(getTabs().size() - 1, newTab);
getSelectionModel().select(newTab);
newTab.rename();
}
}
I am having issued with the new tab button when another tab is selected, not sure how you overcame that.
Related
Im a littlebit stuck with that.
Im using JxBrowser for my JavaFX project.
Im also using JFoenix to push the look.
Now when i browse to some sites, the URLBar which is a JFXTextField becomes unusable. I cant write anymore in it.
But the default JavaFX contextmenu still works.
Whats interesting is that key listeners on the website, like F for fullscreen on youtube still works.
To fix this, the only way that works, is to click a completely different Window on the PC.
For example im clicking to IntelliJ than back to the JavaFX frame, than its working again. As i wrote its only on specefic sites.
No Exceptions are thrown.
If its maybew important, im using 2 TabPanes, One for the Tab and another for the Content.
Do someone has an idea?
The class that generates the Tab:
package de.liz3.liz3web.browser;
import com.teamdev.jxbrowser.chromium.Browser;
import com.teamdev.jxbrowser.chromium.javafx.BrowserView;
import de.liz3.liz3web.gui.controller.MainController;
import javafx.application.Platform;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.input.KeyCode;
import java.util.Vector;
/**
* Created by Liz3 on 22.02.2017.
*/
public class TabManager {
private Vector<BrowserTab> activeTabs;
private MainController controller;
public TabManager(MainController controller) {
this.controller = controller;
activeTabs = new Vector<>();
controller.getUrlField().setOnMouseClicked(event -> controller.getUrlField().requestFocus());
TabPane head = controller.getHeaderTabPane();
controller.getUrlField().setOnKeyReleased(event -> {
if (event.getCode() == KeyCode.ENTER) {
selectedBrowserTab().browseOrSearch(TabManager.this.controller.getUrlField().getText());
}
});
controller.getBackBtn().setOnAction(event -> selectedBrowserTab().getEngine().goBack());
controller.getForwardBtn().setOnAction(event -> selectedBrowserTab().getEngine().goForward());
head.getSelectionModel().selectedItemProperty().addListener((observable, oldValue, newValue) -> {
if (newValue == controller.getNewTab()) {
newTab(null);
return;
}
controller.getMainTabPane().getSelectionModel().select(getContentTab(newValue));
controller.getUrlField().setText(selectedBrowserTab().getCurrentUrl());
});
}
public void newTab(String url) {
new Thread(() -> {
Browser browser = new Browser();
BrowserView view = new BrowserView(browser);
Tab headerTab = new Tab("New Tab");
Tab contentTab = new Tab();
contentTab.setContent(view);
BrowserTab t = new BrowserTab(browser, view, contentTab, headerTab);
activeTabs.add(t);
Platform.runLater(() -> {
controller.getHeaderTabPane().getTabs().add(headerTab);
controller.getMainTabPane().getTabs().add(contentTab);
controller.getHeaderTabPane().getTabs().remove(controller.getNewTab());
controller.getHeaderTabPane().getTabs().add(controller.getNewTab());
controller.getMainTabPane().getSelectionModel().select(contentTab);
controller.getHeaderTabPane().getSelectionModel().select(headerTab);
controller.getUrlField().setEditable(true);
controller.getUrlField().setText("");
t.browseOrSearch(url);
});
}).start();
}
public BrowserTab selectedBrowserTab() {
for (BrowserTab tab : activeTabs) {
if (tab.getHeaderTab() == controller.getHeaderTabPane().getSelectionModel().getSelectedItem()) {
return tab;
}
}
return null;
}
public Tab getSelectedHeaderTab() {
return controller.getHeaderTabPane().getSelectionModel().getSelectedItem();
}
public Tab getSelectedContentTab() {
return controller.getMainTabPane().getSelectionModel().getSelectedItem();
}
public Tab getHeaderTab(Tab contentTab) {
for (BrowserTab tab : activeTabs) {
if (tab.getContentTab() == contentTab) {
return tab.getHeaderTab();
}
}
return null;
}
public Tab getContentTab(Tab headerTab) {
for (BrowserTab tab : activeTabs) {
if (tab.getHeaderTab() == headerTab) {
return tab.getContentTab();
}
}
return null;
}
public MainController getController() {
return controller;
}
public Vector<BrowserTab> getActiveTabs() {
return activeTabs;
}
}
The Browser class:
package de.liz3.liz3web.browser;
import com.teamdev.jxbrowser.chromium.Browser;
import com.teamdev.jxbrowser.chromium.events.*;
import com.teamdev.jxbrowser.chromium.javafx.BrowserView;
import de.liz3.liz3web.Main;
import javafx.application.Platform;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.scene.control.Tab;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
/**
* Created by Liz3 on 21.02.2017.
*/
public class BrowserTab {
private Browser engine;
private BrowserView view;
private Tab contentTab;
private Tab headerTab;
private String currentUrl;
public BrowserTab(Browser engine, BrowserView view, Tab contentTab, Tab headerTab) {
this.engine = engine;
this.view = view;
this.contentTab = contentTab;
this.headerTab = headerTab;
this.currentUrl = "";
setUpTab();
}
public void browseOrSearch(String address) {
if (address == null) {
return;
}
if (address.startsWith("http://") || address.startsWith("https://")) {
this.engine.loadURL(address);
return;
}
if (!address.contains(" ") && address.contains(".")) {
address = "http://" + address;
this.engine.loadURL(address);
return;
}
String encode = null;
try {
encode = URLEncoder.encode(address, "utf-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
this.engine.loadURL("https//google.com/search?q=" + encode);
}
private void setUpTab() {
this.headerTab.setClosable(true);
this.headerTab.setOnCloseRequest(new EventHandler<Event>() {
#Override
public void handle(Event event) {
Main.tm.getController().getMainTabPane().getTabs().remove(contentTab);
Main.tm.getActiveTabs().remove(this);
}
});
this.engine.addTitleListener(titleEvent -> Platform.runLater(() -> BrowserTab.this.headerTab.setText(titleEvent.getTitle())));
this.engine.addLoadListener(new LoadListener() {
#Override
public void onStartLoadingFrame(StartLoadingEvent startLoadingEvent) {
Platform.runLater(() -> {
BrowserTab.this.currentUrl = BrowserTab.this.engine.getURL();
if (Main.tm.getSelectedHeaderTab() == BrowserTab.this.headerTab) {
Main.tm.getController().getUrlField().setText(BrowserTab.this.currentUrl);
}
});
}
#Override
public void onProvisionalLoadingFrame(ProvisionalLoadingEvent provisionalLoadingEvent) {
}
#Override
public void onFinishLoadingFrame(FinishLoadingEvent finishLoadingEvent) {
Platform.runLater(() -> {
BrowserTab.this.currentUrl = BrowserTab.this.engine.getURL();
if (Main.tm.getSelectedHeaderTab() == BrowserTab.this.headerTab) {
Main.tm.getController().getUrlField().setText(BrowserTab.this.currentUrl);
}
});
}
#Override
public void onFailLoadingFrame(FailLoadingEvent failLoadingEvent) {
}
#Override
public void onDocumentLoadedInFrame(FrameLoadEvent frameLoadEvent) {
}
#Override
public void onDocumentLoadedInMainFrame(LoadEvent loadEvent) {
}
});
this.engine.setPopupHandler(popupParams -> {
Platform.runLater(() -> Main.tm.newTab(popupParams.getURL()));
return null;
});
}
public Browser getEngine() {
return engine;
}
public BrowserView getView() {
return view;
}
public Tab getContentTab() {
return contentTab;
}
public Tab getHeaderTab() {
return headerTab;
}
public String getCurrentUrl() {
return currentUrl;
}
}
By default JxBrowser is running in HEAVYWEIGHT rendering mode. It's not recommended to use HEAVYWEIGHT rendering mode in applications like yours with tabs and layers. Please use LIGHTWEIGHT rendering mode. It should work without any issues:
Browser browser = new Browser(BrowserType.LIGHTWEIGHT);
BrowserView view = new BrowserView(browser);
Update:
I want to have the media player static but it does not work if i make is static.
Please note that the reason i want mediaPlayer static is that i want to access it from other classes.(the line is commented.)
This is my code:
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import java.net.URL;
public class Main extends Application {
static boolean isSoundOn = false;
static double soundVolume = .5;
MediaPlayer mediaPlayer = new MediaPlayer(new Media(Main.class.getResource("song.mp3").toString()));
public static void main(String[] args) {
Application.launch(args);
}
#Override
public void start(Stage primaryStage) {
mediaPlayer.play();
primaryStage.setTitle("duet by what");
// primaryStage.setFullScreen(true);
//Group gamePaused = new Group();
//Scene _gamePaused = new Scene(gamePaused, 1200, 700);
//Group gameOver = new Group();
//Scene _gameOver = new Scene(gameOver, 1200, 700);
//Group game = new Group();
//Scene _game = new Scene(game, 1200, 700);
GUI gui = new GUI();
primaryStage.setScene(gui.getMainMenu().getScene());
primaryStage.show();
}
}
class GUI {
private MainMenu mainMenu = new MainMenu();
public class MainMenu {
private Scene scene;
private MainMenu() {
VBox vBox = new VBox();
scene = new Scene(vBox, 400, 500);
scene.getStylesheets().add("stylesheet.css");
Label info = new Label(
"welcome the the what version\n" +
"of the well known Duet game!\n\n" +
"press \"I wanna play!\" to begin the game.\n\n" +
"please note that you can change\n" +
"the sound settings.");
info.setId("info");
vBox.getChildren().add(info);
Button startGame = new Button("i wanna play right now!");
startGame.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
System.out.println("game started!");
}
});
vBox.getChildren().add(startGame);
Label highScore = new Label("__highScore should be added here__");
highScore.setId("highScore");
vBox.getChildren().add(highScore);
Button quitGame = new Button("get me out of this game!");
quitGame.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
System.out.println("game quitted!");
}
});
vBox.getChildren().add(quitGame);
CheckBox soundOn = new CheckBox("soundOn?");
Tooltip tooltip = new Tooltip("if this box is checked, music will be played!");
tooltip.setFont(new Font("Arial", 16));
soundOn.setTooltip(tooltip);
soundOn.selectedProperty().addListener(new ChangeListener<Boolean>() {
public void changed(ObservableValue<? extends Boolean> ov,
Boolean old_val, Boolean new_val) {
Main.isSoundOn = soundOn.isSelected();
System.out.println(Main.isSoundOn);
}
});
vBox.getChildren().add(soundOn);
HBox changeVolumeWrapper = new HBox();
changeVolumeWrapper.setId("hBox");
Label sliderLabel = new Label("sound volume: ");
changeVolumeWrapper.getChildren().add(sliderLabel);
Slider soundVolume = new Slider(0, 1, .5);
soundVolume.valueProperty().addListener(new ChangeListener<Number>() {
public void changed(ObservableValue<? extends Number> ov,
Number old_val, Number new_val) {
Main.soundVolume = new_val.doubleValue();
//Main.mediaPlayer.setVolume(Main.soundVolume); here is why i need media player static.
System.out.printf("%.2f\n", Main.soundVolume);
}
});
changeVolumeWrapper.getChildren().add(soundVolume);
vBox.getChildren().add(changeVolumeWrapper);
}
public Scene getScene() {
return scene;
}
}
public MainMenu getMainMenu() {
return mainMenu;
}
}
Any other fixes to my code will be appreciated.
By the way, these are the errors i get:
Exception in thread "Thread-0" java.lang.IllegalStateException:
Toolkit not initialized at
com.sun.javafx.application.PlatformImpl.runLater(PlatformImpl.java:273)
at
com.sun.javafx.application.PlatformImpl.runLater(PlatformImpl.java:268)
at javafx.application.Platform.runLater(Platform.java:83) at
javafx.scene.media.Media$_MetadataListener.onMetadata(Media.java:541)
at
com.sun.media.jfxmediaimpl.MetadataParserImpl.done(MetadataParserImpl.java:120)
at
com.sun.media.jfxmediaimpl.platform.java.ID3MetadataParser.parse(ID3MetadataParser.java:237)
at
com.sun.media.jfxmediaimpl.MetadataParserImpl.run(MetadataParserImpl.java:103)
Exception in thread "main" java.lang.ExceptionInInitializerError at
java.lang.Class.forName0(Native Method) at
java.lang.Class.forName(Class.java:264) at
com.intellij.rt.execution.application.AppMain.main(AppMain.java:122)
Caused by: java.lang.IllegalStateException: Toolkit not initialized
at
com.sun.javafx.application.PlatformImpl.runLater(PlatformImpl.java:273)
at
com.sun.javafx.application.PlatformImpl.runLater(PlatformImpl.java:268)
at javafx.application.Platform.runLater(Platform.java:83) at
javafx.scene.media.MediaPlayer.init(MediaPlayer.java:515) at
javafx.scene.media.MediaPlayer.(MediaPlayer.java:414) at
Main.(Main.java:22) ... 3 more
Calling getClass() without an object for context is interpreted the same as any other instance method: this.getClass().
In a static context, you can reference the class with ClassName.class; i.e. you can do
static URL resource = Main.class.getResource("a.mp3");
However, it is not at all clear in this scenario why you would want these variables to be static; only one instance of an Application subclass should ever be created per JVM instance, and these are inherently properties of that instance.
In the specific example in your (updated) question, I would define a separate class encapsulating the MediaPlayer and the other properties you currently make static. Note that MediaPlayer itself defines a volume property and a muted property. So you could do:
public class SoundPlayer {
private final MediaPlayer mediaPlayer ;
public SoundPlayer(URL url) {
this.mediaPlayer = new MediaPlayer(new Media(url));
}
public void play() {
mediaPlayer.play();
}
public double getVolume() {
return mediaPlayer.getVolume();
}
public void setVolume(double volume) {
mediaPlayer.setVolume(volume);
}
public boolean isSoundOn() {
return ! mediaPlayer.isMuted();
}
public void setSoundOn(boolean soundOn) {
mediaPlayer.setMuted(! soundOn);
}
}
Now your Main class can be:
public class Main extends Application {
public static void main(String[] args) {
Application.launch(args);
}
#Override
public void start(Stage primaryStage) {
SoundPlayer soundPlayer = new SoundPlayer(getClass().getResource("song.mp3"));
soundPlayer.play();
primaryStage.setTitle("duet by Aran Mohyeddin");
GUI gui = new GUI(soundPlayer);
primaryStage.setScene(gui.getMainMenu().getScene());
primaryStage.show();
}
}
and update your GUI and MainMenu classes to have a reference to a SoundPlayer:
public class MainMenu {
private Scene scene;
private final SoundPlayer soundPlayer ;
private MainMenu(SoundPlayer soundPlayer) {
this.soundPlayer = soundPlayer ;
// existing code omitted...
CheckBox soundOn = new CheckBox("soundOn?");
Tooltip tooltip = new Tooltip("if this box is checked, music will be played!");
tooltip.setFont(new Font("Arial", 16));
soundOn.setTooltip(tooltip);
soundOn.selectedProperty().addListener(new ChangeListener<Boolean>() {
public void changed(ObservableValue<? extends Boolean> ov,
Boolean old_val, Boolean new_val) {
soundPlayer.setSoundOn(new_val);
}
});
// ...
Slider soundVolume = new Slider(0, 1, .5);
soundVolume.valueProperty().addListener(new ChangeListener<Number>() {
public void changed(ObservableValue<? extends Number> ov,
Number old_val, Number new_val) {
soundPlayer.setVolumn(new_val.doubleValue());
System.out.printf("%.2f\n", Main.soundVolume);
}
});
changeVolumeWrapper.getChildren().add(soundVolume);
vBox.getChildren().add(changeVolumeWrapper);
}
public Scene getScene() {
return scene;
}
}
public MainMenu getMainMenu() {
return mainMenu;
}
}
Also note that if you expose the actual property objects from SoundPlayer, for example:
public class SoundPlayer {
private final MediaPlayer mediaPlayer ;
// ...
public DoubleProperty volumeProperty() {
return mediaPlayer.volumeProperty();
}
// ...
}
then you can simplify some of your code:
Slider soundVolume = new Slider(0, 1, .5);
// instead of the listener, just do:
soundPlayer.volumeProperty().bindBidirectional(soundVolume.valueProperty());
(Converting the mutedProperty to a soundOnProperty is a little less elegant.)
I have a listview that uses a CheckBoxListCell to display a list with checkboxes next to the items. How do I add a listener to this checkbox to know when an item as been selected or unselected?
Solution
You don't add a listener to the checkbox. You add a listener to the observable property of the object which was associated with the checkbox by the CheckBoxListCell.forListView routine.
Setting up the association:
ListView<Task> checklist = new ListView<>(tasks);
checklist.setCellFactory(CheckBoxListCell.forListView(Task::selectedProperty));
Adding a listener for all items:
tasks.forEach(task -> task.selectedProperty().addListener((observable, wasSelected, isSelected) -> {
if (isSelected) {
// . . .
} else {
// . . .
}
}));
Documentation
The process is described in the CheckBoxListCell.forListView javadoc like so:
getSelectedProperty - A Callback that, given an object of type T
(which is a value taken out of the ListView.items list), will
return an ObservableValue that represents whether the given
item is selected or not. This ObservableValue will be bound
bidirectionally (meaning that the CheckBox in the cell will set/unset
this property based on user interactions, and the CheckBox will
reflect the state of the ObservableValue, if it changes externally).
Sample Program
A sample program which demonstrated some of the patterns which could be used with CheckBoxListCell:
import javafx.application.Application;
import javafx.beans.property.*;
import javafx.collections.*;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.control.cell.CheckBoxListCell;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.util.StringConverter;
import java.util.*;
import java.util.stream.Collectors;
public class CheckList extends Application {
#Override
public void start(Stage stage) throws Exception{
ObservableList<Task> tasks = FXCollections.observableArrayList(
Arrays.stream(taskNames).map(Task::new).collect(Collectors.toList())
);
ListView<String> reactionLog = new ListView<>();
tasks.forEach(task -> task.selectedProperty().addListener((observable, wasSelected, isSelected) -> {
if (isSelected) {
reactionLog.getItems().add(reactionStrings.get(task.getName()));
reactionLog.scrollTo(reactionLog.getItems().size() - 1);
}
}));
ListView<Task> checklist = new ListView<>(tasks);
checklist.setCellFactory(CheckBoxListCell.forListView(Task::selectedProperty, new StringConverter<Task>() {
#Override
public String toString(Task object) {
return object.getName();
}
#Override
public Task fromString(String string) {
return null;
}
}));
HBox layout = new HBox(10, checklist, reactionLog);
layout.setPrefSize(350, 150);
layout.setPadding(new Insets(10));
Scene scene = new Scene(layout);
stage.setScene(scene);
stage.show();
}
public static class Task {
private ReadOnlyStringWrapper name = new ReadOnlyStringWrapper();
private BooleanProperty selected = new SimpleBooleanProperty(false);
public Task(String name) {
this.name.set(name);
}
public String getName() {
return name.get();
}
public ReadOnlyStringProperty nameProperty() {
return name.getReadOnlyProperty();
}
public BooleanProperty selectedProperty() {
return selected;
}
public boolean isSelected() {
return selected.get();
}
public void setSelected(boolean selected) {
this.selected.set(selected);
}
}
public static void main(String[] args) {
launch(args);
}
private static final String[] taskNames = {
"Walk the dog",
"Skin the cat",
"Feed the pig"
};
private static final Map<String, String> reactionStrings = new HashMap<>();
static {
reactionStrings.put("Walk the dog", "The dog thanks you");
reactionStrings.put("Skin the cat", "The cat hates you");
reactionStrings.put("Feed the pig", "The pig wants more");
}
}
Sample output after selecting the first item once and the third item three times.
Here is an alternative if the item does not already have a property that indicates if it has been selected or not:
public class CheckedListViewCheckObserver<T> extends SimpleObjectProperty<Pair<T, Boolean>> {
BooleanProperty getObserverForObject(T object) {
BooleanProperty value = new SimpleBooleanProperty(false);
value.addListener((observable, oldValue, newValue) -> {
CheckedListViewCheckObserver.this.set(new Pair<>(object, newValue));
});
return value;
}
}
Then to use it, you simply do:
CheckedListViewCheckObserver observer = new CheckedListViewCheckObserver<>();
checklist.setCellFactory(CheckBoxListCell.forListView(observer::getObserverForObject));
Now you can set a listener to listen for any changes:
observer.addListener((obs, old, curr) -> {
if (curr.getValue()) {
System.out.println("You have checked " + curr.getKey());
} else {
System.out.println("You have unchecked " + curr.getKey());
}
});
The advantage of this method is that it does not depend on the objects being used; Instead, since it is generic, you can simply attach it to an already existing listview and it starts working off the bat.
Hope this helps someone.
I'm fairly new to JavaFX and I'm trying to accomplish this principle in JavaFX: I've got a TableView populated with Student objects. I want the first column to be a checkbox with which I can select each row to perform a bulk action on the selected items (as commonly seen in for example mail applications).
I figured I shouldn't add a SimpleBooleanProperty to the Student class since it is only used in the view layer, which is why I thought I could implement it like this: when a checkbox is checked, the student gets added to a List selectedStudents; when it is unchecked, it is removed. Is this a good approach?
This is the code I've got so far (mainly based on copy-pasting from similar solutions):
voornaamKolom.setCellValueFactory(new PropertyValueFactory<Student, String>("name"));
familienaamKolom.setCellValueFactory(new PropertyValueFactory<Student, String>("fname"));
promotorKolom.setCellValueFactory(new PropertyValueFactory<Student, String>("comment"));
selectedKolom.setCellValueFactory(
new Callback<TableColumn.CellDataFeatures<Student, Boolean>, ObservableValue<Boolean>>() {
#Override
public ObservableValue<Boolean> call(TableColumn.CellDataFeatures<Student, Boolean> p) {
return new SimpleBooleanProperty(p.getValue() != null);
}
});
selectedKolom.setCellFactory(
new Callback<TableColumn<Student, Boolean>, TableCell<Student, Boolean>>() {
#Override
public TableCell<Student, Boolean> call(TableColumn<Student, Boolean> p) {
return new CheckBoxCell(studentenTabel);
}
});
studentenTabel.getItems().setAll(getModel().getStudenten());
--
private class CheckBoxCell extends TableCell<Student, Boolean> {
final CheckBox cellCheckBox = new CheckBox();
CheckBoxCell(final TableView tblView) {
cellCheckBox.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent t) {
int selectedIndex = getTableRow().getIndex();
if (!cellCheckBox.isSelected()) {
getModel().selectStudent(selectedIndex); // add to selectedStudents
} else {
getModel().deselectStudent(selectedIndex); // remove from selectedStudents
}
}
});
}
//Display button if the row is not empty
#Override
protected void updateItem(Boolean t, boolean empty) {
super.updateItem(t, empty);
if (!empty) {
setGraphic(cellCheckBox);
}
}
}
The main problem with this code is that the checkboxes are not bound to the table rows. E.g. when I select the 2nd item and change the row order by sorting on another value, the 2nd item is still selected even though it represents another object. When new rows are added to the table, some of them get randomly selected too.
I know this code is probably quite dirty, like I said: I'm new to JavaFX. Any help would be appreciated.
Thanks in advance!
The data type for your check box column seems to me it should be Student; i.e. it's a TableColumn<Student, Student>. The reason for this is that you're really presenting a view of the entire object itself: is the student contained in the collection of selected students. Sort of counter-intuitive but it makes it work.
See if this example helps. I don't have the nice separation of the data into a model that your code hints at, but you should be able to factor that in too.
import javafx.application.Application;
import javafx.beans.property.ReadOnlyObjectWrapper;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableSet;
import javafx.collections.SetChangeListener;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TableColumn.CellDataFeatures;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.util.Callback;
public class SelectableTable extends Application {
#Override
public void start(Stage primaryStage) {
TableView<Item> itemTable = new TableView<>();
for (int i=1; i<=40; i++) {
itemTable.getItems().add(new Item("Item "+i));
}
TableColumn<Item, String> nameCol = new TableColumn<>("Name");
nameCol.setCellValueFactory(new PropertyValueFactory<>("name"));
TableColumn<Item, Item> selectedCol = new TableColumn<>("Select");
// Collection of items currently selected via checkboxes in the table
// This will be passed to the TableCell implementation.
ObservableSet<Item> selectedItems = FXCollections.observableSet();
selectedCol.setCellValueFactory(new Callback<TableColumn.CellDataFeatures<Item,Item>, ObservableValue<Item>>() {
#Override
public ObservableValue<Item> call(CellDataFeatures<Item, Item> data) {
return new ReadOnlyObjectWrapper<>(data.getValue());
}
});
selectedCol.setCellFactory(new Callback<TableColumn<Item, Item>, TableCell<Item, Item>>() {
#Override
public TableCell<Item, Item> call(
TableColumn<Item, Item> param) {
return new CheckBoxCell(selectedItems);
}
});
itemTable.getColumns().addAll(selectedCol, nameCol);
Button displayButton = new Button("Display selected");
displayButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
for (Item item : selectedItems) {
System.out.println(item.getName());
}
}
});
Button selectAllButton = new Button("Select all");
selectAllButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
selectedItems.addAll(itemTable.getItems());
}
});
Button selectNoneButton = new Button("Select none");
selectNoneButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
selectedItems.clear();
}
});
HBox buttons = new HBox(5);
buttons.getChildren().addAll(selectAllButton, selectNoneButton, displayButton);
BorderPane root = new BorderPane();
root.setCenter(itemTable);
root.setBottom(buttons);
Scene scene = new Scene(root, 400, 400);
primaryStage.setScene(scene);
primaryStage.show();
}
public static class CheckBoxCell extends TableCell<Item, Item> {
private final ObservableSet<Item> selectedItems ;
private final CheckBox checkBox ;
public CheckBoxCell(ObservableSet<Item> selectedItems) {
this.selectedItems = selectedItems ;
this.checkBox = new CheckBox() ;
// listener to update the set of selected items when the
// check box is checked or unchecked:
checkBox.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
if (checkBox.isSelected()) {
selectedItems.add(getItem());
} else {
selectedItems.remove(getItem());
}
}
});
// listener to update the check box when the collection of selected
// items changes:
selectedItems.addListener(new SetChangeListener<Item>() {
#Override
public void onChanged(Change<? extends Item> change) {
Item item = getItem();
if (item != null) {
checkBox.setSelected(selectedItems.contains(item));
}
}
});
}
#Override
public void updateItem(Item item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setGraphic(null);
} else {
checkBox.setSelected(selectedItems.contains(item));
setGraphic(checkBox);
}
}
}
public static class Item {
private final StringProperty name = new SimpleStringProperty(this, "name");
public StringProperty nameProperty() {
return name ;
}
public final String getName() {
return name.get();
}
public final void setName(String name) {
this.name.set(name);
}
public Item(String name) {
setName(name);
}
}
public static void main(String[] args) {
launch(args);
}
}
You can implement getModel().selectStudent(selectedObject);
and getModel().deselectStudent(selectedObject); instead. In here, selectedObject should be the object itself and not just the index. The model should point to the objects instead of indexes.
It's good to remember that you can make your model point to the exact objects you created. You just have to make sure the correct objects are being pointed to.
After doing a Oracle tutorial about the TableView, I was wondering if there's a way to programmatically apply different CSS style to the selected TableView row. For example, user selects a certain row, clicks the "Highlight" button and the selected row gets brown background, white text fill, etc. I've read the JavaFX tableview colors, Updating TableView row appearance and Background with 2 colors in JavaFX?, but to no avail =/
Here's the source:
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;
public class TableViewSample extends Application {
private TableView<Person> table = new TableView<Person>();
private final ObservableList<Person> data =
FXCollections.observableArrayList(
new Person("Jacob", "Smith", "jacob.smith#example.com"),
new Person("Isabella", "Johnson", "isabella.johnson#example.com"),
new Person("Ethan", "Williams", "ethan.williams#example.com"),
new Person("Emma", "Jones", "emma.jones#example.com"),
new Person("Michael", "Brown", "michael.brown#example.com")
);
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) {
Scene scene = new Scene(new Group());
stage.setTitle("Table View Sample");
stage.setWidth(450);
stage.setHeight(600);
final Label label = new Label("Address Book");
label.setFont(new Font("Arial", 20));
TableColumn firstNameCol = new TableColumn("First Name");
firstNameCol.setMinWidth(100);
firstNameCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("firstName"));
TableColumn lastNameCol = new TableColumn("Last Name");
lastNameCol.setMinWidth(100);
lastNameCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("lastName"));
TableColumn emailCol = new TableColumn("Email");
emailCol.setMinWidth(200);
emailCol.setCellValueFactory(
new PropertyValueFactory<Person, String>("email"));
table.setItems(data);
table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);
final Button btnHighlight = new Button("Highlight selected row");
btnHighlight.setMaxWidth(Double.MAX_VALUE);
btnHighlight.setPrefHeight(30);
btnHighlight.setOnAction(new EventHandler<ActionEvent>(){
public void handle(ActionEvent e){
// this is where the CSS should be applied
}
});
final VBox vbox = new VBox();
vbox.setSpacing(5);
vbox.setPadding(new Insets(10, 0, 0, 10));
vbox.getChildren().addAll(label, table, btnHighlight);
((Group) scene.getRoot()).getChildren().addAll(vbox);
stage.setScene(scene);
stage.show();
}
public static class Person {
private final SimpleStringProperty firstName;
private final SimpleStringProperty lastName;
private final SimpleStringProperty email;
private Person(String fName, String lName, String email) {
this.firstName = new SimpleStringProperty(fName);
this.lastName = new SimpleStringProperty(lName);
this.email = new SimpleStringProperty(email);
}
public String getFirstName() {
return firstName.get();
}
public void setFirstName(String fName) {
firstName.set(fName);
}
public String getLastName() {
return lastName.get();
}
public void setLastName(String fName) {
lastName.set(fName);
}
public String getEmail() {
return email.get();
}
public void setEmail(String fName) {
email.set(fName);
}
}
}
And the application.css from which the "Highlight selected row" button applies the highlightedRow class to the selected table row:
.highlightedRow {
-fx-background-color: brown;
-fx-background-insets: 0, 1, 2;
-fx-background: -fx-accent;
-fx-text-fill: -fx-selection-bar-text;
}
Edit:
After several hours of trying, the best thing I could come up is this using the code below:
firstNameCol.setCellFactory(new Callback<TableColumn<Person, String>, TableCell<Person, String>>() {
#Override
public TableCell<Person, String> call(TableColumn<Person, String> personStringTableColumn) {
return new TableCell<Person, String>() {
#Override
protected void updateItem(String name, boolean empty) {
super.updateItem(name, empty);
if (!empty) {
if (name.toLowerCase().startsWith("e") || name.toLowerCase().startsWith("i")) {
getStyleClass().add("highlightedRow");
}
setText(name);
} else {
setText("empty"); // for debugging purposes
}
}
};
}
});
The part I don't really understand is why I can't do that from inside the setOnAction method of the btnHighlight? I also tried refreshing the table afterwards (described here), but it didn't seem to work. Also, my "solution" only works for the firstNameCol column, so does one have to set new cell factory for each column in order to apply a certain style, or is there a smarter solution?
Edit: Updated version of this (old) post is at https://stackoverflow.com/a/73764770/2189127
If you don't want the reusability of the solution I posted here, this is really the same thing but using an anonymous inner class for the row factory instead of a standalone class. Perhaps the code is easier to follow as it's all in one place. It's kind of a hybrid between Jonathan's solution and mine, but will automatically update the highlights without forcing it with a sort.
I used a list of integers so it supports multiple selection, but if you don't need that you could obviously just use an IntegerProperty instead.
Here's the row factory:
final ObservableList<Integer> highlightRows = FXCollections.observableArrayList();
table.setRowFactory(new Callback<TableView<Person>, TableRow<Person>>() {
#Override
public TableRow<Person> call(TableView<Person> tableView) {
final TableRow<Person> row = new TableRow<Person>() {
#Override
protected void updateItem(Person person, boolean empty){
super.updateItem(person, empty);
if (highlightRows.contains(getIndex())) {
if (! getStyleClass().contains("highlightedRow")) {
getStyleClass().add("highlightedRow");
}
} else {
getStyleClass().removeAll(Collections.singleton("highlightedRow"));
}
}
};
highlightRows.addListener(new ListChangeListener<Integer>() {
#Override
public void onChanged(Change<? extends Integer> change) {
if (highlightRows.contains(row.getIndex())) {
if (! row.getStyleClass().contains("highlightedRow")) {
row.getStyleClass().add("highlightedRow");
}
} else {
row.getStyleClass().removeAll(Collections.singleton("highlightedRow"));
}
}
});
return row;
}
});
And here are what some buttons might look like:
final Button btnHighlight = new Button("Highlight");
btnHighlight.disableProperty().bind(Bindings.isEmpty(table.getSelectionModel().getSelectedIndices()));
btnHighlight.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
highlightRows.setAll(table.getSelectionModel().getSelectedIndices());
}
});
final Button btnClearHighlight = new Button("Clear Highlights");
btnClearHighlight.disableProperty().bind(Bindings.isEmpty(highlightRows));
btnClearHighlight.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
highlightRows.clear();
}
});
How about creating a row factory which exposes an observable list of the indexes of table rows which are to be highlighted? That way you can simply update the list with the indexes you need to highlight: for example by calling the getSelectedIndices() on the selection model and passing it to the list's setAll(...) method.
This could look something like:
import java.util.Collections;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.util.Callback;
public class StyleChangingRowFactory<T> implements
Callback<TableView<T>, TableRow<T>> {
private final String styleClass ;
private final ObservableList<Integer> styledRowIndices ;
private final Callback<TableView<T>, TableRow<T>> baseFactory ;
public StyleChangingRowFactory(String styleClass, Callback<TableView<T>, TableRow<T>> baseFactory) {
this.styleClass = styleClass ;
this.baseFactory = baseFactory ;
this.styledRowIndices = FXCollections.observableArrayList();
}
public StyleChangingRowFactory(String styleClass) {
this(styleClass, null);
}
#Override
public TableRow<T> call(TableView<T> tableView) {
final TableRow<T> row ;
if (baseFactory == null) {
row = new TableRow<>();
} else {
row = baseFactory.call(tableView);
}
row.indexProperty().addListener(new ChangeListener<Number>() {
#Override
public void changed(ObservableValue<? extends Number> obs,
Number oldValue, Number newValue) {
updateStyleClass(row);
}
});
styledRowIndices.addListener(new ListChangeListener<Integer>() {
#Override
public void onChanged(Change<? extends Integer> change) {
updateStyleClass(row);
}
});
return row;
}
public ObservableList<Integer> getStyledRowIndices() {
return styledRowIndices ;
}
private void updateStyleClass(TableRow<T> row) {
final ObservableList<String> rowStyleClasses = row.getStyleClass();
if (styledRowIndices.contains(row.getIndex()) ) {
if (! rowStyleClasses.contains(styleClass)) {
rowStyleClasses.add(styleClass);
}
} else {
// remove all occurrences of styleClass:
rowStyleClasses.removeAll(Collections.singleton(styleClass));
}
}
}
Now you can do
final StyleChangingRowFactory<Person> rowFactory = new StyleChangingRowFactory<>("highlightedRow");
table.setRowFactory(rowFactory);
And in your button's action handler do
rowFactory.getStyledRowIndices().setAll(table.getSelectionModel().getSelectedIndices());
Because StyleChangingRowFactory wraps another row factory, you can still use it if you already have a custom row factory implementation you want to use. For example:
final StyleChangingRowFactory<Person> rowFactory = new StyleChangingRowFactory<Person>(
"highlightedRow",
new Callback<TableView<Person>, TableRow<Person>>() {
#Override
public TableRow<Person> call(TableView<Person> tableView) {
final TableRow<Person> row = new TableRow<Person>();
ContextMenu menu = new ContextMenu();
MenuItem removeMenuItem = new MenuItem("Remove");
removeMenuItem.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
table.getItems().remove(row.getItem());
}
});
menu.getItems().add(removeMenuItem);
row.contextMenuProperty().bind(
Bindings.when(row.emptyProperty())
.then((ContextMenu) null)
.otherwise(menu));
return row;
}
});
table.setRowFactory(rowFactory);
Here is a complete code example.
Here's an ugly hack solution. Firstly, define an int field called highlightedRow. Then set a row factory on the TableView:
table.setRowFactory(new Callback<TableView<Person>, TableRow<Person>>() {
#Override public TableRow<Person> call(TableView<Person> param) {
return new TableRow<Person>() {
#Override protected void updateItem(Person item, boolean empty) {
super.updateItem(item, empty);
if (getIndex() == highlightedRow) {
getStyleClass().add("highlightedRow");
} else {
getStyleClass().remove("highlightedRow");
}
}
};
}
});
Then add the following code in your button on action (and this is where the ugly hack comes into play):
btnHighlight.setOnAction(new EventHandler<ActionEvent>(){
public void handle(ActionEvent e){
// set the highlightedRow integer to the selection index
highlightedRow = table.getSelectionModel().getSelectedIndex();
// force a tableview refresh - HACK
List<Person> items = new ArrayList<>(table.getItems());
table.getItems().setAll(items);
}
});
Once that is done, you get the brown highlight on the selected row. You could of course easily support multiple brown highlights by replacing the int with a list of itns.
The best way I find to do this:
In my CSS
.table-row-cell:feederChecked{
-fx-background-color: #06FF00;
}
In my table initialization with a SimpleBooleanProperty of an Object content in my ObservableList:
// The pseudo classes feederChecked that were defined in the css file.
PseudoClass feederChecked = PseudoClass.getPseudoClass("feederChecked");
// Set a rowFactory for the table view.
tableView.setRowFactory(tableView -> {
TableRow<Feeder> row = new TableRow<>();
ChangeListener<Boolean> changeListener = (obs, oldFeeder, newFeeder) -> {
row.pseudoClassStateChanged(feederChecked, newFeeder);
};
row.itemProperty().addListener((obs, previousFeeder, currentFeeder) -> {
if (previousFeeder != null) {
previousFeeder.feederCheckedProperty().removeListener(changeListener);
}
if (currentFeeder != null) {
currentFeeder.feederCheckedProperty().addListener(changeListener);
row.pseudoClassStateChanged(feederChecked, currentFeeder.getFeederChecked());
} else {
row.pseudoClassStateChanged(feederChecked, false);
}
});
return row;
});
Code adapting from this complete exemple
I might have found something that works:
With this code added, if you press the button the highlighted row changes color, when you select a different row the color changes back to default, when you press the button again, it changes the color of the new row to brown.
final String css = getClass().getResource("style.css").toExternalForm();
final Scene scene = new Scene(new Group());
btnHighlight.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent e) {
scene.getStylesheets().add(css);
}
});
table.getSelectionModel().selectedIndexProperty()
.addListener(new ChangeListener<Number>() {
#Override
public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) {
scene.getStylesheets().remove(css);
}
});
css:
.table-row-cell:selected
{
-fx-background-color: brown;
-fx-text-inner-color: white;
}
Only problem with this solution is that if you press the button twice in a row, your next row selected is already brown. You would have to use a seperate css file for this, else at startup of the application no css rules would be applied untill you press the button.
I found that the best solution would be to listen for row.itemProperty() changes because when you sort for example the rows change indexes, so rows get notified automatically.