Flex4入门

Flex4介绍及入门
Flex是一个免费，高效的开源框架，可用于构建富有表现力的Web应用程序。个人觉得Flex和AJAX具有相似之处，均可以完成局部刷新，提交的功能，但是Flex要比AJAX更方便，功能也更强大。
首先Flex程序编译成字节码后，在Flash Player中运行，所以只要系统中安装有Flash Player，那么Flex就可以像Java那样做到一次编译，处处运行，做到真正的与平台无关。而AJAX要与浏览器息息相关，编写代码过程中就需要小心谨慎，考虑的情况要复杂很多。
Flex主要有两部分组成——MXML和ActionScript。这有点类似于HTMl和JavaScript。MXML主要用于Flex程序的页面布局，组件显示等，ActionScript就主要用于对数据的操作。这里要说明一点，其实最后MXML文件也是要转化为ActionScript文件的，引入MXMl就是为了方便页面布局，组件的现实。下面来看一个Flex程序的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="vertical"
				verticalAlign="middle"
				backgroundColor="white" viewSourceURL="srcview/index.html">
	
	<mx:Script>
		<![CDATA[
			import mx.charts.ChartItem;
			import mx.charts.HitData;
			import mx.charts.chartClasses.IAxis;
			import mx.charts.chartClasses.Series;
			import mx.charts.series.ColumnSet;
			import mx.charts.series.items.ColumnSeriesItem;
			import mx.utils.StringUtil;
			
			private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
				return numberFormatter.format(item);
			}
			
			private function columnChart_dataTipFunc(item:HitData):String {
				var cSI:ColumnSeriesItem = item.chartItem as ColumnSeriesItem;
				var col:String = ColumnSeries(item.element).yField;
				return StringUtil.substitute("<b>{0}</b><br>{1}: {2}", cSI.item.name, col, numberFormatter.format(cSI.item[col]));
			}
			
			private function columnSeries_labelFunc(chartItem:ChartItem, series:Series):String {
				var col:String = ColumnSeries(chartItem.element).yField;
				return numberFormatter.format(chartItem.item[col]);
			}
		]]>
	</mx:Script>
	
	<mx:NumberFormatter id="numberFormatter" precision="3" />
	
	<mx:Array id="arr">
		<mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
		<mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
		<mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
		<mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
		<mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
	</mx:Array>
	
	<mx:ApplicationControlBar dock="true">
		<mx:Legend dataProvider="{columnChart}" direction="horizontal" />
	</mx:ApplicationControlBar>
	
	<mx:ColumnChart id="columnChart"
					showDataTips="true"
					dataProvider="{arr}"
					dataTipFunction="columnChart_dataTipFunc"
					columnWidthRatio="0.9"
					type="stacked"
					width="100%"
					height="100%">
		
		<mx:horizontalAxis>
			<mx:CategoryAxis id="ca" categoryField="name" />
		</mx:horizontalAxis>
		
		<mx:verticalAxis>
			<mx:LinearAxis labelFunction="linearAxis_labelFunc" />
		</mx:verticalAxis>
		
		<mx:horizontalAxisRenderers>
			<mx:AxisRenderer axis="{ca}" />
		</mx:horizontalAxisRenderers>
		
		<mx:series>
			<mx:ColumnSeries id="avgSeries"
							 xField="name"
							 yField="avg"
							 displayName="Batting Average (AVG)"
							 labelPosition="inside"
							 labelFunction="columnSeries_labelFunc" />
			
			<mx:ColumnSeries id="obpSeries"
							 xField="name"
							 yField="obp"
							 displayName="On-base Percentage (OBP)"
							 labelPosition="inside"
							 labelFunction="columnSeries_labelFunc" />
			
			<mx:ColumnSeries id="slgSeries"
							 xField="name"
							 yField="slg"
							 displayName="Slugging Percentage (SLG)"
							 labelPosition="inside"
							 labelFunction="columnSeries_labelFunc" />
		</mx:series>
		
		<mx:seriesFilters>
			<mx:Array />
		</mx:seriesFilters>
		
	</mx:ColumnChart>
	
</mx:Application>

这段代码是实现了一个图表的功能，在<Application>标签中包括的就是一个完整的Flex程序，其中包含了MXML和AS两部分。在Script标签中包含的就是ActionScript代码。Flex提供了很多的组件共开发者使用。只要在Flash Builder中新建一个项目，切换到design模式，你就可以讲组件拖入到页面中合适的位置。