Nokia SDK 2.0 for Java: 新UI介绍及实例演示
文章信息
Contents |
Introduction
Nokia SDK 2.0 for Java 提供了全新UI视觉，本文着重讲解部分的2.0中新的UI控件的使用方式。
IconCommand
Series 40的Java Runtime2.0 的版本中 引入了 IconCommand。
IconCommand 类继承于LCDUI的 Command， 它允许为Command提供Icon以更形象化的方式来表现一个按钮。 在Series 40 的全触屏设备上，MIDlets可以部署IconComand到上图中Action button 1， Action button 2 以及CategoryBar的任何位置，总之，在MIDlet中任何可以使用Command的地方也可以使用IconCommand，
从外观上讲，Command是有一个text lable来呈现的，然后IconComand 则是由Text label 以及 Icon来呈现的。 IconCommand的图标可以使用系统自带的，当然也可以用开发者自己定义。 其中系统自带的图标数量有限，主要有： ICON_ADD_CONTACT ,ICON_BACK ,ICON_OK ,ICON_OPTIONS ,ICON_SEND_SMS
我们可以为IconCommand提供两张图片，分别代码按钮的两种状态，Selected 和 UnSelected， 当然你也可以只设置一张图片，那么在两种状态切换时，图片就不会有变化。
// 使用系统提供的图标
cmdOk = new IconCommand("Ok", Command.OK, 1, IconCommand.ICON_OK);
cmdOptions = new IconCommand("Options", Command.SCREEN, 2, IconCommand.ICON_OPTIONS);
cmdBack = new IconCommand("Back", Command.BACK, 3, IconCommand.ICON_BACK);
// 使用自定义图标
Image imgHome = Image.createImage("/home.png");
cmdHome = new IconCommand("Home", imgHome, imgHome, Command.SCREEN, 3);
Image imgInfo = Image.createImage("/information_userguide.png");
cmdSwitchOritation = new IconCommand("Info", imgInfo, imgInfo, Command.SCREEN, 3);
你也可以使用下面一些方法来动态的获取IconCommand的属性。
| 函数名 | 描述 |
|---|---|
| getIconId() | 获取你所使用的SDK自带图标的ID |
| getSelectedIcon() | 获取IconCommand选中状态下对应的Icon |
| getUnselectedIcon() | 获取IconCommand 未选中状态下对应的Icon |
CategoryBar
Series 40的Java Runtime2.0 的版本中才引入了 CategoryBar。 CategoryBar 是Series 40 Full touch中典型的UI元素，它主要用来在同一个MIDlet内的不同view之间切换，提供了在相关功能之间切换的最直观的方式。 CategoryBar 里面包含了一组IconCommand，如果所包含的元素多余一行，那么它会隐藏多余的元素，并且用“...”来表示，点击“...”那么你可以展开所有的元素， 如下图：
为了创建一个CategoryBar 我们需要以下一些步骤：
- 1. 获取特定设备最合适的图片尺寸
你可以使用CategoryBar.getBestImageHeight 和 CategoryBar.getBestImageWidth 这两个方法来获取CategoryBar中Icon或者背景图片的最佳尺寸。
背景： IMAGE_TYPE_BACKGROUND Icon： IMAGE_TYPE_ICON
但是需要注意的是，仅仅是在manufacturer or operator domain中运行的MIDlet才可以设置更改CateGoryBar的背景图片。
示例代码：
int bestWidth;
int bestHeight;
try {
bestWidth = CategoryBar.getBestImageWidth(CategoryBar.IMAGE_TYPE_ICON);
bestHeight = CategoryBar.getBestImageHeight(CategoryBar.IMAGE_TYPE_ICON);
} catch (IllegalArgumentException iae) {
// Handle IllegalArgumentException from CategoryBar.getBestImageWidth() or
// CategoryBar.getBestImageHeight()
}
- 2. 检测当前设备中CategoryBar 所能容纳的 IconCommand的最大数量。
你可以使用方法CategoryBar.getMaxElements ， 它将会返回最大值。 如果你所添加的超过了最大数量，它并不会抛出异常，但是最后添加的并不会被显示出来。
int maxElements = CategoryBar.getMaxElements();
- 3. 创建CategoryBar
CategoryBar重载了两个构造方法：
| 函数名 | 描述 |
|---|---|
| CategoryBar(IconCommand[] elements, boolean useLongLabel) | 使用Iconcommand数组来创建 |
| CategoryBar(javax.microedition.lcdui.Image[] unselectedIcons, javax.microedition.lcdui.Image[] selectedIcons, java.lang.String[] labels) | 直接使用图片数组来创建 |
使用Iconcommand数组创建实例：
IconCommand[] iconCommands = {cmdHome, cmdSwitchOritation, cmdCalendar,cmdOk,cmdOptions};
CategoryBar categoryBar = new CategoryBar(iconCommands, true);
categoryBar.setVisibility(true); // Invisible by default
这里有一点很重要，由于创建完成后，默认CategoryBar是不可见的，所以我们必须调用setVisibility把可见性设置为true。
- 4. 设置以及获取CategoryBar属性
- 背景颜色 (仅仅对 manufacturer and operator domains的 有效) Tip: 你可以使用 CategoryBar.DEFAULT_BACKGROUND 回复默认参数.
- 背景图片 (仅仅对 manufacturer and operator domains的 有效)
- 设置highlight的颜色 Tip: 你可以使用 CategoryBar.DEFAULT_HIGHLIGHT_COLOUR来回复默认设置.
- 获取当前选中的Item的Index
示例代码：
try {
categoryBar.setBackgroundImage(Image.createImage("Background.png"));
categoryBar.setSelectedIndex(1);
} catch (NullPointerException npe) {
// Handle NullPointerException from Image.createImage()
} catch (IOException ioe) {
// Handle IOException from Image.createImage()
} catch (SecurityException se) {
// Handle SecurityException from categoryBar.setBackgroundImage()
} catch (IllegalArgumentException iae) {
/// Handle IllegalArgumentException from categoryBar.setSelectedIndex()
}
- 5. 注册观察者
使用ElementListener 来监听CategoryBar中元素的选中事件, 你必须重写notifyElementSelected 函数来处理CategoryBar中元素的选中事件。
categoryBar.setElementListener(this);
public void notifyElementSelected(CategoryBar cb, int i) {
// From the ElementListener interface
// Commands coming from the Category Bar
Alert alert = new Alert("Element");
if (i == ElementListener.BACK) {
alert.setString("Back element"); // i == -1
} else {
// Switch orientation manually.
if(i == 2){
switch(Orientation.getAppOrientation()){
case Orientation.ORIENTATION_PORTRAIT:
case Orientation.ORIENTATION_PORTRAIT_180:
{
Orientation.setAppOrientation(Orientation.ORIENTATION_LANDSCAPE);
break;
}
case Orientation.ORIENTATION_LANDSCAPE:
case Orientation.ORIENTATION_LANDSCAPE_180:
{
Orientation.setAppOrientation(Orientation.ORIENTATION_PORTRAIT);
break;
}
default:
break;
}
}
alert.setString("Element: " + i);
}
display.setCurrent(alert);
}
新UI实例
这个实例演示了如何使用Iconcommand以及CategoryBar，以及使用CommandListener, ElementListener来分别处理他们所触发的事件。
开发环境: Eclipse + MTJ + Nokia SDK 2.0 for Java 你可以再这里下载该例子的代码：
# FulltouchUI例程 下载
