UI定制总结

news/2024/7/8 5:27:36 标签: ui, jcomponent, string, class, null, 图形
class="baidu_pl">
class="article_content clearfix">
class="htmledit_views">

TWaver本身提供的丰富的设置选项,可以帮助我们快速实现各种绚丽的效果，但是在某些情况下,我们需要在网元上绘制一些图形来表示某种状态或业务信息，没问题，只需要一点点2D知识可以很容易实现这样的需求。

假设一种需求(仅仅是假设)：监控交换机各个端口的传输速度，并用柱状图动态显示。效果图如下：class="alignnone size-full wp-image-4586" title="demo" src="http://twaver.servasoft.com/wp-content/uploads/2012/07/图片1.png" alt="" width="555" height="332" />

大家可能奇怪，怎么放了三个一样的网元呢?答案是：我使用了三种方式来实现这个效果!可能还有别的方式可以实现，所谓条条大路通罗马是也！这也是TWaver的强大之处， 为我们留下了一扇门，门后就是神奇的"纳尼亚王国"，本文的目的就是把这扇门的钥匙交给你。

我们从最简单的说起，TWaver提供了BarChart表示柱状图，我们可以把BarChart通过ComponentAttachment挂到Node上，这是最简单的方式，之所以说它简单，因为我们不需要使用2D绘制( 其实2D也不难)，仅仅需要监听Node的属性变化然后更新BarChart即可。

ComponentAttachment上允许添加任何JComponent组件(JPanel，JButton，JLabel，JCheckbox，etc.)，BarChart是JComponent的子类，自然也可以被添加。ComponentAttachment是个抽象类，需要定制一个PortRateAttachment继承ComponentAttachment

注册Attachment

class="language-javascript">TUIManager.registerAttachment("PortRateAttachment",PortRateAttachment.class);


class="language-javascript">node1.addAttachment("PortRateAttachment");
node1.putAttachmentPosition(TWaverConst.POSITION_RIGHT);
node1.putAttachmentXOffset(-20);

class="language-javascript">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 class="tags" href="/tags/UI.html" title=ui>ui) {
		super(name, class="tags" href="/tags/UI.html" title=ui>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.class="tags" href="/tags/UI.html" title=ui>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().subclass="tags" href="/tags/STRING.html" title=string>string(3))*100);
			}else if("UP:p2".equals(evt.getPropertyName())){
				p2.putChartValue(Double.parseDouble(evt.getNewValue().toString().subclass="tags" href="/tags/STRING.html" title=string>string(3))*100);
			}else if("UP:p3".equals(evt.getPropertyName())){
				p3.putChartValue(Double.parseDouble(evt.getNewValue().toString().subclass="tags" href="/tags/STRING.html" title=string>string(3))*100);
			}
		}

	}
}

在Attachment中添加一个BarChart，并用三个Node表示chart的三个组，在elementPropertyChange中监控Node属性变化并同步更新到这三个Node上即可。

所有的代码已经加上注释，就不过多解释了

TWaver还提供了一种IconAttachment，允许我们将一个Icon作为附件挂载在Node上，我们可以在Icon上画任何内容，所以这也是一种思路(参考了TWaver官方demo,InstrumentDemo，为避免版权纠纷，特此说明 :-D )。我们定制一个PortRateIconAttachment从IconComponentAttachment继承

class="language-javascript">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().subclass="tags" href="/tags/STRING.html" title=string>string(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;
	}

}

注意paintBody方法，几乎跟前面的paintIcon是一致的。注意右侧的PropertySheet，我们也为其实现了一个Renderer绘制进度条，实际上，通过Renderer，我们可以在PropertySheet绘制任何图形或组件。通过 ElementAttribute指定Renderer

class="language-javascript">ElementAttribute att=new ElementAttribute();
att.setRendererClass(PortRateRenderer.class.getName());

Renderer类

class="language-javascript">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.subclass="tags" href="/tags/STRING.html" title=string>string(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的源代码见原文最下方。


http://www.niftyadmin.cn/n/1765840.html

相关文章

让Swing表格支持远程后台数据翻页

让Swing表格支持远程后台数据翻页

TWaver Java不但提供了TTable、TElementTable这些表格组件&#xff0c;而且还提供了表格翻页器TPageNavigator。让表格和翻页器结合工作&#xff0c;可以立刻做出一个非常标准的可翻页的表格界面&#xff0c;如下图。 要让这两个组件一起工作&#xff0c;直接这样new一个实例&a…
阅读更多...
详解JMeter正则表达式

详解JMeter正则表达式

详解JMeter正则表达式&#xff08;1&#xff09; 1&#xff0e;概览 JMeter中包含范本匹配软件Apache Jakarta ORO 。在Jakarta网站上有一些关于它的文档&#xff0c;例如a summary of the pattern matching characters &#xff1a; http://jakarta.apache.org/oro/api/org/ap…
阅读更多...
GeoServer快速发布地图数据

GeoServer快速发布地图数据

TWaver GIS提供了WMS的客户端支持&#xff0c;可以访问地图服务器的相关服务。在平时的中小项目中&#xff0c;购买一套GIS服务实在是一个很大的成本负担&#xff0c;在不降低地图发布能力的前提下&#xff0c;减少成本支出成为各个项目的一个重要方面。在用户手中已经持有地图…
阅读更多...
python 负数转为无符号整数

python 负数转为无符号整数

>>> a -1 >>> a &0xffffffff >>> a 4294967295L 转载于:https://www.cnblogs.com/jeesezhang/p/3443240.html
阅读更多...
利用Layer优化Group显示

利用Layer优化Group显示

每天逛逛TWaver论坛已经成为一种习惯&#xff0c;今天看到一个非常有意思的帖子&#xff1a;http://twaver.servasoft.com/forum/viewtopic.php?f14&t3129 当两个Group重叠时&#xff0c;Group中的Node会始终显示在两个Group之上&#xff0c;呈现结果如下图(引用了帖子中…
阅读更多...
MATLAB-ginput函数问题

MATLAB-ginput函数问题

functions&#xff1a;Graphical input from mouse or cursor ginput提供了一个十字光标使我们能更精确的选择我们所需要的位置&#xff0c;并返回坐标值。函数调用形式为&#xff1a; [x,y] ginput(n) [x,y] ginput [x,y,button] ginput(...) 对于[x,y] ginput(n)&#x…
阅读更多...
Unicode 环境下的字符串的操作

Unicode 环境下的字符串的操作

1.CString转int int i _ttoi( str ); 2.保存中文和读取中文&#xff1a; CSdtioFile在Unicode环境下默认是不支持中文的&#xff0c;若需要存储和读取中文需要设置代码页&#xff1a; #include "locale.h" ::_wsetlocale( LC_ALL, _T("chs") ); // 设置当前…
阅读更多...
自定义Background

自定义Background

TWaver提供了ImageBackground来为TNetwork设置背景&#xff0c;ImageBackground可以设置为颜色&#xff0c;渐变色&#xff0c;图片或纹理&#xff0c;但是如果想设置多张图片为背景&#xff0c;或者需要准确的定位背景&#xff08;比如居中&#xff09;&#xff0c;ImageBackg…
阅读更多...
最新文章

Copyright @ 2022~2023