如何在使用鼠標拖動來調整標籤窗格大小時調整組件大小

Question

我已經實現了非常簡單的鼠標拖動位於中間的選項卡窗格。鼠標調整大小是非常基本的，它不能很好地工作，但現在我可以拖動標籤邊框並增加尺寸。

現在我發現了一個問題。當我調整位於中心的標籤時，位於中心旁邊的組件不會按照用戶預期的方式自動回撥和尖叫，而是放置在調整大小的組件後面。當我用鼠標拖動擴展主要組件時，能否以某種方式設置所有組件被推回？

Answer 1

與其他人一樣在這裏，我建議你使用SplitPane類來處理畫面，供各位的分裂。下面是一個示例（基於截圖）的拆分窗格。如果您不喜歡顯示分隔欄，則可以修改CSS以適應您的需要。

import javafx.application.Application; 
import javafx.geometry.Orientation; 
import javafx.scene.Node; 
import javafx.scene.Parent; 
import javafx.scene.Scene; 
import javafx.scene.control.SplitPane; 
import javafx.scene.control.Tab; 
import javafx.scene.control.TabPane; 
import javafx.scene.control.TextArea; 
import javafx.scene.layout.BorderPane; 
import javafx.stage.Stage; 


public class FXSplitTabs extends Application{ 

    @Override 
    public void start(Stage stage) throws Exception { 
     stage.setTitle("SplitTabs"); 
     stage.setWidth(700); 
     stage.setHeight(500); 

     //Setup Center and Right 
     TabPaneWrapper wrapper = new TabPaneWrapper(Orientation.HORIZONTAL, .9); 
     TabPane centerPane = new TabPane(); 
     centerPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N")); 

     TabPane rightPane = new TabPane(); 
     rightPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N")); 
     SplitPane.setResizableWithParent(rightPane, false); 
     wrapper.addNodes(centerPane, rightPane); 

     //Add bottom 
     TabPane bottomPane = new TabPane(); 
     bottomPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N")); 
     TabPaneWrapper wrapperBottom = new TabPaneWrapper(Orientation.VERTICAL, .7); 
     wrapperBottom.addNodes(wrapper.getNode(), bottomPane); 

     //Add left 
     TabPane leftPane = new TabPane(); 
     leftPane.getTabs().addAll(generateTab("Tab 1"),generateTab("Tab 2"), generateTab("Tab 3"), generateTab("Tab N")); 
     TabPaneWrapper wrapperleft = new TabPaneWrapper(Orientation.HORIZONTAL, .1); 
     wrapperleft.addNodes(leftPane, wrapperBottom.getNode()); 

     Scene myScene = new Scene(wrapperleft.getNode()); 
     stage.setScene(myScene); 
     stage.sizeToScene(); 
     stage.show(); 
    } 

    public Tab generateTab(String name){ 
     Tab result = new Tab(name); 
     BorderPane content = new BorderPane(); 
     TextArea text = new TextArea(); 
     content.setCenter(text); 
     result.setContent(content); 
     return result; 
    } 

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

    public static class TabPaneWrapper{ 
     SplitPane split; 

     public TabPaneWrapper(Orientation o, double splitLocation){ 
      split = new SplitPane(); 

      //Change the CSS (uncomment if using an external css) 
      //split.getStylesheets().add("test.css"); 

      split.setOrientation(o); 
      split.setDividerPosition(0, splitLocation); 
     } 

     public void addNodes(final Node node1, final Node node2){ 
      //Add to the split pane 
      split.getItems().addAll(node1, node2); 
     } 

     public Parent getNode(){ 
      return split; 
     } 
    } 

} 

如果你想用CSS來改變分頻器怎麼看，取消註釋上面的代碼中CSS行，創建基本包中的文件test.css，並插入CSS規範（這裏的一個例子，將分頻器變成透明的）：

.split-pane-divider { 
    -fx-border-color: transparent; 
    -fx-background-color: transparent; 
} 

Answer 2

作爲替代解決方案：

我已經發布的Drombler FX第一早期Access版本，基於OSGi和Maven一個新的富客戶端平臺JavaFX的。

它還附帶了一個Docking Framework的初始版本，這似乎是你正在尋找的東西。

你可以閱讀更多關於Drombler FX這裏：http://puces-blog.blogspot.ch/2012/12/drombler-fx-building-modular-javafx.html