eSWT 移动扩展简介，第 1 部分: 使用简单小部件快速构建移动应用程序

核心提示：简介随着移动平台变得越来越复杂，移动计算需求将会不断增长，eSWT 移动扩展简介，第 1 部分: 使用简单小部件快速构建移动应用程序，嵌入式 Standard Widget Toolkit (eSWT) Mobile Extension 是一种 Eclipse 技术，可以用于为各种移动电话开发具有本地外观的 Java

简介

随着移动平台变得越来越复杂，移动计算需求将会不断增长。嵌入式 Standard Widget Toolkit (eSWT) Mobile Extension 是一种 Eclipse 技术，可以用于为各种移动电话开发具有本地外观的 Java 应用程序。

eSWT 是嵌入式 Rich Client Platform (eRCP) 项目的一部分，为构建移动应用程序提供标准的嵌入式小部件。eSWT 主要关注如何满足移动设备的功能和用户体验需求。eSWT 提供了对设备上的用户界面功能的高效、可移植的访问，eSWT 就是在该设备上实现。eSWT 是桌面 SWT API 的一部分。为适应部署需要，该 API 分为以下两个包：

Core eSWT 包含基础函数和简单小部件。

Expanded eSWT 包含更复杂的小部件（Table、Tree、WebBrowser）以及其他布局和对话框。

本文假定您比较了解 eSWT 和 eRCP。

概览

表 1 提供 eSWT 移动扩展概览。您还可查看 类层级。

表 1. eSWT 移动扩展中包含的类

控件类型	类/接口	描述
Controls	CaptionedControl	用于在控件前显示一个标签（字幕）。控件后面可以使用可选的结尾文本。
	ConstrainedText	根据样式限制用户输入的单行文本控件。
	DateEditor	一个特殊的数据输入控件，允许用户输入或选择日期。
	ListBox/ListBoxItem	表示一个可选择的 UI 对象，用于显示一个项目列表，这些项目包含来自一个数据模型的文本和图标。eSWT 中的一个 Model-View-Control (MVC) 小部件。
	ListView	一个小部件，允许用户从一个项目集合中选择一个或多个项目，项目集合可以显示为具有多种样式的多列格式。
	MobileShell	一个 shell，特别适用于在运行时需要动态更改的设备，可以用于以全屏模式显示应用程序。
	SortedList	表示一个可选择的 UI 对象，用于按顺序显示一个文本项目列表。可以使用一个过滤器根据用户输入过滤列表。
	HyperLink	表示一个可选择的 UI 对象，在终端用户激活时启动其他应用程序。
	TextExtension	包含扩展文本控件的函数的方法。
Widgets	TaskTip	向用户反馈长时间运行的任务的状态。
Dialogs	MultiPageDialog	此类的实例表示一个带有选项卡的对话框。
	QueryDialog	用于提示终端用户输入数据的模式窗口。
	TimedMessageBox	使用标准样式向用户提供简要信息的模式窗口。
Device-related	MobileDevice / MovileDeviceEvent / MobileDeviceListener	此类的实例表示正在使用的设备。它提供的方法允许应用程序了解更多特定于设备的特征和功能。
	Screen / ScreenEvent / ScreenListener	此类的实例表示应用程序可以使用的显示屏幕。
	Input	此类的实例表示基于密匙的输入特性。

本文剩余部分将探讨前 5 个移动控件。下载 本文使用的样例代码段。

CaptionedControl

CaptionedControl 用于在一个控件前显示标签（或字幕）。控件后面可以带一段可选的结尾文本，例如用于表明度量单位。

在移动设备上确定拥有焦点的控件可能很困难，因为移动设备上的光线条件通常不太理想。使用 CaptionedControl 为控件加上一个标签，无论何时该控件拥有焦点，这个标签将高亮显示焦点。由于整个标签都高亮显示，因此很容易发现焦点。

可以使用以下不可同时使用的样式定义 CaptionedControl。

LEFT_TO_RIGHT默认样式。CaptionedControl 中的元素从左到右对齐。RIGHT_TO_LEFTCaptionedControl 中的元素从右到左对齐。

CaptionedControl 拥有几个 getter 和 setter 来操作它的属性。清单 1 展示了创建两个 CaptionedControl 的样例代码。

清单 1. 创建两个 CaptionedControl
CaptionedControl　captionedControl　=　new　CaptionedControl(shell,　SWT.LEFT_TO_RIGHT);　
captionedControl.setText("Name:　");　
Text　text　=　new　Text(captionedControl,　SWT.SINGLE);　
text.setText("Dr.　John　Wimer");　
captionedControl.setTrailingText("Surgeon");　
Image　image1　=　new　Image(display,"res/surgeon.png");　
captionedControl.setImage(image1);　
　
CaptionedControl　captionedControl2　=　new　CaptionedControl(shell,　SWT.LEFT_TO_RIGHT);　
captionedControl2.setText("Name:　");　
Text　text2　=　new　Text(captionedControl2,　SWT.SINGLE);　
text2.setText("Jessica");　
captionedControl2.setTrailingText("Receptionist");　
Image　image2　=　new　Image(display,"res/receptionist.png");　
captionedControl2.setImage(image2);　

