Develop Reference

JavaFX: why dragged image size is lower than original?

I'm trying to implement drag&drop for ListView each cell of which is a GridPane. So, I'm just making snapshot of a corresponding GridPane and set is drag view.
WritableImage im = rootPane.snapshot(null, null);
dragboard.setDragView(im);
The problem is that size of drag view image is somehow scaled down and I have no idea why is that.
I've tried to scale snapshot image but has no luck.
WritableImage writableImage = new WritableImage((int)(5 * getWidth()), (int)(5 * getHeight()));
SnapshotParameters sp = new SnapshotParameters();
sp.setTransform(Transform.scale(5, 5));
WritableImage im = rootPane.snapshot(sp, writableImage);
Could someone please explain how to show real image size when dragging.
EDIT:
Minimal reproducible example. Also I've noticed that the size of the drag view depends on... scene size. The larger scene size the lower drag view will be
public class Launcher extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
BorderPane pane = new BorderPane();
ListView<Foo> fooList = new ListView<>();
pane.setCenter(fooList);
fooList.setCellFactory(list -> new FooCell());
fooList.getItems().setAll(List.of(new Foo("1"), new Foo("2"), new Foo("3"), new Foo("4")));
Scene scene = new Scene(pane, 1400, 900);
primaryStage.setTitle("Demo");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(t -> Platform.exit());
primaryStage.show();
}
static class Foo {
public String a;
public Foo(String a) {
this.a = a;
}
#Override
public boolean equals(Object o) {
if (this == o) return true;
if (o == null || getClass() != o.getClass()) return false;
Foo foo = (Foo) o;
return a.equals(foo.a);
}
#Override
public int hashCode() {
return a.hashCode();
}
}
static class FooCell extends ListCell<Foo> {
private AnchorPane rootPane;
private GridPane gridPane;
private Region dragHandle;
private TextField textField;
private HBox hbox;
public FooCell() {
ListCell<Foo> thisCell = this;
rootPane = new AnchorPane();
gridPane = new GridPane();
gridPane.setPrefHeight(40);
AnchorPane.setTopAnchor(gridPane, 0d);
AnchorPane.setRightAnchor(gridPane, 0d);
AnchorPane.setBottomAnchor(gridPane, 0d);
AnchorPane.setLeftAnchor(gridPane, 0d);
rootPane.getChildren().setAll(gridPane);
dragHandle = new Region();
dragHandle.setMinWidth(30);
setOnDragDetected(event -> {
if (getItem() == null) return;
ObservableList<Foo> items = getListView().getItems();
Dragboard dragboard = startDragAndDrop(TransferMode.MOVE);
ClipboardContent content = new ClipboardContent();
content.putString(getItem().a);
dragboard.setDragView(gridPane.snapshot(null, null));
dragboard.setContent(content);
event.consume();
});
setOnDragOver(event -> {
if (event.getGestureSource() != thisCell && event.getDragboard().hasString()) {
event.acceptTransferModes(TransferMode.MOVE);
}
event.consume();
});
setOnDragEntered(event -> {
if (event.getGestureSource() != thisCell && event.getDragboard().hasString()) {
setOpacity(0.3);
}
});
setOnDragExited(event -> {
if (event.getGestureSource() != thisCell && event.getDragboard().hasString()) {
setOpacity(1);
}
});
setOnDragDropped(event -> {
if (getItem() == null) return;
Dragboard db = event.getDragboard();
boolean success = false;
if (db.hasString()) {
ObservableList<Foo> items = getListView().getItems();
int draggedIdx = items.indexOf(new Foo(db.getString()));
int thisIdx = items.indexOf(getItem());
items.set(draggedIdx, getItem());
items.set(thisIdx, new Foo(db.getString()));
List<Foo> itemscopy = new ArrayList<>(getListView().getItems());
getListView().getItems().setAll(itemscopy);
success = true;
}
event.setDropCompleted(success);
event.consume();
});
setOnDragDone(DragEvent::consume);
textField = new TextField();
hbox = new HBox();
ColumnConstraints col0 = new ColumnConstraints();
col0.setHgrow(Priority.NEVER);
gridPane.add(dragHandle, 0, 0, 1, 10);
ColumnConstraints col1 = new ColumnConstraints();
col1.setHgrow(Priority.ALWAYS);
gridPane.add(textField, 1, 0, 1, 1);
gridPane.add(hbox, 1, 1, 10, 1);
gridPane.getColumnConstraints().addAll(col0, col1);
}
#Override
protected void updateItem(Foo item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setGraphic(null);
return;
}
textField.setText(item.a);
setGraphic(rootPane);
}
}
}
EDIT2 (problem identified):
It's OS (or display manager to be more precise) who's scaling dragged image down. Seems like GTK backend that JavaFX uses implements kind of limitation for dragged images. If image width is greater than 300-350px it will be scaled down. I've found out this simply trying to drag various pics in my email client. Small or medium images doesn't change, but larger ones being scaled. What I've said about it depends on scene size was right, but there's no magic here. When you change scene size, you change target node size as well. When its width become close to 300px.. yeah, it was obvious, but I paid no attention.
Generally my problem is that I want to drag images that have large width, but low height. That's why scaling looks so ugly/ It makes text unreadable due to extra low font size. Funny that Electron doesn't have such problem. Either Chromium doesn't use GTK API for dragging or DOM doesn't have such issues by definition.

