2009/06/18 10:38

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

플렉스 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>

분명 찾아보면 다른 더 좋은방법도 많겠지....
저작자 표시
크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
Trackback 0 Comment 0