[Flex3] Canvas 레이아웃 컨테이너 / Canvas layout container
Reference : http://livedocs.adobe.com/flex/3/html/layouts_03.html#109962
Canvas 레이아웃 컨테이너는 컨테이너와 컨트롤을 위치시킬 수 있는 직사각형의 영역을 정의한다. Canvas 레이아웃 컨테이너를 사용하면 다른 컴포넌트와 달리, Flex 가 자동으로 컨트롤을 배열하지 않는다. 컴포넌트를 위치시키기 위해 absolute 또는 constraint-based 레이아웃을 사용해야 한다. 앱솔루트 레이아웃에서는 컴포넌트의 x 와 y 위치를 명시해야 하고, ; 컨스트레인트 베이스드 레이아웃에서는 사이드나 베이스라인, 센터 앵커를 명시해야 한다. 이 레이아웃 기술을 사용하는 방법에 대한 자세한 정보는 Sizing and Positioning Components를 참고하라.
전체 참조 정보는 Adobe Flex Language Reference를 참조하라.
Creating and using a Canvas control
캔버스 컨트롤 생성 및 사용
MXML 에서 캔버스 컨트롤은 <mx:Canvas> 태그를 사용하여 정의된다. MXML이나 다른 태그, ActionScript 블럭에서 컴포넌트를 참조하고자 한다면 id 값을 명시해라.
Creating a Canvas Control by using absolute positioning
절대적 위치를 사용한 캔버스 컨트롤 생성
Canvas 컨테이너에서 컴포넌트의 위치를 명시하기 위해 각 컴포넌트의 x 와 y 속성을 사용할 수 있다. 이 속성은 Canvas 컨테이너의 왼쪽 상단의 꼭지점을 (0, 0) 이라고 했을 때, 컴포넌트의 상대적인 x 와 y 좌표를 나타낸다. x 와 y 좌표의 값은 양의 정수이거나 음의 정수가 될 수 있다. 컴포넌트를 컨테이너의 보이는 영역 밖에 위치시키기 위해 음의 값을 사용할 수 있다. 그리고 이벤트에 대한 반응으로 ActionScript를 사용해 컴포넌트를 보이는 영역으로 이도시킬 수도 있을 것이다.
아래의 예제는 세 개의 LinkButton 컨트롤과 세 개의 Image 컨트롤이 있는 Canvas 컨테이너를 보여준다:
아래의 MXML 코드는 이 Canvas 컨테이너를 생성한다:
<!-- containers\layouts\CanvasSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas id="myCanvas"
height="200" width="200"
borderStyle="solid"
backgroundColor="white">
<mx:LinkButton label="Search"
x="10" y="30"
click="navigateToURL(new URLRequest('http://www.adobe.com/cfusion/search/index.cfm'))"/>
<mx:Image
height="50" width="50"
x="100" y="10"
source="@Embed(source='assets/search.jpg')"
click="navigateToURL(new URLRequest('http://www.adobe.com/cfusion/search/index.cfm'))"/>
<mx:LinkButton label="Help"
x="10" y="100"
click="navigateToURL(new URLRequest('http://www.adobe.com/go/gn_supp'))"/>
<mx:Image
height="50" width="50"
x="100" y="75"
source="@Embed(source='assets/help.jpg')"
click="navigateToURL(new URLRequest('http://www.adobe.com/go/gn_supp'))"/>
<mx:LinkButton label="Complaints"
x="10" y="170"
click="navigateToURL(
new URLRequest('http://www.adobe.com/go/gn_contact'))"/>
<mx:Image
height="50" width="50"
x="100" y="140"
source="@Embed(source='assets/complaint.jpg')"
click="navigateToURL(
new URLRequest('http://www.adobe.com/go/gn_contact'))"/>
</mx:Canvas>
</mx:Application>
이 예제의 SWF 실행 파일은 아래와 같다:
Creating a Canvas container by using constraint-based layout
컨스트레인트-베이스드 레이아웃을 사용하여 Canvas 컨테이너 생성
Canvas 의 가장자리에서 특정 거리에 있는 컴포넌트의 위, 아래, 왼쪽, 오른쪽, 베이스라인의 결합을 정하기 위해 constraint-based layout 을 사용할 수 있다. 또는 Canvas 의 중심에서 특정 픽셀만큼 떨어진 컴포넌트의 가로, 세로 중심을 정하기 위해 사용할 수도 있다. 컨스트레인트-베이스드 레이아웃을 나타내기 위해 top, bottom, left, right, baseline, horizontalCenter, verticalCenter 스타일을 사용해야 한다. Canvas 안에 위치하는 컨테이너의 위아래나 좌우를 정했을 때, Canvas 컨트롤의 크기가 변경되면 내부 컨테이너의 크기도 변경된다.아래의 예제는 HBox 를 수평으로 위치시키기 위해 컨스트레인트-베이스트 레이아웃을 사용한다. 그리고 가로 길이와 위치를 명시하기 위해 절대값을 사용한다:
<!-- containers\layouts\CanvasConstraint.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas
width="150" height="150"
backgroundColor="#FFFFFF">
<mx:HBox id="hBox2"
left="30"
right="30"
y="50"
height="50"
backgroundColor="#A9C0E7">
</mx:HBox>
</mx:Canvas>
</mx:Application>
이 예제의 SWF 실행 파일은 아래와 같다:
예제가 아래의 이미지를 만든다:
Preventing overlapping children
컴포넌트 겹침 방지
Canvas 컨테이너는 내부 컴포넌트를 위치시킬 때 크기를 고려하지 않기 때문에, Canvas 컨테이너를 사용하면서 컴포넌트가 겹치는 것을 볼 수 있다. 마찬가지로 Canvas 컨테이너는 좌표 시스템을 조정하지 않기 때문에 내부 컴포넌트가 가장자리나 여백에 겹칠수도 있다.
아래의 예제에서, 어떤 컴포넌트도 겹치지 않도록 각 컴포넌트의 크기와 위치는 주의깊게 계산되었다:
<!-- containers\layouts\CanvasOverlap.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100" height="100"
backgroundGradientColors="[0xFFFFFF, 0xFFFFFF]">
<mx:Script>
<![CDATA[
[Embed(source="assets/BlackBox.jpg")]
[Bindable]
public var imgCls:Class;
]]>
</mx:Script>
<mx:Canvas id="chboard" backgroundColor="#FFFFFF">
<mx:Image source="{imgCls}"
width="10" height="10" x="0" y="0"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="20" y="0"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="40" y="0"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="10" y="10"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="30" y="10"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="0" y="20"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="20" y="20"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="40" y="20"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="10" y="30"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="30" y="30"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="0" y="40"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="20" y="40"/>
<mx:Image source="{imgCls}"
width="10" height="10" x="40" y="40"/>
</mx:Canvas>
</mx:Application>
이 예제의 SWF 실행 파일은 아래와 같다:
이 예제는 아래의 그림을 만든다:
이미지 중 하나의 width 와 height 속성을 20 픽셀로 정하고 위치를 변경하지 않으면 이미지가 겹치게 된다. 예를 들어 위의 예제에서 일곱 번째 <mx:Image> 태그를 수정하면, 결과 이미지는 아래와 같다:
Repositioning children at run time
런타임에 내부 컴포넌트 위치 변경
어플리케이션에 Canvas 컨테이너의 내부 컴포넌트의 위치를 런타임에 변경시키는 로직을 만들 수 있다. 예를 들어, 버튼을 클릭에 대한 반응으로 아래의 코드가 id 가 text1 인 인풋 텍스트 박스의 위치를 x=110, y=110 으로 변경시킨다:
<!-- containers\layouts\CanvasRepos.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas
width="300" height="185"
backgroundColor="#FFFFFF">
<mx:TextInput id="text1"
text="Move me"
x="10" y="10"
/>
<mx:Button id="button1"
label="Move text1"
x="10" y="150"
click="text1.x=110; text1.y=110;"
/>
<mx:Button label="Reset" click="text1.x=10; text1.y=10;" x="111" y="150"/>
</mx:Canvas>
</mx:Application>
위 예제의 SWF 실행 파일은 아래와 같다:
Rss Feed