Customized Text in ListView javafx

I wanna design a custom listview in JavaFX, And I need to add some different fonts with different sizes, but my code doesn't work.
Here is my updateItem Function :
list.setCellFactory(param -> new ListCell<String>() {
#Override
protected void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setText(null);
setGraphic(null);
} else {
ImageView imageView = new ImageView();
switch (item) {
case "Back":
imageView.setImage(image1);
System.out.println(imageView.getImage());
break;
case "Shop":
imageView.setImage(image0);
break;
}
imageView.setFitHeight(100);
imageView.setFitWidth(100);
Text text = new Text(item);
text.setFont(Font.font("B Aria", 500));
Text text1 = new Text("100");
text1.setFont(Font.font("Arial", 200));
setText(text.getText() + "\n" + text1.getText());
setGraphic(imageView);
setStyle("-fx-background-color: white");
setStyle("-fx-text-fill:#5aa6f0;");
}
}
});
As you see, Two texts are same in Font and size:
How can I fix this? Thanks.

The text property of the cell is just a string: it doesn't carry any style or font information with it. So all you are doing here is setting the text of the cell to the concatenation of the two strings, with a newline between them. The style of the text is determined solely by styles set on the cell itself (i.e. a text fill of #5aa6f0).
To achieve what you want here, you'll need to display the two Text objects with their styles as part of the graphic. Since you already have an image view as the graphic, you'll need to combine these: e.g. you can have a VBox containing the two Texts, and an HBox containing the image and the VBox. You may need to experiment with the layout to get it exactly as you want, but this should give you the idea:
list.setCellFactory(param -> new ListCell<String>() {
private final VBox textContainer = new VBox();
private final Text itemText = new Text();
private final Text valueText = new Text();
private final HBox graphic = new HBox();
private final ImageView imageView = new ImageView();
{
textContainer.getChildren().addAll(itemText, valueText);
graphic.getChildren().addAll(imageView, textContainer);
// may be better to put styles in an external CSS file:
itemText.setFill(Color.web("#5aa6f0"));
itemText.setFont(Font.font("B Aria", 500));
valueText.setFill(Color.web("#5aa6f0"));
valueText.setFont(Font.font("Arial", 200));
setStyle("-fx-background-color: white;");
imageView.setFitHeight(100);
imageView.setFitWidth(100);
}
#Override
protected void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setGraphic(null);
} else {
switch (item) {
case "Back":
imageView.setImage(image1);
break;
case "Shop":
imageView.setImage(image0);
break;
}
itemText.setText(item);
valueText.setText("100");
setGraphic(graphic);
}
}
});

JavaFX ComboBox background color per selected item

I would like to change background of a ComboBox based on selected item.
For example: if selected first item then background should be green, if second one is selected then red.
Is this possible?

