LWUIT 開(kāi)發(fā)指南下載作者寫(xiě)的 Hello Table、Hello Tree 源代碼下載 通過(guò)上面幾篇博客的介紹，我們對(duì) LWUIT 的控件有了一個(gè)大概的了解。在這篇博客里，我們將按照官方開(kāi)發(fā)指南里的順序繼續(xù)介紹兩個(gè)新的 LWUIT 控件—— Table 和 Tree，著重介紹它們的使用，并附加示例源代碼。而對(duì)于它們的 MVC 應(yīng)用沒(méi)有過(guò)多介紹，MVC 不是一二個(gè)小小的 demo 就可以說(shuō)的明白的，需要我們?cè)陧?xiàng)目中不斷地應(yīng)用與領(lǐng)會(huì)。關(guān)于更多 LWUIT 的 MVC 的介紹請(qǐng)參考作者的后續(xù)博客。
注：源碼編寫(xiě)中關(guān)于 .res 的編寫(xiě)這里不再贅述，詳細(xì)編寫(xiě)步驟請(qǐng)參考作者的前一篇博客《
解讀 LWUIT 之二：關(guān)于 LWUIT 開(kāi)發(fā)指南中的 Hello World》。每個(gè)項(xiàng)目的 .res 具體配置請(qǐng)到作者上傳源碼中的 res 目錄下使用 ResourceEdit 查看。
com.sun.lwuit.table.Table 控件
Table 是一種容量大小可變的表格控件，它的項(xiàng)可以設(shè)置為可編輯或者不可編輯。正如下篇博客中將要介紹的 List 控件，Table 也有它自己的模型組件（TableModel）并且有一個(gè)默認(rèn)的模型實(shí)現(xiàn)（DefaultTableModel）。
不同于 List 的是，創(chuàng)建 Table 必須首先創(chuàng)建一個(gè)表示數(shù)據(jù)模型的 TableModel。通過(guò)重寫(xiě) TableModel 的 isCellEditable 方法可以設(shè)定表的指定單元是否可以編輯。
使用 Table 控件繼承自 Container 的 setScrollableX 方法可以設(shè)置表格能夠沿 X 軸左右滾動(dòng)，這樣我們的表就可以在屏幕后邊自由“擴(kuò)展”了。Table 不像 List 似的擁有自己的 CellRenderer（ListCellRenderer），專門負(fù)責(zé)為每一個(gè)實(shí)例的展示框架填充展示內(nèi)容，每一個(gè) 繼承自 Table 的類必須 DIY，通過(guò)重寫(xiě) Table 的 createCell 方法自行負(fù)責(zé)框架填充。請(qǐng)注意 createCell 能夠接收用戶事件并且演示動(dòng)畫(huà)效果，對(duì)于 Table 構(gòu)架的展示是動(dòng)態(tài)的，因此在 Table 的生命周期中 createCell 會(huì)占用一定的系統(tǒng)資源。絢爛的特效的背后總是有一定的性能付出作為代價(jià)的。
下面是作者寫(xiě)的 HelloTable 源代碼：
view plaincopy to clipboardprint?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) {}
}
下面是作者寫(xiě)的 HelloTable 運(yùn)行效果圖：
com.sun.lwuit.tree.Tree 控件
Tree 的設(shè)計(jì)非常類似于 Table，它用來(lái)表達(dá)一些劃分等級(jí)的數(shù)據(jù)，比如一個(gè)文件體系。如果某些基礎(chǔ)數(shù)據(jù)具有自己的等級(jí)劃分，比如一個(gè)公司的員工結(jié)構(gòu)或者一個(gè)文件系統(tǒng)，那么這些基礎(chǔ)數(shù)據(jù)可以用 Tree 來(lái)表達(dá)。
針對(duì)這個(gè)原因，LWUIT 專門為 Tree 設(shè)計(jì)了一個(gè)單獨(dú)的模型，TreeModel 接口。為 Tree 設(shè)計(jì)一個(gè)模型類是沒(méi)有意義的，因?yàn)檫@樣一個(gè)類并不能被當(dāng)做通用的 Tree 的數(shù)據(jù)模型，因此 Tree 不像 List 和 Table 那樣，它沒(méi)有 DefaultTreeModel。我們必須自行通過(guò)實(shí)現(xiàn) TreeModel 的 getChildren 和 isLeaf 方法來(lái)創(chuàng)建 Tree 的數(shù)據(jù)模型。
getChildren 方法用來(lái)返回傳入節(jié)點(diǎn)的所有子節(jié)點(diǎn)。根節(jié)點(diǎn)是不被顯示在屏幕上的，如果想返回根節(jié)點(diǎn)的所有子節(jié)點(diǎn)可以以 null 為參數(shù)傳入。isLeaf 方法返回傳入節(jié)點(diǎn)是否葉子節(jié)點(diǎn)，葉子節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)并且無(wú)法展開(kāi)。
HelloTree 源代碼如下：
Node.java 源代碼：
view plaincopy to clipboardprint?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 源代碼：
view plaincopy to clipboardprint?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 運(yùn)行效果圖：
當(dāng)然，這只是一個(gè)簡(jiǎn)單粗糙的 Tree demo。讀者可以通過(guò)調(diào)用 Tree 的靜態(tài)方法，諸如 setFolderIcon、setFolderOpenIcon、setNodeIcon 來(lái)設(shè)置節(jié)點(diǎn)圖標(biāo)，達(dá)到跟電腦文件系統(tǒng)一樣的視覺(jué)效果。如果這樣還不滿意的話，還可以通過(guò)自定義 Tree（即寫(xiě)一個(gè)繼承自 Tree 的類），重寫(xiě) Tree 的 createNodeComponent 方法，然后通過(guò)自定義節(jié)點(diǎn)圖標(biāo)、節(jié)點(diǎn)格式來(lái)達(dá)到更加絢麗的效果。
