Flex个人知识库(5)

最新推荐文章于 2011-12-18 23:46:13 发布
最新推荐文章于 2011-12-18 23:46:13 发布
阅读量114 收藏
点赞数
分类专栏： Web前端 文章标签： Flex UP Adobe 编程 UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JAVAZHICHIZHE/article/details/83770949
版权
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>
JAVAZHICHIZHE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex学习笔记(四)
tekkenvs11的专栏
06-21 1010
Flex组件 Part .1拥有丰富的用户组件是Flex的一大特色。除了传统的数据输入控件（TextInputTextArea，CheckBox，RadioButton，ComboBox等等），还包括了一些高级组件，用于维护结构化数据（Tree组件）和大数据集（DataGrid 组件）。1、此段代码介绍了RadioButton（RadioButtonGroup），Alert
Flex学习笔记（二）
u010461020的专栏
05-17 566
Flex学习笔记（二） 一、继续学习ui界面的布置（以一个电子商务应用为例） 1、控制条（control bar）里面摆放导航和一些标签，并在属性栏填写id、标签。 2、在下面加入group容器在属性中设置id，宽度100%，高度100%。 在这个容器下在加一个group 1布局选“v”(里面放入商品用label写入物品名价格和button购买)w100% h150 加另外一个gro
Flex 3快速入门: 处理数据 验证数据
lihe111的专栏
10-28 2101
本文来自：http://www.airia.cn/FLEX_Directory/validating_data/用户在界面输入的数据可能不适合应用系统。在Flex应用程序中，可以使用validator来确保表单里的字段值满足某些标准。例如，你可以使用validator来确定用户输入有效的电话号码，确定字符串大于最小长度，确定有长编码包含正确的数字。在典型的client-server环境中，
Flex个人知识库之样式皮肤
JAVAZHICHIZHE的专栏
12-18 133
[size=large] 学习Flex已经有4、5个月了，也算是入了门吧，基本的功能都已掌握，但是对于样式、皮肤却一直没有涉及。今天工作中恰好碰到了一个有关字体的问题，因此索性系统地学习一下样式皮肤方面的知识。 1、 字体 不管是中文版XP还是英文版XP，默认的中文字体都是宋体/新宋体，问题就在于英文字体。宋体是包含英文字体的，中文版XP显示英文的时候用的就是宋体；而英文版Window...
Flex个人知识库(3)
07-29
【Flex个人知识库(3)】是一个集合了与Flex相关技术知识的资源包，其中包含了一个名为"CloudMonitor"的子文件。Flex是一种用于构建富互联网应用（RIA，Rich Internet Applications）的技术，由Adobe公司开发，它允许...
Flex个人知识库之Apple组件
03-22
"Flex个人知识库之Apple组件"这个标题暗示了这是一份关于使用Adobe Flex技术来构建针对Apple设备应用的知识资源。Flex是一种开源的、基于ActionScript的框架，用于创建富互联网应用程序（RIA），尤其适用于构建跨...
asp.net知识库
06-18
常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试 在C#里把ArrayList转换为Array 或 把Array转换为ArrayList C# 2.0 在.NET 2.0中，让你的组件也可以绑定 .NET20 一种简单的窗口控件UI状态控制方法 翻译MSDN...
Flex 一些个人认为不错的案例
05-19
这个标题"Flex 一些个人认为不错的案例"表明我们将探讨一些使用Flex开发的优秀示例项目，这些案例可能展示了Flex在创建交互式、动态用户界面方面的强大力量。 描述中提到“大家一块分享，共同进步”，这暗示了这些...
blog.zip_flex_flex blog
最新发布
09-20
2. **Flex组件库**：包括按钮、文本框、面板等UI元素，用于构建用户界面。 3. **数据绑定**：使得视图和模型之间的数据同步自动化。 4. **事件驱动编程**：用户操作触发事件，事件处理器执行相应逻辑。 5. **Flex ...
中国城市经纬度数据
JAVAZHICHIZHE的专栏
12-10 1474
[size=large] 前言暂时空缺... ... – – 表的结构 `citylocation` – CREATE TABLE IF NOT EXISTS `citylocation` ( `proname` varchar(20) NOT NULL, `propinyin` varchar(20) NOT NULL, `cityname` varchar(20) NOT...
JS中利用dom实现追加与插入
JAVAZHICHIZHE的专栏
08-01 551
都是圈内人士了，咱就直接进入主题吧.... ^_^ ^_^ Node对象有insertBefore(newChild, 被引用Child)和appendChild(newChild)两个方法用来插入结点。 appendChild(newChild)方法作为某结点的方法来调用，在该结点的子结点列表的结尾添加一个newChild. ...
JS实现图片缩放功能
JAVAZHICHIZHE的专栏
08-01 539
在上网时经常会看到有图片缩放的功能， 于是今天自己也动手写了一个， 以下是源代码： 图片自动缩放 放大&nbsp;&nbsp;缩小 ————说明： 上述代码中用到了三个函数， 第一个函数是用滚轮去控制缩放的， 第二个与第三个则是通过点击链接控制的。 ...
js往下拉框中动态添加选项
JAVAZHICHIZHE的专栏
08-01 497
我最近在做一个网站系统的后台， 其中要涉及到添加商品种类的问题。 由于添加的种类大多是已经存在的，所以不要每次手动的输入商品种类， 但是同时又得保证其扩展性（添加新种类）因此我想到了现在正在使用的 CSDN学生大本营 的添加笔记分类功能。 手动在页面添加值到下拉列表而不刷新的demo 在一个页面中有一个"添加"按钮和一个下拉列表，在单击"添加"按钮后,便在下拉列表中增加相...
JS 实现折叠式菜单
JAVAZHICHIZHE的专栏
08-01 465
最近在做一个网站系统， 参考网站上面有一个折叠式的菜单， 觉得好玩查看了一下它的源代码学习了一个。 以下是我的源代码： 折叠式菜单 折叠式下拉菜单 搜索引擎站点 新浪 ...
右键&FVNC
JAVAZHICHIZHE的专栏
03-28 462
[size=large][color=blue]1、需了解的Flex类:Security、 ProgressEvent[/color] [table] |Security|通过使用 Security 类，可以指定不同域中的内容相互通信的方式| |ProgressEvent|当加载操作已开始或套接字已接收到数据时，将分派 ProgressEvent 对象。这些事件通常在将 SWF 文件、图像...
amcharts
JAVAZHICHIZHE的专栏
12-18 424
1、AmLegend 2、当宽度不够时出现，解决方案设置CategoryAxis的wrapLabels属性( Only works if parseDates is false) Also make sure that maxLabelLength is not set which is truncating the labels. 3、默认的categoryAxies之...
js判断文件大小
JAVAZHICHIZHE的专栏
08-01 308
对于web开发人员来说文件上传文件是经常遇到的，判断文件大小也是不可缺少，在这里主要介绍一下javascript判断文件大小的几种常见的方法。 第一种是应用ActiveX控件的实现，例如： Html代码 function getFileSize(filePath) { var fso = new Acti...
Flex 3 Cookbook：简体中文版
"Flex 3 Cookbook 是一本关于 Flex 3 开发的中文教程，由多个网友协作翻译完成，旨在帮助开发者掌握 Flex 3 和 ActionScript 3 的基础知识和实践技巧。书中强调了 Flex 应用程序由 ActionScript 和 MXML 两部分组成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值