Flex个人知识库(5)

1、关于DataGrid的自动刷新
  当修改dataGrid数据时(即修改数据源dataProvider)要实现DataGrid的自动刷新有两部：
A、 将数据源设置为绑定，也即以关键字[Bindable]声明
B、 设置绑定以后，当你修改数据时，datagrid实例并不会显示新的数据，除非你手动的鼠标点击一下datagrid才会显示。有如下方法可以解决：
   .invalidateList()刷新datagrid的每一行
   .invalidateNow()在datagrid的属性(大小、位置等发生改变时),进行刷新。

2、 ComboBox中change事件与close事件的区别

   如果用户更改了下拉列表的选项，ComboBox的selectedIndex与selectedItem都会随之改变。

   change:   当comboBox内容因用户交互操作发生更改时，当selectedIndex或selectedItem属性更改时，以及如果comboBox控件可编辑，每次在框中击键时调用

    close：   取消下拉列表时调度，如果用户选择某一下拉列表中的某个项目，在下拉列表外部店家，在显示下拉列表时单击下拉框或者在下拉框状态时按Esc

  注意： 就我个人的使用来看发现当更改comboBox的selectedIndex与selectedItem时会出发change事件,而发现有网友博文中提到如下观点：

  由编程改变selectedIndiex和selectedItem属性时触发的是valueCommit时间，而通过UI操作触发的是change和changing事件。
   ... ...

