Digital Bohemian :: 내가 주로 사용하는 Flex CSS 스타일 선택 방법

2009/06/18 10:38

내가 주로 사용하는 Flex CSS 스타일 선택 방법

2009/06/18 10:38 in FLEX

플렉스 CSS를 이용하여 스타일을 적용하는 방법은 여러가지가 있다.

그 중 내가 자주 사용하는 방법에 대해서 포스팅 하려고 하는데 상황은 다음과 같다.

1, 2, 3, 4, 5, 6, 7, 8, 9, 10 이라는 이미지가 있고, 동적으로 image 태그에 embed 시킬일이 있을경우.

나는 개발할때 보통 이미지를 MXML이 아닌 CSS에 embed 시켜놓고 stylemanager를 통해 load하여 내부 리소스를 사용한다.

일단 구현 방법..

test.css

CountDown {

count1: Embed(source="assets/images/quizplay/label/count_1.png");

count2: Embed(source="assets/images/quizplay/label/count_2.png");

count3: Embed(source="assets/images/quizplay/label/count_3.png");

count4: Embed(source="assets/images/quizplay/label/count_4.png");

count5: Embed(source="assets/images/quizplay/label/count_5.png");

count6: Embed(source="assets/images/quizplay/label/count_6.png");

count7: Embed(source="assets/images/quizplay/label/count_7.png");

count8: Embed(source="assets/images/quizplay/label/count_8.png");

count9: Embed(source="assets/images/quizplay/label/count_9.png");

count10: Embed(source="assets/images/quizplay/label/count_10.png");

}

test.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="onCreationComplete()">

public function GetCSSResource(parentName:String, childName:String):Class

{

var imgClass:Class;

var cssClass:CSSStyleDeclaration = StyleManager.getStyleDeclaration(parentName);

imgClass = (cssClass.getStyle(childName)) as Class;

return imgClass;

}

private function onCreationComplete():void {

img.source = GetCssResource("CountDown", "count1");
}

<mx:Image id="img" />

</mx:Application>