Flex中使用Programmatic Skin Creating Programmatic Skins

Categories: Flex; Tagged with: Flex • Programmatic Skins • Skin; @ October 12th, 2008 15:51

1.选择以下一个类作为要创建的Skin的父类
Border或其子类

ProgrammaticSkin或其子类

RectangularBorder或其子类

UiComponent或其子类

2.实现updateDisplayList().将所有Drawing或Styling元素写入该方法中.
3.如果是ActionScript类, 实现其构造函数
4.[可选]实现measuredWidth与measureHeight的get方法

5.如果继承自Border或是RectangularBorder,为borderMetrics属性实现一个get方法

举例:改变Button的Skin. 使得Button上增加一个"X"号

1.建立一个Skin, 因为是Button,选择继承自ButtonSkin

package com
{
import mx.skins.halo.ButtonSkin;

public class crossButtonSkinAS extends ButtonSkin 
{
	private var cross:Boolean;
	
	//构造函数
	public function crossButtonSkinAS() {
		super();
	}
	
	/**
	 * 重写styleChanged函数.当style属性改变时,会激发该函数,Whenever style changes, redraw this skin;
	 * 重写改函数,使之获取新的透明度;
	 */ 
	override public function styleChanged(styleProp:String):void {
		trace("StyleChanged: " + styleProp);
		styleSetUp();
		
		super.styleChanged(styleProp);
	}
	
	/**
	 * 获得cross
	 */ 
	public function styleSetUp():void {
		cross = getStyle("cross") as Boolean;
		if(cross != true) {
			cross = false;
		}
	}
	
	override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
		super.updateDisplayList(unscaledWidth, unscaledHeight);
		
		if(cross) {
			graphics.moveTo(0,0);
			graphics.lineStyle(1,0x000000);
			graphics.lineTo(unscaledWidth,unscaledHeight);
			graphics.moveTo(unscaledWidth,0);
			graphics.lineTo(0,unscaledHeight);
		}
	}
}//end of class ButtonUpSkinAS
}//end of package com

2.在MXML中增加一个Style

.crossButton {
  skin: ClassReference("com.crossButtonSkinAS");
  cross: true;
}

增加一个Button:

效果:

Flex运行时动态加载Style Loading Style Sheets At Run Time <-> 10月12日星期天白天晴天,晚上竟然也是晴天