3、 自定义的一个Alert框

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				   xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%"
				   xmlns:mx="library://ns.adobe.com/flex/mx" 
				   minWidth="300" minHeight="150" maxHeight="500" maxWidth="450"
				   styleName="CloudAlert" borderVisible="false">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		
		.CloudAlert
		{
			background-image:			Embed("/assets/images/alert/background_image.png", scaleGridTop="29", scaleGridBottom="113", scaleGridLeft="48", scaleGridRight="231");
			background-size:			"100%";	
		}
		.CloudAlertCloseButton
		{
			upSkin:Embed(source='/assets/images/alert/closebutton_up_skin.png', scaleGridLeft=10, scaleGridRight=11, scaleGridTop=10,scaleGridBottom=11);
			downSkin:Embed(source='/assets/images/alert/closebutton_down_skin.png', scaleGridLeft=10, scaleGridRight=11, scaleGridTop=10,scaleGridBottom=11);
			overSkin:Embed(source='/assets/images/alert/closebutton_over_skin.png', scaleGridLeft=10, scaleGridRight=11, scaleGridTop=10,scaleGridBottom=11);
		}
		.CloudAlertTitle
		{
			font-size:				12;
			font-weight:			bold;
			color:					#333333;
		}
		
		.CloudAlertSubtitle
		{
			font-size:				14;
			font-weight:			bold;
			color:					#0b8ff4;
		}
		
		.AlternativeButton
		{
			up-skin:				Embed("/assets/images/alert/up_skin.png", scaleGridTop="5", scaleGridBottom="13", scaleGridLeft="5", scaleGridRight="12");
			over-skin:				Embed("/assets/images/alert/over_skin.png", scaleGridTop="5", scaleGridBottom="13", scaleGridLeft="5", scaleGridRight="12");
			down-skin:				Embed("/assets/images/alert/down_skin.png", scaleGridTop="5", scaleGridBottom="13", scaleGridLeft="5", scaleGridRight="12");
			disabled-skin:			Embed("/assets/images/alert/disabled_skin.png", scaleGridTop="5", scaleGridBottom="13", scaleGridLeft="5", scaleGridRight="12");
			font-weight:			normal;
			font-size:				11;
			color:					#333333;
			roll-over-color:		#333333;
			text-roll-over-color:	#333333;
			text-selected-color:	#000000;
			padding-left:			5;
			padding-right:			5;
			padding-top:			3;
			
		}
	</fx:Style>
	
	<fx:Script>
		<![CDATA[
			import assets.skins.AquaGlassButtonSkin;
			
			import mx.controls.Alert;
			import mx.core.FlexGlobals;
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
			[Bindable]
			private var titleTxt:String = "title";
			
			[Bindable]
			private var headerTxt:String = "head";
			
			[Bindable]
			private var mainTxt:String;
			
			[Bindable]
			private var alertIconPath:String;
			
			private var flags:uint;
			
			private var responseHandler:Function;
			
			public static function showAlert(title:String, header:String, main:String, flags:uint = 0x4, responseHandler:Function = null):void
			{
				var customAlert:CloudAlert = new CloudAlert;
				
				customAlert.titleTxt = title;
				customAlert.headerTxt = header;
				customAlert.mainTxt = main;
				customAlert.responseHandler = responseHandler;
				customAlert.flags = flags;
				customAlert.alertIconPath = "assets/images/alert/icon_alert.png";
				
				customAlert.create();
			}
			
			public static function showError(title:String, header:String, main:String, flags:uint = 0x4, responseHandler:Function = null):void
			{
				var customAlert:CloudAlert = new CloudAlert();
				
				customAlert.titleTxt = title;
				customAlert.headerTxt = header;
				customAlert.mainTxt = main;
				customAlert.responseHandler = responseHandler;
				customAlert.flags = flags;
				customAlert.alertIconPath = "assets/images/alert/icon_error.png";
				
				customAlert.create();
			}
			
			private function create():void
			{
				if(this.responseHandler != null)
					this.addEventListener(CloseEvent.CLOSE, responseHandler);
				
				this.addEventListener(KeyboardEvent.KEY_UP, keyboardHandler);
				
				PopUpManager.addPopUp(this, FlexGlobals.topLevelApplication as DisplayObject, true);
				
				showButtons();
				
				callLater(resizeComponent);
			}
			
			private function showButtons():void
			{
				if(this.flags & Alert.OK)
				{
					okButton.visible = true;
					okButton.includeInLayout = true;
				}
				
				if(this.flags & Alert.YES)
				{
					yesButton.visible = true;
					yesButton.includeInLayout = true;
				}
				
				if(this.flags & Alert.NO)
				{
					noButton.visible = true;
					noButton.includeInLayout = true;
				}
				
				if(this.flags & Alert.CANCEL)
				{
					cancelButton.visible = true;
					cancelButton.includeInLayout = true;
				}
				
				if(cancelButton.visible)
					cancelButton.setFocus();
				else if(noButton.visible)
					noButton.setFocus();
				else if(yesButton.visible)
					yesButton.setFocus();
				else if(okButton.visible)
					okButton.setFocus();
			}

			private function resizeComponent():void
			{
				if(mainText.textHeight > mainText.minHeight)
				{	
					var newHeight:int = height + mainText.textHeight - mainText.minHeight;
					if(newHeight <= maxHeight && newHeight >= minHeight)
						height = newHeight;
					else
					{
						height = maxHeight;
						width = maxWidth;
					}
				}
				
				PopUpManager.centerPopUp(this);
			}
			
			private function close(mouseEvent:MouseEvent):void
			{
				var closeEvent:CloseEvent = new CloseEvent(CloseEvent.CLOSE);
				
				if(mouseEvent.target == okButton)
					closeEvent.detail = Alert.OK;
				else if(mouseEvent.target == yesButton)
					closeEvent.detail = Alert.YES;
				else if(mouseEvent.target == noButton)
					closeEvent.detail = Alert.NO;
				else if(mouseEvent.target == cancelButton || mouseEvent.target == closeButton)
					closeEvent.detail = Alert.CANCEL;
				
				dispatchEvent(closeEvent);
				
				if(this.responseHandler != null)
					this.removeEventListener(CloseEvent.CLOSE, responseHandler);
				
				this.removeEventListener(KeyboardEvent.KEY_UP, keyboardHandler);
				
				PopUpManager.removePopUp(this);
			}
			
			private function keyboardHandler(keyboardEvent:KeyboardEvent):void
			{
				if(keyboardEvent.keyCode == 13)
				{
					keyboardEvent.target.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
				}
			}
		]]>
	</fx:Script>
	
	<s:Label left="32" top="7" id="titleLabel"
			  text="{titleTxt}" styleName="CloudAlertTitle"/>
	
	
	<mx:Button right="4" top="0" id="closeButton"
			   click="close(event)" styleName="CloudAlertCloseButton"/>
	
	
	<mx:Image top="38" left="23" id="customAlertIcon" source="{alertIconPath}"/>
	
	
	<mx:Label top="36" left="70" id="headerLabel"
			  text="{headerTxt}" styleName="CloudAlertSubtitle"/>
	
	<mx:TextArea  id="mainText"
				  top="58" left="70" right="30" bottom="76" minHeight="45" minWidth="200"
				  fontSize="12" borderAlpha="0" editable="false" 
				  htmlText="{mainTxt}"/>
	
	<s:HGroup left="0" verticalAlign="middle" horizontalAlign="center" right="0" bottom="46">
		
		<s:Button id="okButton" height="18"  label="确定" skinClass="assets.skins.AquaGlassButtonSkin"
				  click="close(event)"
				  visible="false" includeInLayout="false"/>				
		
		<s:Button id="yesButton" height="18"  label="是"  skinClass="assets.skins.AquaGlassButtonSkin"
				  click="close(event)"
				  visible="false" includeInLayout="false"/>
		
		<s:Button id="noButton" height="18" label="否" skinClass="assets.skins.AquaGlassButtonSkin"
				  click="close(event)"
				  visible="false" includeInLayout="false"/>
		
		<s:Button id="cancelButton" height="18" label="取消" skinClass="assets.skins.AquaGlassButtonSkin"
				  click="close(event)"
				  visible="false" includeInLayout="false"/>
	</s:HGroup>
