Flex 4는 Flex 3의 컨테이너의 Scrolling 기능보다 더욱 강화되고 직관적으로 바뀌었다. 여기에 Layout, Viewport라는 개념까지 포함되어 더욱 다루기 편하도록 만들어졌다. 이 글은 Flex 4 Spark 컨테이너의 Layout, Scrolling, Viewport에 대해서 소개한다.

아래는 Flash Builder 4 환경에서 작업했다. Flash Builder 4는 아래 링크를 통해 다운받을 수 있다.

http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026  

Spark 컨테이너의 Layout

 

Flex 3에서 Halo 기반 컨테이너는 Canvas, Box, HBox, VBox, Tile등이 있었지만 Flex 4의 Spark 기반 컨테이너는 모두 Group 하나로 통일되었고 layout 속성을 통해 BasicLayout, HorizontalLayout, VerticalLayout, TileLayout을 설정하여 Flex 3의 Canvas, HBox, VBox, Tile역할을 할 수 있도록 했다. Flex 4 Spark 기반 컨테이너는 이와 같이 동적으로 Layout을 바꿀 수 있도록 만들어졌기 때문에 좀 더 유연한 컨테이너 환경을 만들 수 있다.

 

아래는 위 프로그램의 소스이다.

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/halo" 
	minWidth="300" minHeight="300">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import spark.layouts.TileLayout;
			import spark.layouts.VerticalLayout;
			import spark.layouts.HorizontalLayout;
		]]>
	</fx:Script>
	
	<s:DropDownList id="ddl" requiresSelection="true" labelField="label">
		<s:dataProvider>
			<s:ArrayList>
				<fx:Object label="TileLayout" layout="{new TileLayout()}"/>
				<fx:Object label="HorizontalLayout" layout="{new HorizontalLayout()}"/>
				<fx:Object label="VerticalLayout" layout="{new VerticalLayout()}"/>
			</s:ArrayList>
		</s:dataProvider>
	</s:DropDownList>
		
	<s:Group>
		<s:layout>{ddl.selectedItem.layout}</s:layout>
		<s:Button label="1"/>
		<s:Button label="2"/>
		<s:Button label="3"/>
		<s:Button label="4"/>
		<s:Button label="5"/>
		<s:Button label="6"/>
		<s:Button label="7"/>
		<s:Button label="8"/>
		<s:Button label="9"/>
		<s:Button label="10"/>
	</s:Group>

</s:Application>

 

Spark 컨테이너의 Scrolling

 

Flex 3의 모든 컨테이너는 Scroller기능이 내장되어 있었는데 반해 Flex 4 Spark 기반 컨테이너는 기본적으로 Scroller 기능이 없다. 그래서 컨테이너는 더욱 가벼워졌고 필요할 때 ScrollBar를 Group 태그 밖으로 감싸주기만 하는 것으로 스크롤을 추가할 수 있도록 되었다.

 

 

아래는 앞선 소스에서 Scroller만 추가한 것이다.

<s:Scroller width="200" height="100" left="1" right="1" top="1" bottom="1">
	<s:Group>
		<s:layout>{ddl.selectedItem.layout}</s:layout>
		<s:Button label="1"/>
		<s:Button label="2"/>
		<s:Button label="3"/>
		<s:Button label="4"/>
		<s:Button label="5"/>
		<s:Button label="6"/>
		<s:Button label="7"/>
		<s:Button label="8"/>
		<s:Button label="9"/>
		<s:Button label="10"/>
	</s:Group>
</s:Scroller>

 

Flex 4 Spark 컨테이너(List, Group등)는 이렇게 쉽게 Layout을 임의대로 바꿀 수 있고 Scroller도 쉽게 배치할 수 있도록 되어 있다. Flex 4 Spark 기반 컨테이너는 Flex 3의 Halo 컨테이너보다 더욱 사용하기 간편하고 직관적이며 활용도가 높다는 것을 해본 사람은 알 수 있을 것이다.

 

 

Spark 컨테이너의 Viewports

 

Spark 컨테이너에서 들어간 재미있으면서 유용한 개념이 들어갔는데 Viewport 라는 것이다. Viewport는 말그대로 보여지는 영역이다. 아래 그림만 봐도 Viewport의 의미를 쉽게 이해할 수 있을 것이다.

 

출처 : http://hansmuller-flex.blogspot.com/2009/06/introduction-to-viewports-and-scrolling.html

 

