UI定制总结
TWaver本身提供的丰富的设置选项,可以帮助我们快速实现各种绚丽的效果，但是在某些情况下,我们需要在网元上绘制一些图形来表示某种状态或业务信息，没问题，只需要一点点2D知识可以很容易实现这样的需求。
假设一种需求(仅仅是假设)：监控交换机各个端口的传输速度，并用柱状图动态显示。效果图如下： 
大家可能奇怪，怎么放了三个一样的网元呢?答案是：我使用了三种方式来实现这个效果!可能还有别的方式可以实现，所谓条条大路通罗马是也！这也是TWaver的强大之处， 为我们留下了一扇门，门后就是神奇的"纳尼亚王国"，本文的目的就是把这扇门的钥匙交给你。
我们从最简单的说起，TWaver提供了BarChart表示柱状图，我们可以把BarChart通过ComponentAttachment挂到Node上，这是最简单的方式，之所以说它简单，因为我们不需要使用2D绘制( 其实2D也不难)，仅仅需要监听Node的属性变化然后更新BarChart即可。
ComponentAttachment上允许添加任何JComponent组件(JPanel，JButton，JLabel，JCheckbox，etc.)，BarChart是JComponent的子类，自然也可以被添加。ComponentAttachment是个抽象类，需要定制一个PortRateAttachment继承ComponentAttachment
注册Attachment
TUIManager.registerAttachment("PortRateAttachment",PortRateAttachment.class);
node1.addAttachment("PortRateAttachment");
node1.putAttachmentPosition(TWaverConst.POSITION_RIGHT);
node1.putAttachmentXOffset(-20);
public class PortRateAttachment extends ComponentAttachment {
Node p1=new Node();
Node p2=new Node();
Node p3=new Node();
private BarChart barChart=new BarChart();
public PortRateAttachment(String name, ElementUI ui) {
super(name, ui);
TDataBox box=new TDataBox();
barChart.setDataBox(box);
barChart.setShadowOffset(0);//取消阴影
barChart.setUpperLimit(100);//刻度最大值
barChart.setLowerLimit(0);//刻度最小值
barChart.setYScaleLineVisible(false);//Y轴刻度线不可见
barChart.setXAxisVisible(false);//X轴不可见
barChart.setYAxisVisible(false);//Y轴不可见
barChart.setBundleSize(3);//将三个Node放在一块显示
barChart.setOpaque(false);//背景透明
barChart.setXGap(0);//X轴Margin为0
barChart.setYGap(0);//Y轴Margin为0
barChart.setValueTextVisible(false);//ChartValue不可见
barChart.getLegendPane().setVisible(false);//隐藏LegendPane
//初始化三个Node
p1.putChartValue(0);
p1.putChartColor(PortRateConst.COLORS[0]);
box.addElement(p1);
p2.putChartValue(0);
p2.putChartColor(PortRateConst.COLORS[1]);
box.addElement(p2);
p3.putChartValue(0);
p3.putChartColor(PortRateConst.COLORS[2]);
box.addElement(p3);
this.setComponent(barChart);//将BarChart挂载在Attachment上
this.setBorderVisible(true);//显示Border
this.setBorderColor(Color.gray);//Border颜色
this.setSize(new Dimension(50,50));//设置Attachment大小
this.setPosition(this.element.getAttachmentPosition());//设置Attachment的位置,提前存入Node的ClientProperty
this.setXOffset(this.element.getAttachmentXOffset());//设置Attachment的X轴偏移量,提前存入Node的ClientProperty
}
/*
* 监控Node Property变化并更新到BarChart上
* @see twaver.network.ui.ComponentAttachment#elementPropertyChange(java.beans.PropertyChangeEvent)
*/
@Override
public void elementPropertyChange(PropertyChangeEvent evt) {
super.elementPropertyChange(evt);
if(evt.getNewValue()!=null){
if("UP:p1".equals(evt.getPropertyName())){
p1.putChartValue(Double.parseDouble(evt.getNewValue().toString().substring(3))*100);
}else if("UP:p2".equals(evt.getPropertyName())){
p2.putChartValue(Double.parseDouble(evt.getNewValue().toString().substring(3))*100);
}else if("UP:p3".equals(evt.getPropertyName())){
p3.putChartValue(Double.parseDouble(evt.getNewValue().toString().substring(3))*100);
}
}
}
}
在Attachment中添加一个BarChart，并用三个Node表示chart的三个组，在elementPropertyChange中监控Node属性变化并同步更新到这三个Node上即可。
所有的代码已经加上注释，就不过多解释了
TWaver还提供了一种IconAttachment，允许我们将一个Icon作为附件挂载在Node上，我们可以在Icon上画任何内容，所以这也是一种思路(参考了TWaver官方demo,InstrumentDemo，为避免版权纠纷，特此说明 :-D )。我们定制一个PortRateIconAttachment从IconComponentAttachment继承
public class PortRateIconAttachment extends IconAttachment {
public final static double WIDTH = 40;
public final static double HEIGHT = 50;
public PortRateIconAttachment(String name, ElementUI elementUI) {
super(name, elementUI,new PortRateIcon(elementUI.getElement()));
}
}
class PortRateIcon implements javax.swing.Icon{
private Element element;
public PortRateIcon(Element element){
this.element=element;
}
@Override
public void paintIcon(Component c, Graphics g, int x, int y) {
Graphics2D g2d = (Graphics2D)g;
//计算出柱状图中组数和组宽
final int count = PortRateConst.KEYS.length;
final double width = PortRateIconAttachment.WIDTH / count;
//计算坐标和尺寸,绘制三个矩形代表三个组
for(int i=0; i<count; i++){
double proportion=0;
if(element.getUserProperty(PortRateConst.KEYS[i])!=null)
proportion =Double.parseDouble(element.getUserProperty(PortRateConst.KEYS[i]).toString().substring(3));
g2d.setColor(PortRateConst.COLORS[i]);
g2d.fillRect((int)(x + i * width),
(int)(y + PortRateIconAttachment.HEIGHT * (1- proportion)),
(int)width,(int)(PortRateIconAttachment.HEIGHT * proportion));
}
//绘制边框
g2d.setColor(Color.GRAY);
g2d.setStroke(TWaverConst.BASIC_STROKE);
g2d.drawRect(x, y-1, (int)PortRateIconAttachment.WIDTH, (int)PortRateIconAttachment.HEIGHT);
}
@Override
public int getIconWidth() {
return (int) PortRateIconAttachment.WIDTH;
}
@Override
public int getIconHeight() {
return (int) PortRateIconAttachment.HEIGHT;
}
}
在PortRateIconAttachment中没有任何绘制，仅仅与一个PortRateIcon绑定，绘制工作交给PortRateIcon执行，每当PortRateIconAttachment监听到Node属性变化时就会重绘Icon
在paintIcon方法中，我们最终绘制出了我们需要的动态柱状图。
除了Attachment，重写NodeUI也是一个不错的选择。看我们的第三种方法
我们写了一个SwitchNode继承自Node，重写getUIClassID方法，实际上就是为此Node指定了UI类
PortNodeUI
public class PortNodeUI extends NodeUI {
private Rectangle2D rect=null;
public PortNodeUI(TNetwork network, Node node) {
super(network, node);
}
@Override
public void paintBody(Graphics2D g2d){
super.paintBody(g2d);
final int count = PortRateConst.KEYS.length;
//计算出柱状图中组数和组宽
final double width = 40 / count;
double x=element.getX()+element.getWidth()-20;
double y=element.getY()+20;
//绘制组
for(int i=0; i<count; i++){
double proportion=0;
if(element.getUserProperty(PortRateConst.KEYS[i])!=null)
proportion =Double.parseDouble(element.getUserProperty(PortRateConst.KEYS[i]).toString().substring(3));
g2d.setColor(PortRateConst.COLORS[i]);
g2d.fillRect((int)(x + i * width),
(int)(y + 50 * (1- proportion)),
(int)width, (int)(PortRateIconAttachment.HEIGHT * proportion));
}
//绘制边框
g2d.setColor(Color.GRAY);
g2d.setStroke(TWaverConst.BASIC_STROKE);
g2d.drawRect((int)x, (int)y, (int)PortRateIconAttachment.WIDTH, (int)PortRateIconAttachment.HEIGHT);
}
}
注意paintBody方法，几乎跟前面的paintIcon是一致的。
注意右侧的PropertySheet，我们也为其实现了一个Renderer绘制进度条，实际上，通过Renderer，我们可以在PropertySheet绘制任何图形或组件。
通过 ElementAttribute指定Renderer
ElementAttribute att=new ElementAttribute(); att.setRendererClass(PortRateRenderer.class.getName());
Renderer类
public class PortRateRenderer extends JComponent implements TableCellRenderer {
private Color foreColor;
private double proportion;
@Override
public Component getTableCellRendererComponent(JTable table, Object value,
boolean isSelected, boolean hasFocus, int row, int column) {
if(value!=null){
String strValue=(String)value;
for(int i=0; i<PortRateConst.KEYS.length; i++){
String key = PortRateConst.KEYS[i];
if(strValue.startsWith(key)){
proportion = Double.parseDouble(strValue.substring(key.length() + 1));
foreColor = PortRateConst.COLORS[i];
}
}
}
return this;
}
public void paintComponent(Graphics g){
Graphics2D g2d=(Graphics2D)g;
g2d.setColor(new Color(127,92,128));
g2d.drawRect(1, 1, this.getWidth()-2, this.getHeight()-2);
g2d.setColor(new Color(240,240,240));
g2d.fillRect(2, 2, this.getWidth()-3, this.getHeight()-3);
g2d.setColor(foreColor);
g2d.fillRect(2, 2, (int)(this.getWidth() * proportion), this.getHeight()-3);
}
}
在getTableCellRendererComponent中，我们根据传进Renderer的Value，设置进度条的值和前景色，在paintComponent中就可以使用了。在paintComponent里，首先画一个矩形当作进度条背景，然后覆盖一个矩形当作进度，绘制好边框以后一个进度条就完成了！
最近论坛上有人提出要实现带圆角Title的Group，贴子地址：http://twaver.servasoft.com/forum/viewtopic.php?f=4&t=3091。
帖子里的实现过程是这样的：Group的Label其实是一个LabelAttachment，为Group重新定制了一个LabelAttachment，在LabelAttachment绘制出圆角效果，然后将Group的LabelPosition设置为左上角即可。
圆角绘制的原理是将一个圆角矩形和普通矩形通过Area组合，然后用渐变色填充，具体的代码大家可以去帖子里下载。
这个专题终于可以告一段落了，熟悉TWaver架构以后，再加上一些2d知识，我们可以发挥自己的想象力绘制各种令人惊叹的效果。希望本文能起到抛砖引玉的作用。最后附上文中demo的源代码见原文最下方。
