为什么自定义JavaFX 11 TableCell中的startEdit()之后DatePicker变得无响应?

时间:2019-06-18 07:37:41

标签: javafx datepicker tableview javafx-11

我有一个TableCell,在编辑时将日期显示为DatePicker,在不编辑时将日期显示为纯文本。

编辑TableCell时,DatePicker应该获得焦点,应该选择其日期,并且光标应该在该日期的结尾处在编辑器中。 DatePicker的编辑器应准备就绪,可以接受用户输入。

但是,目前,当单元格被编辑时,DatePicker获得了焦点,但是它(或其编辑器?)却没有响应。未选择日期,光标也看不到。我无法单击编辑器,也无法在编辑器中输入任何内容。唯一有效的是显示日历弹出窗口的按钮。

此外,该仅在第一次DatePicker单元格在给定行中进行编辑时发生。下次编辑同一行中的同一单元格时,它可以正常工作。

如果我将setContentDisplay()中的updateItem()更改为GRAPHIC_ONLY,但我也不想这样做,也可以。

下面是演示该问题的MVCE。

要重现该行为,请双击日期单元格,或使用箭头键导航到该单元格并按F2。 DatePicker将成为焦点,但不会选择其日期,因此您将无法单击DatePicker的编辑器。

现在单击日期单元格之外的任何位置,然后返回到同一行中的同一单元格并再次进行编辑。然后应该选择日期,并且您应该能够单击或键入编辑器。

我在做什么错了?

我已经Google搜索并在DatePicker中找到了TableView的示例,但是所有设置的内容在updateItem()中都显示为GRAPHIC_ONLY。除了编辑时,我找不到使用TEXT_ONLY的任何内容。

我正在使用Windows 7的Netbeans 11.0中运行的OpenJDK和OpenJFX的11.0.2版本。

package test016;

import java.time.LocalDate;
import java.time.format.DateTimeFormatter;
import java.util.Arrays;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.DatePicker;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.TextFieldTableCell;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import javafx.util.StringConverter;
import javafx.util.converter.DefaultStringConverter;

public class Test016 extends Application {

    private final ObservableList<DataModel> ol = FXCollections.observableArrayList();
    private final TableView<DataModel> tv = new TableView();

    private Parent createContent() {

        loadDummyData();

        createTableViewColumns();

        tv.getSelectionModel().setCellSelectionEnabled(true);
        tv.setEditable(true);
        tv.setItems(ol);
        tv.getSelectionModel().selectFirst();

        BorderPane content = new BorderPane();
        content.setCenter(tv);

        return content;
    }

