设备状态显示的flex实现说明
2010年08月10日
Author: Allan(吴进刚)
做这个图还是费了点心思,因为网上实在没有什么例子可以借鉴,我感觉flex应该是有这样的组件可用才对,但是我查了半天的资料,真是枉费心机,怎么也没找到,只有自己想办法解决了。
怎么样让设备端口的颜色自己闪动,自己变色了,乍一看比较难下手,可是仔细想想却有两个办法可以解决,1:在要动态显示的地方把它圈住,动态的修改这个地方的background colour;2:在要动态显示的地方做一个图片,然后动态的换这张图片就好了。
在实验第一方案的时候确实是可以也成功了,可是要想圈个不规则的圈就比较麻烦了,而第二种方案也成功了,但他有个好处就是按照你所需要的样子,任意的改变,圆形,椭圆行,或者水晶头的形状,这样毫无疑问选择了第二种方案。
首先请看代码如下:
//显示图片
[b]private[/b] [b]function[/b] show(e:Event):[b]void[/b]{
[b]var[/b] s:String=e.currentTarget.source;
Alert.show(s);
[b]this[/b].imgp.source=s;
[b]if[/b](s.indexOf([b]"red"[/b]) > 0) {
imgp.toolTip=[b]"端口状态:不可用\n端口编号:1222 \n 端口名称:dkdfdk"[/b];
} [b]else[/b] [b]if[/b](s.indexOf([b]"green"[/b]) > 0) {
imgp.toolTip=[b]"端口状态:可用\n端口编号:1222 \n 端口名称:dkdfdk"[/b];
}[b]else[/b] {
imgp.toolTip=[b]"端口状态:未知\n端口编号:1222 \n 端口名称:dkdfdk"[/b];
}
}
Id为imgBag的是背景图片,是用来展示设备的;
Id为imgp 的是需要替换的图片;
最下面三个是用来去替换imgp的图片,mouseMove="show(event)" 当鼠标放到图片上面的时候,调用show(event)函数,然后把这张图片替换之前的那张。这样就实现了动态展现设备的状态;
最后说明如何利用blazeds与 Java server 通信(其实和动态曲线去的动态实现是一样的),实时展现后台的数据设备状态图:
请看代码:
-->
mx:ChannelSet:定义一组频道;
mx:AMFChannel:定义一个频道;
mx:RemoteObject:定义一个远程对象;
destination="graphTest1FeedStarter":选定一个server定义的对象;
channelSet="{cs}":选定一个频道;
mx:Consumer:订阅目标来接收消息;
destination="graphTest1-feed":选定一个server定义的对象;
channelSet="{cs2}":选定一个频道;
message="messageHandler(event.message)":接收到消息时分派; 下面是分派消息的函数:为设备状态图绑定的数据源testDatas提供实时数据取代上面show(event)函数;
[b]import[/b] mx.messaging.messages.IMessage;
[b]private[/b] [b]function[/b] messageHandler(message:IMessage):[b]void[/b] {
[b]if[/b] (parseInt(message.body.toString()) <= 15) {
//Alert.show(message.body.toString());
[b]this[/b].imgp.source=[b]"img/redPort.PNG"[/b]
;
imgp.toolTip=[b]"端口状态:不可用\n端口编号:1111 \n 端口名称:dkdfdk"[/b];
} [b]else[/b] [b]if[/b] ((15< parseInt(message.body.toString())) && (parseInt(message.body.toString())<= 35)) {
[b]this[/b].imgp.source=[b]"img/greenPort.PNG"[/b]
;
imgp.toolTip=[b]"端口状态:可用\n端口编号:1111 \n 端口名称:dkdfdk"[/b];
}[b]else[/b] {
[b]this[/b].imgp.source=[b]"img/brownPort.PNG"[/b]
;
imgp.toolTip=[b]"端口状态:未知\n端口编号:1111 \n 端口名称:dkdfdk"[/b];
}}
2010年08月10日
Author: Allan(吴进刚)
做这个图还是费了点心思,因为网上实在没有什么例子可以借鉴,我感觉flex应该是有这样的组件可用才对,但是我查了半天的资料,真是枉费心机,怎么也没找到,只有自己想办法解决了。
怎么样让设备端口的颜色自己闪动,自己变色了,乍一看比较难下手,可是仔细想想却有两个办法可以解决,1:在要动态显示的地方把它圈住,动态的修改这个地方的background colour;2:在要动态显示的地方做一个图片,然后动态的换这张图片就好了。
在实验第一方案的时候确实是可以也成功了,可是要想圈个不规则的圈就比较麻烦了,而第二种方案也成功了,但他有个好处就是按照你所需要的样子,任意的改变,圆形,椭圆行,或者水晶头的形状,这样毫无疑问选择了第二种方案。
首先请看代码如下:
//显示图片
[b]private[/b] [b]function[/b] show(e:Event):[b]void[/b]{
[b]var[/b] s:String=e.currentTarget.source;
Alert.show(s);
[b]this[/b].imgp.source=s;
[b]if[/b](s.indexOf([b]"red"[/b]) > 0) {
imgp.toolTip=[b]"端口状态:不可用\n端口编号:1222 \n 端口名称:dkdfdk"[/b];
} [b]else[/b] [b]if[/b](s.indexOf([b]"green"[/b]) > 0) {
imgp.toolTip=[b]"端口状态:可用\n端口编号:1222 \n 端口名称:dkdfdk"[/b];
}[b]else[/b] {
imgp.toolTip=[b]"端口状态:未知\n端口编号:1222 \n 端口名称:dkdfdk"[/b];
}
}
Id为imgBag的是背景图片,是用来展示设备的;
Id为imgp 的是需要替换的图片;
最下面三个是用来去替换imgp的图片,mouseMove="show(event)" 当鼠标放到图片上面的时候,调用show(event)函数,然后把这张图片替换之前的那张。这样就实现了动态展现设备的状态;
最后说明如何利用blazeds与 Java server 通信(其实和动态曲线去的动态实现是一样的),实时展现后台的数据设备状态图:
请看代码:
-->
mx:ChannelSet:定义一组频道;
mx:AMFChannel:定义一个频道;
mx:RemoteObject:定义一个远程对象;
destination="graphTest1FeedStarter":选定一个server定义的对象;
channelSet="{cs}":选定一个频道;
mx:Consumer:订阅目标来接收消息;
destination="graphTest1-feed":选定一个server定义的对象;
channelSet="{cs2}":选定一个频道;
message="messageHandler(event.message)":接收到消息时分派; 下面是分派消息的函数:为设备状态图绑定的数据源testDatas提供实时数据取代上面show(event)函数;
[b]import[/b] mx.messaging.messages.IMessage;
[b]private[/b] [b]function[/b] messageHandler(message:IMessage):[b]void[/b] {
[b]if[/b] (parseInt(message.body.toString()) <= 15) {
//Alert.show(message.body.toString());
[b]this[/b].imgp.source=[b]"img/redPort.PNG"[/b]
;
imgp.toolTip=[b]"端口状态:不可用\n端口编号:1111 \n 端口名称:dkdfdk"[/b];
} [b]else[/b] [b]if[/b] ((15< parseInt(message.body.toString())) && (parseInt(message.body.toString())<= 35)) {
[b]this[/b].imgp.source=[b]"img/greenPort.PNG"[/b]
;
imgp.toolTip=[b]"端口状态:可用\n端口编号:1111 \n 端口名称:dkdfdk"[/b];
}[b]else[/b] {
[b]this[/b].imgp.source=[b]"img/brownPort.PNG"[/b]
;
imgp.toolTip=[b]"端口状态:未知\n端口编号:1111 \n 端口名称:dkdfdk"[/b];
}}