I am using the listview as an leaderboard and displaying the players name and total score which is done by a string. But I want to customize the listview so it includes the position and average score aswell. I have provided a sketch below on how I want it to be.
Right now, I am adding a plain string to the Observable list and viewing it on the listview, but having trouble customizing it. I'm not sure how to actually do it, what is the best way? using css or javafx? I do have some questions regarding listview such as is it possible to have a static header such as a tableview?
UPDATE
I have tried to create a custom HBox cell and tried using it, but it seems I have done something wrong. I tried using a gridpane to adjust the text positions. But the Listview looks like this.
I have added two players in this (Jonny with 59 points, and Mike with 15 points)
I have seen examples with people using listcell (Link) instead of Hbox but the reason why I chose this way, is because I want to pass playerName, totalScore & average after sorting my playerStats array by totalScore. So the listview can display the players in ascending order of their totalscore. If there is a better way of doing this please share.
Controller Class
Global fields:
ListView<CustomCellHBox> leaderBoard = new ListView<CustomCellHBox>();
ObservableList<CustomCellHBox> rank = FXCollections.observableArrayList();
UpdateListView() Method:
public void updateListView() {
rank.clear();
List<CustomCellHBox> data = new ArrayList<CustomCellHBox>();
for(Statistics s : playerStats){
data.add(new CustomCellHBox(s.getPlayer(),s.getTotalScore(),s.getAverage()));
}
rank = FXCollections.observableArrayList(data);
leaderBoard.setItems(rank);
}
CustomCellHBox Class
public class CustomCellHBox extends HBox {
private Label playerName = new Label();
private Label totalScore = new Label();
private Label averageScore = new Label();
private GridPane grid = new GridPane();
CustomCellHBox(String playerName, int totalScore, double averageScore) {
super();
this.playerName.setText(playerName);
this.totalScore.setText(String.valueOf(totalScore));
this.averageScore.setText(String.valueOf(averageScore));
grid.setHgap(10);
grid.setVgap(4);
this.playerName.setMaxWidth(Double.MAX_VALUE);
this.averageScore.setMaxWidth(Double.MAX_VALUE);
this.totalScore.setMaxWidth(Double.MAX_VALUE);
grid.add(this.playerName,0,0);
grid.add(this.totalScore,0,1);
grid.add(this.averageScore,0,2);
this.setHgrow(grid,Priority.ALWAYS);
this.getChildren().addAll(grid);
}
}
The listcell works fine when I use. But its not quite what I want.
grid.add(this.playerName,0,0);
grid.add(this.totalScore,1,0);
grid.add(this.averageScore,2,0);
Result:
