|
移动信息设备描述(Mobile Information Device Profile,MIDP) 1.0 版本提供了一套基本组件,用于支持应用程序需要的大多数用户界面(UI)。但是,如果您的需求比较复杂,那么一般必须要从Canvas派生子类,并重新设计。
MIDP 2.0 改变了所有这些。现在您可以建立自定义组件,这样您就可以对用户交互进行细粒度的控制,而且可以适应现有的窗体框架,符合设备本身的观感。
在这篇文章里,我们通过建立一个简单的Outliner MIDlet,来研究这些新的定制功能。大纲是用来组织想法、保持列表,甚至进行项目计划的工具——是一个在移动设备上非常有用的应用程序。Outliner MIDlet让用户可以构建层次结构良好的窗体项目大纲。它们可以加入或删除,缩进或凸出,还可以用一种在MIDP 2.0出现之前不可能的方法折叠和展开项目。
窗体:回顾
如果您对于使用 MIDP 建立用户界面不熟,请让我们回顾一下基础知识。
MIDP 1.0提供了一些骨干UI组件,包括选项组(ChoiceGroup),日期字段(DateField), Gauge, 图像项目ImageItem),字符串项目(StringItem), 以及文本字段(TextField)。这些类全部扩展自公共基类Item。和它们的AWT等价物非常相似,项目是我们用来控制底层本机UI小部件的抽象。因为本机实现在不同设备之间,可能有很大的差异,而事实上也是这样,所以Item公共接口对于底层小部件的外观和行为只提供了非常少的控制。
窗体的存在,是为了按行排列项目,使其最好地适合屏幕尺寸、适应项目运行所在设备的能力。至少从理论上讲,MIDP实现可以方便、无缝地使您的应用程序适应设备硬件;副作用是您对用户界面观感的影响受到限制。
有什么新东西?
MIDP 2.0改善了窗体,为项目布局提供了更好的控制,还提供了一个新类CustomItem,这个类让您可以建立自己的窗体项目。Outliner利用全部这些能力,为用户提供以下特性:
应用程序显示多行文本,用不同的数量缩进,形成一个可视的层次结构。窗体增强的布局能力使这种表示成为可能。
用户可以折叠大纲的任何一行,把层次结构中该行之下的行隐藏起来。会有一个可视指示器,表示指定行是展开的还是折叠的。您可以覆盖 CustomItem的paint()方法,按照自己喜欢的方式画出这样的指示器。
用户还可以按照任意顺序重新排列行。移动一个行,也会同时移动它所有的下级行。现在,这个命令可以专门用于一个项目,这样菜单就能够做到上下文敏感。向上移动、向下移动、展开、以及折叠命令只有在适合项目当前状态的时候才会出现。
这些特性在MIDP 1.0里都是不可能的。下面让我们看看这种魔术是如何做到的。
建立Outline项目类
Outliner类自己就是一个普通的MIDlet。功能的核心是CustomItem的子类,叫做OutlineItem。你要实现自己的CustomItem类时需要做的事,在这个类里都做了,所以您应当好好在源代码里看看它。构造函数是一个开始的好地方:
<%@ control language="c#" autoeventwireup="true" codefile="webusercontrol2.ascx.cs" inherits="webusercontrol2" %> /**
* 用指定的初始缩进和文本建立 OutlineItem
*/
public OutlineItem( int inIndent, String inText )
{
// 我们不想要系统提供的标签
super( null );
indent = inIndent;
text = inText;
hiddenChildren = null;
// 定义布局
setLayout( LAYOUT_EXPAND | LAYOUT_TOP | LAYOUT_NEWLINE_AFTER );
// 加入一直适用的命令
addCommand( editCommand );
addCommand( insertCommand );
} |
调用构造函数,把要显示的文本、项目应当缩进的次数传递给构造函数,就可以建立OutlineItem。
在构造函数里,第一项任务是调用超类的构造函数。MIDP项目不仅仅代表UI小部件本身,还有一个标签向用户标识部件。例如,一个文本字段是一个包含文本的框;它的标签通常出现在它的左边,是描述文本框中内容的单词,比如Name或Password。大纲项不需要标签,所以我们的构造函数把null作为必要参数传给超类的构造函数。
在使用传递给构造函数的参数初始化对象的状态之后,下一步就是配置项目的布局指令,把一些命令直接加给项目。稍后我会解释布局指令和专门用于项目的命令。
CustomItem 有5个我们必须实现的抽象方法。在这些方法里,paint() 方法可以让您控制项目的外观。
paint()方法的参数包含项目的宽度和高度,它们由窗体的布局逻辑、图形对象、转换方式决定,所以它的原点项目的左上角。下面是OutlineItem中paint()的实现:
<%@ control language="c#" autoeventwireup="true" codefile="webusercontrol2.ascx.cs" inherits="webusercontrol2" %>public void paint( Graphics g, int w, int h )
{
// 用背景色全部清除
g.setColor( DISPLAY.getColor( DISPLAY.COLOR_BACKGROUND ) );
g.fillRect( 0, 0, w, h );
// 现在用前景色来画图
g.setColor( DISPLAY.getColor( DISPLAY.COLOR_FOREGROUND ) );
if ( isCollapsed() )
{
// 画一个代表隐藏项目的填充的圆
g.fillArc( indent * INDENT_MARGIN + 2, 2,
FONT_HEIGHT-7, FONT_HEIGHT-7, 0, 360 );
}
else
{
// 没有隐藏项目,所以画一个空心圆
g.drawArc( indent * INDENT_MARGIN + 2, 2,
FONT_HEIGHT-7, FONT_HEIGHT-7, 0, 360 );
}
// 画出文本
g.drawString( text,
indent * INDENT_MARGIN + FONT_HEIGHT, 0, g.TOP | g.LEFT );
}
|
|