以上代码段创建了两个文本控件，它们由 CaptionedControl 提供字幕。这个示例还创建了两张图像以便更好地描述它们的任务名称。图 1 显示了代码结果，持有焦点的控件被高亮显示。

图 1. CaptionedControl 样例

ConstrainedText

ConstrainedText 是一个限制用户可能输入的样式的单行文本控件。这个控件限制用户可以输入的字符，从而使数据输入更高效。它还限制字段中可以输入的字符。

可以使用以下不能同时使用的样式创建不同类型的 ConstrainedText。

DECIMAL十进制输入样式，允许输入带有可选小数的数值。例如，-123、0.123 或 .5 都是有效输入。NUMERIC数值输入样式，允许输入数值。PHONENUMBER电话号码输入样式，允许输入带有可选的、与电话有关的字符（如 +、* 和 #）的数值。

清单 2 中的代码样例创建了不同类型的 ConstrainedText。

清单 2. ConstrainedText 样例
Composite　composite1　=　new　Composite(shell,SWT.NONE);　　
composite1.setLayout(new　RowLayout(SWT.HORIZONTAL));　
Label　phoneNumber　=　new　Label(composite1,SWT.NONE);　
phoneNumber.setText("Phone　Number:　");　
ConstrainedText　cT1　=　new　ConstrainedText(composite1,　SWT.BORDER,　
　　　　　　　　　　　　　　　　　　　　　ConstrainedText.PHONENUMBER);　
　
Composite　composite2　=　new　Composite(shell,SWT.NONE);　　
composite2.setLayout(new　RowLayout(SWT.HORIZONTAL));　
Label　decimal　=　new　Label(composite2,SWT.NONE);　
decimal.setText("Decimal:　");　
ConstrainedText　cT2　=　new　ConstrainedText(composite2,　SWT.BORDER,　
　　　　　　　　　　　　　　　　　　　　　ConstrainedText.DECIMAL);　
　
Composite　composite3　=　new　Composite(shell,SWT.NONE);　　
composite3.setLayout(new　RowLayout(SWT.HORIZONTAL));　
Label　numeric　=　new　Label(composite3,SWT.NONE);　
numeric.setText("Numeric:　");　
ConstrainedText　cT3　=　new　ConstrainedText(composite3,　SWT.BORDER,　
　　　　　　　　　　　　　　　　　　　　　ConstrainedText.NUMERIC);　

上述代码创建了 3 个 ConstrainedText，它们分别将输入限制为电话号码、十进制和数值样式。图 2 显示了带有一些样例输入文本的结果。

图 2. ConstrainedText 样例

DateEditor

DateEditor 是一个特殊的数据输入控件，允许用户输入或选择日期。getDate() 的返回值是 Date 类的一个实例。

日期和时间格式化的默认地区和时区反映了设备中的当前配置。如果没有设置日期，则当前日期是默认使用的日期。应用程序可能调用 setTimeZone(timeZone) 来更改 Coordinated Universal Time (UTC) 时间中出现的时间差异。这种更改只影响小部件实例，不会影响其他应用程序。

可以使用以下不可同时使用的样式创建不同类型的 DateEditor。

DATE“年、月、日” 日期输入类型。DATE_TIME“日期、时间” 输入类型。DURATION“小时、分钟、秒” 时段输入类型。OFFSET可以减去或加上另一个时间值的 “小时、分钟、秒” 时段输入类型。

通过这些样式，您可以使用逻辑按位操作（logical bitwise operation）或以下特定于小部件的样式提示之一：

COMPACT提示小部件将以一种更小或功能较少的格式显示。FULL提示小部件将以一种功能完整的格式显示，强调易用性而不是精简性。

有几个 getter 和 setter 用于设置和获取日期和时间。也可以使用 setTimeZone() 更改应用程序时区。参见 eRCP javadoc 了解使用细节。

清单 3 显示创建不同类型的 DateEditor 的样例代码。

