setActualSize()와 width,height, 그리고 move()와 x,y의 차이는 무엇일까?
블로그에 종종 들러주시는 vulcan님께서 작성하신 move()와 x,y 속성, setActualSize() 메서드와 width, height 속성이라는 글에서 각각의 메소드와 프로퍼티의 차이에 대한 상세한 설명을 요청(?)하셨는데, 마침 이에 대한 짧은 지식이 있어 간단히 소개를..
이를테면, move()는 internal1, x,y는 public이다.2
x,y,width,height
x,y,width,height 의 경우, 일반적으로 구현 개발자(컴포넌트를 사용하는 개발자)가 사용하는 프로퍼티이다. x,y,width,height 속성을 직접 변경하게 되면, 추후 레이아웃 시에 그 값을 참고하여 화면을 그리게 된다.
setActualSize(), move()
setActualSize(), move() 등은, 일반적으로 컴포넌트 개발자(컴포넌트를 개발한 개발자)가 사용하는 메소드이다. width, height, x, y를 직접 변경할 때와는 달리, setActualSize()와 move()를 이용하여 변경된 값은, 레이아웃에서 참고하지 않는다.
예시
아래는 두 방식의 차이를 확인하기 좋은 예이다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:applicationComplete>
<![CDATA[
button1.width = button1.height = 100;
button2.setActualSize(100,100);
]]>
</mx:applicationComplete>
<mx:Panel title="Original" layout="vertical">
<mx:Button label="First"/>
<mx:Button label="Second"/>
</mx:Panel>
<mx:Panel title="Usign x,y" layout="vertical">
<mx:Button id="button1" label="First"/>
<mx:Button label="Second"/>
</mx:Panel>
<mx:Panel title="Using move()" layout="vertical">
<mx:Button id="button2" label="First"/>
<mx:Button label="Second"/>
</mx:Panel>
</mx:Application>
이 예시를 실행시켜보면, button1의 경우, height의 변경이 Panel의 레이아웃에 적용되기 때문에, 바로 밑의 버튼도 자동으로 그만큼 아래로 밀려서 표시된다. 또한 Panel의 사이즈도 자동으로 변경된다. 즉, 일반적인 기대 동작이다.
반면, button2의 경우, setActualSize()에 의해 height가 변경되었기 때문에, Panel의 레이아웃은, 이 값을 참조하지 않으며, 그렇기에 button2 밑의 버튼이 원래의 위치에 그대로 표시되며, 또한 Panel의 사이즈도 원래의 사이즈 그대로 표시된다.
일반적인 사용
move()와 setActualSize() 메소드는 일반적으로 updateDisplayList()에서 사용한다. (Flex 4의 경우에는 LayoutBase 하위 컴포넌트에서 사용)
레이아웃을 표시하는 메소드에서, 그 레이아웃에 영향을 주는 값을 자체적으로 변경하면 안되기 때문이다.
또한, 그 외에도, 레이아웃에 영향을 받지 않고, 또는 영향을 주지 않고 컴포넌트를 이동하거나 사이즈를 조정해야하는 이펙트 등의 클래스에서도 종종 사용된다.
추가 사항
그러나 무엇보다도, 이러한 구조가 효과를 발휘하기 위해서는, Flex의 아키텍처에 맞는 컴포넌트 설계를 유지하고 있어야 한다.
예를 들면, commitProperties(), measure(), layoutChrome(), updateDisplayList() 등의 메소드 구현이 그에 속한다
About creating advanced components
더보기
See Also
- vulcan - move()와 x,y 속성, setActualSize() 메서드와 width, height 속성(2) 한층 업그레이드 된 정보!
'Adobe Flash Platform > Flex' 카테고리의 다른 글
| MXML 2009의 id 속성 (2) | 2009/12/15 |
|---|---|
| [뉴스] Flex 4 SDK - AIR 1.5.3 / FP 10.0.42 적용 (0) | 2009/12/11 |
| setActualSize()와 move() (9) | 2009/12/08 |
| Mustella와 Test 생성기 (8) | 2009/12/08 |
| Array.indexOf()가 괴롭힐 때 (0) | 2009/11/28 |
| 성능을 논하기 전에 (0) | 2009/11/28 |
트랙백 주소 : http://blog.chanik.com/trackback/41
-
Subject : move()와 x,y 속성, setActualSize() 메서드와 width, height 속성(2)
Tracked from 떵쓰 난장판 2009/12/10 13:43 삭제찬익님 글로 setActualSize() 와 width 의 사용에 대해 개념적으로 상당히 구체화 되었습니다. 이전 관련글 move()와 x,y 속성, setActualSize() 메서드와 width, height 속성(1) setActualSize()와 move() – 찬익님 찬익님 말대로 x, y, width, height 속성을 사용하면 전체적인 레이아웃에 그 값이 영향을 미치게 되고, move(), setActualSize() 메서드를 사용하면..
댓글을 달아 주세요
트랙백 달아주셔서 정말 기쁘네요..그것도 졸면서 ^^ 제 블로그 최초 트랙백이다능.. 역시 요쪽 사람들은 심야학습으로 인해 짬짬히 졸아줘야된다는 그런걸루 알께요. 저두 하루 서너번씩은 정신못차려요. ㅋㅋ
암튼 잘 읽었습니다. invalidate 형태를 취하는지 아닌지가 가장 큰 차이점인것 같네요. 근데...
move()가 internal이라는건 혹시 컴포넌트 개발자가 주로 쓰는 메서드란 뜻으로 말씀하신 건지요( move()의 signature 가 public 이라서요) 자세한 얘기좀 부탁할께요.^^
제대로 이해하신 것 같습니다. '이를테면'이라는 단어가 조금 모호했나보네요. :')
다만, invalidate는 현재의 구현 방법일 뿐, 언제든지 변경이 될 수 있으므로, 참고만 하시는 것이 좋을 것 같습니다.
invalidate 부분은 오해의 소지가 있을 수 있으므로, 일단 글 내용에서 제외하였습니다. 또한 궁금해하신 부분도 약간 내용을 추가하였습니다.
그렇군요. 예제에서 button2의 경우가 제가 많이 겪어본 케이스네요. setActualSize()에 대해서 포스트를 남기게된 원흉이죠. 도움 많이됬습니다.
트랙백 감사합니다. 내용이 좋아서 글 내에 다시 참조하였습니다. ㅎㅎ
글이 참 좋아요~ 완벽한 개념확립!
감사하게도 Lazy Validation 모델이라는 용어는 처음 듣게 되네요. ^^
아마 Lazy Evaluation이 정확한 용어일겁니다. ㅎㅎ Lazy Validation은 글을 쓰는 중, 내용에 맞추어 급조한 단어..
덕분에 명확하게 알고 가네요... 감사합니다~
저도 명확하게 잘 몰라요 ㅎㅎ 참고만 하세요!