自定义 相关的文章

TwitterWidget 自定义皮肤

最近Twitter风风火火..
除了有网页~客户端外~
Twitter还提供Widget
供用户显示在自己的MySplace,FaceBook或任意网页~Blog上..
详细查看这http://twitter.com/widgets
查看文章剩余部份
分类: ACTIONSCRIPT , 标签: ,

自定义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 , 标签: , ,

按条件显示DataGrid/AdvancedDataGrid中行的背景颜色

在使用DataGrid/AdvancedDataGrid我们有时候会需要以指定的条件显示行的背景色..达到突出显示的效果..
下面是两种常用的应用..


一.跟据指定的字段数据,条件显示指定的行的指定背景色..
下面这个是根据成绩的字段.,低于60分即显示橙红色..
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
			{
				var list:XMLList = new XMLList(dataProvider)
				if(dataIndex < list.length() && list[dataIndex].@result<60)color = 0xFF6600
				super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
			}
		]]>
	</mx:Script>
</mx:DataGrid>


二.根据单双行显示隔行颜色..
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
			{
				if(dataIndex%2==0)color = 0xcccccc
				super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
			}
		]]>
	</mx:Script>
</mx:DataGrid>


  相关下载 (1.8 KiB, 227 hits)
分类: FLEX , 标签: , , ,

自定义Flex的Loading界面(源码)

这个方法网上已经有人写过例子...
在这里我只是自己做个实例并记录一下..
首先~自定义Flex加载的原理其实就是继承mx.preloaders.DownloadProgressBar类..然后重写相关的方法..
package
{
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.text.TextField;
	import flash.text.TextFormat;
	
	import mx.events.FlexEvent;
	import mx.preloaders.DownloadProgressBar;

	public class LoadingExampleProgressBar extends DownloadProgressBar
	{
		private var logo:Loader;
		private var txt:TextField;
		private var _preloader:Sprite;
		public function LoadingExampleProgressBar()
		{
			logo = new Loader();
			logo.load(new URLRequest("l4cd.png"));
			addChild(logo);
			
			var style:TextFormat = new TextFormat(null,null,0xFFFFFF,null,null,null,null,null,"center");
			txt = new TextField();
			txt.defaultTextFormat = style;
			txt.width = 200;
			txt.selectable = false;
			txt.height = 20;
			addChild(txt);
			
			super();
		}
		//最重要的代码就在这里..重写preloader,让swf执行加载的时候~进行你希望的操作~
		override public function set preloader(value:Sprite):void{
			_preloader = value
			//四个侦听~分别是 加载进度 / 加载完毕 / 初始化进度 / 初始化完毕
			_preloader.addEventListener(ProgressEvent.PROGRESS,load_progress);
			_preloader.addEventListener(Event.COMPLETE,load_complete);
			_preloader.addEventListener(FlexEvent.INIT_PROGRESS,init_progress);
			_preloader.addEventListener(FlexEvent.INIT_COMPLETE,init_complete);
			
			stage.addEventListener(Event.RESIZE,resize)
			resize(null);
		}
		private function remove():void{
			_preloader.removeEventListener(ProgressEvent.PROGRESS,load_progress);
			_preloader.removeEventListener(Event.COMPLETE,load_complete);
			_preloader.removeEventListener(FlexEvent.INIT_PROGRESS,init_progress);
			_preloader.removeEventListener(FlexEvent.INIT_COMPLETE,init_complete);
			stage.removeEventListener(Event.RESIZE,resize)
		}
		private function resize(e:Event):void{
			logo.x = (stage.stageWidth - 40)/2;
			logo.y = (stage.stageHeight - 80)/2;
			txt.x = (stage.stageWidth - 200)/2;
			txt.y = logo.y + 40+5;
			
			graphics.clear();
			graphics.beginFill(0x333333);
			graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
			graphics.endFill();
		}
		private function load_progress(e:ProgressEvent):void{
			txt.text = "正在加载..."+int(e.bytesLoaded/e.bytesTotal*100)+"%";
		}
		private function load_complete(e:Event):void{
			txt.text = "加载完毕!"
		}
		private function init_progress(e:FlexEvent):void{
			txt.text = "正在初始化..."
		}
		private function init_complete(e:FlexEvent):void{
			txt.text = "初始化完毕!"
			remove()
			//最后这个地方需要dpe一个Event.COMPLETE事件..表示加载完毕让swf继续操作~
			dispatchEvent(new Event(Event.COMPLETE))
		}
	}
}

自定义了加载类后..我们新建一个app测试一下..
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	preloader="LoadingExampleProgressBar" 
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#333333, #333333]">
</mx:Application>
//请自行增加一“大”体积的东西..必放到网上去测试...

  相关源码 (142.0 KiB, 520 hits)
分类: FLEX , 标签: , ,