基于SWT的Sash和FormLayout的自定义分隔窗体

本文不是对SWT做深入的研究，只是一些小技巧的介绍，通过构建一个自定义的分隔窗体来熟悉一些SWT的Widget和Layout。

使用过Swing的朋友们应该知道，在Swing里有一种分隔窗体叫JSplitPane，可以提供左右或者上下两个分隔窗体，并且可以通过中间的拖动条的拖拽来实现两个窗体大小的调整，拖动条还提供直接最大化某个窗体或者直接平分两个窗体的按钮。而在SWT里对应的有SashForm这个组件，同样可以实现左右拖拽，但并没有提供那些快捷键按钮，想通过继承SashForm来实现这个功能并不好做，那么这里我使用的是SWT的Sash和FormLayout的配合来实现一个类似于Swing JSplitPane的分割窗体。

先来看看我们最终实现的效果图：

   

 

好，那么我们就一起开始来设计这个分割窗体。首先做一下简单的分析：

1. 我们需要两个Composite来存放我们不同窗体的组件；

2. 我们需要一个可以拖拽的拖杠，使用SWT提供的Sash组件来实现；

3. 一个存放按钮的的Composite，并且在拖拽过程中要保持与拖杠同步；

4. 提供左右分隔和上下分隔两种模式。

 

一切从拖拽开始，那么什么是Sash呢？SWT的文档上是这么说的：

Instances of the receiver represent a selectable user interface object that allows the user to drag a rubber banded outline of the sash within the parent control.

Styles:

HORIZONTAL, VERTICAL, SMOOTH

Events:

Selection

就是说Sash能够在其Parent容器里进行拖拽并产生条纹线的回馈，当然还包括Selection事件。那么我们就可以这么设计，我们接收Sash的Selection事件，并相应的调整左右或者上下窗体的大小即可实现我们的需求。那么如何计算两个窗体的大小呢？这里最好就是从布局组件入手，使用SWT强大的FormLayout可以灵活的实现丰富的布局效果。

为什么使用FormLayout呢？它又有哪些功能？这里我只做简单的介绍，详细的大家可以参阅SWT的文档或其它网络文档。使用FormLayout和对应的FormData可以实现其布局中组件间的相对定位以及相对的偏移量，相对距离及偏移量是通过定义FormData的top/bottom/left/right决定的，其定义使用的类是FormAttachment。有了FormLayout和对应的FormData这就为我们Sash拖动后窗体的布局计算提供了基础，那么如何设置我们SplitPane中各个组件的FormData呢？如下图分析：

 

① 左边窗体，与父容器的左边距离为0，右边参照SashBar
② 右边窗体，与父容器的右边距离为0，左边参照SashBar
③ Sash，即我们的拖杠，左边参照SashBar，并且向左偏移5像素（这样Sash才会叠在SashBar上面），右边无参照，宽度定死为3
④ SashBar，即存放按钮的Composite，左右均无参照（左右的参照距离应该是在接收Sash的Selection事件时动态决定），与父容器的顶部距离为总高度的50%，并且向上偏移半个SashBar的高度，这样就能保证SashBar在垂直上居中  

定义好布局后接下来要做的就是对Sash的Selection事件反馈作用到SashBar的FormData上，因为SashBar是其它所有组件的参照中心，大家都是围绕它来布局的。

 1 sash.addSelectionListener(new SelectionListener() {
 2     public void widgetDefaultSelected(SelectionEvent e) {
 3         widgetSelected(e);
 4     }
 5 
 6     public void widgetSelected(SelectionEvent e) {
 7         FormData data = (FormData) sashBar.getLayoutData();
 8         Rectangle rect = sashBar.getParent().getBounds();
 9         
         data.left = null;
         if(rect.width - e.x <= 7) {
             data.right = new FormAttachment(100, 0);
             return;
         }
         data.right = new FormAttachment(e.x, rect.width, 7);
         
         sashBar.setLayoutData(data);
         sashBar.getParent().layout();
     }
 });

 

每次触发Sash的Selection事件，将SashBar的FormData取出，并获得父窗体的矩形区域，然后重新设置SashBar的FormData的右部，FormAttachment的分子设为鼠标的x轴坐标，分母设置为父容器矩形区域的宽度，并且向右偏移7个像素，因为e.x得到的是Sash的x轴坐标，而SashBar的右边应该比Sash的右边更靠右一些（Sash在SashBar的中间）。还有我们应该保证SashBar不被拖出右边区域，所以当判断到rect.width - e.x小于7时，就应该将SashBar的右边设为顶住父容器右边的极限值，不能再继续移动了。

这样，我们的SplitPane就基本完成了，剩下的就是如何提供两个窗体内容的部分。我采用的是定义一个ContentProvider接口，有两个抽象方法分别由实现类去构建两个窗体内容，返回值为初始化时两个窗口的比率，例如左窗口返回4，有窗口返回5，那么做窗口占4/9，右窗口占5/9：

 public static interface ISashPanelContentProvider {
     
     public int positiveContent(Composite parent);
     
     public int negativeContent(Composite parent);
     
 }

 

通过上面的方法相信你应该知道基本的设计概念了，是不是很简单呢？只要我们发挥想象力，还有很多有用的扩展组件是可以制作出来的。那么SplitPane剩下的就是完善诸如上下分层还是左右分层、初始化构造这些周边工作，在我的源码工程里已经完成了这些功能，这篇随笔我就写到这里，点击这里下载源码。