学习定制表格树的项（一）

原文：http://www.eclipse.org/articles/article.php?file=Article-CustomDrawingTableAndTreeItems/index.html

本来将原来那篇拷贝过来，想写一些注释的，但太大了，太慢了，还是另写吧：

  总述

1，为什么要定制去画呢？

因为原来的Item有自己的局限性： For example, an item in a table or tree can only contain one image, and it must appear before its text. Item的一个单元只能支持一个图像，而且只能默认画在字符串的前面。

 

2，在定制Item的时候，是基于Cell来画制的，什么是Cell，如果一个Table有2列3行，那么它就有6个Cell。

 

3，定制Item是由三个事件完成的，SWT.MeasureItem，SWT.EraseItem和SWT.PaintItem。

· SWT.MeasureItem: allows a client to specify the dimensions of a cell's content【长宽】

· SWT.EraseItem: allows a client to custom draw a cell's background and/or selection, and to influence whether the cell's foreground should be drawn【背景、选择时的处理、是否画默认的前景】

· SWT.PaintItem: allows a client to custom draw or augment a cell's foreground and/or focus rectangle【自己画或者增加前景】

 1， SWT.MeasureItem

1，SWT.MeasureItem是第一调用的用户定制事件。

2，SWT.MeasureItem中控制的content size而不是cell size，因为cell size包括了额外的装饰如checkboxes or tree indentation

SWT.MeasureItem事件预定的变量：

· item: the item

· index: the column index of item to be measured

· width: the default content width that the table would use if it were to draw the cell itself, based on its text, image, and checkbox

· height: the default content height that the table would use, based on the height of all of its items

· gc: a GC that is configured with the cell's font, which can be useful for performing string measurements

 

 3，例子

  

public class Snippet271 {

public static void main(String[] args) {

Display display = new Display();

Shell shell = new Shell(display);

shell.setBounds(10,10,150,150);

shell.setLayout(new FillLayout());

 

Table table = new Table(shell, SWT.NONE);

table.setLinesVisible(true);

for (int i = 0; i<3; i++) {

new TableItem(table, SWT.NONE).setText("item " + i);

}

table.addListener(SWT.MeasureItem, new Listener() {

public void handleEvent(Event event) {

event.height = event.gc.getFontMetrics().getHeight() * 2;

event.width *=  2;

}

});

shell.open();

while (!shell.isDisposed()) {

if (!display.readAndDispatch()) display.sleep();

}

display.dispose();

}

}

 

 

 
 

 程序中设置了Item的高度为gc字体高度的两倍，宽度为本来宽度的两倍。

  

 

这个是不改变Item高和宽的情况。

4，利用SWT.MeasureItem 改变Item的宽和高的有如下的限制：

a，现在宽和高时不可以缩小到比默认的小的，只能放大，不能缩小。

b，所有的Item在一个表格或一个Tree中，只有一个大小的高，增大一个，增大所有。

c，对于已经设置了宽度的column，SWT.MeasureItem 不起作用，在column调用Pack的时候，起作用。

例子：

 

public class Snippet272 {

public static void main(String[] args) {

Display display = new Display(); 

Shell shell = new Shell(display);

shell.setBounds(10,10,400,200);

Table table = new Table(shell, SWT.NONE);

table.setBounds(10,10,350,150);

table.setHeaderVisible(true);

table.setLinesVisible(true);

final TableColumn column0 = new TableColumn(table, SWT.NONE);

column0.setWidth(100); column0.setText("col1");

final TableColumn column1 = new TableColumn(table, SWT.NONE);

column1.setWidth(100); column1.setText("col2");

column0.addListener(SWT.Selection, new Listener() {

public void handleEvent(Event event) {

column0.pack();

}

});

for (int i = 0; i < 5; i++) {

TableItem item = new TableItem(table, SWT.NONE);

item.setText(0, "item " + i + " col 0");

item.setText(1, "item " + i + " col 1");

}

table.addListener(SWT.MeasureItem, new Listener() {

public void handleEvent(Event event) {

event.width *= 2;

}

});

 

shell.open();

while (!shell.isDisposed()) {

if (!display.readAndDispatch()) display.sleep();

}

display.dispose();

}

}

 

 

 


 
  

col1只用在点击时调用column0.pack()，SWT.MeasureItem中定义的宽带加倍才起作用。

 

2，SWT.EraseItem 

