찬익님 글로 setActualSize() 와 width 의 사용에 대해 개념적으로 상당히 구체화 되었습니다.

이전 관련글
move()와 x,y 속성, setActualSize() 메서드와 width, height 속성(1)
setActualSize()와 move() – 찬익님

찬익님 말대로 x, y, width, height 속성을 사용하면 전체적인 레이아웃에 그 값이 영향을 미치게 되고, move(), setActualSize() 메서드를 사용하면 그 컴포넌트를 포함한 컨테이너의 레이아웃에 아무런 영향을 주지 않는다. 그러니까 flex 에서 사용하는 layout 방식 이외에 다른 방식으로 레이아웃을 계산 해야 할 상황 (Container 나 Effect 클래스)에 이런 메서드를 사용하면 좋다. 이런 취지인 것 같습니다.

테스트

아래는 찬익님이 올리신 예제와 함께 몇 가지 상황을 테스트해본 것입니다.

상단 빨간 박스는 HBox 컨테이너의 테두리 입니다. 3개의 Panel을 담고 있죠. 하단의 빨간 박스 역시 HBox 컨테이너의 테두리 입니다. 역시 3개의 Panel을 가지고 있습니다. 각각의 박스에서 첫 번째 Panel은 아무것도 실행하지 않은 상태, 두 번째 Panel은 width, height 속성으로 크기를 변경한 상태, 그리고 마지막 세번째 Panel은 setActualSize() 메서드를 이용하여 크기를 설정한 상태입니다.
또한 상단의 세번째 Panel은 컨테이너 밖에서 setActualSize() 호출했고, 하단의 세번째 Panel은 컨테이너의updateDisplayList() 메서드에서 호출한 것입니다.

테스트 결과

  • 상단2번 Panel :
    width, height 속성을 직접 설정한 경우로 크기가 즉각 반영 되고 부모 레이아웃 계산에도 영향을 줍니다.
  • 상단 3번 Panel :
    컨테이너 밖에서 setActualSize()호출한 경우로 크기는 변하지만 부모 컨테이너를 포함한 상위 컨테이너의 레이아웃에 영향을 주지 않습니다.
  • 하단 2번 Panel :
    Panel의 updateDisplayList() 메서드에서 width, height 속성을 직접 설정한 경우로 크기가 즉각 반영 되고 부모 레이아웃 계산에도 영향을 줍니다. HBox의 레이아웃 변화(빨간선)를 비교해 보기 위해 버튼 크기를 150으로 늘려 보았습니다. 이 경우 width, height을 설정하는 위치는 꼭 updateDisplayList()가 아니더라도 결과는 마찬가지 입니다.
  • 하단 3번 Panel :
    Panel의 updateDisplayList() 메서드에서 setActualSize()호출한 경우로 크기는 변하지만 역시 상위 컨테이너의 레이아웃에는 영향을 주지 않습니다. 스크롤은 계산이 되네요. 만약 updateDisplayList() 메서드 이외의 곳에서 setActualSize()호출한 경우라면 크기조차도 변하지 않는군요.

 결론

특별한 상황이 아니면 직접 x, y, width, height 속성으로 직접 컨트롤 하자. 별도로 레이아웃을 계산해야 하는 경우에만 컨테이너의 updateDisplayList() 메서드에서 move(), setActualSize() 메서드를 이용하자. 입니다.

아래는 테스트에 쓰인 파일 내용입니다.

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*">
    <!-- 찬익님 예제-->
    <mx:applicationComplete>
        <![CDATA[
            button1.width = button1.height = 100;
            button2.setActualSize(100,100);
        ]]>
    </mx:applicationComplete>
    
    <mx:HBox borderStyle="solid" borderColor="0xFF0000">
        <mx:Panel title="Original" layout="vertical">
            <mx:Button label="First" />
            <mx:Button label="Second" />
        </mx:Panel>
        <mx:Panel title="2" layout="vertical">
            <mx:Button id="button1" label="First" />
            <mx:Button label="Second" />
        </mx:Panel>
        <mx:Panel title="3" layout="vertical">
            <mx:Button id="button2" label="First" />
            <mx:Button label="Second" />
        </mx:Panel>
    </mx:HBox>
    
    <!-- 추가 -->
    <mx:HBox borderStyle="solid" borderColor="0xFF0000">
        <local:P0 title="Original" layout="vertical"></local:P0>
        <local:P2 title="2" layout="vertical"></local:P1>
        <local:P3 title="3" layout="vertical"></local:P2>
    </mx:HBox>
