解读 LWUIT 之六：使用表格（Table）和树（Tree）

解读 LWUIT 之六：使用表格（Table）和树（Tree）

LWUIT 开发指南下载

作者写的 Hello Table、Hello Tree 源代码下载

通过上面几篇博客的介绍，我们对 LWUIT 的控件有了一个大概的了解。在这篇博客里，我们将按照官方开发指南里的顺序继续介绍两个新的 LWUIT 控件—— Table 和 Tree，着重介绍它们的使用，并附加示例源代码。而对于它们的 MVC 应用没有过多介绍，MVC 不是一二个小小的 demo 就可以说的明白的，需要我们在项目中不断地应用与领会。关于更多 LWUIT 的 MVC 的介绍请参考作者的后续博客。

注：源码编写中关于 .res 的编写这里不再赘述，详细编写步骤请参考作者的前一篇博客《解读 LWUIT 之二：关于 LWUIT 开发指南中的 Hello World》。每个项目的 .res 具体配置请到作者上传源码中的 res 目录下使用 ResourceEdit 查看。

com.sun.lwuit.table.Table 控件

Table 是一种容量大小可变的表格控件，它的项可以设置为可编辑或者不可编辑。正如下篇博客中将要介绍的 List 控件，Table 也有它自己的模型组件（TableModel）并且有一个默认的模型实现（DefaultTableModel）。

不同于 List 的是，创建 Table 必须首先创建一个表示数据模型的 TableModel。通过重写 TableModel 的 isCellEditable 方法可以设定表的指定单元是否可以编辑。

使用 Table 控件继承自 Container 的 setScrollableX 方法可以设置表格能够沿 X 轴左右滚动，这样我们的表就可以在屏幕后边自由“扩展”了。Table 不像 List 似的拥有自己的 CellRenderer（ListCellRenderer），专门负责为每一个实例的展示框架填充展示内容，每一个 继承自 Table 的类必须 DIY，通过重写 Table 的 createCell 方法自行负责框架填充。请注意 createCell 能够接收用户事件并且演示动画效果，对于
Table 构架的展示是动态的，因此在 Table 的生命周期中 createCell 会占用一定的系统资源。绚烂的特效的背后总是有一定的性能付出作为代价的。

下面是作者写的 HelloTable 源代码：

package com.defonds.lwuit;

import com.sun.lwuit.Command;
import com.sun.lwuit.Component;
import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.Label;
import com.sun.lwuit.TextField;
import com.sun.lwuit.animations.CommonTransitions;
import com.sun.lwuit.layouts.FlowLayout;
import com.sun.lwuit.plaf.UIManager;
import com.sun.lwuit.table.DefaultTableModel;
import com.sun.lwuit.table.Table;
import com.sun.lwuit.table.TableModel;
import com.sun.lwuit.util.Resources;

public class HelloMidlet extends javax.microedition.midlet.MIDlet{

private Form exampleContainer;// declare a Form
private TableModel tableModel;//declare a TableModel
private Table table;//declare a Table

public void startApp() {
// init the LWUIT Display
Display.init(this);
// Setting the application theme is discussed
// later in the theme chapter and the resources chapter
try {
Resources r = Resources.open("/myresources.res");
UIManager.getInstance().setThemeProps(r.getTheme("myresources"));
} catch (java.io.IOException e) {}

exampleContainer = new Form("Form Title");// Create a Form
tableModel = new DefaultTableModel(new String[] {
"Col 1", "Col 2", "Col 3" }, new Object[][] {
{ "Row 1", "Row A", "Row X" },
{ "Row 2", "Row B", "Row Y" },
{ "Row 3", "Row C", "Row Z" },
{ "Row 4", "Row D", "Row K" },
}){
//override the method isCellEditable of TableModel
public boolean isCellEditable(int row, int col) {
if(row != -1 && row == col){
return true;
}else {
return false;
}
}
};//Create a DefaultTableModel

table = new Table(tableModel){

//override the method createCell of Table
protected Component createCell(java.lang.Object value,int row,int column,boolean editable){
if(row == -1) {
Label header = new Label((String)value);
header.setUIID("TableHeader");
header.setAlignment(Label.CENTER);
header.setFocusable(true);
return header;
}
if(editable) {
TextField cell = new TextField(value.toString(), -1);
cell.setLeftAndRightEditingTrigger(false);
cell.setUIID("TableCell");
return cell;
}
Label cell = new Label(value.toString());
cell.setUIID("TableCell");
cell.setAlignment(Label.CENTER);
cell.setFocusable(true);
return cell;
}
};//Create a Table

exampleContainer.setLayout(new FlowLayout());//Set LayoutManager
exampleContainer.addComponent(table);//Add a Table to the Form content pane
exampleContainer.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of Fade
exampleContainer.addCommand(new Command("Run", 2));//Add Command key
exampleContainer.show();//Show it
}

public void pauseApp() {}

public void destroyApp(boolean unconditional) {}
}

