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
Related
I have a TableView with 2 columns “Date” (LocalDate) and “FX” (Double). I have enabled the cell editing and following an example I found here (http://physalix.com/javafx8-render-a-datepicker-cell-in-a-tableview/) I have created a custom CellFactory that displays a DatePicker for the cells of column “Date”. This solution though renders the DatePciker immediately, so I changed my code to show the DatePicker only when the user double clicks on any of the (non-empty) Date cells. So far so good…
How do I “go back” and remove the DatePicker rendering from the cell after the user has changed the date or cancelled the input? See the pictures as reference. Pic 1 is the initial state of the list. Pic 2 is after double click. How do I go back to Pic 1 status? Let me know if you need to see my specific code.
Reference pictures
This is the code that checks for the double click and then creates the CellFactory
fxTable.getSelectionModel().setCellSelectionEnabled(true);
fxTable.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
if (event.getClickCount() == 2) {
TablePosition pos = fxTable.getSelectionModel().getSelectedCells().get(0);
int col = pos.getColumn();
if (col == 0) {
//The code below creates the DatePicker in the cell using the DatePickerCell class that I created following the example in the code I found
tblDateFX.setCellFactory(new Callback<TableColumn<Map.Entry<LocalDate, Double>, String>, TableCell<Map.Entry<LocalDate, Double>, String>>() {
#Override
public TableCell<Map.Entry<LocalDate, Double>, String> call(TableColumn<Map.Entry<LocalDate, Double>, String> param) {
ObservableMap<LocalDate, Double> items = FXCollections.observableMap(myBasket.getEnrtriesCur(curName));
DatePickerCell datePick = new DatePickerCell(items);
return datePick;
}
});
}
}
}
});
This is the DatePickerCell Class
public class DatePickerCell<S, T> extends TableCell<Map.Entry<LocalDate,Double>, String> {
private DatePicker datePicker;
private ObservableMap<LocalDate,Double> curEntries;
public DatePickerCell(ObservableMap<LocalDate,Double> curEntries) {
super();
this.curEntries = curEntries;
if (datePicker == null) {
createDatePicker();
}
setGraphic(datePicker);
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
Platform.runLater(new Runnable() {
#Override
public void run() {
datePicker.requestFocus();
}
});
}
#Override
public void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (null == this.datePicker) {
System.out.println("datePicker is NULL");
}
if (empty) {
setText(null);
setGraphic(null);
} else {
if (isEditing()) {
setContentDisplay(ContentDisplay.TEXT_ONLY);
} else {
datePicker.setValue(LocalDate.parse(item,df));
setGraphic(this.datePicker);
setText(item);
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
}
}
}
#Override
public void startEdit() {
super.startEdit();
}
#Override
public void cancelEdit() {
super.cancelEdit();
setContentDisplay(ContentDisplay.TEXT_ONLY);
setGraphic(null);
}
private void createDatePicker() {
this.datePicker = new DatePicker();
datePicker.setEditable(true);
datePicker.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
setGraphic(datePicker);
setText(df.format(datePicker.getValue()));
}
});
datePicker.setOnAction(new EventHandler() {
public void handle(Event t) {
LocalDate date = datePicker.getValue();
int index = getIndex();
commitEdit(df.format(date));
if (null != getCurEntries()) {
System.out.println("Modify value");
}
}
});
setAlignment(Pos.CENTER);
}
Have you tried the function setOnEditCommit to do reverse of your code?
column.setOnEditCommit((TableColumn.CellEditEvent<MyObject, Date> t) -> {
//modify the rendering of you cell to normal
});
After some research I found out that the default rendering of a cell in a TableView is a label. So I tweaked the DatePickerCell class to render a label in the "updateItem" method and render the DatePicker only when the label is clicked (meaning that the user wants to edit the date in the cell).
In terms of "going back" I added a listener for "ESC keypressed" on the DatePicker so when that key is pressed (during the edit) a label is rendered and the edit is therefore cancelled. That works quite well!
I'm still trying to figure out how to do the same when the user tries to cancel the edit by clicking somewhere else on the screen.
--
So here's my stab at the DatePickerEdit class.
This is doing what I need. Renders the cells normally at first, only when the user clicks on the date cell the datepicker is rendered. If the user clicks away from the cell, the cell goes back to its initial rendering (same happens when "ESC" is pressed whilst editing or indeed a new date is picked).
Note that I am passing to the class the Observable list that contains the values shown in the TableView. In this way I can update the value in the list directly in the class. Not sure if this is a good practice or not, this was a "forced solution" though. Originally I used the "setOnEditCommit" method for the TableColumn but after some testing I noticed that this event is not always called after the cell is updated (i.e. the commitEdit() method is called for the cell). Not sure if this is a bug or there's something wrong in my code. For sure it does not always happen. On multiple runs, I would say that 1 out of 3 showed this bugged behaviour.
Here's the code, not sure if it's a "good" code or not. I would appreciate any advice in merit.
public class DatePickerCell<S, T> extends TableCell<FX, String> {
private DatePicker datePicker;
private Label lbl;
private ObservableList<FX> currencies;
public DatePickerCell(ObservableList<FX> list) {
super();
lbl=new Label();
this.currencies=list;
if (datePicker == null) {
createDatePicker();
}
}
#Override
public void updateItem(String item, boolean empty) {
// This section here manages the graphic rendering of each cell
// As I don't want to generate the datepicker graphics immediately I just render a label
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
setGraphic(null);
} else {
createLabel(item);
}
}
#Override
public void startEdit() {
super.startEdit();
}
#Override
public void cancelEdit() {
super.cancelEdit();
}
private void createDatePicker() {
this.datePicker = new DatePicker();
datePicker.setEditable(true);
// when the user clicks on the label the DatePicker graphics is generated
lbl.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
datePicker.setValue(LocalDate.parse(lbl.getText(),df));
setGraphic(datePicker);
setText(lbl.getText());
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
datePicker.requestFocus();
}
});
// This listener manages the "lost focus" on the picker
datePicker.focusedProperty().addListener(new ChangeListener<Boolean>() {
#Override
public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
// This combination of OldValue NewValue is generated whenever there is a click outside the DatePicker "graphic area"
// i.e. the calendar (when open), the text filed, the calendar icon OR when a NEW date is selected in the calendar.
// This last case generates the "OnAction" event as well that is managed below.
if (oldValue && !newValue) {
createLabel(df.format(datePicker.getValue()));
}
}
});
// This is generated when a NEW date is picked
// it simply commits the new date and changes the graphics back to a label
datePicker.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
LocalDate date = datePicker.getValue();
int index=getIndex();
if (date!=null) {
commitEdit(df.format(date));
getCurrencies().get(index).setDate(date);
createLabel(df.format(date));
}
}
});
// added this listener in case the user wants to cancel pressing "ESC"
// when this happens the label graphics is rendered
datePicker.setOnKeyPressed(new EventHandler<KeyEvent>() {
#Override
public void handle(KeyEvent event) {
LocalDate date = datePicker.getValue();
if (event.getCode()== KeyCode.ESCAPE) {
createLabel(df.format(date));
}
}
});
setAlignment(Pos.CENTER_LEFT);
}
private void createLabel(String item) {
lbl.setMinWidth(getWidth());
setGraphic(lbl);
lbl.setText(item);
}
public ObservableList<FX> getCurrencies() {
return currencies;
}
}
I try do create a customize item within ListView, let's say it's label and I want to execute setCellFactory, while I'm using Label I don't see the item (the text of the label), why?
ListView<Label> list = new ListView<Label>();
ObservableList<Label> data = FXCollections.observableArrayList(
new Label("123"), new Label("45678999"));
#Override
public void start(Stage stage) {
VBox box = new VBox();
Scene scene = new Scene(box, 200, 200);
stage.setScene(scene);
stage.setTitle("ListViewExample");
box.getChildren().addAll(list);
VBox.setVgrow(list, Priority.ALWAYS);
list.setItems(data);
list.setCellFactory(new Callback<ListView<Label>, ListCell<Label>>() {
#Override
public ListCell<Label> call(ListView<Label> list) {
ListCell<Label> cell = new ListCell<Label>() {
#Override
public void updateItem(Label item, boolean empty) {
super.updateItem(item, empty);
if (item != null) {
setItem(item);
}
}
};
return cell;
}
}
);
stage.show();
}
If you do want to show items extending Node there is no need to use custom ListCells. The ListCells of the default factory are doing this already.
However in your case you're calling setItem instead of setGraphic and also you do not set the property back to null, when the cell becomes empty:
list.setCellFactory(new Callback<ListView<Label>, ListCell<Label>>() {
#Override
public ListCell<Label> call(ListView<Label> list) {
ListCell<Label> cell = new ListCell<Label>() {
#Override
public void updateItem(Label item, boolean empty) {
super.updateItem(item, empty);
// also sets to graphic to null when the cell becomes empty
setGraphic(item);
}
};
return cell;
}
});
I'm currently working on javafx and I have a serious problem. I can't find a way to get the index of the row of a button that I created dynamically on a table view.
If someone could help me out, that would be very helpful.
this.clmColumn.setCellFactory((TableColumn<?, ?> column) -> {
return new TableCell<?, ?>() {
#Override
protected void updateItem(? item, boolean empty) {
super.updateItem(item, empty);
if (!empty) {
final HBox hbox = new HBox(5);
final VBox vbox = new VBox(5);
Label label = new Label(item.toString());
final Button btnMais = new Button("+");
btnMais.setMinSize(25, 25);
final TableCell<?, ?> c = this;
btnMais.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
// At this point i want to select the current ROW of the button that i pressed on the tableview.
}
});
final Button btnMenos = new Button("-");
btnMenos.setMinSize(25, 25);
btnMenos.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
if (getItem() > 1) {
// At this point i want to select the current ROW of the button that i pressed on the tableview.
}
}
});
final Button btnRemover = new Button("Remover");
btnRemover.setFont(new Font(8));
btnRemover.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
// At this point i want to select the current ROW of the button that i pressed on the tableview.
}
});
vbox.getChildren().add(hbox);
vbox.getChildren().add(btnRemover);
hbox.getChildren().add(btnMais);
hbox.getChildren().add(label);
hbox.getChildren().add(btnMenos);
hbox.setAlignment(Pos.CENTER);
vbox.setAlignment(Pos.CENTER);
setGraphic(vbox);
} else {
setGraphic(null);
}
}
};
});
In the handle() method you can do
Object row = getTableView.getItems().get(getIndex());
You can replace Object with a more specific type if you use more specific types throughout in the type parameters.
I have a tree-view with costume TreeCell. tree cell is customized and it looks like below image.
On Right Side I selected the One Tree Cell or Tree item. as you can see there is image-view of hand on left side of each cell. By default it is in black color but i want to replace it with white color icon. as in above mock up.
How can i achieve this????
I want all text and image view icon on selection changed to white color. and last selected tree cell back to normal black color.
My Tree Cell Code is below.
private final class AlertTreeCell extends TreeCell<AlertListItem> {
private Node cell;
private Rectangle rectSeverity;
private Label mIncedentname;
private Label mAlertTitle;
private Label mSentTime;
private Label mSender;
private ImageView ivCategory;
public AlertTreeCell() {
FXMLLoader fxmlLoader = new FXMLLoader(
MainController.class
.getResource("/fxml/alert_list_item.fxml"));
try {
cell = (Node) fxmlLoader.load();
rectSeverity = (Rectangle) cell.lookup("#rectSeverity");
mIncedentname = (Label) cell.lookup("#lblIncidentName");
mAlertTitle = (Label) cell.lookup("#lblAlertTitle");
mSentTime = (Label) cell.lookup("#lblSentTime");
mSender = (Label) cell.lookup("#lblSender");
ivCategory = (ImageView) cell.lookup("#ivCategory");
} catch (IOException ex) {
mLogger.error(ex.getLocalizedMessage(),ex);
}
}
#Override
public void updateItem(AlertListItem item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setText(null);
setGraphic(null);
} else {
setText(null);
mAlertTitle.setText(item.getEvent());
mIncedentname.setText(item.getHeadline());
mSentTime.setText(MyUtils.getListDateFormattedString(item.getReceivedTime()));
mSender.setText(item.getSenderName());
Image image = new Image("/images/ic_cat_" + item.getCategoryIcon().toLowerCase() + "_black.png");
if(image != null){
ivCategory.setImage(image);
}
if(item.getSeverity() != null){
String severityColor = item.getSeverity().toString();
String severityColorCode = null;
if(severityColor != null) {
SeverityColorHelper severityColorHelper = new SeverityColorHelper();
severityColorCode = severityColorHelper.getColorBySeverity(AlertInfo.Severity.fromValue(severityColor));
}
rectSeverity.setFill(Color.web(severityColorCode,1.0) );
}
final AlertTreeCell this$=this;
setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
if(event.getClickCount()==1){
Node cell$ = this$.getGraphic();
ImageView ivCategory$ = (ImageView) cell.lookup("#ivCategory");
Image image = new Image("/images/ic_cat_" + item.getCategoryIcon().toLowerCase() + "_white.png");
if(image != null){
ivCategory$.setImage(image);
}
}
}
});
this$.
setGraphic(cell);
}
}
}
problem is that new white icon properly selected and added but how to change back the last selected tree item's image view back to black color icon. actually I have two color images of same type. one is in black color and same image in white color. on selection i want the image and text changed to white colored and all other tree-items in to black color text and black color icon.
I'm not quite sure if the mouse handler is supposed to be changing the icon on selection: if so remove it. Don't use mouse handlers for detecting selection (what if the user navigates through the tree using the keyboard, for example?).
In your constructor, add a listener to the selectedProperty, and change the item accordingly:
public AlertTreeCell() {
FXMLLoader fxmlLoader = new FXMLLoader(
MainController.class
.getResource("/fxml/alert_list_item.fxml"));
try {
cell = (Node) fxmlLoader.load();
rectSeverity = (Rectangle) cell.lookup("#rectSeverity");
mIncedentname = (Label) cell.lookup("#lblIncidentName");
mAlertTitle = (Label) cell.lookup("#lblAlertTitle");
mSentTime = (Label) cell.lookup("#lblSentTime");
mSender = (Label) cell.lookup("#lblSender");
ivCategory = (ImageView) cell.lookup("#ivCategory");
this.selectedProperty().addListener((obs, wasSelected, isNowSelected) -> {
String col ;
if (isNowSelected) {
col = "_black.png" ;
} else {
col = "_white.png" ;
}
if (getItem() != null) {
Image img = new Image("/images/ic_cat_" + item.getCategoryIcon().toLowerCase() + col);
ivCategory.setImage(img);
}
});
} catch (IOException ex) {
mLogger.error(ex.getLocalizedMessage(),ex);
}
}
In the updateItem(...) method, just check isSelected() and set the image accordingly there, but without the listener.
I am creating TableView in JavaFX. In which I want to show Context Menu in right click of mouse in tableView. So I am adding an EventHandler on table as given below :
TableView tableView=new TableView();
EventHandler event = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent me) {
if (me.getButton() == MouseButton.SECONDARY) {
tableView.getContextMenu().show(tableView, me.getSceneX(), me.getSceneY());
}
}
};
tableView.addEventHandler(MouseEvent.MOUSE_CLICKED, event);
But my problem is that Context Menu is visible wherever I right click on any part of table.
I want to do that Context Menu should be only visible if I clicked on any rows in TableView.
i.e. How would I get row number in TableView at specific point, So that my Context Menu should be only visible, if I clicked on any row of TableView.
The best solution I found was to check if the y coordinate is outside of the bounds of the column header and then to explicitly show the menu.
ContextMenu visibleMenu = null;
tableView.setOnMouseClicked((MouseEvent e) -> {
if (visibleMenu !=null) {
visibleMenu.hide();
visibleMenu = null;
}
if (e.getButton()==MouseButton.SECONDARY) {
double columnHeaderHeight = tableView.lookup(".column-header-background").getBoundsInLocal().getHeight();
if (e.getY()>columnHeaderHeight) {
visibleMenu = getContextMenu(); // build on the fly or use a prebuild menu
visibleMenu.show(tableView, e.getScreenX(), e.getScreenY());
} else {
// you could show a header specific context menu here
}
}
});
The added benefit is that you can build the context menu on the fly with context sensitive items (that for example only appear if a certain type of cell is selected), or just reuse a prebuild contextmenu as setContextMenu does, up to you.
Add context menu to the specific cells using CellFactory not to the whole table.
E.g. using Table from Oracle tutorial:
TableColumn firstNameCol = new TableColumn();
firstNameCol.setText("First");
firstNameCol.setCellValueFactory(new PropertyValueFactory("firstName"));
firstNameCol.setCellFactory(new Callback<TableColumn, TableCell>() {
#Override
public TableCell call(final TableColumn param) {
final TableCell cell = new TableCell() {
#Override
public void updateItem(Object item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setText(null);
} else {
if (isEditing()) {
setText(null);
} else {
setText(getItem().toString());
setGraphic(null);
}
}
}
};
// This way I will have context menu only for specific column
cell.setContextMenu(ContextMenuBuilder.create().items(MenuItemBuilder.create().text("menu").build()).build());
return cell;
}
});
may be the older question. There is a solution, like getting the target of the mouse event of the table and check for instance for class TableCellSkin and display the context menu as,
table.addEventHandler(MouseEvent.MOUSE_CLICKED,
new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent e) {
if (e.getButton() == MouseButton.SECONDARY
&& !isRowEmpty) {
EventTarget target = e.getTarget();
if (target instanceof TableCellSkin
|| ((Node) target).getParent() instanceof TableCellSkin) {
// do your stuff. Context menu will be displayed by default
} else {
// hide the context menu when click event is outside table row
table.getContextMenu().hide();
}
}
}
});
#FXML
void tableContextMenuRequested(ContextMenuEvent event) {
if (tableview.getSelectionModel().getSelectedItems().size() == 0) {
tableContextMenu.hide();
}
}