2008

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

Categories: Flex; Tagged with: Flex • Run Time • Style; @ October 12th, 2008 15:25

在运行时通过StyleManager的loadStyleDeclarations()加载基于SWF文件的CSS.
1.创建一个CSS文件 newStyle.css

/* CSS file */
Button {
fontSize: 16;
}

2.右键Compile CSS To SWF,将CSS编译为SWF文件生成一个newStyle.swf文件

3.使用StyleManager的loadStyleDeclarations()加载CSS

	public function loadStyle():void {
		StyleManager.loadStyleDeclarations("newStyle.swf");
	}
	public function unloadStyle():void {
		StyleManager.unloadStyleDeclarations("newStyle.swf");
	}

效果:

在点击"LoadStyle"时,所有Button的字体将变为16号, 在点击"UnloadStyle"时,字体恢复默认

Flex中使用Shared Object—Use Shared Object In Flex

Categories: Flex; Tagged with: ActionScript • Flex • Shared Object; @ October 12th, 2008 14:13

Flex中的ShareObject类似于传统的cookie,但又具有传统cookies所不具有的优点:

1.默认情况下,不会过期
2.默认情况下,每个ShareObject的大小限制为100KB;
3.可以存储简单数据类型 :String,Array,Data等;
4.存储于程序制定的位置[在User的Home Directory中];
5.从不在客户端与服务器间传递

1.创建一个Shared Object

  			var NoteManagementShareObject:SharedObject = SharedObject.getLocal("NoteManagementShareObjectSave");

2.指定位置:

var NoteManagementShareObject:SharedObject = SharedObject.getLocal("NoteManagementShareObjectSave", "/");

3.保存数据

以保存XML数据为例:

  		public function save(givenXML:XML = null):void{
  			var NoteManagementShareObject:SharedObject = SharedObject.getLocal("NoteManagementShareObjectSave");
  			NoteManagementShareObject.data.catandnote = givenXML;
  			NoteManagementShareObject.flush();
  		}

ButtonBar,LinkBar组件简单应用

Categories: Flex; Tagged with: ButtonBar • Flex • LinkBar; @ October 12th, 2008 13:53

ButtonBar[按钮菜单组件] 可以提供一组以水平或垂直方式布局的按钮, 通过响应按钮组件的事件来处理一些需求.
LinkBar继承了Container的属性和方法,LinkBar自身属性只有一个,就是SelectedIndex.LinkBar与ButtonBar组件处理导航的方式一直,与TabBar组件那样保留了用户单击按钮的状态.
1: ButtonBar:

MXML:

		
				
				
					
						洪七公
						一灯大师
						黄老邪

点击响应函数:

		import mx.events.ItemClickEvent;
		function changeButton(event:ItemClickEvent):void{
			ta.text="单击按钮"+String(event.index)+"\n"+"人物介绍:"+event.label;
		}

2.LinkBar:

效果:

多视图切换简单应用—Accordion折叠视图组件

Categories: Flex; Tagged with: Accordion • Flex; @ October 12th, 2008 13:38

Accordion继承自Container,可以实现视图折叠显示的功能.可直接现实内容信息或提供交互操作视图.各子容器之间的关系是并列的. 可以通过Accordion提供的折叠导航按钮来控制视图间的切换.

效果如下:

Newer Posts <-> Older Posts