设备状态显示的flex实现说明

设备状态显示的flex实现说明

Author: Allan（吴进刚）

做这个图还是费了点心思，因为网上实在没有什么例子可以借鉴，我感觉flex应该是有这样的组件可用才对，但是我查了半天的资料，真是枉费心机，怎么也没找到，只有自己想办法解决了。

怎么样让设备端口的颜色自己闪动，自己变色了，乍一看比较难下手，可是仔细想想却有两个办法可以解决，1：在要动态显示的地方把它圈住，动态的修改这个地方的background colour；2：在要动态显示的地方做一个图片，然后动态的换这张图片就好了。

在实验第一方案的时候确实是可以也成功了，可是要想圈个不规则的圈就比较麻烦了，而第二种方案也成功了，但他有个好处就是按照你所需要的样子，任意的改变，圆形，椭圆行，或者水晶头的形状，这样毫无疑问选择了第二种方案。

 

首先请看代码如下：

//显示图片   

private function show(e:Event):void{   

var s:String=e.currentTarget.source;  

Alert.show(s);

this.imgp.source=s;  

if(s.indexOf("red") > 0) {

imgp.toolTip="端口状态：不可用/n端口编号：1222 /n 端口名称：dkdfdk";

} else if(s.indexOf("green") > 0) {

imgp.toolTip="端口状态：可用/n端口编号：1222 /n 端口名称：dkdfdk";

}else {

imgp.toolTip="端口状态：未知/n端口编号：1222 /n 端口名称：dkdfdk";

}

}  

<s:Panel x="164" y="135" width="636" height="384">

<mx:Image id="imgBag" x="77" y="62" width="483" height="163" source="@Embed(source='img/portTest.png')" 

  alpha="1.0"   />

<mx:Image id="imgp" x="119" y="109" width="47" height="29" source="@Embed(source='img/greenPort.PNG')" 

  alpha="1.0"   mouseMove="showPortInfor(event)" toolTip="端口状态：可用端口编号：1222   端口名称：dkdfdk"/>

 

<mx:Image width="80" height="66" source="img/greenPort.PNG" mouseMove="show(event)" verticalAlign="middle" x="95" y="239"/>

<mx:Image width="80" height="66" source="img/redPort.PNG" mouseMove="show(event)"  verticalAlign="middle" id="img1" x="221" y="233"/>

<mx:Image width="80" height="66" source="img/brownPort.PNG" mouseMove="show(event)"  verticalAlign="middle" x="353" y="234"/>

</s:Panel>

Id为imgBag的是背景图片，是用来展示设备的；

Id为imgp 的是需要替换的图片；

最下面三个是用来去替换imgp的图片，mouseMove="show(event)" 当鼠标放到图片上面的时候，调用show（event）函数，然后把这张图片替换之前的那张。这样就实现了动态展现设备的状态；

 

最后说明如何利用blazeds与 Java server 通信（其实和动态曲线去的动态实现是一样的），实时展现后台的数据设备状态图：

请看代码：

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

 

<mx:ChannelSet id="cs">

<mx:AMFChannel url="http://127.0.0.1:8888/messagebroker/amf"/>

</mx:ChannelSet>

<mx:RemoteObject id="graphTest2FeedStarter" destination="graphTest2FeedStarter" channelSet="{cs}"/>

 

<mx:ChannelSet id="cs2">

<!-- <mx:StreamingAMFChannel url="http://127.0.0.1:8888/messagebroker/streamingamf"/> -->

<mx:AMFChannel url="http://127.0.0.1:8888/messagebroker/amflongpolling"/>

<mx:AMFChannel url="http://127.0.0.1:8888/messagebroker/amfpolling"/>

</mx:ChannelSet>

 

<mx:Consumer id="consumer" destination="graphTest2-feed" channelSet="{cs2}" 

 message="messageHandler(event.message)"/>

</fx:Declarations>

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）函数；

import mx.messaging.messages.IMessage;

 

private function messageHandler(message:IMessage):void {

 

if (parseInt(message.body.toString()) <= 15) {

//Alert.show(message.body.toString());

this.imgp.source="img/redPort.PNG";

imgp.toolTip="端口状态：不可用/n端口编号：1111 /n 端口名称：dkdfdk";

} else if ((15< parseInt(message.body.toString())) && (parseInt(message.body.toString())<= 35)) {

this.imgp.source="img/greenPort.PNG";

imgp.toolTip="端口状态：可用/n端口编号：1111 /n 端口名称：dkdfdk";

}else {

this.imgp.source="img/brownPort.PNG";

imgp.toolTip="端口状态：未知/n端口编号：1111 /n 端口名称：dkdfdk";

} }