清单 3. DateEditor 样例
DateEditor　dateEditor1　=　new　DateEditor(composite,　SWT.NONE,　DateEditor.DATE);　
DateEditor　dateEditor2　=　new　DateEditor(composite,　SWT.NONE,　DateEditor.TIME);　
DateEditor　dateEditor3　=　new　DateEditor(composite,　SWT.NONE,　
　　　　　　　　　　　　　　　　　　　　DateEditor.DURATION);　
DateEditor　dateEditor4　=　new　DateEditor(composite,　SWT.NONE,　
　　　　　　　　　　　　　　　　　　　　DateEditor.OFFSET);　　
dateEditor3.setTime(1000);　
dateEditor4.setTime(-1000);　

以上代码创建了 4 种类型的 DateEditor。

图 3. DateEditor 样例

第一个 DateEditor 是一个日期样式的控件。单击右边的锚点将出现一个日期/时间选择器。

图 4. DateEditor 作为日期/时间选取器

ListBox

ListBox 表示一个可选择 UI 对象，用于显示一列项目，如来自一个数据模型的文本和图标。每个列表项可能包括标题文本、标题图标、详细文本和详细图标。可以使用样式和修饰符设置 ListBox 的布局和显示。

与 List 不同，ListBox 中包含的数据来自一个 ListBoxItem 数组，而不是逐个添加或插入，从而提供一个 MVC 模型。ListBoxItem 中的标题和细节图标将按照提供的尺寸显示，或者伸展为适应 ListBox 样式。要获得一致的表示，所有标题图标应该大小一致，一个列表的所有细节图标也应该大小一致。ListBoxItem 中的空元素不应该显示在 ListBox 布局中。

可以使用以下不能同时使用的样式创建不同类型的 ListBox：

LB_STYLE_NO_HEADING_TEXT只使用一列（细节文本）显示单行项目。如果样式属性未指定，这也是默认样式。LB_STYLE_1LINE_ITEM使用两列（标题文本和细节文本）显示单行项目。LB_STYLE_2LINE_ITEM显示两行项目 — 将标题和细节合并到一列。

上述样式可以使用以下任意数量的修饰符样式进行按位 OR 操作。

LB_MOD_SHOW_SELECTION_NUMBER对每个项目显示一个一位数字，这些数字可用于选择项目。例如，1 表示在数字键盘上按下 1 将选择该项目。LB_MOD_SHOW_HEADING_ICONS显示与标题文本关联的图标。LB_MOD_SHOW_DETAIL_ICONS显示与细节文本对应的图标。

由于 ListBox 是一个 MVC 小部件，当您更改模型部分（ListBoxItem）中的任何内容时，可以使用以下方法保持视图部分与模型的更改同步。

setDataModel(ListBoxItem[] items)设置这个 ListBox 的数据模型。这个数组将用于 ListBox 的生命周期中，除非您将另一个数组设置为 ListBox 的数据模型。public void refreshItem(int index)当您修改一个 ListBoxItem 时，您可以通知这个 ListBox：位于指定索引的项目的数据已更新，项目显示需要刷新。refreshList()当您修改几个 ListBoxItem 时，可以使用这个方法刷新这个 ListBox 中的整个列表显示。

清单 4 中的代码创建一组 ListBoxItem 并将其设置为不同类型的 ListBox 的模型。

清单 4. ListBox 样例
int[]　modes={　
　ListBox.LB_STYLE_2LINE_ITEM　|　ListBox.LB_MOD_SHOW_HEADING_ICONS　|　
　ListBox.LB_MOD_SHOW_DETAIL_ICONS,　
　ListBox.LB_STYLE_1LINE_ITEM　|　ListBox.LB_MOD_SHOW_HEADING_ICONS　|　
　ListBox.LB_MOD_SHOW_DETAIL_ICONS,　
　ListBox.LB_STYLE_1LINE_ITEM　|　ListBox.LB_MOD_SHOW_HEADING_ICONS　|　
　ListBox.LB_MOD_SHOW_DETAIL_ICONS　|　ListBox.LB_MOD_SHOW_SELECTION_NUMBER,　
　ListBox.LB_STYLE_1LINE_ITEM　|　ListBox.LB_MOD_SHOW_DETAIL_ICONS　|　
　ListBox.LB_MOD_SHOW_SELECTION_NUMBER,　
　ListBox.LB_STYLE_NO_HEADING_TEXT|ListBox.LB_MOD_SHOW_DETAIL_ICONS,　
　ListBox.LB_STYLE_NO_HEADING_TEXT　
　};　
　　
//　Create　the　data　modal　
ListBoxItem[]　listboxitems　=　new　ListBoxItem[3];　
　
//　Get　images　
Image　surdetail　=　new　Image(display,　"res/ambunance-2-24x24.png");　
Image　surheading　=　new　Image(display,　"res/surgeon-32x32.png");　
Image　nurdetail　=　new　Image(display,　"res/syringe-24x24.png");　
Image　nurheading　=　new　Image(display,　"res/nurse-32x32.png");　
Image　pragdetail　=　new　Image(display,　"res/red-cross-24x24.png");　
Image　pregheading　=　new　Image(display,　"res/pregnant-32x32.png");　
　
listboxitems[0]　=　new　ListBoxItem("Bill　Marshall",　surdetail,　"Surgeon",　surheading);　
listboxitems[1]　=　new　ListBoxItem("Nancy　Moore",　nurdetail,　"nurse",　nurheading);　
listboxitems[2]　=　new　ListBoxItem("Lily　Davis",　pragdetail,　"Pregnant",　pregheading);　
　
//　Then　we　call　creation　of　ListBox　several　times　with　different　
//　styles　to　see　different　visual　effect　
ListBox[]　listbox　=　new　ListBox[6];　
for　(int　i=0;　i<6;　i++)　{　
　//　create　new　Listbox　
　listbox[i]　=　new　ListBox(composite,　SWT.SINGLE,　modes[i]　);　
　//　add　the　ListBoxItems　to　the　ListBox　
　listbox[i].setDataModel(listboxitems);　
}　

