Flex 3 새로 추가된 StyleManager.selectors 속성 소개 -지돌스타 블로그-

Flex 3 새로 추가된 StyleManager.selectors 속성 소개

2007/10/08 00:53

Leave a Comment

[공지]이미지나 링크가 깨졌다면 댓글 부탁드립니다.

Flex Examples 블로그에 소개된 글입니다.

Flex 3 SDK에 새로 추가된 것중 StyleManager클래스에 selectors static속성이 있다. 이 속성의 역할을 소개하자면 다음과 같다.

StyleManager에 등록된 모든 selector들을 String형태의 array로 반환해준다.

이 속성은 static이다. 그러므로 StyleManager를 객체생성할 필요 없이 클래스 명으로 직접 접근을 하면 되겠다.

selectors를 이용해 반환되는 Array 속성값들인 selector들은 ActionScript에서 StyleManager.setStyleDeclaration()로 등록하거나 <mx:Style>에 의해 등록할 수 있다.
가령 아래 두가지 방법은 같은 방법이다.

<mx:Style>를 이용해 selector를 등록하는 방법 (Language : xml)

<mx:Style>
.myStyle1 {
color:#ff0000;
}
</mx:Style>

ActionScript를 이용해 등록하는 방법 (Language : java)

var style:CSSStyleDeclaration
style = new CSSStyleDeclaration("myStyle1");
style.setStyle("color","0x0000ff");
StyleManager.setStyleDeclaration(".myStyle1", style, false);

Flex 3 Builder를 설치하면 설치 폴더에 C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\projects\framework\src\mx\styles\StyleManager.as 를 찾아보면 selectors가 어떻게 구현되어 있는지 확인할 수 있을 것이다.

나는 Flex Examples에 나온 예제를 위에서 소개한 <mx:Style>과 StyleManager.setStyleDeclaration()을 이용해서 실제로 등록해 보았다.(굵게 표시된 부분) 실행 프로그램 List를 내리다 보면 myStyle1과 myStyle2가 등록된 것을 확인할 수 있을것이다.

StyleManager.selectors 활용방법 (Language : xml)

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">

<mx:Script>
<![CDATA[
import mx.styles.StyleManager;

private function init():void {
var style:CSSStyleDeclaration
style = new CSSStyleDeclaration("myStyle2");
style.setStyle("color","0x0000ff");
StyleManager.setStyleDeclaration(".myStyle2", style, false);

arr = StyleManager.selectors;
arr.sort(Array.CASEINSENSITIVE);
list.dataProvider = arr;
}
]]>
</mx:Script>

<mx:Style>
   TitleWindow {
   backgroundAlpha: 0.4;
   backgroundColor: haloSilver;
   borderAlpha: 0.4;
   borderColor: haloSilver;
   cornerRadius: 12;
   }

   .myStyle1 {
      color:#ff0000;
   }
</mx:Style>

<mx:Array id="arr" />

<mx:TitleWindow title="StyleManager.selectors:"
status="({arr.length} items)"
dropShadowEnabled="false"
roundedBottomCorners="true">
<mx:List id="list" width="300" />
</mx:TitleWindow>

</mx:Application>

myStyle1과 myStyle2를 발견했는가?
StyleManager.selectors를 이용해서 Style관련 응용프로그램도 많이 나올 수 있을 것이라 기대된다. ^^

참고사이트
Flex Examples

글쓴이 : 지돌스타(http://blog.jidolstar.com)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Adobe Flash Platform' 카테고리의 다른 글

[Flex] StyleManger.setStyleDeclaration()와 setStyle() 적용 우선순위! (1)	2007/10/08
최고의 무료 클립아트 다운로드 사이트 모음 : Best Free Vector Clipart Download Site (0)	2007/10/08
Flex 3 새로 추가된 StyleManager.selectors 속성 소개 (0)	2007/10/08
[Flex] 이미지 에디터에 쓰일 말풍선 컴포넌트를 만들어보다. (11)	2007/10/06
새로운 Flash Player 10 신기능 공개 (1)	2007/10/03
[Flex] metadata PercentProxy 이해하기 (5)	2007/09/28