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

이 문서의 원본은 http://www.tink.ws/blog/styleutilgetdefaultstylename/ 입니다.

컴포넌트의 기본 스타일(default styles)을 적용할 때 필요한 정보는 컴포넌트 클래스 명이다. 기본 스타일을 적용하는 방법으로 static 초기화를 하는 메소드가 가장 많이 쓰인다.(참고글 : [Flex/AIR]커스텀 UI 컴포넌트에 기본스타일(CSS)를 적용하는 방법)

다음 내용 코드를 보자.

package

{

import mx.core.UIComponent;

import mx.styles.CSSStyleDeclaration;

import mx.styles.StyleManager;

 

public class MyFlexComponent extends UIComponent

{

        public function MyFlexComponent()

        {

               super();

        }

 

        private static var defaultStylesSet: Boolean = setDefaultStyles();

 

        /**

         *  @private

         */

        private static function setDefaultStyles():Boolean

        {

               var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration( "MyFlexComponent" );

                      

               if( !style )

               {

                       style = new CSSStyleDeclaration();

                       StyleManager.setStyleDeclaration( "MyFlexComponent", style, true );

               }

              

               if( style.defaultFactory == null )

               {

                       style.defaultFactory = function():void

                       {

                              this.style0 = "style0";

                              this.style1 = "style1";

                       };

               }

               return true;

        }

}

}

위 코드는 매우 적절하게 만들어진 코드이다. 하지만 리펙토링(refactoring)기능을 이용해 Class 이름이 바꾸면 코드안에 "MyFlexComponent"를 사용한 부분은 그대로 남겨지기 때문에 개발자가 코드를 별도로 수정해야한다.

아래 코드는 클래스의 prototype(Object의 static 속성)으로 Class 이름을 반환하는 함수를 이용해 위 코드를 수정한 것이다.

package

{

import mx.core.UIComponent;

import mx.styles.CSSStyleDeclaration;

import mx.styles.StyleManager;

 

public class MyFlexComponent extends UIComponent

{

        public function MyFlexComponent()

        {

               super();

        }

 

        private static var defaultStylesSet: Boolean = setDefaultStyles();

 

        /**

         *  @private

         */

        private static function setDefaultStyles():Boolean

        {

               var defaultStyleName:String = StyleUtil.getDefaultStyleName( prototype );

               var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration( defaultStyleName );

                      

               if( !style )

               {

                       style = new CSSStyleDeclaration();

                       StyleManager.setStyleDeclaration( defaultStyleName, style, true );

               }

              

               if( style.defaultFactory == null )

               {

                       style.defaultFactory = function():void

                       {

                              this.style0 = "style0";

                              this.style1 = "style1";

                       };

               }

               return true;

        }

}

}

아래는 위 코드에서 사용된 StyleUtil 클래스이다.

/*

Copyright (c) 2008 Tink Ltd - http://www.tink.ws

 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated

documentation files (the "Software"), to deal in the Software without restriction, including without limitation

the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and

to permit persons to whom the Software is furnished to do so, subject to the following conditions:

 

The above copyright notice and this permission notice shall be included in all copies or substantial portions

of the Software.

 

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO

THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,

TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

SOFTWARE.

*/

 

package ws.tink.flex.utils

{

        //http://www.tink.ws/blog/styleutilgetdefaultstylename/

        public class StyleUtil

        {

 

               public static function getDefaultStyleName( proto:Object ):String

               {

                       var pattern:RegExp = /\w\w*/g;

                       return proto.constructor.toString().match( pattern )[ 1 ];

               }

              

        }

}

 

디버깅을 해보니 proto.constructor까지 [class MyFlexComponent]로 나온다. 이것을 정규식을 이용해 "MyFlexComponent"만 뽑아낸다.

prototype은 Object 클래스의 static 속성이다. 더 자세한 내용은 Object에 대한 API Reference를 참고한다.

참고내용

원본글
 - StyleUtil.getDefaultStyleName()  http://www.tink.ws/blog/styleutilgetdefaultstylename/

Object의 prototype에 대해
 - http://flexdocs.kr/docs/flex2/langref/Object.html#prototype
 - http://flexdocs.kr/docs/flex2/docs/00001847.html#954755

Object의 contructor에 대해
 - http://blog.naver.com/zzaie/140055262947

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

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

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

Adobe Flash Platform AIR, CSSStyleDeclaration, defaultFactory, flex, getDefaultStyleName, object, StyleUtil