Flex样式、图片以及组件
1、 指定组件的相对高度可以使用percentWidth和percentHeight。
^_^ ^_^ 记得以往我曾非常傻B地使用this.width*0.8这样的方式
2、 MyDashBoard例子启示录
往TitleWindow上添加最大化、最小化按钮图标可以采用样式的方式来实现，而非一定得是直接嵌入图片的方式。
参考方式： Pod.as
var maxmizeButton:Button = new Button();
var maxmizeButton.styleName="maximizeButton";
定义有样式表：
.maxminizeButton{
up-skin: Embed("a.jpg");
... ...
}
3、 对于Flex3中的layoutChrome方法可以使用Flex4中的updateDisplay进行替换
4、 发现网上关于最大化、最小化的例子采取的方式基本上都是在titleBar中添加相应的图标，而如今到了Flex4中已经没有titleBar这个属性了(titleBar是作为一个独立的空间而非像FLex3那样作为panel的一个属性)。——改如何解决呢？
Flex3中控制”关闭按钮“是否显示的方式为: showCloseButton = false;
Flex4中 closeButton.visiable = false;
注意： 如果titleWindow组件是动态添加的，必须在该组件初始化完成后再调closeButton.visiable=false,否则会出错。
附：隐藏titleDisplay.parent.visiable = false;//不显示标题栏
（拖动的效果点击区域为标题栏）
5、 addChild和rawChildren.addChild的区别？
将一个sprite放入一个容器内，调用容器的addChild方法，结果运行时报错，说不是UIComponent的子类，而使用rawChildren.addChild却成功？
————————相关知识拓展
mx.core.Container是“组件容器”，用来管理其中子组件(UIComponent)的布局
Application就是组件容器，Flex中的组件无法脱离容器而独立显示；Flex组件必须在容器中才能工作。
mx.core.Container同时也是一个“显示对象容器(DisplayObject)。注意：组件与显示对象不是同一个概念
Container自身也是一个组件，它也有自己的内部对象，Container的内部对象及自组建都是显示对象容器的子显示对象。
而通过Container的rawChildren属性可以获得访问容器的显示所有子对象的接口
————Flex中组建一般组件的继承关系(此处以Panel为例)：
Panel——Container——UIComponent——FlexSprite——Sprite——DisplayObjectContainer——InteractiveObject——DisplayObject——EventDispatcher——Object。
6、 Flex中当怎么调整XY属性都无效时则要考虑是否是组件布局所导致的。
7、 深入Flex4，了解Element和Child的异同
.element 实现了IVisualElement接口类型的任意型别
.child 扩展了DisplayObject类的任意型别
UIComponent既实现了IVisualElement接口，也扩展了DisplayObject；
容器中的DisplayObject对象，无疑是该容器的child，而只有当DisplayObject对象也同时实现了IVisualElement接口时才是该容器的element。
参考：http://bigt.iteye.com/blog/764430
8、 Flex Image通过as的方式动态地加载图片
Embed支持的类型为String和Class
尝试：
A、 function initial():void{
photoArray = new Array();
photoArray.push("xx.jpg");
... ...
for(循环){
var url:String = photoArray[i];
var image:Image = new Image();
image.load(url);
}
}//结果不行
分析：load(url), url参数可引用GIF,JPEG,PNG,SWF等文件，无法使用此方法加载SVG文件，且必须对source属性使用Embed语句才能加载。
B、 <mx:Image source="{getImage('')} .../>
function getImage(state:String):String{
if(state==xxx){
return 1.jpg;
}
}
//仍然无效，然而在datagrid中的ItemRender中如此使用却有效。
C、 适用的方式
[Embed("图片路径")]
private var maxIcon:Class;
图片id.source = maxIcon;
附译文解决方案：
EnhancedTitleWindow.as
package xxx{import flash.events.MouseEvent;import mx.core.UIComponent;import mx.events.CloseEvent;import spark.components.Button;import spark.components.Group;import spark.components.TitleWindow;import spark.layouts.supportClasses.LayoutBase;[Style(name="titleBarHeight", type="Number", inherit="no", theme="spark")][Style(name="showExpandIndicator", type="Boolean", inherit="no", theme="spark")]public class EnhancedTitleWindow extends TitleWindow{public static const EXPANDED:String = "EnhancedTitleWindow:expanded";public static const COLLAPSED:String = "EnhancedTitleWindow:collapsed";public var headerClickable:Boolean;[Bindable]public var collapsible:Boolean;[Bindable]public var showCloseButton:Boolean;[SkinPart(required="false")]public var expandIndicator:UIComponent;[SkinPart(required="false")]public var topGroup:Group;[SkinPart(required="false")]public var titleBarContentGroup:Group;protected var expandedChanged:Boolean;protected var _expanded:Boolean = true;protected var _titleBarContent:Array;protected var _titleBarLayout:LayoutBase;public function EnhancedTitleWindow(){super();}[Bindable]public function get expanded():Boolean{return _expanded;}public function set expanded(value:Boolean):void{if(value != _expanded){expandedChanged = true;_expanded = value;invalidateProperties();invalidateSkinState();}}public function set titleBarContent(value:Array):void{_titleBarContent = value;}public function get titleBarLayout():LayoutBase{return _titleBarLayout;}public function set titleBarLayout(value:LayoutBase):void{_titleBarLayout = value;if(titleBarContentGroup)titleBarContentGroup.layout = _titleBarLayout;}protected function onExpandIndicatorClick(event:MouseEvent):void{if(!headerClickable && collapsible) expanded = !expanded;}protected function onCloseClick(event:MouseEvent):void{event.stopImmediatePropagation();dispatchEvent(new CloseEvent(CloseEvent.CLOSE));}protected function onHeaderClicked(event:MouseEvent):void{if(headerClickable && collapsible)expanded = !expanded;}override protected function partAdded(partName:String, instance:Object) : void{super.partAdded(partName, instance);if(instance == expandIndicator){expandIndicator.addEventListener(MouseEvent.CLICK, onExpandIndicatorClick);}else if(instance == topGroup){topGroup.addEventListener(MouseEvent.CLICK, onHeaderClicked);}else if(instance == titleBarContentGroup){if(_titleBarContent)titleBarContentGroup.mxmlContent = _titleBarContent;if(_titleBarLayout)titleBarContentGroup.layout = _titleBarLayout;}}override protected function partRemoved(partName:String, instance:Object) : void{super.partRemoved(partName, instance);if(instance == expandIndicator){expandIndicator.removeEventListener(MouseEvent.CLICK, onExpandIndicatorClick);}else if(instance == topGroup){topGroup.removeEventListener(MouseEvent.CLICK, onHeaderClicked);}}override protected function commitProperties() : void{super.commitProperties();if(expandedChanged){expandIndicator.currentState = _expanded ? "expanded" : "collapsed";if(_expanded)dispatchEvent(new Event(EXPANDED));elsedispatchEvent(new Event(COLLAPSED));expandedChanged = false;}}override protected function getCurrentSkinState():String{var state:String = super.getCurrentSkinState(); if(collapsible){if(!_expanded){if(enabled)state = "collapsed";elsestate = "disabledCollapsed";}}return state;}}}<?xml version="1.0" encoding="utf-8"?><!--ADOBE SYSTEMS INCORPORATEDCopyright 2008 Adobe Systems IncorporatedAll Rights Reserved.NOTICE: Adobe permits you to use, modify, and distribute this filein accordance with the terms of the license agreement accompanying it.--><!--- The default skin class for a Spark TitleWindow container. @see spark.skins.spark.TitleWindowCloseButtonSkin@see spark.components.TitleWindow@langversion 3.0@playerversion Flash 10@playerversion AIR 1.5@productversion Flex 4--><s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false" minWidth="76" minHeight="76" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5"><fx:Metadata><![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent*/[HostComponent("spark.components.TitleWindow")]]]></fx:Metadata> <fx:Script fb:purpose="styling">/* Define the skin elements that should not be colorized. For panel, border and title background are skinned, but the content area and title text are not. */static private const exclusions:Array = ["background", "titleDisplay", "contentGroup"];/** * @private */ override public function get colorizeExclusions():Array {return exclusions;}/** * @private */override protected function initializationComplete():void{useChromeColor = true;super.initializationComplete();}/** * @private */override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{if (getStyle("borderVisible") == true){/*border.visible = true;*//* background.left = background.top = background.right = background.bottom = 1; *//* contents.left = contents.top = contents.right = contents.bottom = 1; */}else{/*border.visible = false;*//* background.left = background.top = background.right = background.bottom = 0; *//* contents.left = contents.top = contents.right = contents.bottom = 0; */}/*dropShadow.visible = getStyle("dropShadowVisible");*/var cr:Number = getStyle("cornerRadius");var withControls:Boolean = (currentState == "disabledWithControlBar" || currentState == "normalWithControlBar" ||currentState == "inactiveWithControlBar");if (cornerRadius != cr){cornerRadius = cr;/*dropShadow.tlRadius = cornerRadius;dropShadow.trRadius = cornerRadius;dropShadow.blRadius = withControls ? cornerRadius : 0;dropShadow.brRadius = withControls ? cornerRadius : 0;*/setPartCornerRadii(topMaskRect, withControls); /* setPartCornerRadii(border, withControls); *//* setPartCornerRadii(background, withControls); */}if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls); /* borderStroke.color = getStyle("borderColor");borderStroke.alpha = getStyle("borderAlpha"); *//* backgroundFill.color = getStyle("backgroundColor");backgroundFill.alpha = getStyle("backgroundAlpha"); */var barHeight:Number = getStyle("titleBarHeight");titleBarGroup.height = isNaN(barHeight) ? 20 : barHeight;super.updateDisplayList(unscaledWidth, unscaledHeight);}/** * @private */ private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void{ target.topLeftRadiusX = cornerRadius;target.topRightRadiusX = cornerRadius;target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;}private var cornerRadius:Number;</fx:Script><s:states><s:State name="normal" /><s:State name="inactive" stateGroups="inactiveGroup" /><s:State name="disabled" /><s:State name="normalWithControlBar" stateGroups="withControls" /><s:State name="inactiveWithControlBar" stateGroups="withControls, inactiveGroup" /><s:State name="disabledWithControlBar" stateGroups="withControls" /></s:states><!--- drop shadow can't be hittable so it stays sibling of other graphics @private--><!--<s:RectangularDropShadow id="dropShadow" blurX="0" blurY="0" alpha="0.60" alpha.inactiveGroup="0.60" distance="5" distance.inactiveGroup="5"angle="120" color="0x000000" left="0" top="0" right="0" bottom="0"/>--><s:Rect top="0" bottom="0" left="0" right="0" radiusX="5" radiusY="5"><s:fill><s:RadialGradient><s:entries><s:GradientEntry color="0x000000" alpha="0.5"/><s:GradientEntry color="0x000000" alpha="0.2"/></s:entries></s:RadialGradient></s:fill><s:filters><s:BlurFilter blurX="5" blurY="5"/></s:filters></s:Rect><s:Rect top="3" bottom="3" left="3" right="3" radiusX="5" radiusY="5"><s:fill><s:SolidColor color="0x000000" alpha="0.3"/></s:fill></s:Rect><!--- drop shadow can't be hittable so all other graphics go in this group --><s:Group left="10" right="10" top="10" bottom="10"><!--- top group mask @private--><s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask"><!--- @private--><s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0"><s:fill><s:SolidColor alpha="0"/></s:fill></s:Rect></s:Group><!--- bottom group mask @private--><s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask" includeIn="withControls"><!--- @private--><s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0"><s:fill><s:SolidColor alpha="0"/></s:fill></s:Rect></s:Group><!--- layer 1: border @private --><s:Rect id="border" left="0" right="0" top="0" bottom="0" topLeftRadiusX="10" topLeftRadiusY="10"><s:stroke><s:SolidColorStroke id="borderStroke" color="#0066cc" weight="1" /></s:stroke></s:Rect><!-- layer 2: background fill --><!--- Defines the appearance of the TitleWindowSkin class's background. --><s:Rect id="background" left="1" top="1" right="1" bottom="1" topLeftRadiusX="9" topLeftRadiusY="9"><s:fill><s:SolidColor id="backgroundFill" color="#FFFFFF"/></s:fill></s:Rect><!-- layer 3: contents --><!--- Contains the vertical stack of title bar content and control bar. --><s:Group left="1" right="1" top="1" bottom="1" id="contents"><s:layout><s:VerticalLayout gap="0" horizontalAlign="justify" /></s:layout><!--- @private --><s:Group id="topGroup" mask="{topGroupMask}"><!--- layer 0: title bar fill @private --><!--<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1"><s:fill><s:LinearGradient rotation="90"><s:GradientEntry color="0xD2D2D2"color.inactiveGroup="0xEAEAEA"/><s:GradientEntry color="0x9A9A9A"color.inactiveGroup="0xCECECE"/></s:LinearGradient></s:fill></s:Rect>--><s:Rect left="0" right="0" top="15" bottom="0" bottomRightRadiusX="9" bottomRightRadiusY="9"><s:stroke><s:SolidColorStroke color="#0066cc" weight="1"/></s:stroke></s:Rect><s:Rect left="0" right="0" top="0" bottom="1" topLeftRadiusX="8" topLeftRadiusY="8" bottomRightRadiusX="8" bottomRightRadiusY="8"><s:stroke><s:SolidColorStroke color="0x66ccff" weight="1"/></s:stroke></s:Rect><s:Rect left="1" right="1" top="1" bottom="2" topLeftRadiusX="7" topLeftRadiusY="7" bottomRightRadiusX="7" bottomRightRadiusY="7"><s:fill><s:LinearGradient rotation="90"><s:entries><s:GradientEntry color="#33ccff"/><s:GradientEntry color="#0066cc"/></s:entries></s:LinearGradient></s:fill></s:Rect><s:BitmapImage source="@Embed('/assets/images/title_window_cloud.png')" width="181" height="27" horizontalCenter="0" verticalCenter="0" smooth="true" alpha="0.8"/><!--- layer 1: title bar highlight @private --><!--<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" alpha="0"><s:stroke><s:LinearGradientStroke rotation="90" weight="1"><s:GradientEntry color="0xE6E6E6" /><s:GradientEntry color="0xFFFFFF" alpha="0.22"/></s:LinearGradientStroke></s:stroke><s:fill><s:LinearGradient rotation="90"><s:GradientEntry color="0xFFFFFF" alpha="0.15" /><s:GradientEntry color="0xFFFFFF" alpha="0.15" ratio="0.44"/><s:GradientEntry color="0xFFFFFF" alpha="0" ratio="0.4401"/></s:LinearGradient></s:fill></s:Rect>--><!--- layer 2: title bar divider @private --><!--<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0"><s:fill><s:SolidColor color="0x000000" alpha="0.75" /></s:fill></s:Rect>--><!-- layer 3: text --><!--- @copy spark.components.Panel#titleDisplay --><s:Group id="titleBarGroup" left="6" right="1" top="1"><s:layout><s:HorizontalLayout verticalAlign="middle" gap="4"/></s:layout><!--<enhancedtitlewindow:TriangleIndicator id="expandIndicator"/>--><s:Label id="titleDisplay" maxDisplayedLines="1" left="9" right="36" top="1" bottom="0" minHeight="30" verticalAlign="middle" fontWeight="bold" color="#ffffff"></s:Label><s:Group id="titleBarContentGroup" width="100%" height="100%"><s:layout><s:HorizontalLayout/></s:layout></s:Group><!-- layer 4: moveArea --><!--- @copy spark.components.TitleWindow#moveArea --><s:Group id="moveArea" left="0" right="0" top="0" bottom="0" /><!--- @copy spark.components.TitleWindow#closeButton --><s:Button id="closeButton" skinheight="15" visible="{false}" includeInLayout="{false}" /></s:Group></s:Group><!--Note: setting the minimum size to 0 here so that changes to the host component'ssize will not be thwarted by this skin part's minimum size. This is a compromise,more about it here: http://bugs.adobe.com/jira/browse/SDK-21143--><!--- @copy spark.components.SkinnableContainer#contentGroup --><s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"></s:Group><!--- @private --><s:Group id="bottomGroup" minWidth="0" minHeight="0" includeIn="withControls"> <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}"><!-- layer 0: control bar divider line --><s:Rect left="0" right="0" top="0" height="1" alpha="0.22"><s:fill><s:SolidColor color="0x000000" /></s:fill></s:Rect><!-- layer 1: control bar highlight --><s:Rect left="0" right="0" top="1" bottom="0"><s:stroke><s:LinearGradientStroke rotation="90" weight="1"><s:GradientEntry color="0xFFFFFF" /><s:GradientEntry color="0xD8D8D8" /></s:LinearGradientStroke></s:stroke></s:Rect><!-- layer 2: control bar fill --><s:Rect left="1" right="1" top="2" bottom="1"><s:fill><s:LinearGradient rotation="90"><s:GradientEntry color="0xEDEDED"/><s:GradientEntry color="0xCDCDCD"/></s:LinearGradient></s:fill></s:Rect></s:Group><!--- @copy spark.components.Panel#controlBarGroup --><s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0"><s:layout><s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" /></s:layout></s:Group></s:Group></s:Group></s:Group></s:SparkSkin><resizewindow:EnhancedTitleWindow id="diyTitleWindow" height.normal="269" height.max="386" width="420" width.max="460" titleBarHeight="30" title="事件详情" styleName="enhancedTitleWindow"><resizewindow:titleBarContent><mx:Spacer width.normal="320" width.max="360"/><mx:Image id="maxIcon" click="maxTheWindowHandler()" source="@Embed('/assets/images/resizewindow/maximize_over.png')"/><mx:Image source="@Embed('/assets/images/resizewindow/WindowCloseButton2.gif')" click="closeTheWindowHandler()"/></resizewindow:titleBarContent><mx:Form width="420" width.max="460" height="100%"><mx:FormItem label="主题:" width="100%" fontSize="13"> <s:TextArea id="subject" width="100%" height.normal="40" height.max="50" text="{model._selectedEventItem.subject}" editable="false" horizontalScrollPolicy="off" verticalScrollPolicy="off"/></mx:FormItem><mx:FormItem label="详细信息:" width="100%" fontSize="13"><s:TextArea id="detail" width="100%" height.normal="140" height.max="248" text="{model._selectedEventItem.detail}" editable="false"/></mx:FormItem></mx:Form></resizewindow:EnhancedTitleWindow>