Custom CheckBox in a TableView

0

I want to customize a control CheckBox within a cell of TableView for which I use a file css external%. It does not just work. The code is as follows:

import javafx.application.Application;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableColumn.CellDataFeatures;
import javafx.scene.control.TableColumn.CellEditEvent;
import javafx.scene.control.TablePosition;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.control.cell.TextFieldTableCell;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class TableViewEditDemo extends Application {

    @Override
    public void start(Stage escenario) {                           
        TableView<Persona> tabla = new TableView<>();          
        tabla.setEditable(true);
        TableColumn<Persona, String> nombre = new TableColumn<>("Nombre");      
        TableColumn<Persona, Boolean> aceptado = new TableColumn<>("Aceptado");

        nombre.setCellValueFactory(new PropertyValueFactory<>("Nombre")); 
        nombre.setCellFactory(TextFieldTableCell.<Persona> forTableColumn()); 
        nombre.setMinWidth(200);
        nombre.setOnEditCommit((CellEditEvent<Persona, String> suceso) -> {
            TablePosition<Persona, String> pos = suceso.getTablePosition(); 
            String nuevoNombre = suceso.getNewValue();
            int fila = pos.getRow();
            Persona persona = suceso.getTableView().getItems().get(fila); 
            persona.setNombre(nuevoNombre);
        });

        aceptado.setCellValueFactory((CellDataFeatures<Persona, Boolean> param) -> {
            Persona persona = param.getValue();
            SimpleBooleanProperty booleanProp = new SimpleBooleanProperty(persona.isAceptado());
            booleanProp.addListener((ObservableValue<? extends Boolean> observable,
                                     Boolean valorAnterior, Boolean nuevoValor) -> {
                persona.setAceptado(nuevoValor);
            });
            return booleanProp;
        });

        aceptado.setCellFactory((TableColumn<Persona, Boolean> p) -> {
            TableCell<Persona, Boolean> celda = new TableCell<Persona, Boolean>(){
                @Override
                public void updateItem(Boolean ítem, boolean empty) {
                    if(ítem!=null){
                        CheckBox cuadro = new CheckBox();
                        cuadro.getStyleClass().add("cuadroVerificacion");
                        cuadro.setSelected(ítem);
                        setGraphic(cuadro);
                    }
                }
            };
            return celda;
        });

        ObservableList<Persona> lista = getListaPersonas();
        tabla.setItems(lista); 
        tabla.getColumns().addAll(nombre, aceptado);
        StackPane raíz = new StackPane();
        raíz.getChildren().add(tabla);
        Scene escena = new Scene(raíz, 450, 300);
        escena.getStylesheets().add(getClass().getResource("NuevoEstilo.css").toExternalForm());
        escenario.setScene(escena);
        escenario.show();
    }

    private ObservableList<Persona> getListaPersonas() {
        Persona persona1 = new Persona("Antonio Gómez", true);
        Persona persona2 = new Persona("Pedro Fernández", true);
        Persona persona3 = new Persona("Luís García", false);
        ObservableList<Persona> lista = FXCollections.observableArrayList(persona1, persona2, persona3);
        return lista;
    }
}

The Person class:

public class Persona {

    private String nombre;
    private boolean aceptado;

    public Persona(String nombre, boolean aceptado) {
        this.nombre = nombre;        
        this.aceptado = aceptado;
    }

    public String getNombre() {
        return nombre;
    }

    public void setNombre(String nombre) {
        this.nombre = nombre;
    }

    public boolean isAceptado() {
        return aceptado;
    }

    public void setAceptado(boolean aceptado) {
        this.aceptado = aceptado;
    }
}

and finally the style sheet:

.cuadroVerificacion {  
    -fx-background-color: transparent; 
    -fx-text-fill: rgb(100,100,100);
    -fx-font-family: "Myriad Pro";
    -fx-font-size: 13px;

    -fx-shape: ""; 
    -fx-background-image: url('/dieta/recursos/checkBox.png');
    -fx-background-repeat: no-repeat;
    -fx-background-position: 5 1;
}

.cuadroVerificacion.text {
    -fx-effect: dropshadow( two-pass-box , rgb(60,60,60) , .5, 10 , 1 , 1); 
}

.cuadroVerificacion.text.box{
   -fx-background-color: transparent;
}

.cuadroVerificacion.text.mark{                   
    -fx-background-color: transparent;
}

 .cuadroVerificacion.text:hover {
    -fx-text-fill: rgb(50,50,50);
}       

.cuadroVerificacion.text:selected {
    -fx-background-image: url('/dieta/recursos/checkBoxSeñalado.png');
    -fx-text-fill: rgb(50,50,50);
}
    
asked by Zuri 27.12.2017 в 17:26
source

2 answers

0

I think the main reason why the CSS is not working for you is because you are using .text . Try to eliminate it. At least it worked for me. Also check if the path of your style file is in the right place.

.cuadroVerificacion {  
    -fx-background-color: transparent; 
    -fx-text-fill: rgb(100,100,100);
    -fx-font-family: "Myriad Pro";
    -fx-font-size: 13px;

    -fx-shape: ""; 
    -fx-background-image: url('/dieta/recursos/checkBox.png');
    -fx-background-repeat: no-repeat;
    -fx-background-position: 5 1;

    -fx-effect: dropshadow( two-pass-box , rgb(60,60,60) , .5, 10 , 1 , 1); 
}

.cuadroVerificacion .box{
   -fx-background-color: transparent;
}

.cuadroVerificacion .mark{                   
    -fx-background-color: transparent;
}

 .cuadroVerificacion:hover {
    -fx-text-fill: rgb(50,50,50);
}       

.cuadroVerificacion:selected {
    -fx-background-image: url('/dieta/recursos/checkBoxSeñalado.png');
    -fx-text-fill: rgb(50,50,50);
}
    
answered by 29.12.2017 / 11:43
source
0

You can use setid in the main code to use the css selector

...
if(ítem!=null){
CheckBox cuadro = new CheckBox();
cuadro.setId("cuadroVerificacion");
cuadro.setSelected(ítem);
setGraphic(cuadro);
}

Then in the css you can use it like this:

/* acceso a las propiedades basicas*/
#cuadroVerificacion{
    -fx-background-color: white;
}

/* acceso a las propiedades del box (casilla del ticket)*/
#cuadroVerificacion .box{
    -fx-background-color: red;
}
/* acceso a las propiedades cuando cambia de estado*/
#cuadroVerificacion:selected .box{
    -fx-background-color: blue;
}

According to the reference the chekbox has access to properties and pseudo-classes of labeled link

    
answered by 28.12.2017 в 01:03