FLEX 相关的文章

使用Google Map API(FLASH)在地图中显示你的位置

今天网上乱逛的时候..
在一个测试站点速度(http://www.speedtest.cn/)的网站下面~
用Google地图显示了访问者所在的位置...
觉得挺有意思的..

看了一下google map的flash api..
实现起来非常方便..感叹一下google map的强大..
效果如下..


流程大概这样
1.先获取访客IP,然后通过IP获取用户地理位置信息..(这一步我直接调用了http://www.webxml.com.cn/提供的接口)
2.调用ClientGeocoder.geocode获取该地理位置于google map上的集合..
3.获取第一个位置..用Map.setCenter定位地图..
4.用Map.addOverlay标注位置..
5.用Map.openInfoWindow弹出Tip提示..
查看文章剩余部份
分类: FLEX , 标签: , , , ,

自定义DataGrid中ItemRenderer的编辑顺序

Flex中的DataGrid中可以方便的完成表格编辑之类的功能
只需要简单的开始editable=true;

不过有一点不足的是编辑状态下按Enter和Tab时...
对编辑焦点的切换比较不符合我们常用的需求..

对于这个问题...
我们可以通过侦听dg的keyDown..
然后对dg的editedItemPosition来自定义编辑位置..

上效果~~

查看文章剩余部份
分类: FLEX , 标签: ,

忽略PNG透明区域的事件(Flex)

有时候我们希望加载PNG后其透明区域不响应事件..

网上的一般的方法为~
先获取其bitmapData对象..

当进行点击操作时使用..
bitmapData.getPixel32(x,y)获取..
点击位置的是否透明..
然后再操作...

而mosueOver与mouseOut等事件稍为复杂点..
需要侦听mouseMove..
然后对经过的坐标进行透明判断~~再抛出相应的事件...
查看文章剩余部份
分类: FLEX , 标签: , ,

自定义FLEX滚动条滑块样式

在Flex里我们可以使用downArrowSkin,upArrowSkin,trackSkin,thumbSkin方法的设置滚动条的样式..
不过由于设计的关系..
滚动条的thumbSkin常设置成一个"点"或一个"块"..
这个块是固定大小的..不像Flex自带的滚动条会随滚动区域的高度而改变..
如果直接设置thumbSkin,那滑块将拉变形~非常难看..
这时候我们可以使用verticalScrollBar里的setScrollProperties方法来调整滑块高度..
查看文章剩余部份
分类: FLEX , 标签: , , ,

Flex笔记(z7z8)(不定期更新,最后更新090506)

获取焦点
application.focusManager.setFocus(对象);

在AS里用PopUpManager时parent的值
PopUpManager.createPopUp(Application.application as DisplayObject,ClassName,false);

设置input获取焦点后的框框颜色
textInput.setStyle("themeColor", 0x000000);

设置验证控件错误提示Style
.errorTip{
	fontSize:12px;
	border-color:#333333;//注意背景颜色需要设置border-color;
}

立刻创建对象
creationPolicy="all";

本地回放
-use-network=false;

设置RadioButtonGroup.selectedValue为Null时,不是真正设置为null,而是会默认选中第一个值,要设置为null,可使用
RadioButtonGroup.selection=null;

ToolTip显示时间
ToolTipManager.hideDelay = 2500;

绑定事件提示
//MXML下的写法
<mx:Metadata>
	[Event(name="youEventName",type="flash.events.Event")]
</mx:Metadata>

//AS下的写法
package{
	[Event(name="youEventName",type="flash.events.Event")]
	public function ClassName{}
}
//需要注意的是...
//]后面不需要写;号
//事件名和类名请使用双引号标注..
//使用单引号使用编译不会发生问题..
//不过FB3的IDE不会出现提示

TypeError: Error #1034: 强制转换类型失败:
无法将 mx.managers::PopUpManagerImpl@7155ac1 转换为mx.managers.IPopUpManager
//方法一
<mx:Script>
	<![CDATA[
	import mx.managers.DragManager;
	import mx.managers.IPopUpManager;            

	// 避免出现:无法将 mx.managers::PopUpManagerImpl@52a09a1 转换为 mx.managers.IPopUpManager 错误
	private var dragManager:DragManager;
	private var popUpManager:IPopUpManager;
	]]>
</mx:Script>

//方法二
//在ModuleLoader的creationComplete方法中加入如下代码
moduleLoader.applicationDomain = ApplicationDomain.currentDomain;
分类: FLEX , 标签: , ,

自定义Tree组件图标(ICON)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" width="270" height="420">
	<mx:Script>
		<![CDATA[
			[Embed(source="gif/ico_zp.gif")]
			[Bindable]
			public var ico_zp:Class;
			
			[Embed(source="gif/ico_rj.gif")]
			[Bindable]
			public var ico_rj:Class;
			
			[Embed(source="gif/ico_dtyx1.gif")]
			[Bindable]
			public var ico_dtyx1:Class;
			
			[Embed(source="gif/ico_test.gif")]
			[Bindable]
			public var ico_test:Class;
			
			[Embed(source="gif/icon_tx.gif")]
			[Bindable]
			public var icon_tx:Class;
			
			[Embed(source="gif/ico_park.gif")]
			[Bindable]
			public var ico_park:Class;
			
			[Embed(source="gif/ico_mm.gif")]
			[Bindable]
			public var ico_mm:Class;
			
			[Embed(source="gif/icon_yr.gif")]
			[Bindable]
			public var icon_yr:Class;
		
			[Embed(source="gif/ico_lw_bg.gif")]
			[Bindable]
			public var ico_lw_bg:Class;
			
			[Embed(source="gif/ico_city.gif")]
			[Bindable]
			public var ico_city:Class;
			
			[Embed(source="gif/ico_cg.gif")]
			[Bindable]
			public var ico_cg:Class;
			
			[Embed(source="gif/ico_music_bg.gif")]
			[Bindable]
			public var ico_music_bg:Class;
			
			[Embed(source="gif/icon_28.gif")]
			[Bindable]
			public var icon_28:Class;
		
			[Bindable]
			private var _data:XML = <data>
						<item name="照片" ico="ico_zp"/>
						<item name="日记" ico="ico_rj">
							<item name="礼物" ico="ico_lw_bg"/>
							<item name="足迹" ico="ico_city"/>
							<item name="模拟炒股" ico="ico_cg"/>
							<item name="音乐" ico="ico_music_bg"/>
							<item name="答题" ico="icon_28"/>
						</item>
						<item name="动他一下" ico="ico_dtyx1"/>
						<item name="测试" ico="ico_test"/>
						<item name="知我多少" ico="icon_tx"/>
						<item name="争车位" ico="ico_park"/>
						<item name="朋友买卖" ico="ico_mm"/>
						<item name="咬人" ico="icon_yr"/>
					</data>
		]]>
	</mx:Script>
	<mx:Tree x="10" y="10" width="250" height="400" labelField="@name" folderClosedIcon="{ico_rj}" folderOpenIcon="{ico_rj}" iconField="@ico" dataProvider="{_data.item}"></mx:Tree>
</mx:Application>

上面用的是最基本最简单的方法..也是最笨的方法..因为用到哪个ico先把ico给定义成一个class(会打包到swf中),然后能过xml的ico属性指定到iconField,达到最终的效果..

如果对于icon未知或者较多的时候..
我们可以先用loader把ico加载进来...(可以一个一个加载,,或者把ico预先打包到一个swf中..然后用反射的方法来获取相应的class对象)
然后再通过iconFunction跟据属性返回..

前两种方式都是用的Tree原有的属性..这个方法不好的地方是他只支持传输class对象..这样必须先预加载所需要的ico..

如果希望直接指定ico地址..我们可以自定义itemRenderer..然后把ico用一个image或loader代替..
分类: FLEX , 标签: , ,

自定义DataTip/ToolTip的显示位置

为了更好的自定义我们的FLEX程序,,有时候我们可能需要自定义组件中DataTip显示的位置..
可是一般的组件并不带这样的方法~~

我们可以通过最原始的Event.ADDED事件来获取DataTip对象..然后再进行相应的操作

下面的例子操作的是TileList组件的DataTip~~可以一直固定显示在指定的位置..或偏移位置等等

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="callLater(_init)" fontSize="12" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
	<mx:Script>
		<![CDATA[
			import flash.utils.setTimeout;
			import mx.core.UITextField;
			import mx.controls.ToolTip;
			import mx.events.ListEvent;
			private var currentItem:Object;
			private function _init():void
			{
				stage.scaleMode = "noScale";
				stage.align = "TL";
				//侦听added;
				stage.addEventListener(Event.ADDED,_added)
			}
			
			private function _added(e:Event):void
			{
				//判断是不是ToolTip;
				if(e.target is UITextField && e.target.parent is ToolTip)
				{
					e.target.visible = false;
					e.target.parent["getChildAt"](0)["visible"] = false;
					setTimeout(_setPoint,10,e.target)
				}
			}
			
			private function _setPoint(target:Object):void
			{
				//如果该ToolTip为当前项目的ToolTip~设置坐标
				if(target["text"] == currentItem.data.label)
				{
					if(_bottom.selected)
					{
						target.parent.y = currentItem.y+50;
						target.parent.x = currentItem.x+10;
					}else
					{
						target.parent.y = 170; 
						target.parent.x = 10;
					}
				}
				target.visible = true;
				target.parent["getChildAt"](0)["visible"] = true;
			}
			//保存当前鼠标所在位置的项目
			private function _over(e:ListEvent):void
			{
				currentItem = e.itemRenderer
			}
		]]>
	</mx:Script>
	<mx:TileList itemRollOver="_over(event)" id="CameraSelection" height="225" width="300" 
	    maxColumns="2" rowHeight="30" dataTipField="label" showDataTips="true" columnWidth="125" x="10" y="10">
	    <mx:dataProvider>
	        <mx:Array>
	            <mx:Object label="paddingBottom,paddingBottom,paddingBottom,Nokia 6630"/>
	            <mx:Object label="paddingBottom,paddingBottom,paddingBottom,Nokia 6680"/>
	            <mx:Object label="paddingBottom,paddingBottom,paddingBottom,Nokia 7610"/>
	            <mx:Object label="paddingBottom,paddingBottom,paddingBottom,Nokia LGV"/>
	            <mx:Object label="paddingBottom,paddingBottom,paddingBottom,Nokia LMV"/>
	        </mx:Array>
	    </mx:dataProvider>
	</mx:TileList>
	<mx:RadioButton x="10" y="240" label="显示在该项目底部" groupName="abv" id="_bottom"/>
	<mx:RadioButton x="137" y="240" label="显示在固定位置" selected="true" groupName="abv"/>
</mx:Application>
分类: FLEX , 标签: , ,

以虚线分隔List项目(drawRowBackground应用一例)

今天我们将通过继承List组件并重写drawRowBackground函数的方式自定义List的样式..
让List的每个项目以虚线隔开~~

override protected function drawRowBackground(s:Sprite,rowIndex:int,y:Number,height:Number,color:uint,dataIndex:int):void
{
	super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
	var bg:Shape = Shape(s.getChildAt(rowIndex));
	//此外为了显示虚线~使用一个while来循环来模拟虚线效果~
	var p:Number = 0;
	bg.graphics.lineStyle(1,0xCCCCCC);
	while(p < listContent.width)
	{
		bg.graphics.moveTo(p,height-1);
		bg.graphics.lineTo(p+4,height-1);
		p += 6;
	}
}
需要注意的一点~
<L4cd:iList alternatingItemColors="0xFFFFFF" rowHeight="25" dataProvider="{list}" labelField="label" left="10" top="10" right="10" bottom="10"/>
要触发drawRowBackground函数~必须先设置alternatingItemColors这个style~因为drawRowBackground的作用是用来画item的背景的,没有设置背景将不会触发drawRowBackground~


  相关文件 (1.4 KiB, 252 hits)
分类: FLEX , 标签: , ,

使用bitmapData简单实现涂鸦中的橡皮功能[Flex]

有朋友需要..改成了Flex版的..其实代码原理都一样...

其它版本:
使用bitmapData简单实现涂鸦中的橡皮功能(AS3+Flash)
使用bitmapData简单实现涂鸦中的橡皮功能(AS2)

效果:

查看文章剩余部份
分类: FLEX , 标签: , ,

DataGrid中自定义列的数据绑定与同步(设置与获取)

对于DataGrid,我们最常用到的.基本上就是他的自定义列itemEditor和itemRenderer..对于一般的自定义组件..像checkbox等组件..已经内置了同步的方法"data",在帮助中这么介绍到

data 属性
data:Object []
  当您将某个组件用作项目渲染器或项目编辑器时,可借助 data 属性向该组件传递值。您通常使用数据绑定将 data 属性的字段绑定到此组件的某个属性。
  当您使用此控件作为嵌入式项目渲染器或嵌入式项目编辑器时,Flex 会自动将此项目的当前值写入此控件的 selected 属性。
  此属性可用作数据绑定的源。

所以默认情况下..只要我们指定了系统已有组件的话..那他会就自动把相应的数据显示出来..(或者手动指定data,需要特别显示可以重写data)

那么..对于我们自定义的组件..
或者我们需要按指定的形式显示数据的话...
我们只需要也写一个相应的共开的属性...
就可以完全同步自定义itemRenderer或itemEditor...


上面的例子中..同步了性别字段..其中第二列显示使用LabelFunction,编辑使用了一个自定义C,第三列显示编辑都使用的是自定义C,
无论修改的是第二列或第三列..相应的显示都会完全同步..
另外..在dg外..再添加一个list..同步显示该字段..

主mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application fontSize="12" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
	<mx:Script>
		<![CDATA[
			import mx.collections.*;
			import mx.controls.*;
			[Bindable]
			private var rs:ArrayCollection = new ArrayCollection([{name:"陈一",age:18,sex:0},{name:"刘二",age:18,sex:1},{name:"张三",age:18,sex:2},{name:"李四",age:18,sex:0},])
			private function getSex(data:Object,dgc:DataGridColumn=null):String
			{
				return data.sex==1?'男':(data.sex==2?'女':'非男非女');
			}
		]]>
	</mx:Script>
	<mx:DataGrid id="dg" dataProvider="{rs}" editable="true" right="10" left="10" top="10" bottom="120">
		<mx:columns>
			<mx:DataGridColumn headerText="姓名" dataField="name" width="50"/>
			<mx:DataGridColumn headerText="性别一" 
				labelFunction="{getSex}" dataField="sex" 
				editorDataField="selected" editorYOffset="2" width="130">
				<mx:itemEditor>
	<mx:Component>
						<local:G selected="{data}"/>
	</mx:Component>
	</mx:itemEditor>
			</mx:DataGridColumn>
			<mx:DataGridColumn headerText="性别二" dataField="sex" 
				editorDataField="selected" editorYOffset="2" width="130">
				<mx:itemRenderer>
	<mx:Component>
						<local:G selected="{data}"/>
	</mx:Component>
	</mx:itemRenderer>
				<mx:itemEditor>
	<mx:Component>
						<local:G selected="{data}"/>
	</mx:Component>
	</mx:itemEditor>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
	<mx:List dataProvider="{rs}" labelFunction="getSex" labelField="sex" left="10" right="10" bottom="10" height="102">
	</mx:List>
</mx:Application>

G.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			[Bindable]
			public function get selected():Object
			{
				return radiogroup1.selectedValue=='男'?1:(radiogroup1.selectedValue=='女'?2:0)
			}
			public function set selected(value:Object):void
			{
				radiogroup1.selectedValue=value.sex==1?'男':(value.sex==2?'女':'非男非女')
			}
		]]>
	</mx:Script>
	<mx:RadioButtonGroup id="radiogroup1" />
	<mx:RadioButton label="非男非女" groupName="radiogroup1" data="0"/>
	<mx:RadioButton label="男" groupName="radiogroup1" data="1"/>
	<mx:RadioButton label="女" groupName="radiogroup1" data="2"/>
</mx:HBox>
分类: FLEX , 标签: , ,