본문 바로가기

Blog/Flex

move()와 x,y 속성, setActualSize() 메서드와 width, height 속성(2)

찬익님 글로 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>