上述代码段的结果如图 5 所示。

图 5. ListBox 样例

ListView

ListView 允许用户从一个项目集合中选择一个或多个项目，它可以显示为多种样式的多列格式。它类似于 List，但也对每个项目提供图标支持，从而实现更好的视觉效果。

ListView 在一个或多个列中从上到下排列它的子项目。如果没有指定布局方向提示，实现将选择一个方向。如果屏幕宽度只够显示一列，则列表垂直滚动。如果小部件中有足够空间可以显示多个列，则列表水平滚动。列表只能在一个方向上滚动。布局方向也可以在运行时通过调用 setLayout(int) 方法设置。

项目密度提示决定项目的大小和位置，以便在小部件中容纳更多或更少的项目。应用程序可以查询每个密度级别的图标的首选大小。不同平台上的图标的大小可能不同。如果给定图标不匹配首选大小，实现可能会调整图标大小，以防止出现异常情况。应用程序可以通过在运行时调用 setLayoutDensity(int) 方法来更改项目密度级别。

ListView 有两个样式变量：SWT 和 density。通过 SWT 样式，您可以指定选择类型（单个或多个）和布局样式（垂直或水平）。例如，可以使用 SWT.SINGLE | SWT.VERTICAL 创建一个单一选择、垂直布局的 ListView。以下是可用于创建 ListView 的不能同时使用的样式。

LOW低密度MEDIUM中密度HIGH高密度

清单 5 显示的代码样例创建一个包含 20 个项目的 ListView，所有项目都使用图标添加。它还创建两个命令来展示密度视觉效果。

清单 5. ListBox 样例
final　ListView　lv　=　new　ListView(composite,　SWT.MULTI,　ListView.HIGH);　
　
//set　Image　array　
Image[]　image　=　new　Image[4];　
image[0]　=　new　Image(Display.getDefault(),　"res/pregnant-32x32.png");　
image[1]　=　new　Image(Display.getDefault(),　"res/nurse-32x32.png");　
image[2]　=　new　Image(Display.getDefault(),　"res/surgeon-32x32.png");　
image[3]　=　new　Image(Display.getDefault(),　"res/pill-32x32.png");　
lv.setSize(200,250);　
　
//Create　a　Command　for　setting　low　density　
Command　lowCommand　=　new　Command(lv,　Command.SELECT,　0);　
lowCommand.setText("LOW");　
lowCommand.addSelectionListener(new　SelectionListener(){　
　public　void　widgetSelected(SelectionEvent　e)　{　
　　lv.setLayoutDensity(ListView.LOW);　
　}　
　public　void　widgetDefaultSelected(SelectionEvent　e)　{　
　}});　
　
//Create　a　Command　for　setting　high　density　
Command　midCommand　=　new　Command(lv,　Command.SELECT,　0);　
midCommand.setText("MEDIUM");　
midCommand.addSelectionListener(new　SelectionListener(){　
　public　void　widgetSelected(SelectionEvent　e)　{　
　　lv.setLayoutDensity(ListView.MEDIUM);　
　}　
　public　void　widgetDefaultSelected(SelectionEvent　e)　{　
}});　
　
//add　ListView　items　
for　(int　i=0;　i<20;　i++)　{　
　lv.add("item"+i,　image[i　%　4]);　
}　　

上述代码的结果在图 6（中密度）和图 7（低密度）中显示。

图 6. 中密度 ListView



图 7. 低密度 ListView

结束语

本文向您介绍了 eSWT 移动扩展。您还学习了 5 个移动控件。如有疑问，您可以在 下载 部分查看样例代码。

本系列的第 2 部分将探讨更多 eSWT 移动扩展和接口。

本文示例源代码或素材下载