How to add a vertical resize bar for each TableRow in a TableView?

Question

I am looking for a best approach / best practice to accomplish this task. I need to be able to implement, in the least, re-sizable (by dragging on a divider line) TableRows. I understand this to be a bit more difficult to retain the height of each individual TableRow because they are virtual and reused. My first goal is only to have all TableRows re-sized (eliminating the need to carry individual row sizes ).
I am able to implement my own TableRow by extending TableRow - and I was able to retrieve a reference to the TableRow's Skin and adding a divider line (Rectangle) and capturing the Mouse events to effectively re-size the height of the Row by dragging.
My Question is this: Without implementing a new TableRowSkin - how can I force the divider line to be at the bottom of the TableRow? Currently - I am just adding the Rectangle Node (Divider) to the TableRowSkin's children list - causing the divider line to be positioned at the top of the TableRow (This gives an odd feeling when resizing - the line should be on the bottom).
I feel like I am hacking at the issue without realizing the intent of the JavaFX developers. Is the intent for Row Height resizing to be implemented by providing a new Skin? There doesn't seem to be an easy way to accomplish this task using the existing TableRow or TableRowSkin.
I can post example code if requested - but I will need to condense the example to a small enough self-contained file.
If the answer is "Yes - implement a new skin" that is fine, but this task might be difficult without the source code for guidance :) [hint..hint..]

Answer 1

After attempting to override the TableRow itself - I ran into a bug in the underlying skin causing a ClassCastException when sorting on the headers - apparently the underlying TableRowSkin doesn't like it when you add anything other then a TableCell (I added a Rectangle in this case, could not be cast to a TableCell). The bug was filed in Jira and fixed for 2.1 - so in the mean time I took the individual TableCell approach - add a divider to the bottom of each tableCell.
The trick is not the the divider - but it is the other Control you have above the divider. I am using a TextArea, and you may generally want to override the PreferredHeight otherwise the height of the Control continues to extend. This behavior may be a result of using VBox to house the TextArea and the Rectangle vs your suggestion of a BorderPane.
I was able to get the aesthetic functionality working to my desire. NOTE: functionality needs to be added for the table to "remember" any change of tablerowheight for each associated data item - otherwise the TableRow with the differeing height will get recycled and used for a different data item later. This shouldn't be too hard to implement with a Map for every non-default tableRowHeight change with a key of the TableRow Data Item. (Perhaps a max memory of associations as to not use up all available memory if someone wanted to resize all rows, for instance. Or we could also apply a new default Row size as well. I'm thinking this functionality should be applied to a sub-classed TableView).
editThe posted code does not have a bug - it is placing the vertical resize divider in each cell, not each tablerow. Aesthiticaly - it will take some additional tweaking. You will notice the Textarea scroll bar "bleeds" into the other Transparent cells.. Not a critical bug, but an issue to deal with I will have to tackle later. If I can hack into the TableColumn resizing behavior - or set a minWidth on each Tablecolumn - that will be my approach to deal with it for now.--edit--
public class TextAreaCell<S> extends TableCell<S,String> {
        private TextArea textArea;
        private StringProperty boundToCurrently = null;
        private Rectangle r = new Rectangle(1,3,Color.TRANSPARENT);
        private VBox vbox = new VBox();
        public TextAreaCell() {
            this.getStyleClass().add("table-cell-for-controls");
            textArea = new TextArea();
            textArea.getStyleClass().add("table-cell-text-field");
            textArea.setWrapText(true);
            textArea.prefHeightProperty().set(5);
            textArea.minHeightProperty().set(0);
            vbox.getChildren().add(textArea);
            vbox.getChildren().add(r);
            vbox.setFillWidth(true);
            r.widthProperty().bind(vbox.widthProperty());
            r.setCursor(Cursor.V_RESIZE);
            r.setOnMouseDragged(new EventHandler<MouseEvent>() {
                @Override
                public void handle(MouseEvent event) {
                    TextArea y = TextAreaCell.this.textArea;
                    TextAreaCell.this.printTextAreaInfo(y, event);
                    TableRow tr = TextAreaCell.this.getTableRow();
                    double newHeight = tr.getHeight() + event.getY();
                    if (newHeight <= 24) {
                        newHeight = 24;
                    tr.setPrefHeight(newHeight);
                    tr.requestLayout();
            VBox.setVgrow(textArea, Priority.SOMETIMES);
            vbox.setMinWidth(1);
            this.setGraphic(vbox);
        @Override
        protected void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);           
            if(!empty) {
                // Show the Text Area
                this.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
                // Retrieve the actual String Property that should be bound to the TextField
                // If the TextField is currently bound to a different StringProperty
                // Unbind the old property and rebind to the new one
                ObservableValue<String> ov = getTableColumn().getCellObservableValue(getIndex());
                SimpleStringProperty sp = (SimpleStringProperty)ov;
                if(this.boundToCurrently==null) {
                    this.boundToCurrently = sp;
                    this.textArea.textProperty().bindBidirectional(sp);
                else {
                    if(this.boundToCurrently != sp) {
                        this.textArea.textProperty().unbindBidirectional(this.boundToCurrently);
                        this.boundToCurrently = sp;
                        this.textArea.textProperty().bindBidirectional(this.boundToCurrently);
            else {
                this.setContentDisplay(ContentDisplay.TEXT_ONLY);
        private void printTextAreaInfo(TextArea t, MouseEvent e) {
            StringBuilder s = new StringBuilder();
            s.append(e.toString()).append("\n");
            s.append("\tTextArea.prefHeight:").append(t.getPrefHeight()).append("\n");
            s.append("\tTextArea.MinHeight:").append(t.getMinHeight()).append("\n");
            s.append("\tTextArea.MaxHeight:").append(t.getMaxHeight()).append("\n");
            s.append("\tTextArea.Height:").append(t.getHeight()).append("\n");
            s.append("------------------------------------------------------------------------------------------------------------------------");
            System.out.println(s.toString());
}And the Css
.table-cell-for-controls {
    -fx-skin: "com.sun.javafx.scene.control.skin.TableCellSkin";
    -fx-padding: 0; /* 2px, plus border adds 1px */
    -fx-background-color: transparent;
    -fx-border-color: -fx-table-cell-border-color -fx-table-cell-border-color -fx-table-cell-border-color -fx-table-cell-border-color;
    -fx-border-width: 0.083333em; /* 1 */
    -fx-cell-size: 2.0em; /* 24 */
.table-cell-text-field {
    -fx-background-color: transparent;/*-fx-control-inner-background;*/
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 3 5 3 5;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-cursor: text;
}Edited by: jkaufmann on Nov 7, 2011 4:33 AM