[Flex help] Using the StyleManager class

StyleManager

styleManager 클래스는 액션스크립트의 class selectors 와 type selectors에 접근하게 한다. 또한 상속의 적용여부도 적용할 수 있따. Styel Manager를 사용함으로써 css 스타일 정의와 어플리케이션 처리를 적용할 수 있다.

style_name은 문자 그대로 Button아나 TextArea같은 type selector 나 <mx:Style>태그나 외부스타일시트에 정의된 class selector 일 수 있다.

getStyleDeclaration() 메서드는 한번에 여러 클래스에 noninheritable style을 적용할 때 유용하다. 이 프로퍼티는 CSSStyleDeclaration에 미리 갖고있는 Type selector와 external style sheet를 참고한다. 

<mx:Style>

.myStyle{

color: red;

}

</mx:Style>

<mx:Script>

<![CDATA[

import mx.styles.StyleManager;

public function initApp(e:Event):void{

//Tyle selector: applies to all buttons and subclasses of button

StyleManager.getStyleDeclaration("Button").setStyle("fontSize",24);

//Class selector: applies to controls using the style named mystyle.

StyleManager.getStyleDeclaration(".myStyle").setStyle("color",0xcc66cc);

//Global style: applies to all controls

StyleManager.getStyleDeclaration("global").setStyle("fontStyle","italic");

}

]]>

</mx:Script>

StyleManager의 selectors 프로퍼티를 통해 StyleManager에 등록된 type selector와 모든 클래스 리스트( global selector, default selectors, all user-defined selectors를 포함.)에 접근할 수 있다.  getStyleDeclaration()메서드 사용.

<mx:Style>

.unusedStyleTest{

fontSize:17;

color:green;

}

</mx:Style>

<mx:Script>

<![CDATA[

import mx.styles.StyleManager;

private var stylesList:Array = [

'fontSize','color','fontWeight','fontFamily','fontStyle'

];

public function showSelectors():void{

msg.text = "List all selectors, and show when they explicitly define the following:\n";

msg.text += stylesList.toString();

var selectors:Array = StyleManager.selectors;

for(var i:int = 0; i< selectors.length; i++){

msg.text+= "\n\n"+selectors[i] +"{";

for(var j:int =0; j<stylesList.length;j++){

var s:String = CSSStyleDeclaration(StyleManager.getStyleDeclaration(selectors[i])).

getStyle(stylesList[j]);

if(s != null){

msg.text += "\n " + stylesList[j] + ":"+s+";";

}

msg.text+="\n";

}

}

}

]]>

</mx:Script>

ActionScript를 통해 CSSStyleDeclaration클래스에 CSS style declarations을 생성할 수 있다. 런타임에 스타일시트를 create and edit 되어 클래스에 적용한다. 런타임동안 스타일의 정의를 바꾸거나 적용하기 위해서 setStyle()메서드를 사용한다.

StyleManager는 모든 타입의 컴포넌트에 스타일 시트를 적용할 수 있도록 selector로 CSSStyleDeclaration 객체를 적용하는 기능을 가진 setStyleDeclaration()메서드도 포함한다.

<mx:Script>

<![CDATA[

import mx.styles.StyleManager;

private var myDynStyle:CSSStyleDeclaration;

public function initApp():void{

myDynStyle = new CSSStyleDeclaration('myDynStyle');

myDynStyle.setStyle('color','blue');

myDynStyle.setStyle('fontFamily','georgia');

myDynStyle.setStyle('themeColor','green');

myDynStyle.setStyle('fontSize',24);

/**Apply the new style to all Buttons. By using a type selector,

 * this CSSStyleDeclaration object will replace all style properties,

 * causing potentially unwanted

 */

                                StyleManager.setStyleDeclaration(".myButtonStyle", myDynStyle, true);

}

                        private function resetStyles():void{

//remove aCSSStyleDeclaration object 

                                StyleManager.clearStyleDeclaration(".myButtonStyle",true);

                        }

]]>

</mx:Script>

부분적으로 컴포넌트 인스턴스에 개별적으로 스타일을 적용할 수 있다.

comonentInstance.getStyle(property_name)

componentInstance.setStyle(property_name, property_value)

<Improving performance with the setStyle()>

런타임에 적용하는 스타일은 매우강하지만 드물게 사용한다.

동적으로 객체의 인스턴스에 스타일을 적용하는것은 UIComponent의 setStyle()메서드에 접근함을 의미한다. setStyle()메서드는 플렉스 프레임워크에서 가장 리소스를 많이 사용하는 호출 중에 하나이다.그렇기 때문에 이 호출은 새로운 스타일의 적용을 위해 그 객체의 자식에게 새로운 적용사실을 모두 알려야한다.

퍼포먼스 충돌의 일반적인 실수는 setStyle()메서드를 재사용하거나 불필요하게 사용하는 것이다. setStyle()메서드는 오직 존재하는 객체의 스타일을 바꿀때만 필요하다. 처음에 객체가 생성될때 스타일을 적용하는 대신 <mx:Style> block 이나 css 스타일시트 또는 global 스타일에 적용한다.