JavaFX 2.2：设计表格单元格和处理行伪类（悬停，选定等） [英] JavaFX 2.2 : Styling a table cell and handling row pseudo-classes (hover, selected, etc)

问题描述

我正在研究一个JavaFX应用程序，其中包含一个带有特殊单元格的TableView，这样当单元格中的数据无效时，单元格就会变成红色。

用css很容易，但我在覆盖TableCell的所有伪类时遇到了问题。

  import javafx。 application.Application; 
 import javafx.beans.property.BooleanProperty; 
 import javafx.beans.property.IntegerProperty; 
 import javafx.beans.property.ReadOnlyBooleanWrapper; 
 import javafx.beans.property.ReadOnlyIntegerWrapper; 
 import javafx.beans.property.ReadOnlyStringWrapper; 
 import javafx.beans.property.StringProperty; 
 import javafx.collections.FXCollections; 
 import javafx.collections.ObservableList; 
 import javafx.scene.Scene; 
 import javafx.scene.control.ContentDisplay; 
 import javafx.scene.control.TableCell; 
 import javafx.scene.control.TableColumn; 
 import javafx.scene.control.TableView; 
 import javafx.scene.control.cell.PropertyValueFactory; 
 import javafx.stage.Stage; 
 import javafx.util.Callback; 
 
 public class Test extends Application {
 
 public static void main（String [] args）throws Exception {
 Application.launch（Sportz Club）; 
} 
 
 @Override 
 public void start（Stage stage）throws Exception {
 TableView< User> table = new TableView<>（）; 
 table.getStylesheets（）。add（
 this.getClass（）。getResource（test.css）.toExternalForm（））; 
 
最终TableColumn< User，String> nameColumn = 
 this。< String> unstyledColumn（name）; 
 nameColumn.setText（Name）; 
 table.getColumns（）。add（nameColumn）; 
 
 final TableColumn< User，Integer> numColumn = 
 this。< Integer> unstyledColumn（number）; 
 numColumn.setMinWidth（200）; 
 numColumn.setText（Number）; 
 table.getColumns（）。add（numColumn）; 
 
 final TableColumn< User，Boolean> allowedColumn = 
 this.unstyledColumn（allowed）; 
 allowedColumn .setText（Allowed）; 
 allowedColumn .setMinWidth（200）; 
 allowedColumn .setCellFactory（allowedCellFactory（））; 
 table.getColumns（）。add（allowedColumn）; 
 
 ObservableList< User> items = FXCollections.observableArrayList（）; 
 items.add（新用户（guy＃1，1，true））; 
 items.add（新用户（guy＃2，2，true））; 
 items.add（新用户（Steve，3，false））; 
 table.setItems（items）; 
 
 stage.setScene（new Scene（table，500，500））; 
 stage.centerOnScreen（）; 
 stage.show（）; 
} 
 
 private回调< TableColumn< User，Boolean>，TableCell< User，Boolean>> allowedCellFactory（）{
 final Callback< TableColumn< User，Boolean> ;, TableCell< User，Boolean>> callback = 
 new Callback< TableColumn< User，Boolean> ;, TableCell< User，Boolean>>（）{
 @Override 
 public TableCell< User，Boolean> call（
 TableColumn< User，Boolean> arg0）{
 return new TableCell< User，Boolean>（）{
 @Override 
 protected void updateItem（Boolean item，boolean empty） {
 super.updateItem（item，empty）; 
 if（item == null || empty）{
 return; 
} 
 if（item）{
 getStyleClass（）。remove（invalidCell）; 
} 
 else {
 getStyleClass（）。add（invalidCell）; 
} 
 setContentDisplay（ContentDisplay.TEXT_ONLY）; 
 setText（item.toString（））; 
}; 
}; 
} 
}; 
返回回调; 
} 
 
私人< S> TableColumn< User，S> unstyledColumn（String name）{
 TableColumn< User，S> column = new TableColumn<>（）; 
 column.setCellValueFactory（new PropertyValueFactory< User，S>（name））; 
返回列; 
} 
 
 public static class User {
 
 StringProperty name; 
 IntegerProperty编号; 
允许使用BooleanProperty; 
 $ b $ public User（String name，int number，boolean allowed）{
 this.name = new ReadOnlyStringWrapper（name）; 
 this.number = new ReadOnlyIntegerWrapper（number）; 
 this.allowed = new ReadOnlyBooleanWrapper（允许）; 
} 
 
 public StringProperty nameProperty（）{
 return name; 
} 
 
 public IntegerProperty numberProperty（）{
 return number; 
} 
 
 public BooleanProperty allowedProperty（）{
 return allowed; 
} 
 
} 
} 
  

这是完整代码^
但感兴趣的是 allowedCellFactory 方法，该方法只要单元格中的值为false，就会添加invalidCell样式类。

这里是css：（test.css，与上面的代码放在同一个包中）
$ b $ $ p $ .invalidCell {
-fx-background-color：#FFBBBB;
-fx-text-fill：black！important;
}

.invalidCell：odd {
-fx-background-color：#FFAAAA;
}

.invalidCell：hover {
-fx-background-color：#CCAACC;
}

.invalidCell：filled：selected：focused，.invalidCell：filled：selected，.invalidCell：selected {
-fx-background-insets：0，1.4;
-fx-background-color：线性渐变（从0％0％到0％100％，＃FF6666 0％，＃FF2222 100％）;
}

