Develop Reference

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 - Creating non-selectable item in ListView

I'm using JFXListView and JFXListCell from the library called jfoenix and the purpose and function are same as the regular ListView.
The list contains some Label, Button and AnchorPane. At the very top and bottom of the list, I want to add non-selectable item. The item should not be selectable on mouse click, should not be able to focus and should not be able to scroll.
I though of using updateItem() function and setting the item disable:
#FXML
JFXListView listView;
ObservableList<AnchorPane> list = FXCollections.observableArrayList();
private void initializeListView(){
AnchorPane headerBottomPane = new AnchorPane();
headerBottomPane.setId("headerBottomPane");
....//some property of AnchorPane
list.add(headerBottomPane); //Add header AnchorPane
while(true){
AnchorPane listContainer = new AnchorPane();
Label title = new Label();
Label subtitle = new Label();
Button button = new Button();
Button button2 = new Button();
//Some code here...
listContainer.getChildren().addAll(label, subtitle, button, button2);
list.add(listContainer);
//some code here...
}
list.add(headerBottomPane); //Add bottom AnchorPane
listView.setCellFactory(new CallBack<JFXListView, JFXListCell>(){
#Override
public JFXListCell call(JFXListView param){
return new JFXListCell<AnchorPane>(){
#Override
protected void updateItem(AnchorPane anchorPane, boolean empty){
super.updateItem(anchorPane, empty);
if(anchorPane != null){
if(anchorPane.getId.equals("headerBottomPane")){
setDisable(true);
}
setItem(anchorPane);
}else{
setItem(null);
}
}
};
}
});
}
I am able to disable the top and last item of the list, the item is no longer able to select using mouseClick.
But the problem is, it is focusable when I use the Keyboard arrow up and arrow down another strange thing is when I use the mouse wheel to scroll the list, some of the item are becoming non-selectable too.

I would think of just using a VBox, and putting your top unselectable item first, then the ListView with all the selectable items, then the bottom unselectable item...

I think you have to put your listView.setCellFactory() function at the top of the code where you adding those items, try to initialize it before you add the item.
and inside your updateItem() try to use setMouseTransparent() and setFocusTravesable().
#Override
protected void updateItem(AnchorPane anchorPane, boolean empty){
super.updateItem(anchorPane, empty);
if(anchorPane != null){
if(anchorPane.getId.equals("headerBottomPane")){
setItem(anchorPane); //moved at the top
setMouseTransparent(true); //added this line
setFocusTraversable(false); //added this line
setDisable(true);
}else{
setItem(null);
}
}
I haven't test it but I hope it work.

How to reset ComboBox and display PromptText?

Note: I am expanding on duplicate question here because it does not include a MCVE. The few other similar questions I've found also do not include working answers.
I am unable to find a way to have a ComboBox display the PromptText after clearing the selection.
Here is the MCVE:
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
final VBox root = new VBox(10);
root.setAlignment(Pos.TOP_CENTER);
root.setPadding(new Insets(10));
final ComboBox<String> cboSelection = new ComboBox<>();
final Button btnClear = new Button("Clear");
// Set ComboBox selections
final ObservableList<String> subjectsList = FXCollections.observableArrayList();
subjectsList.addAll("Software", "Math", "Physics");
// Setup the Subject selection
cboSelection.setPromptText("Select Subject");
cboSelection.setItems(subjectsList);
// Set action for "Clear" button
btnClear.setOnAction(e -> {
cboSelection.setValue(null);
});
root.getChildren().addAll(cboSelection, btnClear);
primaryStage.setTitle("ComboBox Demo");
primaryStage.setScene(new Scene(root, 200, 100));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Clicking the "Clear" button will set the selected value to null and clear the selection of the ComboBox, but the prompt text does not show again. This does not seem like the normal expected behavior.
I have tried clearSelection() as well as setPromptText() within the button's onAction and nothing seems to work to get the prompt text back.

According to the documentation, the prompt text should not actually be displayed at all here:
Prompt text is not displayed in all circumstances, it is dependent upon the subclasses of ComboBoxBase to clarify when promptText will be shown. For example, in most cases prompt text will never be shown when a combo box is non-editable (that is, prompt text is only shown when user input is allowed via text input).
If you want to see some prompt text when the selection is null (and you do not have an editable combo box), use a custom buttonCell on the combo box:
cboSelection.setPromptText("Select Subject");
cboSelection.setButtonCell(new ListCell<String>() {
#Override
protected void updateItem(String item, boolean empty) {
super.updateItem(item, empty) ;
if (empty || item == null) {
setText("Select Subject");
} else {
setText(item);
}
}
});
Note that it seems you also need to set the prompt text, as in the code in the question, in order to get the text to appear initially. I assume this is because of the same bug (I'm guessing that the library code is incorrectly setting the text of the button cell to the prompt text initially; if the prompt text is not set, the text gets set to null, apparently after the button cell's update method is invoked).
And you can obviously make this reusable by creating a named subclass of ListCell:
public class PromptButtonCell<T> extends ListCell<T> {
private final StringProperty promptText = new SimpleStringProperty();
public PromptButtonCell(String promptText) {
this.promptText.addListener((obs, oldText, newText) -> {
if (isEmpty() || getItem() == null) {
setText(newText);
}
});
setPromptText(promptText);
}
public StringProperty promptTextProperty() {
return promptText ;
}
public final String getPromptText() {
return promptTextProperty().get();
}
public final void setPromptText(String promptText) {
promptTextProperty().set(promptText);
}
#Override
protected void updateItem(T item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
setText(getPromptText());
} else {
setText(item);
}
}
}
and then just
cboSelection.setButtonCell("Select Subject");
cboSelection.setButtonCell(new PromptButtonCell<>("Select Subject"));