방금 설명했던 Scroller는 시각적으로 보이는 horizontalScrollbar, verticalScrollbar와 ViewPort의 horizontalScrollPosition, verticalScrollPosition 속성의 값을 묶어(Bind)준다. 그러므로 어느 한쪽이 조절되면 다른 한쪽이 변경되어지게 된다. 백문의 불여일타.... 아래 예제만 봐도 이게 무슨 말인지 바로 알게 된다.

 

 

<?xml version="1.0" encoding="utf-8"?>
<!-- 출처 :http://hansmuller-flex.blogspot.com/2009/06/introduction-to-viewports-and-scrolling.html-->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:Group>
        <s:Group left="20" top="1" width="110" height="160">
            <s:Scroller id="scrollbar" left="2" right="2" top="2" bottom="2">
                <s:Group id="vp" horizontalScrollPosition="57" verticalScrollPosition="198">
                    <mx:Image source="http://sites.google.com/site/hansmuller/Home/archive/gyro-original.jpg"/>
                </s:Group>
            </s:Scroller>
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke weight="1" color="0xD8D8D8"/>
                </s:stroke>
            </s:Rect>
        </s:Group>
        <s:SimpleText horizontalCenter="10" top="175" text="viewport.width = {vp.width}"/>
        <s:SimpleText verticalCenter="-10" rotation="-90" text="viewport.height = {vp.height}"/>                
    </s:Group>

    <s:VGroup left="140" top="10" gap="15">
        <s:SimpleText text="viewport.contentWidth = {vp.contentWidth}"/>
        <s:SimpleText text="viewport.contentHeight = {vp.contentHeight}"/>
        <s:SimpleText text="viewport.horizontalScrollPosition = {vp.horizontalScrollPosition}"/>
        <s:SimpleText text="viewport.verticalScrollPosition = {vp.verticalScrollPosition}"/>
    </s:VGroup>

</s:Application>

 

Spark 컨테이너인 Group은 GroupBase를 상속받고 GroupBase는 IViewport 인터페이스를 구현하고 있다. Scroller는 이 IViewport과 바인딩되어 있다는 것을 이해하는 것이 중요하다.

 

    public interface IViewport extends IVisualElement
    {
        function get width():Number;
        function get height():Number;
        function get contentWidth():Number;
        function get contentHeight():Number;
        function get horizontalScrollPosition():Number;
        function set horizontalScrollPosition(value:Number):void;
        function get verticalScrollPosition():Number;
        function set verticalScrollPosition(value:Number):void;
        function getHorizontalScrollPositionDelta(scrollUnit:uint):Number;
        function getVerticalScrollPositionDelta(scrollUnit:uint):Number;
        function get clipAndEnableScrolling():Boolean;
        function set clipAndEnableScrolling(value:Boolean):void;
    }

 

그러므로 IViewport 인터페이스를 구현한 GroupBase, Group, DataGroup, RichEditableText, SkinnableContainer, SkinnableDataContainer 등은 모두 Scroller를 사용할 수 있게 되는 것이다.

 

위 소스에서 사용자가 Scroller를 컨트롤 하지 않고 Viewport를 컨트롤하여 스크롤바를 움직이게 할 수 있다.

 

위 프로그램은 앞선 소스에서 아래 코드를 추가하면 된다

<s:VGroup top="196" gap="15" x="20">
	<s:HGroup>
		<s:SimpleText text="HScroll Controller"/>    		
		<s:HSlider id="hSlider" 
			liveDragging="true"
			minimum="0" 
			maximum="{vp.contentWidth-vp.width}" 
			value="{vp.horizontalScrollPosition}" 
			change="vp.horizontalScrollPosition=hSlider.value"/>
	</s:HGroup>

	<s:HGroup>
		<s:SimpleText text="VScroll Controller"/>    		
		<s:HSlider id="vSlider" 
			liveDragging="true"
			minimum="0" 
			maximum="{vp.contentHeight-vp.height}" 
			value="{vp.verticalScrollPosition}" 
			change="vp.verticalScrollPosition=vSlider.value"/>
	</s:HGroup>
</s:VGroup>

 

이 코드가 의미하는 바는 사용자가 ScrollBar를 직접 컨트롤하지 않아도 Viewport를 통해 ScrollBar를 프로그램적으로도 컨트롤 할 수 있다는 것을 보여주고 있다.

 

(위 프로그램에서 Slider에 Viewport의 위치 값이 초반에 제대로 업데이트 안되는 이유는 이미지 로딩시점과 관련되어 있다. 이미지 로딩 뒤에 Viewport의 위치를 변경하면 아마도 문제가 해결될 것이므로 참고바란다. )

 

 

참고내용

Spark Layouts with Flex 4 Beta

Introduction to Viewports and Scrolling in Gumbo

 

 

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

+ Recent posts