解读 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 Formprivate TableModel tableModel;//declare a TableModelprivate Table table;//declare a Tablepublic void startApp() {// init the LWUIT DisplayDisplay.init(this);// Setting the application theme is discussed// later in the theme chapter and the resources chaptertry {Resources r = Resources.open("/myresources.res");UIManager.getInstance().setThemeProps(r.getTheme("myresources"));} catch (java.io.IOException e) {}exampleContainer = new Form("Form Title");// Create a FormtableModel = 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 TableModelpublic boolean isCellEditable(int row, int col) {if(row != -1 && row == col){return true;}else {return false;}}};//Create a DefaultTableModeltable = 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 TableexampleContainer.setLayout(new FlowLayout());//Set LayoutManagerexampleContainer.addComponent(table);//Add a Table to the Form content paneexampleContainer.setTransitionOutAnimator(CommonTransitions.createFade(400));//Set Transitions animation of FadeexampleContainer.addCommand(new Command("Run", 2));//Add Command keyexampleContainer.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 Formprivate TreeModel treeModel;//declare a TreeModelpublic void startApp() {// init the LWUIT DisplayDisplay.init(this);// Setting the application theme is discussed// later in the theme chapter and the resources chaptertry {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 TreeModelpublic 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 isLeafpublic boolean isLeaf(Object node){Node n = (Node)node;return n.children == null || n.children.length == 0;}};//Create a TreeModeltreeForm = new Form("Tree");// Create a FormtreeForm.setLayout(new BorderLayout());//Set LayoutManagertreeForm.addComponent(BorderLayout.CENTER, new Tree(treeModel));//Create a tree and add it to the Form content panetreeForm.show();//Show it}public void pauseApp() {}public void destroyApp(boolean unconditional) {}}

        HelloTree 运行效果图：

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