If you want to just set the color of the ComboBox itself and not the items of the ComboBox inside the drop-down list, you can create a custom binding between the buttonCellProperty and the valueProperty of the ComboBox to implement the custom coloring.
Example
This example colors the ComboBox to green if the first item is selected, to red if the second item is selected, and leaves the coloring as it is otherwise.
Update: The background color of the arrow button of the ComboBox is also colored now, for that the lookup method can be used to get the arrow button: StackPane arrowButton = (StackPane) combo.lookup(".arrow-button");.
ComboBox<String> combo = new ComboBox<>();
combo.setItems(FXCollections.observableArrayList("First", "Second", "Third", "Fourth"));
combo.buttonCellProperty().bind(Bindings.createObjectBinding(() -> {
int indexOf = combo.getItems().indexOf(combo.getValue());
Color color = Color.TRANSPARENT;
switch (indexOf) {
case 0: color = Color.GREEN; break;
case 1: color = Color.RED; break;
default: break;
}
final Color finalColor = color;
// Get the arrow button of the combo-box
StackPane arrowButton = (StackPane) combo.lookup(".arrow-button");
return new ListCell<String>() {
#Override
protected void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
setBackground(Background.EMPTY);
setText("");
} else {
setBackground(new Background(new BackgroundFill(finalColor, CornerRadii.EMPTY, Insets.EMPTY)));
setText(item);
}
// Set the background of the arrow also
if (arrowButton != null)
arrowButton.setBackground(getBackground());
}
};
}, combo.valueProperty()));
The result is like:
Notes
1) If you want to color the items also in the drop-down list, you can pick the solution from other answers here.
2) If you do not display Strings but items that are able to store also the color of the item, the solution is even shorter, just use the color of the selected item in updateItem method rather than calculating your own color.

Sure this is possible. Create custom ListCells in a cellFactory you use with the ComboBox and use it to modify the Cell's style based on the item it contains.
Example:
public class Item {
public Item(String value, Color color) {
this.value = value;
this.color = color;
}
private final String value;
private final Color color;
public String getValue() {
return value;
}
public Color getColor() {
return color;
}
}
ComboBox<Item> comboBox = new ComboBox<>(FXCollections.observableArrayList(
new Item("Summer", Color.RED),
new Item("Winter", Color.CYAN),
new Item("Spring", Color.LIME),
new Item("Autumn", Color.BROWN)
));
comboBox.setCellFactory(lv -> new ListCell<Item>(){
#Override
protected void updateItem(Item item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
setBackground(Background.EMPTY);
setText("");
} else {
setBackground(new Background(new BackgroundFill(item.getColor(),
CornerRadii.EMPTY,
Insets.EMPTY)));
setText(item.getValue());
}
}
});
comboBox.setButtonCell(comboBox.getCellFactory().call(null));

