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

随着移动平台变得越来越复杂,移动计算需求将会不断增长。本系列将介绍嵌入式标准小部件工具包(embedded Standard Widget Toolkit,eSWT)。可以使用 eSWT 为各种移动电话开发具有本地外观的 Java™ 应用程序。本文探索如何使用 eSWT 移动控件,通过样例代码带领您逐步使用 eSWT 移动扩展中的 5 个类。

Uriel Liu, 软件工程师, EMC

Uriel LiuUriel Liu 是 IBM 中国软件开发中心的一位软件开发人员,致力于 WED 客户机技术。他还是 eRCP 项目的一名提交者。



Eric Hsu, 软件工程师, EMC

Eric Hsu 的照片Eric Hsu 是位于中国台北的 IBM 中国软件开发中心的一位软件开发人员,他从事 Lotus Expediter 客户端技术的研究及 Eclipse eRCP 项目开发。他还是 Eclipse eRCP 项目的提交者。



2009 年 11 月 05 日

简介

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

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


CaptionedControl

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

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

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

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

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 样例
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 样例
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 样例

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

图 4. DateEditor 作为日期/时间选取器
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 样例
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
中密度 ListView
图 7. 低密度 ListView
低密度 ListView

结束语

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

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


下载

描述名字大小
样例代码段os-eSWT_MobExt_Test_One.zip39KB

参考资料

学习

获得产品和技术

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Open source, Java technology
ArticleID=444327
ArticleTitle=eSWT 移动扩展简介,第 1 部分: 使用简单小部件快速构建移动应用程序
publish-date=11052009