flex扫盲篇

本人因项目需要,要做报表,项目初步用flex做,我还是应届生,连flex是什么东西都不知道,坑爹的,我花了大概一天的时间,完成flex和服务器的交互

首先要知道flex是做页面的美化的,flex与服务器交互有2个组件,一是httpservice 还有一个是remoteobject。

下面我把我的第一个flex程序交给大家,我会把我在做这个demo的时候碰到的问题向大家说


<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="callLater(init)">
	<fx:Script>
		<![CDATA[          
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.graphics.codec.JPEGEncoder;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			[Bindable]
			private var medalsAC:ArrayCollection = new ArrayCollection();
			
			
			private function init():void{
				service.send();
			}
			
			//调用失败
			protected function service_faultHandler(event:FaultEvent):void
			{
				Alert.show("失败了:"+event.message,"提示");
			}
			
			//调用成功
			protected function service_resultHandler(event:ResultEvent):void
			{
			//一开始这边我直接把event.result as ArrayCollection一直不行,因为穿过来的就是全字符串了
                        //后来我就问了一个人就说把那边的 HTTPService添加返回的格式resultFormat="text"然后再在客户端解析
                        //通过json解析后,就跟jquery一样了list就会自动的变成数组,数组里面放的就是java的对象,这样就把对象添加到你的数据源
	
				var ob:Object=JSON.parse(event.result.toString());
				
				
				for (var i:int = 0; i < ob.length; i++)
				{
					medalsAC.addItem(ob[i]);
				}
				
				
				
			}
			
			
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<s:HTTPService id="service" 
					   url="http://localhost:8080/FlexAndJava_Server/textflex" 
					   useProxy="false" method="POST"
					   fault="service_faultHandler(event)" 
					   result="service_resultHandler(event)" resultFormat="text">//一开始我这边没有规定resultFormat,服务器写回的数据
		//是一个list里面有java对象	
		</s:HTTPService>
		
		
		<!-- Define custom colors for use as fills. -->
		<mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
		<mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>
		<mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>
		
		<!-- Define custom strokes for the columns. -->
		<mx:SolidColorstroke id="s1" color="yellow" weight="2"/>
		<mx:SolidColorstroke id="s2" color="0xCCCCCC" weight="2"/>
		<mx:SolidColorstroke id="s3" color="0xFFCC66" weight="2"/>
	</fx:Declarations>
	
	<mx:Panel title="教学计划报表" 
			  height="100%" width="100%" layout="horizontal">
		<mx:ColumnChart id="column" 
						height="399" 
						width="45%" 
						paddingLeft="5" 
						paddingRight="5" 
						showdatatips="true" 
						dataProvider="{medalsAC}"
						>                
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="country"/>
			</mx:horizontalAxis>
			
			<mx:series>
				<mx:ColumnSeries 
					xField="country" 
					yField="gold" 
					displayName="Gold"
					fill="{sc1}"
					stroke="{s1}"
					/>
				<mx:ColumnSeries 
					xField="country" 
					yField="silver" 
					displayName="Silver"
					fill="{sc2}"
					stroke="{s2}"
					/>
				<mx:ColumnSeries 
					xField="country" 
					yField="bronze" 
					displayName="bronze"
					fill="{sc3}"
					stroke="{s3}"
					/>
			</mx:series>
		</mx:ColumnChart>
		
		<mx:Legend dataProvider="{column}"/>
		
		
		
	</mx:Panel>
</s:Application>
小弟虽然还有很多不懂,但是 改改还行,这个demo我也是网上给我找来的,我还是有很多不太理解,希望有人能解答为什么

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...