Adding a Button to a column in TableView JavaFX

So, I am trying to add a button to a column using Table View in JavaFX. I have successfully created a single button for one column; using the same code to add another button on another column with a small change of variables is resulting me in one error which I am unable to fix. The error is that it is not allowing me to use the word super. Below is the code in which I am having the error on;
TableColumn<UserDetails, UserDetails> addColumn = column("Add", ReadOnlyObjectWrapper<UserDetails>::new, 50);
addColumn.setCellFactory(col -> {
Button addButton = new Button("Add");
TableCell<UserDetails, UserDetails> addCell = new TableCell<UserDetails, UserDetails>() {
public void addItems(UserDetails userDetails, boolean empty) {
super.addItems(userDetails, empty); //This line is the error (super)
if (empty) {
setGraphic(null);
} else {
setGraphic(addButton);
}
}
};
addButton.setOnAction(event -> add(addCell.getItem(), primaryStage));
return addCell;
});
what am I doing wrong?

As you can see in the TableCell javadoc there is no addItems method in TableCell. You probably wanted to use the updateItem method:
#Override
protected void updateItem(UserDetails userDetails, boolean empty) {
super.updateItem(userDetails, empty);
...

JavaFX ComboBox Image

I am trying to create a ComboBox that will display a preview of selected Image, but the ComboBox displays the string value instead.
The only way appears to work is to create ComboBox of Node, but that causes once selected option disappear from the drop down menu, would appreciate if someone has any suggestions.
My code below:
String notOnLine = "file:Java1.png";
String onLine = "file:Java2.png";
ObservableList<String> options = FXCollections.observableArrayList();
options.addAll(notOnLine, onLine);
final ComboBox<String> comboBox = new ComboBox(options);
comboBox.setCellFactory(c -> new StatusListCell());
and the ListCell:
public class StatusListCell extends ListCell<String> {
protected void updateItem(String item, boolean empty){
super.updateItem(item, empty);
setGraphic(null);
setText(null);
if(item!=null){
ImageView imageView = new ImageView(new Image(item));
imageView.setFitWidth(40);
imageView.setFitHeight(40);
setGraphic(imageView);
setText("a");
}
}
}
I'd like the image to be displayed in the ComboBox itself once the list is closed. Right now it's just showing the URL (e.g. file:Java1.png).

You can specify the buttonCellProperty of the ComboBox:
comboBox.setButtonCell(new StatusListCell());
The button cell is used to render what is shown in the ComboBox
'button' area.