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

metadata중에서 PercentProxy라는 것이 있다.
Flex 레퍼런스에도 없는 metadata이다. (http://flexdocs.kr/docs/flex2/docs/00001648.html 참고)

mxml상에서
<mx:UIComponent width="80"/>
<mx:UIComponent width="80%"/>
를 어떻게 구분할까 궁금했다.

해답은 SDK에 UIComponent 코드를 살펴보면 나와있다.

아래 코드는 UIComponent에 width 속성 정의이다.

 

 

   mx_internal var _width:Number;

    [Bindable("widthChanged")]
    [Inspectable(category="General")]
    [PercentProxy("percentWidth")]

    override public function get width():Number
    {
        return _width;
    }

    override public function set width(value:Number):void
    {
        if (explicitWidth != value)
        {
            explicitWidth = value;

            // We invalidate size because locking in width
            // may change the measured height in flow-based components.
            invalidateSize();
        }

        if (_width != value)
        {
            invalidateProperties();
            invalidateDisplayList();

            var p:IInvalidating = parent as IInvalidating;
            if (p && includeInLayout)
            {
                p.invalidateSize();
                p.invalidateDisplayList();
            }

            _width = value;

            dispatchEvent(new Event("widthChanged"));
        }
    }

 

UIComponent의 width getter위에 보면 metadata PercentProxy가 있다는 것을 알 수 있다.
이 메타데이타가 하는 역할은 다음과 같다.

metadata PercentProxy
사용법 : [PercentProxy( "속성변수명 또는 엑세스 함수명")]
용도 : mxml상에서 속성값에 %가 붙어 있으면 PercentProxy에서 지정한 속성변수 또는 함수로 리다이렉트(redirect)시킨다. %가 없다면 평소와 같다.

정리한바에 의하면 <mx:UIComponent width="50"/> 이면 width=50 가 되고 <mx:UIComponent width="50%"/>이면 set PercentWidth=50 과 같다.

예제프로그램을 만들어보자.

List의 속성중에 rowCount가 있다. rowCount는 List에 보여지는 row행의 수를 설정하는 것으로 만약 3을 설정하면 아이템이 3개가 보여질 수 있도록 height가 조정되도록 되어 있다.
이것을 더욱 확장에 rowCount="50%" 와 같이 놓았을때, 아이템수가 10개이면 그의 50%인 5개가 보여질 수 있수 있도록 만들고자 한다. 이때 유용하게 사용할 수 있는 metadata가 PercentProxy이다.

아래 코드는 List를 확장한 ActionScript이다. 이름은 MyList.as로 하겠다.

 

package 
{  
    import mx.controls.List; 
    
    public class MyList extends List 
    {     
        [PercentProxy("rowsPercent")]  
        override public function get rowCount():int 
        {   
            return super.rowCount;  
        }    

        override public function set rowCount(value:int):void {   
            super.rowCount = value;  
        }    
        
        public function get rowsPercent():Number 
        {   
            return 100 * (rowCount / dataProvider.length);  
        }    
        
        public function set rowsPercent(value:Number):void 
        {   
            rowCount = dataProvider.length * (value/100);  
        }   
    }
}

[PercentProxy("rowPercent")]에 의해 mxml상에서 rowCount="50%"으로 주어지면 rowPercent=50 으로 redirect된다. rowCount="3"이면 변함없다. 만약 ActionScript에서 사용한다면 rowCount=50%처럼 쓸 수 없다. 이때는 rowsPercent=50으로 써야할 것이다.

다음은 이 컴포넌트를 사용하는 예시이다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="horizontal">
    <local:MyList width="100">
        <mx:Array>
            <mx:String>row1</mx:String>
            <mx:String>row2</mx:String>
            <mx:String>row3</mx:String>
            <mx:String>row4</mx:String>
            <mx:String>row5</mx:String>
            <mx:String>row6</mx:String>
            <mx:String>row7</mx:String>
            <mx:String>row8</mx:String>
            <mx:String>row9</mx:String>
            <mx:String>row10</mx:String>
        </mx:Array>
    </local:MyList>
    <local:MyList width="100" rowCount="3">
        <mx:Array>
            <mx:String>row1</mx:String>
            <mx:String>row2</mx:String>
            <mx:String>row3</mx:String>
            <mx:String>row4</mx:String>
            <mx:String>row5</mx:String>
            <mx:String>row6</mx:String>
            <mx:String>row7</mx:String>
            <mx:String>row8</mx:String>
            <mx:String>row9</mx:String>
            <mx:String>row10</mx:String>
        </mx:Array>
    </local:MyList>
    <local:MyList width="100" rowCount="50%">
        <mx:Array>
            <mx:String>row1</mx:String>
            <mx:String>row2</mx:String>
            <mx:String>row3</mx:String>
            <mx:String>row4</mx:String>
            <mx:String>row5</mx:String>
            <mx:String>row6</mx:String>
            <mx:String>row7</mx:String>
            <mx:String>row8</mx:String>
            <mx:String>row9</mx:String>
            <mx:String>row10</mx:String>
        </mx:Array>
    </local:MyList>
</mx:Application>

위 프로그램을 실행하면 아래와 같은 화면이 나올것이다. 예상한데로 적용되는 것을 볼 수 있다.

정리하며

Flex를 공부하다 보면 SDK를 분석해봄으로써 얻을 수 있는 부분이 상당히 많다.
네이버 FlexComponent의 째코님께서 이러한 점에 대해서 의문을 가지지 않았다면 아마 나는 이 부분에 대해서 알려고 하지 않았을 것 같다. 이래서 이러한 정보는 함께 공유하며 같이 알아가는 것이 좋은 것 같다. 이것이 내가 정리하는 이유이다.

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

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

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

Adobe Flash Platform flex, height, metadata, percentProxy, Width, 메타데이타, 플렉스