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";
}
}
width="636" height="384">
width="483" height="163" source="@Embed(source='img/portTest.png')"
alpha="1.0" />
width="47" height="29" source="@Embed(source='img/greenPort.PNG')"
alpha="1.0" mouseMove="showPortInfor(event)" toolTip="端口状态:可用端口编号:1222 端口名称:dkdfdk"/>
width="80" height="66" source="img/greenPort.PNG" mouseMove="show(event)" verticalAlign="middle" x="95" y="239"/>
width="80" height="66" source="img/redPort.PNG" mouseMove="show(event)" verticalAlign="middle" id="img1" x="221" y="233"/>
width="80" height="66" source="img/brownPort.PNG" mouseMove="show(event)" verticalAlign="middle" x="353" y="234"/>
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)函数;
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";
}}
分享到:
相关推荐
9. **移动设备支持**:虽然Flex4主要是为桌面浏览器设计的,但通过Adobe AIR,开发者可以将Flex应用程序部署到移动设备上,支持多种操作系统,如iOS和Android。 10. **错误处理和调试**:Flex4提供了更强大的错误...
- **LED指示灯**:用于显示当前的状态或提醒。 - **目标追踪**:设定每日步数目标或其他健身目标。 - **睡眠模式**:自动追踪睡眠质量,包括深度睡眠和浅度睡眠阶段。 - **充电与更新**:定期充电以保持正常使用,并...
- **多屏幕大小与 DPI 支持**:说明如何确保应用能在不同分辨率和像素密度的设备上正常显示。 #### 5. 文本处理 - **文本使用与屏幕键盘支持**:探讨如何有效地展示文本内容,并支持用户通过屏幕键盘输入文本。 - *...
使用Flex的DateTimeFormatter和NumberFormatter,可以轻松实现日期和时间的本地化显示。 4. **可用性和响应式设计**:确保控件在不同屏幕尺寸和设备上都能正常工作,可以使用Flex的响应式布局和自适应组件大小的...
- **SDK 配置**:提供了配置 Flex SDK 以支持不同平台和设备的具体步骤。 ##### 3. 应用架构 - **应用开发阶段**:概述了从设计到部署各个阶段的关键考虑因素。 - **应用结构**:详细介绍了 Flex 应用程序的基本...
Flex是一种开源框架,用于构建高质量的Web应用程序,并将其部署到桌面浏览器和移动设备上。Flex结合了强大的编程语言ActionScript 3.0以及MXML标记语言,支持创建具有丰富用户体验的应用程序。Flex开发遵循XML的标准...
本资源"Flex分页代码by whaosoft"提供了一个使用Flex实现分页功能的示例代码,适用于创建可扩展且响应式的网页应用。 Flex是一种布局模式,通常指Adobe Flex,它基于ActionScript和MXML,用于构建富互联网应用程序...
当出现警告或错误时,LED指示灯会显示相应的状态,帮助快速定位问题。此外,用户手册提供了详细的故障代码列表,每个代码对应一个具体的故障类型,指导用户进行有效的故障排查和修复。 #### 能源管理与节能特性 ...
- **支持多个屏幕大小和DPI值**:强调了适应不同设备屏幕特性的必要性,确保应用在各种设备上都能有良好的显示效果。 #### 文本章节 - **使用文本**:涉及了如何在移动应用中正确使用文本,包括对屏幕键盘的支持和...
3. 配置文件:定义了如何连接到网络设备,以及如何解析和显示拓扑数据的设置。 4. 数据库脚本:如果应用与数据库交互,可能包含初始化数据库或填充示例数据的SQL脚本。 5. 运行时库:FLEX SDK的部分,包括编译器和...
因此,开发者需要确保在运行Flex应用时,用户的设备已经连接到了互联网,否则无法获取到天气预报信息。 综上所述,这个项目涵盖了以下知识点: 1. Adobe Flex框架的基本使用,包括创建Flex Web项目、编写...
在本项目"jquery图文列表鼠标点击下拉显示文字说明内容.zip"中,主要涉及的是一个基于jQuery实现的交互式图文列表。这个功能的核心是利用JavaScript(特别是jQuery库)来实现用户鼠标点击时触发下拉显示更多的文字...
【横向标签切换加说明】是一种常见的用户界面设计元素,它在网页或应用程序中用于组织和切换不同的内容区域。这种设计模式通常将多个相关的面板或页面集合到一个有限的空间内,通过横向滑动或点击标签来切换显示内容...
随着互联网和移动设备的发展,连连看游戏也逐渐从桌面版发展到网页版和移动端,FLEX作为一种强大的富互联网应用程序开发框架,能够实现丰富的用户界面和交互体验,是开发连连看游戏的理想选择。 1.3 定义 在此项目...
综上所述,实现FlexViewer中的“框框滑入滑出”涉及到的技术包括Flex组件库的使用、动画效果的创建、状态管理和ActionScript编程。通过这些技术的结合,可以为用户提供更加直观和动态的交互体验。在提供的压缩包文件...
Flex布局,全称为“Flexible Box”,是一种灵活的盒模型布局方式,适用于移动设备和响应式设计。在小程序中,使用`display: flex`可以使容器内的子元素在行或列方向上进行灵活排列、对齐和分配空间。通过设置`flex-...
3. **布局属性**:`display`属性控制元素的显示方式,如`block`、`inline`、`flex`等。`position`(static、relative、absolute、fixed)定义元素的位置关系,`width`和`height`设置尺寸。 4. **响应式设计**:`@...
耳机充电可以通过打开充电盒,将耳机放入并盖上盖子完成,充电盒上的LED指示灯会显示耳机和充电盒的电池状态。当耳机需要充电时,放入充电盒约20分钟即可获得1小时的播放时间。 连接方面,耳机可以方便地连接到电脑...