Thursday, May 9, 2013

Apply style sheet on ListView to hide empty cells

The default style of ListView will fill all cells, include empty cells, as shown in last article. You can create your own style sheets to override the styles in the default style sheet and to add your own styles. Typically style sheets that you create have an extension of .css and are located in the same directory as the main class for your JavaFX application.

In the case of the following file structure, using the code:

listView.getStylesheets().add("javafx_listview/style_listview");


To hide empty list cell, edit style_listview.css.

.list-cell:empty {
    visibility:hidden;
}


Full Java code:

package javafx_listview;

import java.util.ArrayList;
import java.util.List;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Callback;

/**
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_ListView extends Application {

    class MyObject {

        String day;
        int number;
        Color color;

        MyObject(String d, int n, Color c) {
            day = d;
            number = n;
            color = c;
        }

        String getDay() {
            return day;
        }

        int getNumber() {
            return number;
        }
        
        Color getColor(){
            return color;
        }
    }
    List<MyObject> myList;

    //Create dummy list of MyObject
    private void prepareMyList() {
        myList = new ArrayList<>();
        myList.add(new MyObject("Sunday", 50, Color.RED));
        myList.add(new MyObject("Monday", 60, Color.GREEN));
        myList.add(new MyObject("Tuesday", 20, Color.BLUE));
        myList.add(new MyObject("Wednesday", 90, Color.VIOLET));
        myList.add(new MyObject("Thursday", 30, Color.BLUEVIOLET));
        myList.add(new MyObject("Friday", 62, Color.AZURE));
        myList.add(new MyObject("Saturday", 65, Color.GOLD));

    }

    @Override
    public void start(Stage primaryStage) {

        primaryStage.setTitle("http://java-buddy.blogspot.com/");

        prepareMyList();
        ListView<MyObject> listView = new ListView<>();
        ObservableList<MyObject> myObservableList = FXCollections.observableList(myList);
        listView.setItems(myObservableList);
        
        listView.getStylesheets().add("javafx_listview/style_listview");

        listView.setCellFactory(new Callback<ListView<MyObject>, ListCell<MyObject>>() {
            @Override
            public ListCell<MyObject> call(ListView<MyObject> p) {

                ListCell<MyObject> cell = new ListCell<MyObject>() {
                    @Override
                    protected void updateItem(MyObject t, boolean bln) {
                        super.updateItem(t, bln);
                        
                        Rectangle rect = new Rectangle(100, 20);
                        if (t != null) {
                            setText(t.getDay() + ":" + t.getNumber());
                            Color col = t.getColor();
                            setTextFill(col);
                        }
                    }
                };

                return cell;
            }
        });


        StackPane root = new StackPane();
        root.getChildren().add(listView);
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}


Output:

Apply style sheet on ListView to hide empty cells
Apply style sheet on ListView to hide empty cells


Related:
- Hide empty cell of TableView with CSS


3 comments:

  1. Hello there,
    first time on this site and i must say "damn, this is so fantastic"
    I was wondering if you could make some tutorials of javafx combining database records and javafx controls such as tableview, imageview,charts !!
    oh and by the way, i've written a little code on my jfx combobox control and adding inside some images but when i select the wanted item, along side with the code, i find hexadecimal code instead of images so a little help might be really needed ^^
    And thx, anyway, really good joob with all those codes, it helps a lot ^^

    ReplyDelete
  2. hi me again asking for a little help ^^
    I was wondering if yu could show us how to get a certain value of a tableview when yu click on a row !!
    Exemple :
    id Name LastName Mail
    12 William Austin xxx@xxx.xxx
    15 Chris redfield yyy@yyy.yyy

    when On click the row that have the id = 12, i declare an integer that gets the id = 12 so that i can combine it with my sql_query ^^
    Yu'd be a real life save if yu can answer as soon as possible ^^

    ReplyDelete