×
Namespaces

Variants
Actions

Nokia SDK 2.0 for Java: 新UI介绍及实例演示

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon Chinese.png
Article Metadata

兼容于
文章
Amazing110 在 25 Jun 2012 创建
最后由 hamishwillee 在 01 Aug 2013 编辑

Contents

Introduction

Nokia SDK 2.0 for Java 提供了全新UI视觉,本文着重讲解部分的2.0中新的UI控件的使用方式。

Nokia SDK 2.0 java New UI Elements.png


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 More than four 1.png CategoryBar More than four 2.png


为了创建一个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来分别处理他们所触发的事件。

Nokia SDK 2.0 java New UI Example Screenshot 1.png Nokia SDK 2.0 java New UI Example Screenshot 2.png

开发环境: Eclipse + MTJ + Nokia SDK 2.0 for Java 你可以再这里下载该例子的代码:

 #  FulltouchUI例程 下载

相关链接

Summary

This page was last modified on 1 August 2013, at 08:57.
200 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×