开发2017-9-14 制作支持多选的SWT Combo组件-赖良顺

UGITC Technical Center制作支持多选的SWT Combo组件作者：赖良顺 审校：殷启帆适用版本：SWT在客制化界面开发时，常使用UI开发工具库SWT进行界面构建。客户要求能在下拉列表中多选项目，但Combo组件不能支持同时选择下拉列表中的多个项目，妥协的方法是通过复选框组来替代，但替代方法占用空间比较大，且随着选项数量变化对用户界面的影响也很大。在本篇文章中，将扩展自定义的SWT组件方法来解决这个问题（图1）。图1需求：在本次扩展的自定义组件，即是支持多选的SWT Combo，将具有以下表现形式：1. 整个组件可以有Text和List两个部分组成；2. 文本框收到鼠标动作时，下拉列表出现；3. 选中任意项时列表消失，支持Ctrl键进行多选；4. 可以使用鼠标拖动选中一个连续的列表；5. 当下拉列表失去焦点时，文本框获得文字；6. 文本框表现为多个选择项目的文本的连接，使用逗号分隔；7. 下拉列表弹出时，需要高亮已经选中的文本。设计：在构建新的组件使用Text和List组件作为开发基础。由于List组件需要根据Text组件的位置动态进行显示，所以它需要一个Shell作为容器来显示它；这个动态Shell根据Text上的一些事件而显示或销毁。对于Text，我们将其封装在Composite内，这样调用时只需把这个组件当作一个图片的SWT组件来使用即可（图2）。图2在图2的设计中，Text通过鼠标事件和浮动Shell相联系，来实现需求2，在List上增加事件来实现需求3、4。在浮动Shell上增加事件实现需求5、6；实现：1. 建立框架：为了能让这个自定义组件能与其他SWT组件一样方便使用，我们将这个类定义成为Composite的子类，并为这个Composite增加几个基本变量，包括一个Text对象，一个Shell对象和一个List对象，同时还增加一个String类型数组表示所有可用候选项和一个整形数组表示被选中的项目索引，并构造如下的一个类型，作为整个实现的基础（图3、4、5）。图3图4图52. 显示出浮动Shell在上文中我们构造了框架，并将Text对象实例化在它父Composite之内。根据需求2，我们需要为Text增加事件处理并实例化浮动Shell和List对象（图6、7）。图6图7需要注意的是，浮动Shell需要刚好显示在Text下方，我们使用toDisplay方法来获取Text对象的绝对坐标，然后推算浮动Shell应该出现的位置；另外这个Shell是没有边框的对话框，因此使用SWT.NO_TRIM属性来创建。3. 用Ctrl键多选根据需求3，当没有按住Ctrl键时用鼠标在List对象上进行选择时，鼠标弹起瞬间List和Shell都应该消失；当安装Ctrl键的情况，鼠标弹起后Shell和List继续显示，等待下一个选择（图8）；图8考虑到需求4，当List以SWT.MULTI风格进行构造时即已支持该特性。4. 当浮动Shell消失的时候对于需求5，只需要对浮动Shell增加一个事件，就可以实现对他的消失行为进行控制。当Shell消失时，_selection对象就能够获得List对象中被选择的项目索引（图9）。图95. 文本框显示正确的选择实现需求5、6，就是把选中的项目反映到Text对象上，本质就是把_selections和_items结合起来产生一个字符串，并设置到Text对象作为当前显示（图10、11）。图10图116. 高亮显示已选择的项目目前只剩下最后一个需求7，当List显示出来的时候，能够反映去已经选择的项目。只需要通过List对象的setSelection方法就能做到（图12）。图12使用该组件：通过我们一系列的工作，MultipleSelectionCombo已经能够如同普通SWT组件一样使用了。如下是一个简单使用的例子（图13、14）。图13图14总结：定制SWT组件可以通过自己的代码实现出不同表现形式的组件来满足实际工作的需要。本文通过制作支持多选的SWT Combo组件来讲述定制SWT组件的全过程，包括从需求的考虑，基本的设计到实现过程。附件：源代码：package multipleSelectionCombo;import org.eclipse.swt.SWT;import org.eclipse.swt.events.MouseAdapter;import org.eclipse.swt.events.MouseEvent;import org.eclipse.swt.events.ShellAdapter;import org.eclipse.swt.events.ShellEvent;import org.eclipse.swt.graphics.Point;import org.eclipse.swt.graphics.Rectangle;import org.eclipse.swt.layout.GridData;import org.eclipse.swt.layout.GridLayout;import org.eclipse.swt.widgets.Composite;import org.eclipse.swt.widgets.List;import org.eclipse.swt.widgets.Shell;import org.eclipse.swt.widgets.Text;public class MultipleSelectionCombo extends Composite Text _text = null; String _items = null; int _selections = null; Shell _floatShell = null; List _list = null; public MultipleSelectionCombo(Composite parent, int style) super(parent, style); init(); public void setItems(String items) _items = items; public String getItems() return _items = null ? new String0 : _items; public void setSelections(int selections) _selections = selections; public int getSelections() return _selections = null ? new int0 : _selections; public String getText() return _text.getText(); private void init() GridLayout layout = new GridLayout(); layout.marginLeft = 0; layout.marginTop = 0; layout.marginRight = 0; layout.marginBottom = 0; layout.marginWidth = 0; layout.marginHeight = 0; setLayout(layout); _text = new Text(this, SWT.BORDER | SWT.READ_ONLY); _text.setLayoutData(new GridData(GridData.FILL_BOTH); _text.addMouseListener(new MouseAdapter() public void mouseDown(MouseEvent event) super.mouseDown(event); initFloatShell(); ); private void initFloatShell() Point point = _text.getParent().toDisplay(_text.getLocation(); Point size = _text.getSize(); Rectangle shellRect = new Rectangle(point.x, point.y + size.y, size.x, 0); _floatShell = new Shell(MultipleSelectionCombo.this.getShell(), SWT.NO_TRIM); GridLayout layout = new GridLayout(); layout.marginLeft = 2; layout.marginTop = 2; layout.marginRight = 2; layout.marginBottom = 2; layout.marginWidth = 0; layout.marginHeight = 0; _floatShell.setLayout(layout); _list = new List(_floatShell, SWT.BORDER | SWT.MULTI | SWT.H_SCROLL | SWT.V_SCROLL); for (String value : _items) _list.add(value); _list.setLayoutData(new GridData(GridData.FILL_BOTH); if (_selections != null & _selections.length 0) _list.setSelection(_selections); _floatShell.setSize(shellRect.width, 100); _floatShell.setLocation(shellRect.x, shellRect.y); _list.addMouseListener(new MouseAdapter() public void mouseUp(MouseEvent event) super.mouseUp(event); _selections = _list.getSelectionIndices(); if (event.stateMask & SWT.CTRL) = 0) displayText(); _floatShell.dispose(); ); _floatShell.addShellListener(new ShellAdapter() public void shellDeactivated(ShellEvent event) if (_floatShell != null & !_floatShell.isDisposed() _selections = _list.getSelectionIndices(); displayText(); _floatShell.dispose(); ); _floatShell.open(); private void displayText() if (_selections != null & _sele