</mx:Application>

P0.mxml

 <?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Button id="button1" label="First" />
        <mx:Button label="Second" />
</mx:Panel>

P2.mxml

 <?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Button id="button1" label="First" />
        <mx:Button label="Second" />
    <mx:Script>
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                button1.width = button1.height = 150;
            }
        ]]>
    </mx:Script>
</mx:Panel>

P3.mxml

 <?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml">
         <mx:Button id="button1" label="First" />
        <mx:Button label="Second" />
    <mx:Script>
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                button1.setActualSize(100,100);
            }
        ]]>
    </mx:Script>
</mx:Panel>


저작자 표시 비영리 변경 금지
신고
트랙백 ( 0 )개 , 댓글 ( 7 ) 개가 달렸습니다.

Commentary

댓글을 달아 주세요.

  1. Favicon of http://blog.chanik.com BlogIcon 찬익 2009.12.10 23:05 신고  댓글주소  수정/삭제  댓글쓰기

    정보가 크게 업그레이드 되었네요. 좋은 예시인 것 같습니다. :')
    내용을 약간만 보충하자면, Panel의 updateDisplayList()내에서 하위 컴포넌트에 setActualSize()를 사용하면 스크롤이 계산이 되는 이유는, updateDisplayList()가 실행된 후에 스크롤바 등을 그려주기 때문입니다. (Container.validateDisplayList()의 코드를 살펴보시면 자세한 내용을 보실 수 있습니다.)
    반면에, updateDisplayList에서, setActualSize()를 super.updateDisplayList()보다 먼저 실행하거나, 또는 제 예시에서, setActualSize()를 실행한 후에 Panel의 invalidateDisplayList()를 실행하는 경우, setActualSize()에서 지정한 사이즈를 무시하고 원래의 레이아웃으로 돌아가는 것을 확인할 수 있습니다. ㅎㅎ

    • Favicon of http://vulcan9.tistory.com BlogIcon vulcan 2009.12.11 01:14 신고  댓글주소  수정/삭제

      그렇겠군요. 역시 흐름을 알고 사용해야 원하는 결과를 예상해 볼 수있겠습니다. 코딩하기가 살짝 예민해지는 느낌이 있네요..^^

    • Favicon of http://kruptos.tistory.com BlogIcon 찬익 2009.12.12 00:18 신고  댓글주소  수정/삭제

      Flex가 아직은 내부적으로 그렇게 튼튼하진 않다보니.. 어느 정도 흐름을 이해해도 문제는 늘 발생해요. :')
      그렇다고 Flex 내의 모든 코드를 머리속에 다 넣고 다닐 수는 없으니, 윗 글의 내용 정도만 숙지하고, 나머지는 문제가 발생 시에, 그때그때 코드를 뜯어보는 것이 가장 효율적인 것 같습니다.
      지식보다는 지혜 ㅎㅎ

  2. Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 2009.12.11 09:13 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 글이군요 ;)
    굿~ 이그잼플~~~~~~~~~~ ㅎㅎ

  3. Favicon of http://jidolstar.tistory.com BlogIcon 지돌스타 2009.12.16 11:02 신고  댓글주소  수정/삭제  댓글쓰기

    댓글 달아주셔서 첨 와봅니다. 좋은글 많이 적으셨네요. ^^

Add a Comment

comment에 대한 답변글은 해당 글상자에 있는 "R"(reply)버튼을 클릭하여 작성해 주시기 바랍니다.

티스토리 툴바