public class Main extends Application {
Random r = new Random();
private class Item {
Color c;
String s;
public Item(Color a,String b){
c = a;
s = b;
}
#Override
public String toString() {
// TODO Auto-generated method stub
return s;
}
}
private void addAll(List<String> items){
for(String s : items){
box.getItems().add(new Item(Color.WHITE,s));
}
}
ComboBox<Item> box;
#Override
public void start(Stage primaryStage) {
Pane p;
try {
p = new StackPane();
box = new ComboBox<Item>();
box.setMinWidth(100);
addAll(Font.getFontNames());
box.setCellFactory(new Callback<ListView<Item>, ListCell<Item>>() {
#Override
public ListCell<Item> call(ListView<Item> param) {
// TODO Auto-generated method stub
return new ListCell<Item>(){
#Override
public void updateSelected(boolean selected) {
super.updateSelected(selected);
if(selected){
getItem().c = Color.rgb(r.nextInt(205),
r.nextInt(205), r.nextInt(205), 1);
}
setStyle("-fx-text-fill: black; -fx-background-color: #" +
getItem().c.toString().substring(2)+";");
}
#Override
protected void updateItem(Item item, boolean empty) {
// TODO Auto-generated method stub
super.updateItem(item, empty);
if(empty){
return;
}
setText(item.toString());
setStyle("-fx-text-fill: black; -fx-background-color: #" +
getItem().c.toString().substring(2)+";");
}
};
}
});
p.getChildren().add(box);
p.setPrefSize(500, 500);
Scene scene = new Scene(p);
scene.getStylesheets().add(getClass().
getResource("application.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}

combobox.valueProperty().addListener(new ChangeListener<String>() {
#Override
public void changed(ObservableValue ov, String t, String t1) {
if (t1.equals("Option 1")) {
combobox.setStyle(" -fx-background-color: #000000");
}
if (t1.equals("Option 2")) {
combobox.setStyle(" -fx-background-color: #FFFFFF");
}
}
});
you should be able to do something quite simple like the above with a basic change listener, you may have to refresh the page (I often just remove and re-add the component so you can see the change take place)
This is on the basis you want to select a combobox item then the box to change, not each item to have a different colour from the start

Inserting Images into a TableView JavaFX - Images not displayed

I'm currently trying to add some images from a decoded video to a TableView row and they are not appearing. Only empty TableColumns. The TableView has been designed in JavaFx Scene Builder along with the Label.
Here's what I got so far:
public class MainScreenController implements Initializable {
#FXML
private Label previewBoxLabel;
#FXML
private TableView tableView;
private ObservableList<ImageView> imageList = FXCollections.observableArrayList();
#FXML
public void AddClipBeta(){
//Code which uses an external class in order to decode video (Variables Frames, width and height are not shown but are present in the actual code)
VideoSegment clip = new VideoSegment(0, file.getPath(), 0, Frames, width, height);
//Opens the file in decoding class - ready to output frames
try{clip.openFile();} catch(Exception e){}
//First frame is updated on the preview box
previewBoxLabel.setGraphic(new ImageView(convertToFxImage(clip.getThumbnail())));
System.out.println(file.getPath());
int i =0;
//While loop in test phase to see whether or not 10 frames will be visible in the table
while(i != 10){
//Creates and sets columns to tableView
TableColumn<ImageView, ImageView> col = new TableColumn<ImageView, ImageView>();
col.setPrefWidth(100); //Set width of column
tableView.getColumns().add(col);
col.setCellFactory(new Callback<TableColumn<ImageView, ImageView>, TableCell<ImageView, ImageView>>() {
#Override
public TableCell<ImageView, ImageView> call(TableColumn<ImageView, ImageView> p) {
TableCell<ImageView, ImageView> cell = new TableCell<ImageView, ImageView>(){
};
return cell;
}
});
//Adds current frame to list
imageList.add(new ImageView(convertToFxImage(clip.getThumbnail())));
//Gets next video frame
try{clip.getNextFrame();} catch(Exception e){}
//Updates counter
i++;
}
//Sets list of frames on the table
tableView.setItems(imageList);
}
// There is a problem with this implementation: transparent pixels on the BufferedImage aren't converted to transparent pixels on the fxImage.
public static javafx.scene.image.Image convertToFxImage(java.awt.image.BufferedImage awtImage) {
if (Image.impl_isExternalFormatSupported(BufferedImage.class)) {
return javafx.scene.image.Image.impl_fromExternalImage(awtImage);
} else {
return null;
}
}
I've been struggling understanding how the TableView works the last couple of days and it would be a real breakthrough if we could get to the bottom of this.
Thanks for reading and any help in advance!

When setting a CellFactory, you need to take in to account that it will override some default bevaiours such as setting text and images.
For example. I had to create a ListView of Applications that launched on double click. I had to set a CellFactory in order to add a listener to the mouse click of each individual cell.
applications.setCellFactory(new Callback<TreeView<Application>, TreeCell<Application>>() {
#Override
public TreeCell<Application> call(TreeView<Application> param) {
return new TreeCell<Application>() {
#Override
protected void updateItem(Application item, boolean empty) {
//call the origional update first
super.updateItem(item, empty);
//the root item in my list is null, this check is required to keep a null pointer from happening
if (item != null) {
// text and graphic are stored in the Application object and set.
this.setText(item.getApplicationListName());
this.setGraphic(item.getGraphic());
// registers the mouse event to the cell.
this.setOnMouseClicked((MouseEvent e) -> {
if (e.getClickCount() == 2) {
try {
this.getItem().launch(tabBar);
} catch (UnsupportedOperationException ex) {
Dialogs.create().nativeTitleBar().masthead("Comming Soon™").message("Application is still in development and will be available Soon™").nativeTitleBar().title("Unavailable").showInformation();
}
} else {
e.consume();
}
});
}else if(empty){
this.setText(null);
this.setGraphic(null);
this.setOnMouseClicked(null);
}
}
};
}
});
This was pieced together from some other code so if there is anything else you would like explained, let me know!

I managed to sort this out with the help of you guys. Basically, what I did was make a class with a bunch of setters and getters and a constructor that takes in ImageViews and sets it to a variable in the class via it's constructors. Then I went back to my code and added the following:
Class with Getters and Setters:
import javafx.scene.image.ImageView;
public class tableDataModel {
private ImageView image;
public tableDataModel(ImageView image){
this.image = image;
}
public ImageView getImage(){
return image;
}
public void setImage(ImageView image){
this.image = image;
}
}
Code from MainScreenController:
TableColumn<tableDataModel, ImageView> col = new TableColumn<>();
tableView.getColumns().add(col);
imageList.add(new tableDataModel(new ImageView(convertToFxImage(clip.getThumbnail()))));
col.setPrefWidth(50);
col.setCellValueFactory(new PropertyValueFactory<tableDataModel, ImageView>("image"));
int i = 0;
while (i != 10) {
try {
imageList.add(new tableDataModel(new ImageView(convertToFxImage(clip.getNextFrame()))));
} catch (Exception e) {
}
i++;
}
tableView.setItems(imageList);

How to insert TreeView into accordion using JavaFX

I have a problem how to insert Threeview which is expandable into Accordion.
This is the code of the accordion:
public TitledPane createConnectionsTree(String title) {
connectionsData = FXCollections.observableArrayList(connectionsList);
ListView<ConnectionsObject> lv = new ListView<>(connectionsData);
lv.setCellFactory(new Callback<ListView<ConnectionsObject>, ListCell<ConnectionsObject>>() {
#Override
public ListCell<ConnectionsObject> call(ListView<ConnectionsObject> p) {
return new ConnectionsCellFactory();
}
});
AnchorPane content = new AnchorPane();
content.getChildren().add(lv);
// add to TitelPane
TitledPane pane = new TitledPane(title, content);
return pane;
}
This is the treeview code:
public void initTree() {
rootNode.setExpanded(true);
for (Employee employee : employees) {
TreeItem<String> empLeaf = new TreeItem<>(employee.getName());
boolean found = false;
for (TreeItem<String> depNode : rootNode.getChildren()) {
if (depNode.getValue().contentEquals(employee.getDepartment())) {
depNode.getChildren().add(empLeaf);
found = true;
break;
}
}
if (!found) {
TreeItem depNode = new TreeItem(employee.getDepartment());
rootNode.getChildren().add(depNode);
depNode.getChildren().add(empLeaf);
}
}
VBox box = new VBox();
TreeView<String> treeView = new TreeView<>(rootNode);
treeView.setShowRoot(true);
treeView.setEditable(true);
box.getChildren().add(treeView);
}
P.S
I get this result:
I want when I expand the treeview to expand the slider of the accordion not the slider of the treeview. This is the code that I tested:
public TitledPane createConnectionsList(String title) {
rootNode.setExpanded(true);
for (ThreeData conn : connectionsThree) {
TreeItem<String> empLeaf = new TreeItem<>(conn.getName());
boolean found = false;
for (TreeItem<String> depNode : rootNode.getChildren()) {
if (depNode.getValue().contentEquals(conn.getDepartment())) {
depNode.getChildren().add(empLeaf);
found = true;
break;
}
}
if (!found) {
TreeItem depNode = new TreeItem(conn.getDepartment());
rootNode.getChildren().add(depNode);
depNode.getChildren().add(empLeaf);
}
}
TreeView<String> treeView = new TreeView<>(rootNode);
treeView.setShowRoot(true);
treeView.setEditable(true);
AnchorPane content = new AnchorPane();
// Set aligment - fill the accordion with the three content
AnchorPane.setLeftAnchor(treeView, 0d);
AnchorPane.setRightAnchor(treeView, 0d);
AnchorPane.setBottomAnchor(treeView, 0d);
AnchorPane.setTopAnchor(treeView, 0d);
content.getChildren().add(treeView);
// Add to TitelPane
TitledPane pane = new TitledPane(title, content);
return pane;
}

The problem is probably more obvious when you're designing your GUI in SceneBuilder with FXML. You need to anchor nodes with an AnchorPane so that they stretch out. For example:
AnchorPane.setLeftAnchor(aNode, 0d);
AnchorPane.setRightAnchor(aNode, 0d);
AnchorPane.setBottomAnchor(aNode, 0d);
AnchorPane.setTopAnchor(aNode, 0d);
This will anchor each corner of node aNode to the corners of the AnchorPane. This is what you get in SceneBuilder when selecting the "Fit to Parent" option on an AnchorPane.
Failing that, just use FXML which will make it much easier to get the GUI you want.