java - 同期してスクロールするように 2 つのテーブルビューをバインドする

Question

同期してスクロールするように、2 つのテーブルビューをバインドしたいと考えています。それ、どうやったら出来るの？テーブルビューのスクロールバーにアクセスする方法がわかりません。

Answer 1

テーブルビューを外部スクロールバーにバインドする CSS ハックを作成しました。1 つのスクロールバーで両方のテーブルビューを制御します。

私のアイデアの概要：

• 2 つのテーブルビューを作成する
• 垂直スクロールバーを 1 つ作成します。この例では myScrollbar と呼びましょう
• myScrollbar の最小値と最大値を min=0, max=TableView.Items.size() のサイズに設定します
• myScrollbar の値が変更されたら、両方の tableview の scrollTo(int) 関数を呼び出します
• CSS で実装されたテーブルビューのネイティブ垂直スクロールバーを無効にします。

これにより、2 つのテーブルが作成され、どちらも 1 つの外部スクロールバー (myScrollbar) によって制御されます。

css を使用してテーブルビューのスクロールバーを非表示にするコードは次のとおりです。

/* The main scrollbar **track** CSS class  */

.mytableview .scroll-bar:vertical .track{
        -fx-padding:0px;
    -fx-background-color:transparent;
    -fx-border-color:transparent;
    -fx-background-radius: 0em;
    -fx-border-radius:2em;

}

/* The increment and decrement button CSS class of scrollbar */

.mytableview .scroll-bar:vertical .increment-button ,
.mytableview .scroll-bar:vertical .decrement-button {

    -fx-background-color:transparent;
    -fx-background-radius: 0em;
    -fx-padding:0 0 0 0;
}

.mytableview  .scroll-bar:vertical .increment-arrow,
.mytableview  .scroll-bar:vertical  .decrement-arrow
{
    -fx-shape: " "; 
    -fx-padding:0;        
}

/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
.mytableview .scroll-bar:vertical .thumb {
    -fx-background-color:transparent;
    -fx-background-insets: 0, 0, 0;
    -fx-background-radius: 2em;
    -fx-padding:0px;

}

次に、スクロールバーを使用してテーブルビューをスクロールする方法を設定する必要があります。

scroll.setMax(100); //make sure the max is equal to the size of the table row data.
scroll.setMin(0); 
scroll.valueProperty().addListener(new ChangeListener(){

    @Override
    public void changed(ObservableValue ov, Number t, Number t1) {
        //Scroll your tableview according to the table row index
        table1.scrollTo(t1.intValue()); 
        table2.scrollTo(t1.intValue());
    }

});

http://blog.ngopal.com.np/2012/09/25/how-to-bind-vertical-scroll-in-multi-tableview/

Answer 2

これは現時点では不可能だと思います。TableViewSkin は VirtualFlow フィールドを持つ VirtualContainerBase を継承しています。VirtualFlow オブジェクトには、目的の hbar と vbar という 2 つの VirtualScrollBar フィールドがあります。私はそれに到達する方法が見えません。

興味深いことに、これは非公開ですが、TableView には非公開の contentWidth フィールドもあります。JFX チームは、理解できるほど多くの API を公開することに非常に慎重になっているに違いありません。JFX JIRA または openjfx-dev メーリング リストでの機能要求として、int プロパティとして開かれた contentWidth フィールドを取得するよう依頼できます。

応急措置は、テーブル ビュー選択モデルの選択されたアイテムまたはインデックス プロパティをバインドすることです。

Answer 3

問題を解決するために私が見つけた最も簡単な方法は、表示されているスクロールバーと非表示のスクロールバーの valueProperty をバインドすることです。

// Controller 
@FXML private TableView<MyBean> tableLeft;
@FXML private TableView<MyBean> tableRight;
@FXML private ScrollBar scrollBar;


@SuppressWarnings("rawtypes")
private void bindScrollBars(TableView<?> tableView1, TableView<?> tableView2, 
                 ScrollBar scrollBar, Orientation orientation) {

    // Get the scrollbar of first table
    VirtualFlow vf = (VirtualFlow)tableView1.getChildrenUnmodifiable().get(1);
    ScrollBar scrollBar1 = null;
    for (final Node subNode: vf.getChildrenUnmodifiable()) {
        if (subNode instanceof ScrollBar && 
                ((ScrollBar)subNode).getOrientation() == orientation) {
            scrollBar1 = (ScrollBar)subNode;
        }
     }

    // Get the scrollbar of second table
    vf = (VirtualFlow)tableView2.getChildrenUnmodifiable().get(1);
    ScrollBar scrollBar2 = null;
    for (final Node subNode: vf.getChildrenUnmodifiable()) {
        if (subNode instanceof ScrollBar && 
                ((ScrollBar)subNode).getOrientation() == orientation) {
            scrollBar2 = (ScrollBar)subNode;
        }
     }

    // Set min/max of visible scrollbar to min/max of a table scrollbar
    scrollBar.setMin(scrollBar1.getMin());
    scrollBar.setMax(scrollBar1.getMax());

    // bind the hidden scrollbar valueProterty the visible scrollbar
    scrollBar.valueProperty().bindBidirectional(scrollBar1.valueProperty());
    scrollBar.valueProperty().bindBidirectional(scrollBar2.valueProperty());
}

/*
 * This method must be called in Application.start() after the stage is shown,
 * because the hidden scrollbars exist only when the tables are rendered
 */
public void setScrollBarBinding() {
    bindScrollBars(this.tableLeft, this.tableRight, this.scrollBar, Orientation.VERTICAL);
}

ステージが表示され、テーブルがレンダリングされた後、アプリケーションからバインディングを呼び出す必要があります。

// Application
    private MyController controller;

    @Override
    public void start(Stage primaryStage) {
        try {
            FXMLLoader fxmlLoader = new FXMLLoader(SalesApp.class.getResource("scene.fxml"));
            BorderPane root = (BorderPane) fxmlLoader.load();;
            Scene scene = new Scene(root);
            scene.getStylesheets().add(getClass().getResource("app.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();            
controller = (MyController) fxmlLoader.getController();
            controller.setScrollBarBinding();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

これで、テーブルはマウス、キー、またはスクロールバーを介して同期的にスクロールするはずです。

楽しんで、オラフ