    private void createTableViewColumns() {

        TableColumn<DataModel,String> col1 = new TableColumn<>("field1");
        TableColumn<DataModel,LocalDate> col2 = new TableColumn<>("field2");
        TableColumn<DataModel,String> col3 = new TableColumn<>("field3");

        col1.setCellValueFactory(cellData -> cellData.getValue().field1Property());
        col1.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        col2.setCellValueFactory(cellData -> cellData.getValue().field2Property());

        //**************************************************************
        //DatePicker TableCell begins here

        col2.setCellFactory(dp -> {

            DatePicker datePicker = new DatePicker();

            StringConverter<LocalDate> dateConverter = new StringConverter<LocalDate>() {
                @Override
                public String toString(LocalDate object) {
                    DateTimeFormatter dateFormatter = DateTimeFormatter.ofPattern("d/MM/yyyy");
                    return ( object == null ? "" : dateFormatter.format(object) );
                }

                @Override
                public LocalDate fromString(String string) {
                    DateTimeFormatter dateFormatter = DateTimeFormatter.ofPattern("d/MM/yyyy");
                    return string.isEmpty() ? null : LocalDate.parse(string, dateFormatter);
                }

            };

            datePicker.setConverter(dateConverter);
            datePicker.setEditable(true);
            datePicker.setDisable(false);

            TableCell<DataModel, LocalDate> cell = new TableCell<>() {

                @Override
                protected void updateItem(LocalDate item, boolean empty) {

                    super.updateItem(item, empty);

                    if (empty) {
                        setText(null);
                        setGraphic(null);
                    } else {
                        //It works I set content display to GRAPHIC_ONLY
                        setContentDisplay(ContentDisplay.TEXT_ONLY);
                        //setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

                        setText(dateConverter.toString(item));
                        datePicker.setValue((LocalDate) item);
                        setGraphic(datePicker);
                    }

                }

                @Override
                public void startEdit() {

                    super.startEdit();

                    if ( getGraphic() != null && getGraphic() instanceof DatePicker ) {
                        //The problem only occurs when I set content display to TEXT_ONLY in updateItem().
                        setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

                        //If I requestFocus() on the graphic, the DatePicker gets the focus but I cannot edit the date
                        //by clicking in the editor and typing something in.

                        //If I do NOT requestFocus() on the graphic, the cell containing the DatePicker gets focus but
                        //I can then click in the DatePicker's editor and type something in.  However, I cannot just
                        //start typing as the DatePicker doesn't have focus.

                        //This happens irrespective of whether I double-click on a cell to start the edit or
                        //navigate to the cell via the keyboard and then hit F2.

                        //The behaviour only appears the first time I edit a DatePicker in a given row.
                        //The second and subsequent edits for the same row work fine.

                        getGraphic().requestFocus();

                        //Requesting focus on the DatePicker's editor doesn't appear to have any effect, either with or 
                        //without first requesting focus on the graphic.
                        ( (DatePicker) getGraphic() ).getEditor().requestFocus();
                        ( (DatePicker) getGraphic() ).getEditor().selectAll();
                    }

                }

                @Override
                public void cancelEdit() {
                    super.cancelEdit();
                    setContentDisplay(ContentDisplay.TEXT_ONLY);
                }
            };

            return cell;

        });
        //**************************************************************

        col2.setPrefWidth(120);

        col3.setCellValueFactory(cellData -> cellData.getValue().field3Property());
        col3.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));

        tv.getColumns().addAll(Arrays.asList(col1, col2, col3));

    }

    private void loadDummyData() {

        ol.add(new DataModel("1", LocalDate.parse("2001-01-01"), "x"));
        ol.add(new DataModel("2", LocalDate.parse("2001-01-01"), "x"));
        ol.add(new DataModel("3", LocalDate.parse("2001-01-01"), "x"));
        ol.add(new DataModel("4", LocalDate.parse("2001-01-01"), "x"));
        ol.add(new DataModel("5", LocalDate.parse("2001-01-01"), "x"));

    }

    private class DataModel {

        private final StringProperty field1;
        private final ObjectProperty<LocalDate> field2;
        private final StringProperty field3;

        public DataModel(
            String field1,
            LocalDate field2,
            String field3
        ) {
            this.field1 = new SimpleStringProperty(field1);
            this.field2 = new SimpleObjectProperty<>(field2);
            this.field3 = new SimpleStringProperty(field3);
        }

        public String getField1() {return field1.get().trim();}
        public void setField1(String field1) {this.field1.set(field1);}
        public StringProperty field1Property() {return field1;}

        public LocalDate getField2() {return field2.get();}
        public void setField2(LocalDate field2) {this.field2.set(field2);}
        public ObjectProperty<LocalDate> field2Property() {return field2;}

        public String getField3() {return field3.get().trim();}
        public void setField3(String field3) {this.field3.set(field3);}
        public StringProperty field3Property() {return field3;}

    }

    @Override
    public void start(Stage stage) throws Exception {
        stage.setScene(new Scene(createContent()));
        stage.setTitle("OpenJFX11 - DatePicker in TableView");
        stage.setWidth(600D);
        stage.setHeight(600D);
        stage.show();
    }

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

}

1 个答案:

答案 0 :(得分:2)

由于Slaw的建议,解决不响应问题的一种方法是在设置为图形但在之前applyCss() 之后调用DatePicker > requestFocus()selectAll()

虽然selectAll()仍仅对同一行中同一单元格的第二次编辑生效,但DatePicker至少现在会响应编辑。

@Override
public void startEdit() {

    super.startEdit();

    if ( getGraphic() != null && getGraphic() instanceof DatePicker ) {

        setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

        ( (DatePicker) getGraphic() ).applyCss(); //Workaround for the unresponsiveness issue.

        getGraphic().requestFocus();

        ( (DatePicker) getGraphic() ).getEditor().requestFocus();
        ( (DatePicker) getGraphic() ).getEditor().selectAll();
    }

}