.table-view：focused .invalidCell：filled：focused：selected：hover {
-fx-background：-fx-accent;
-fx-background-color：yellow;
-fx-background-insets：0，1，2;
-fx-text-fill：-fx-selection-bar-text;
}


运行应用程序时可以看到的问题是，允许当行的其余部分悬停时，列不会更改样式。当您将鼠标悬停在允许的列上时，它将更改颜色以匹配：hover伪类。

我希望它允许允许的列沿着与所有其他列当行被徘徊。

任何想法？

解决方案<

  .invalidCell：hover {
 -fx-background -color：#CCAACC; 
} 
  

I'm working on a JavaFX application which include a TableView with special cell, such that when the data in the cell is invalid, the cell turns red.

That's easy enough with css, but I'm having trouble covering all of the pseudo-classes of the TableCell.

import javafx.application.Application;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.ReadOnlyBooleanWrapper;
import javafx.beans.property.ReadOnlyIntegerWrapper;
import javafx.beans.property.ReadOnlyStringWrapper;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;
import javafx.util.Callback;

public class Test extends Application {

    public static void main( String[] args ) throws Exception {
        Application.launch( "Sportz Club" );
    }

    @Override
    public void start( Stage stage ) throws Exception {
        TableView<User> table = new TableView<>();
        table.getStylesheets().add(
            this.getClass().getResource( "test.css" ).toExternalForm() );

        final TableColumn<User, String> nameColumn =
        this.<String>unstyledColumn( "name" );
        nameColumn.setText( "Name" );
        table.getColumns().add( nameColumn );

        final TableColumn<User, Integer> numColumn =
        this.<Integer>unstyledColumn( "number" );
        numColumn.setMinWidth(200);
        numColumn.setText( "Number" );
        table.getColumns().add( numColumn );

        final TableColumn<User, Boolean> allowedColumn =
        this.unstyledColumn( "allowed" );
        allowedColumn .setText( "Allowed" );
        allowedColumn .setMinWidth(200);
        allowedColumn .setCellFactory( allowedCellFactory() );
        table.getColumns().add( allowedColumn );

        ObservableList<User> items = FXCollections.observableArrayList();
        items.add( new User( "guy #1", 1, true ) );
        items.add( new User( "guy #2", 2, true ) );
        items.add( new User( "Steve", 3, false ) );
        table.setItems( items );

        stage.setScene( new Scene( table, 500, 500 ) );
        stage.centerOnScreen();
        stage.show();
    }

    private Callback<TableColumn<User, Boolean>, TableCell<User, Boolean>> allowedCellFactory() {
        final Callback<TableColumn<User, Boolean>, TableCell<User, Boolean>> callback =
            new Callback<TableColumn<User, Boolean>, TableCell<User, Boolean>>() {
                @Override
                public TableCell<User, Boolean> call(
                    TableColumn<User, Boolean> arg0 ) {
                    return new TableCell<User, Boolean>() {
                        @Override
                        protected void updateItem( Boolean item, boolean empty ) {
                            super.updateItem( item, empty );
                            if ( item == null || empty ) {
                                return;
                            }
                            if ( item ) {
                                getStyleClass().remove( "invalidCell" );
                            }
                            else {
                                getStyleClass().add( "invalidCell" );
                            }
                            setContentDisplay( ContentDisplay.TEXT_ONLY );
                            setText( item.toString() );
                        };
                    };
                }
            };
        return callback;
    }

    private <S> TableColumn<User, S> unstyledColumn( String name ) {
        TableColumn<User, S> column = new TableColumn<>();
        column.setCellValueFactory( new PropertyValueFactory<User, S>( name ) );
        return column;
    }

    public static class User {

        StringProperty name;
        IntegerProperty number;
        BooleanProperty allowed;

        public User( String name, int number, boolean allowed ) {
            this.name = new ReadOnlyStringWrapper( name );
            this.number = new ReadOnlyIntegerWrapper( number );
            this.allowed = new ReadOnlyBooleanWrapper( allowed );
        }

        public StringProperty nameProperty() {
            return name;
        }

        public IntegerProperty numberProperty() {
            return number;
        }

        public BooleanProperty allowedProperty() {
            return allowed;
        }

    }
}

This is complete code ^ But the point of interest is the allowedCellFactory method, which adds the "invalidCell" style class whenever the value in the cell is false.

Here is the css: (test.css, place in same package as code above)

.invalidCell {
    -fx-background-color: #FFBBBB;
    -fx-text-fill: black !important;
}

.invalidCell:odd {
    -fx-background-color: #FFAAAA;
}

.invalidCell:hover {
    -fx-background-color: #CCAACC;
}

.invalidCell:filled:selected:focused, .invalidCell:filled:selected, .invalidCell:selected  {
-fx-background-insets: 0, 1.4;
-fx-background-color: linear-gradient(from 0% 0% to 0% 100%, #FF6666 0%, #FF2222 100%);
}

.table-view:focused .invalidCell:filled:focused:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: yellow;
    -fx-background-insets: 0, 1, 2;
    -fx-text-fill: -fx-selection-bar-text;
}

The problem, as can be seen when running the application is that the "allowed" column does not change style when the rest of the row is hovered. When you hover over the allowed column itself, it changes color to match the :hover pseudoclass.

What I would like for it to do is for the allowed column to change along with all of the other columns when the row is hovered over.

Any ideas?

解决方案

Remove below style code from CSS file

.invalidCell:hover {
   -fx-background-color: #CCAACC;
} 

这篇关于JavaFX 2.2：设计表格单元格和处理行伪类（悬停，选定等）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！