SWT.EraseItem是被调用的第二个事件，这个事件是在画背景前调用。背景包括背景和选择背景，这个事件允许用户画背景和选择背景。

该事件的预定义的变量：

· item: the item【事件的源】

· index: the column index of item being drawn

· x, y: the table-relative co-ordinates of the top-left corner of the cell

· width, height: the width and height of the full cell, or the content width of the cell if the table has no columns; if these values were previously set by an SWT.MeasureItem listener then they are the same here 

· gc: the GC configured with the default foreground, background, font and clipping for the cell

detail: the logical OR of one or more of the following bits, indicating what will be drawn by default: 

 

· SWT.FOREGROUND: this bit will be set if the default cell foreground will be drawn once the background has been drawn (default is true)【我将这里理解为要不要完全由自己来画】

· SWT.BACKGROUND: this bit will be set if either a cell-specific or item-specific background color will be drawn for this cell (ie.- a color has previously been set with either TableItem.setBackground(Color) or TableItem.setBackground(int, Color))

· SWT.SELECTED: this bit will be set if the selection will be drawn for this cell, implying that this item is selected

· SWT.FOCUSED: this bit will be set if the focus rectangle will be drawn for this cell, implying that this item is the focus item in the table

· SWT.HOT: (@since 3.3) this bit will be set if the mouse hover background will be drawn for this cell (not all platforms draw this)

 

doit: this boolean indicates whether the table will do the drawing specified in the detail field once this listener has completed (default is true)

 

 例子：

 

public class Example3 {

public static void main(String[] args) {

Display display = new Display(); 

Shell shell = new Shell(display);

final Color red = display.getSystemColor(SWT.COLOR_RED);

final Color yellow = display.getSystemColor(SWT.COLOR_YELLOW);

final Table table = new Table(shell, SWT.FULL_SELECTION);

table.setHeaderVisible(true);

new TableColumn(table, SWT.NONE).setWidth(100);

new TableColumn(table, SWT.NONE).setWidth(100);

new TableColumn(table, SWT.NONE).setWidth(100);

for (int i = 0; i < 5; i++) {

TableItem item = new TableItem(table, SWT.NONE);

item.setText(0, "item " + i + " col 0");

item.setText(1, "item " + i + " col 1");

item.setText(2, "item " + i + " col 2");

}

table.addListener(SWT.EraseItem, new Listener() {

public void handleEvent(Event event) {

event.detail &= ~SWT.HOT;

if ((event.detail & SWT.SELECTED) == 0) return; /* item not selected */

int clientWidth = table.getClientArea().width;

GC gc = event.gc;

Color oldForeground = gc.getForeground();

Color oldBackground = gc.getBackground();

gc.setForeground(red);

gc.setBackground(yellow);

gc.fillGradientRectangle(event.x, event.y, event.width, event.height, false);

gc.setForeground(oldForeground);

gc.setBackground(oldBackground);

event.detail &= ~SWT.SELECTED;

}

});

 

table.pack();

shell.pack();

shell.open();

while (!shell.isDisposed()) {

if (!display.readAndDispatch()) display.sleep();

}

display.dispose();

}

}

 

 

 
 实现了选择的在Item中，画上一个渐变的背景色。

这里要注意：

a，不能用event.detail==SWT.SELECTED的方法来判断有没有被选择上，这里detail可能好多位有效。

b，处理完最好要取消SWT.SELECTED事件，event.detail &= ~SWT.SELECTED取消，要不然默认的处理SELECTED的事件还是要被调用。

c，这里的gc.fillGradientRectangle(0, event.y, clientWidth, event.height, false);坐标用的0和clientWidth，如果用gc.fillGradientRectangle(event.x, event.y, event.width, event.height, false);就成了下图的效果，想想就知道了，EraseItem事件是针对每一个cell，这样就是三个独立的cell画了三次，实际上上面也是画了三次，只不过都是重复了。

 
 

 

再一个画背景的例子：

 