</s:BorderContainer>

4、 Flex画流程图

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
	<mx:Canvas id="paper" x="30" y="24" width="719" height="600">
		<mx:Canvas id="Total" x="10" y="254" width="108" height="78"  borderStyle="inset">
			<mx:Button x="0" y="43" label="关键词导出" width="103" height="28"/>
			<mx:Text x="0" y="0" width="103" height="45" text="List   PV:10000" fontSize="12"/>
		</mx:Canvas>
		<mx:Canvas id="LEV1_1" x="187" y="95" width="108" height="70" borderStyle="inset">
			<mx:Button x="0" y="38" label="关键词导出" width="103" height="26"/>
			<mx:Text x="0" y="0"  width="103" height="39" text="List   PV:10000" fontSize="12"/>
		</mx:Canvas>
		<mx:Canvas id="LEV1_2" x="187" y="315" width="108" height="77" borderStyle="inset">
			<mx:Button x="0" y="45" label="关键词导出" width="103" height="26"/>
			<mx:Text x="0" y="0" width="103" height="46" text="List   PV:10000" fontSize="12"/>
		</mx:Canvas>
		<mx:Canvas id="LEV1_3" x="187" y="504" width="108" height="75" borderStyle="inset">
			<mx:Button x="0" y="41" label="关键词导出" width="103" height="28"/>
			<mx:Text x="0" y="0" width="103" height="42" text="List   PV:10000" fontSize="12"/>
		</mx:Canvas>
		<mx:Canvas id="LEV1_1_1" x="374" y="10" width="108" height="70" borderStyle="inset">
			<mx:Button x="0" y="38" label="关键词导出" width="103" height="26"/>
			<mx:Text x="0" y="0"  width="103" height="39" text="List   PV:10000" fontSize="12"/>
		</mx:Canvas>
		<mx:Canvas id="LEV1_1_2" x="374" y="88" width="108" height="77" borderStyle="inset">
			<mx:Button x="0" y="45" label="关键词导出" width="103" height="26"/>
			<mx:Text x="0" y="0" width="103" height="46" text="List   PV:10000" fontSize="12"/>
		</mx:Canvas>
		<mx:Canvas id="LEV1_1_3" x="374" y="173" width="108" height="75" borderStyle="inset">
			<mx:Button x="0" y="41" label="关键词导出" width="103" height="28" click="export(LEV1_1_3_text.text)"/>
			<mx:Text id="LEV1_1_3_text" x="0" y="0" width="103" height="42" text="List   PV:10000" fontSize="12"/>
		</mx:Canvas>
	</mx:Canvas>

