`
fokman
  • 浏览: 242064 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

flex server push 实现动态图表显示

    博客分类:
  • Flex
阅读更多

参考网上的资料实现重力传感器在图形上的显示,使用Blazeds 的server push机制实现功能。
1.java代码sensor的三个轴,x y z

public class Gsensor {
	
	private String month;
	private int xValue;
	private int yValue;
	private int zValue;
	
	public String getMonth() {
		return month;
	}
	public void setMonth(String month) {
		this.month = month;
	}
	public int getXValue() {
		return xValue;
	}
	public void setXValue(int value) {
		xValue = value;
	}
	public int getYValue() {
		return yValue;
	}
	public void setYValue(int value) {
		yValue = value;
	}
	public int getZValue() {
		return zValue;
	}
	public void setZValue(int value) {
		zValue = value;
	}

 2.开启线程每一秒中向客户端发送数据

public class GsensorChartPush implements Runnable {

	@Override
	public void run() {
		while(true){
			List<Gsensor> gsensor = getGsensor();	
			MessageFactory.sendMsg("gsensorpush",gsensor);
			try{
				Thread.sleep(1000);
			}catch(InterruptedException  se){
				se.printStackTrace();
			}
		}
	}

	private List<Gsensor> getGsensor() {
		List<Gsensor> gList = new ArrayList<Gsensor>();
		for(int i=0;i<5;i++){
			Random random = new Random();
			String month = i == 1 ? "January" : i == 2 ? "February" : i==3 ? "February":i==4 ? "April":i==5?"May":"June";  
			Gsensor gsensor = new Gsensor();
			gsensor.setMonth(month);
			gsensor.setXValue(random.nextInt(10));
			gsensor.setYValue(random.nextInt(20));
			gsensor.setZValue(random.nextInt(30));
			gList.add(gsensor);
		}
		return gList;
	}

 3.MessageFactory工厂实现消息的发送

 

public class MessageFactory {
	
	private static MessageBroker msgBroker = MessageBroker.getMessageBroker(null);
	private static String clientId = UUIDUtils.createUUID();
	
	public static void sendMsg(String destination,Object body){
		AsyncMessage msg = new AsyncMessage();
		msg.setDestination(destination);
		msg.setClientId(clientId);
		msg.setMessageId(UUIDUtils.createUUID());
		msg.setTimestamp(System.currentTimeMillis());
		msg.setBody(body);
		msgBroker.routeMessageToService(msg, null);
	}
}

 4.配置blazeds messing-config.xml

<destination id="gsensorpush">
        <properties>
            <server>
                <allow-subtopics>true</allow-subtopics>
                <subtopic-separator>.</subtopic-separator>
            </server>
        </properties>
        <channels>
			<channel ref="my-polling-amf"/>
        </channels>        
    </destination> 

 5.flex前端页面代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.messaging.events.MessageFaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.messaging.events.MessageEvent;
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            
 			private function init():void{
 				consumer.subscribe();
 			}
 			
 			private function messageHandler(event:MessageEvent):void{
 				lineChart.dataProvider = event.message.body;
 			}
 			
 			private function messageFault(event:MessageFaultEvent):void{
 				Alert.show("接收错误");	
 			}
 			
		]]>
	</mx:Script>
	<mx:Consumer id="consumer" destination="gsensorpush" message="messageHandler(event)" fault="messageFault(event)"/>
    <mx:SolidColor id="sc1" color="blue" alpha=".3"/>  
    <mx:SolidColor id="sc2" color="red" alpha=".3"/>  
    <mx:SolidColor id="sc3" color="green" alpha=".3"/>  
	
	<mx:Stroke id = "s1" color="blue" weight="2"/>  
    <mx:Stroke id = "s2" color="red" weight="2"/>  
    <mx:Stroke id = "s3" color="green" weight="2"/> 

	<mx:Panel title="DateTimeAxis Example" height="100%" width="100%">
        <mx:LineChart id="lineChart" height="100%" width="45%"
            paddingLeft="5" paddingRight="5" 
            showDataTips="true">
                
            <mx:horizontalAxis>
                <mx:DateTimeAxis dataUnits="seconds"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:LineSeries yField="XValue" form="curve" displayName="X" lineStroke="{s1}"/>
                <mx:LineSeries yField="YValue" form="curve" displayName="Y" lineStroke="{s2}"/>
                <mx:LineSeries yField="ZValue" form="curve" displayName="Z" lineStroke="{s3}"/>
            </mx:series>
        </mx:LineChart>
    </mx:Panel>
</mx:Application>
 

 

  • 大小: 21.4 KB
分享到:
评论

相关推荐

    flex动态树_动态图表

    这篇博客“flex动态树_动态图表”可能详细介绍了如何在Flex中实现动态的树形结构和图表。 动态树是数据结构的一种展示形式,它以层级结构显示数据,通常用于表示具有父子关系的数据。在Flex中,我们可以使用mx....

    FLEX动态树 动态图表

    本文将深入解析如何在Flex中创建并自定义动态树,以及如何通过事件处理实现更高级的功能,如动态图表的构建。 #### 一、树形控件的自定义图标 在Flex中,树形控件允许开发者高度定制其外观,包括默认图标、打开和...

    Flex与java Server Push数据

    标题中的“Flex与Java Server Push数据”涉及到的技术是基于Adobe Flex客户端和Java服务器端的数据实时推送技术。在Web开发中,传统的HTTP协议是基于请求-响应模型的,但这种模式无法实现服务器主动向客户端推送数据...

    H3C FlexServer R690服务器技术白皮书.docx

    《H3C FlexServer R690服务器技术白皮书》深入探讨了这款高效能企业级服务器的关键技术和设计特点,旨在为企业提供一个可靠的、可扩展的解决方案。以下是关于H3C FlexServer R690服务器的详细分析: 1. FlexServer ...

    flex 3.5 动态生成图表代码

    基于给定的文件信息,我们将深入探讨如何在Flex 3.5环境中实现动态图表的创建与控制。 ### Flex 3.5 动态生成图表代码解析 #### 1. **初始化与布局** 文件中的`&lt;mx:Application&gt;`标签是Flex应用程序的基础容器,它...

    Flex_4系统组件:图表

    标签中的“源码”提示我们可能涉及图表组件的底层实现,Flex 4的源码是开源的,因此开发者可以深入理解其工作原理,甚至进行自定义扩展。源码研究可以帮助我们解决性能问题,优化图表渲染,或者实现特定的视觉效果。...

    flex圆形图表展示源码

    本篇将详细讲解使用Flex技术实现圆形图表的源码知识。 Flex是Adobe开发的一个开源框架,主要用于构建富互联网应用程序(RIA),它基于ActionScript编程语言和Flash Player或Adobe AIR运行时环境。在Flex中,我们...

    flex做的四种图表(线、柱、饼、区域)直接用js调用

    Flex本身不具备直接将图表导出为图片的能力,但可以借助第三方库或自定义解决方案来实现。 至于标签"flex charts swfobject",SWFObject是一个JavaScript库,用于在HTML页面中嵌入Flash内容,如Flex图表。它能够...

    超酷Flex动画图表

    2. **图表示例项目(demos)**: 这些示例项目展示了如何在Flex中使用Flare库创建各种动态图表。它们可能包括: - 基础图表:如简单的条形图、饼图等,用于展示基本的图表实现。 - 动态效果:如数据更新时的平滑过渡...

    Flex3高级图表开发指南.zip

    《Flex3高级图表开发指南》是一本专注于Adobe Flex3中图表组件深度开发的教程,旨在帮助开发者充分利用Flex3的图表功能构建数据可视化应用。Flex3是Adobe Flex框架的一个版本,它提供了一整套工具和库,用于创建丰富...

    H3C服务器技术白皮书和安装指导书汇总集.rar

    H3C 2014 V3R1B08 FlexServer R690 技术白皮书V1.00 H3C FlexServer B390 技术白皮书V1.00 H3C FlexServer B390安装手册 H3C FlexServer B590 技术白皮书V1.00 H3C FlexServer B590安装手册 H3C FlexServer R390...

    Flex图表制作Flex图表制作

    Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表...

    flex柱状图表很漂亮的源码

    6. **交互性**:Flex柱状图可以实现交互功能,如点击柱状图触发事件、钻取(Drill Down)图表以查看详细信息。在提供的文件名`DrillDownSample`中,可能包含了如何实现钻取功能的示例代码。 7. **Drill Down**:...

    flex 指南 Flex入门 Flex实例 flex图表 flex与java flex中文帮助 flex培训

    chart.rar--java+flex图表 Flex3高级图表开发指南.pdf--英文的 Flex+白皮书.pdf flex-demo.rar Flex入门培训资料及PPT.rar flex中文帮助.pdf InfoQ Flex与JSON及XML的互操作.mht 结合java做的flex图表例子 - 点点...

    flex各种图表的实现

    在本教程中,我们将深入探讨如何使用Flex来实现各种图表,包括饼图、条状图和柱状图,并添加过渡效果,以增强用户体验。 首先,让我们从饼图开始。`pieDemo.mxml`和`pieDemo1.mxml`是两个示例文件,它们展示了如何...

    Flex实现动态仪表盘

    总的来说,使用Flex和ActionScript实现动态仪表盘,需要理解数据绑定、图表组件的使用、事件处理、样式设计等多个方面的知识。通过巧妙地组合和定制,可以创建出功能强大、视觉吸引人的数据可视化工具。

    flex 拖拽框架和图表服务的实现

    3. 图表服务:Flex支持各种图表组件,如条形图、折线图、饼图等,这些图表可以动态展示数据。在本项目中,可能使用了Flex的Chart类或者第三方图表库(如amCharts或ZiggyGraph)来创建图表,并结合数据服务获取和更新...

    flex svg代码生成图片

    在 Flex 应用程序中,使用 SVG 资源可以实现图表生成图片并下载。以下是关于 Flex SVG 代码生成图片的知识点: 一、静态显示 SVG 图像 在 Flex 应用程序中,可以使用 SVG 资源,但只能作为一种图像引入,类似于 ...

    flex实时更新曲线图

    2. **实时更新**:实时更新意味着应用程序能够根据新的数据源即时刷新图表显示。在Flex中,可以通过监听数据集的变更事件或者定时器来实现这一功能。一旦数据源发生变化,图表会自动更新,无需用户手动刷新。 3. **...

Global site tag (gtag.js) - Google Analytics