public class Snippet273 {

public static void main(String[] args) {

final String[] MONTHS = {

"Jan", "Feb", "Mar", "Apr", "May", "Jun",

"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"

};

final int[] HIGHS = {-7, -4, 1, 11, 18, 24, 26, 25, 20, 13, 5, -4};

final int[] LOWS = {-15, -13, -7, 1, 7, 13, 15, 14, 10, 4, -2, -11};

final int SCALE_MIN = -30; final int SCALE_MAX = 30;

final int SCALE_RANGE = Math.abs(SCALE_MIN - SCALE_MAX);

 

Display display = new Display();

Shell shell = new Shell(display);

shell.setBounds(10,10,400,350);

shell.setText("Ottawa Average Daily Temperature Ranges");

final Color blue = display.getSystemColor(SWT.COLOR_BLUE);

final Color white = display.getSystemColor(SWT.COLOR_WHITE);

final Color red = display.getSystemColor(SWT.COLOR_RED);

// final Image parliamentImage = new Image(display, "./parliament.jpg");

final Table table = new Table(shell, SWT.NONE);

table.setHeaderVisible(true);

table.setLinesVisible(true);

table.setBounds(10,10,350,300);

// table.setBackgroundImage(parliamentImage);

for (int i = 0; i < 12; i++) {

TableItem item = new TableItem(table, SWT.NONE);

item.setText(MONTHS[i] + " (" + LOWS[i] + "C..." + HIGHS[i] + "C)");

}

final int clientWidth = table.getClientArea().width;

 

table.addListener(SWT.MeasureItem, new Listener() {

public void handleEvent(Event event) {

int itemIndex = table.indexOf((TableItem)event.item);

int rightX = (HIGHS[itemIndex] - SCALE_MIN) * clientWidth/SCALE_RANGE;

event.width = rightX;

}

});

table.addListener(SWT.EraseItem, new Listener() {

public void handleEvent(Event event) {

int itemIndex = table.indexOf((TableItem)event.item);

int leftX = (LOWS[itemIndex] - SCALE_MIN) * clientWidth/SCALE_RANGE;

int rightX = (HIGHS[itemIndex] - SCALE_MIN) * clientWidth/SCALE_RANGE;

GC gc = event.gc;

Rectangle clipping = gc.getClipping();

clipping.x = leftX;

clipping.width = rightX - leftX;

gc.setClipping(clipping);

 

Color oldForeground = gc.getForeground();

Color oldBackground = gc.getBackground();

gc.setForeground(blue);

gc.setBackground(white);

gc.fillGradientRectangle(event.x, event.y, event.width/2, event.height, false);

gc.setForeground(white);

gc.setBackground(red);

gc.fillGradientRectangle(

event.x + event.width/2, event.y, event.width/2, event.height, false);

gc.setForeground(oldForeground);

gc.setBackground(oldBackground);

event.detail &= ~SWT.BACKGROUND;

event.detail &= ~SWT.HOT;

}

});

shell.open();

while (!shell.isDisposed()) {

if (!display.readAndDispatch()) display.sleep();

}

// parliamentImage.dispose();

display.dispose();

}

}

 

 
这个程序画了渥太华的12个月的温度情况，画的非常的逼真啊。

 画法就是每一列的长度为【(HIGHS[itemIndex] - SCALE_MIN) * clientWidth/SCALE_RANGE;】，画的时候把gc中设置一个clipping，这样就只有这个回形针区域可以画上去了。然后两段都是渐进第一段蓝色到白色渐进，第二段是白色到红色渐进，蓝色表示冷，红色表示热了。还是比较形象的。

 

 3，SWT.PaintItem 

这个事件在默认的前景已经画好后，再调用。

这个事件的预定义的变量有：

· item: the item

· index: the column index of item being drawn

· x, y: the table-relative co-ordinates of the top-left corner of the cell's content (ie.- its image or text)

· width, height: the width and height of the cell's content; if these values were previously set by an SWT.MeasureItem listener then they are the same here

· gc: the GC configured with the default foreground, background, font and clipping for the cell

· detail: the logical OR of zero or more of the following bits: 

o SWT.SELECTED: this bit will be set if the item is selected

o SWT.FOCUSED: this bit will be set if the item is the table's focus item

o SWT.HOT: (@since 3.3) this bit will be set if the mouse hover background will be drawn for this cell (not all platforms draw this)

例子：

 