<mx:Script>
	<![CDATA[
		import mx.controls.Button;
		
		import mx.containers.Canvas;
		
		private function initApp():void{
			   
			    paper.graphics.clear();
                doDraw(Total, LEV1_1);
                doDraw(Total, LEV1_2);
                doDraw(Total, LEV1_3);
                doDraw(LEV1_1, LEV1_1_1);
                doDraw(LEV1_1, LEV1_1_2);
                doDraw(LEV1_1, LEV1_1_3);
                createAll();
		}
		
		
		private function createAll():void{
		  var canvas:Canvas = new Canvas();
		  canvas.x = 374;
		  canvas.y = 250;
		  canvas.setActualSize(108, 75);
		  canvas.setStyle("borderStyle", "inset");
		  var button:Button = new Button();
		  button.x = 0;
		  button.y = 41;
		  button.setActualSize(103,28);
		  var text:Text = new Text();
		  text.x = 0;
		  text.y = 0;
		  text.setActualSize(103,42);
		  button.label = "关键词导出";
		  text.text = "List   PV:10000";
		  canvas.addChild(button);
		  canvas.addChild(text);
		  paper.addChild(canvas);
		}
		
		
		private function export(text:String):void{
		        ExternalInterface.call("exportQueryXLS", text);  
		}
		
		 private function doDraw(source:Sprite,target:Sprite):void
            {
                var radius:Number = 10;
                
                var sourceCenter:Point = new Point(source.x + source.width,source.y + source.height/2);
                var targetCenter:Point = new Point(target.x ,target.y + target.height/2);
                
                var sin:Number = (sourceCenter.y - targetCenter.y)/(Math.sqrt(Math.pow(sourceCenter.x - targetCenter.x,2)+Math.pow(sourceCenter.y - targetCenter.y,2)));

                var radian:Number = Math.asin(sin);
                var degree:Number = radian*180/Math.PI;
                
                if(source.x < target.x)
                {
                    if(degree == 0 )
                    {
                        degree = 180;
                    }
                    if(degree > 0)
                    {
                        degree = 180 - degree;
                    }
                    if(degree < 0)
                    {
                        degree = 180 + degree * -1;
                    }
                }

                degree += 90;
                radian = degree*Math.PI / 180;                
                
//                var offsetX:Number = radius * Math.cos(radian);        
//                var offsetY:Number = radius * Math.sin(radian);  
                var offsetX:Number = 0;
                var offsetY:Number = 0;  
                
                var sourcePointA:Point = new Point(sourceCenter.x + offsetX, sourceCenter.y + offsetY);
                var sourcePointB:Point = new Point(sourceCenter.x - offsetX, sourceCenter.y - offsetY);    
                
                var targetPointA:Point = new Point(targetCenter.x + offsetX, targetCenter.y + offsetY);
                var targetPointB:Point = new Point(targetCenter.x - offsetX, targetCenter.y - offsetY);    
                
               // paper.graphics.clear();
                paper.graphics.lineStyle(1,0x333300,100);
                paper.graphics.moveTo(sourcePointA.x,sourcePointA.y);
                paper.graphics.lineTo(targetPointA.x,targetPointA.y);    
//                paper.graphics.moveTo(sourcePointB.x,sourcePointB.y);
//                paper.graphics.lineTo(targetPointB.x,targetPointB.y);    
            }
		
	]]>
</mx:Script>


</mx:Application>