下面是作者写的 HelloTable 运行效果图：



com.sun.lwuit.tree.Tree 控件

Tree 的设计非常类似于 Table，它用来表达一些划分等级的数据，比如一个文件体系。如果某些基础数据具有自己的等级划分，比如一个公司的员工结构或者一个文件系统，那么这些基础数据可以用 Tree 来表达。

针对这个原因，LWUIT 专门为 Tree 设计了一个单独的模型，TreeModel 接口。为 Tree 设计一个模型类是没有意义的，因为这样一个类并不能被当做通用的 Tree 的数据模型，因此 Tree 不像 List 和 Table 那样，它没有 DefaultTreeModel。我们必须自行通过实现 TreeModel 的 getChildren 和 isLeaf 方法来创建 Tree 的数据模型。

getChildren 方法用来返回传入节点的所有子节点。根节点是不被显示在屏幕上的，如果想返回根节点的所有子节点可以以 null 为参数传入。isLeaf 方法返回传入节点是否叶子节点，叶子节点没有子节点并且无法展开。

HelloTree 源代码如下：

Node.java 源代码：

package com.defonds.lwuit;

class Node {
Object[] children;
String value;

public Node(String value, Object[] children) {
this.children = children;
this.value = value;
}

public String toString() {
return value;
}
}

HelloMidlet.java 源代码：

package com.defonds.lwuit;

import java.util.Vector;

import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.layouts.BorderLayout;
import com.sun.lwuit.plaf.UIManager;
import com.sun.lwuit.tree.Tree;
import com.sun.lwuit.tree.TreeModel;
import com.sun.lwuit.util.Resources;

public class HelloMidlet extends javax.microedition.midlet.MIDlet{

private Form treeForm;// declare a Form
private TreeModel treeModel;//declare a TreeModel

public void startApp() {
// init the LWUIT Display
Display.init(this);
// Setting the application theme is discussed
// later in the theme chapter and the resources chapter
try {
Resources r = Resources.open("/myresources.res");
UIManager.getInstance().setThemeProps(r.getTheme("myresources"));
} catch (java.io.IOException e) {}

treeModel = new TreeModel(){
Node[] sillyTree = {
new Node("X", new Node[] {
new Node("Child 1", new Node[] {}),
new Node("Child 2", new Node[] {}),
new Node("Child 3", new Node[] {}), }),
new Node("Y", new Node[] { new Node("A", new Node[] {}) }),
new Node("Z", new Node[] { new Node("A", new Node[] {}), }), };//Create a Tree(Note:tree structure,not com.sun.lwuit.tree.Tree)

//implement the getChildren of TreeModel
public Vector getChildren(Object parent){
Node n = (Node) parent;
Object[] nodes;
if (parent == null) {
nodes = sillyTree;
} else {
nodes = n.children;
}
Vector v = new Vector();
for (int iter = 0; iter < nodes.length; iter++) {
v.addElement(nodes[iter]);
}
return v;
}

//implement the getChildren of isLeaf
public boolean isLeaf(Object node){
Node n = (Node)node;
return n.children == null || n.children.length == 0;
}
};//Create a TreeModel

treeForm = new Form("Tree");// Create a Form
treeForm.setLayout(new BorderLayout());//Set LayoutManager
treeForm.addComponent(BorderLayout.CENTER, new Tree(treeModel));//Create a tree and add it to the Form content pane
treeForm.show();//Show it
}

public void pauseApp() {}

public void destroyApp(boolean unconditional) {}
}

HelloTree 运行效果图：



当然，这只是一个简单粗糙的 Tree demo。读者可以通过调用 Tree 的静态方法，诸如 setFolderIcon、setFolderOpenIcon、setNodeIcon 来设置节点图标，达到跟电脑文件系统一样的视觉效果。如果这样还不满意的话，还可以通过自定义 Tree（即写一个继承自 Tree 的类），重写 Tree 的 createNodeComponent 方法，然后通过自定义节点图标、节点格式来达到更加绚丽的效果。