public class Snippet220 {

public static void main(String [] args) {

Display display = new Display();

Shell shell = new Shell(display);

shell.setBounds(10, 10, 350, 200);

Image xImage = new Image (display, 16, 16);

GC gc = new GC(xImage);

gc.setForeground(display.getSystemColor(SWT.COLOR_RED));

gc.drawLine(1, 1, 14, 14);

gc.drawLine(1, 14, 14, 1);

gc.drawOval(2, 2, 11, 11);

gc.dispose();

final int IMAGE_MARGIN = 2;

final Tree tree = new Tree(shell, SWT.CHECK);

tree.setBounds(10, 10, 300, 150);

TreeItem item = new TreeItem(tree, SWT.NONE);

item.setImage(xImage);

item.setText("root item");

for (int i = 0; i < 4; i++) {

TreeItem newItem = new TreeItem(item, SWT.NONE);

newItem.setText("descendent " + i);

if (i % 2 == 0) {

newItem.setData(xImage);

}

newItem.setImage(xImage);

item.setExpanded(true);

item = newItem;

}

 

tree.addListener(SWT.MeasureItem, new Listener() {

public void handleEvent(Event event) {

TreeItem item = (TreeItem)event.item;

Image trailingImage = (Image)item.getData();

if (trailingImage != null) {

event.width += trailingImage.getBounds().width + IMAGE_MARGIN;

}

}

});

tree.addListener(SWT.PaintItem, new Listener() {

public void handleEvent(Event event) {

TreeItem item = (TreeItem)event.item;

Image trailingImage = (Image)item.getData();

if (trailingImage != null) {

int x = event.x + event.width + IMAGE_MARGIN;

int itemHeight = tree.getItemHeight();

int imageHeight = trailingImage.getBounds().height;

int y = event.y + (itemHeight - imageHeight) / 2;

event.gc.drawImage(trailingImage, x, y);

}

}

});

 

shell.open();

while (!shell.isDisposed()) {

if (!display.readAndDispatch()) display.sleep();

}

xImage.dispose();

display.dispose();

}

}

 

 

 

 

在Item的后面，画图像。

可不可完全由我们来画，不好默认的呢？

下面例子：

 

public class Snippet231 {

public static void main(String [] args) {

final int COLUMN_COUNT = 4;

final int ITEM_COUNT = 8;

final int TEXT_MARGIN = 3;

Display display = new Display();

Shell shell = new Shell(display);

final Table table = new Table(shell, SWT.FULL_SELECTION);

table.setHeaderVisible(true);

table.setLinesVisible(true);

for (int i = 0; i < COLUMN_COUNT; i++) {

new TableColumn(table, SWT.NONE);

}

for (int i = 0; i < ITEM_COUNT; i++) {

TableItem item = new TableItem(table, SWT.NONE);

for (int j = 0; j < COLUMN_COUNT; j++) {

String string = "item " + i + " col " + j;

if ((i + j) % 3 == 1) {

string +="\nnew line1";

}

if ((i + j) % 3 == 2) {

string +="\nnew line1\nnew line2";

}

item.setText(j, string);

}

}

 

table.addListener(SWT.MeasureItem, new Listener() {

public void handleEvent(Event event) {

TableItem item = (TableItem)event.item;

String text = item.getText(event.index);

Point size = event.gc.textExtent(text);

event.width = size.x + 2 * TEXT_MARGIN;

event.height = Math.max(event.height, size.y + TEXT_MARGIN);

}

});

table.addListener(SWT.EraseItem, new Listener() {

public void handleEvent(Event event) {

event.detail &= ~SWT.FOREGROUND;

}

});

table.addListener(SWT.PaintItem, new Listener() {

public void handleEvent(Event event) {

TableItem item = (TableItem)event.item;

String text = item.getText(event.index);

/* center column 1 vertically */

int yOffset = 0;

if (event.index == 1) {

Point size = event.gc.textExtent(text);

yOffset = Math.max(0, (event.height - size.y) / 2);

}

event.gc.drawText(text, event.x + TEXT_MARGIN, event.y + yOffset, true);

}

});

 

for (int i = 0; i < COLUMN_COUNT; i++) {

table.getColumn(i).pack();

}

table.pack();

shell.pack();

shell.open();

while (!shell.isDisposed()) {

if (!display.readAndDispatch()) display.sleep();

}

display.dispose();

}

}

 

 

 
  

 表格中width取字符串宽加空白边框，height是字符串高加空白边框。这里的高和宽都是有GC计算的。

SWT.EraseItem事件取消的SWT.FOREGROUND事件，完全有我们自己去画了，画的时候用event.gc.drawText就行了。注意最后的column.pack()是必须的，前面没有设置column的宽度，调用pack才会计算column的宽度。

 

 文章看完了，比较的长，看几遍，有些问题还没有拓展。在网页上编辑，代码总是乱，没有办法只有在word编辑了再考上去了。

原文链接：http://www.eclipse.org/articles/article.php?file=Article-CustomDrawingTableAndTreeItems/index.html