[FLEX4] 특징, 마이그레이션 가이드 / Features and Migration Guide

원문: http://help.adobe.com/en_US/Flex/4.0/FeaturesAndMigration/flex_4_features.pdf

챕터 1: 새로운 SDK 특징

Flex4 SDK 의 새로운 점:

• 네임스페이스 / Namespaces
• 컴포넌트 / Components
• Component architecture
• Text primitive
• Language tag
• Two-way data binding
• Drag and Drop
• FXG
• State
• Layout
• Effect
• Advanced CSS
• HTML wrapper
• Deferred instantiation
• ASDoc
• Conditional compilation

네임스페이스 / Namespaces

Flex4 어플리케이션의 네임스페이스 는 아래와 같습니다:

xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex.spark"

각 네임스페이스는 component 세트와 대응됩니다. 예를 들어, 아래의 <s:Applicatioin> 태그에서 xmlns 속성은 Spark 컴포넌트세트에 대응되는 태그는 s 를 접두사로 사용함을 나타냅니다:

<s:Application

    xmlns:fx="http://ns.adobe.com/mxml/2009"

    xmlns:mx="library://ns.adobe.com/flex/mx"

    xmlns:s="library://ns.adobe.com/flex/spark">

2006 네임스페이스를 사용하는 것은 가능하지만, 2006 네임스페이스를 사용하면 (새로운 컴포넌트와 레이아웃 스키마 등의) Flex 4 의 특징을 사용할 수 없습니다.

Flex 는 아래의 URI 를 Flex 의 네임스페이스로 정의합니다.

• xmlns:fx="http://ns.adobe.com/mxml/2009"
  
  MXML 네임스페이스 URI. 이 네임스페이스는 Object, Number, Boolean, Array 와 같은 최상위 레벨의 ActionScript 언어 요소를 포함하고 있습니다. 최상위 레벨 요소의 모든 목록은 Adobe Flash Platform 을 위한 ActionScript 3.0 레퍼런스 의 Top Level 패키지에서 볼 수 있습니다.
  
  이 네임스페이스는 <fx:Script>, <fx:Declarations>, <fx:Style> 태그와 같이 MXML 컴파일러에 있는 태그도 포함하고 있습니다. 컴파일러 요소의 전체 목록은 Adobe Flash Platform 을 위한 ActionScript 3.0 레퍼런스 에서 MXML Only Tags appendix 에 나와 있습니다.
  
  이 네임스페이스는 MX 나 Spark 컴포넌트 세트를 포함하지는 않습니다.
  
  이 네임스페이스에 포함된 최상위 레벨의 ActionScript 요소는 Flex SDK 설치 디렉토리의 frameworks/mxml-200-manifest.xml 파일에 정의되어 있습니다. 이 파일이 MXML 컴파일러 태그 목록이 아닌 것을 알아두시기 바랍니다.
  
  
• xmlns:mx="library://ns.adobe.com/flex/mx"
  
  MX 컴포넌트 세트 네임스페이스 URI. 이 네임스페이스는 Flex 의 mx.* 패키지에 있는 모든 컴포넌트, Flex 차트 컴포넌트, Flex 데이터 시각화 컴포넌트를 포함하고 있습니다.
  
  이 네임스페이스에 포함된 요소의 전체 목록은 Flex SDK 설치 디렉토리의 frameworks/mx-manifest.xml 파일에 정의되어 있습니다.
  
  
• xmlns:s="library://ns.adobe.com/flex/spark"
  
  Spark 컴포넌트 세트 네임스페이스 URI. 이 넴임스페이스는 Flex spark.* 패키지의 모든 컴포넌트와 flashx.* 패키지의 텍스트 프레임워크 클래스를 포함하고 있습니다.
  
  이 네임스페이스는 WebService, HTTPService, RemoteObject 컴포넌트를 위한 RPC 클래스와 RPC 컴포넌트를 지원하기 위한 추가적인 클래스를 포함합니다. 이 클래스는 mx: 네임스페이스에 포함되어 있지만, s: 네임스페이스를 사용하여 참조할 수도 있습니다..
  
  이 네임스페이스는 mx.* 패키지의 몇몇 graphics, effect, state 클래스도 포함하고 있습니다. 이 클래스는 mx: 네임스페이스에 포함되어 있지만, s: 네임스페이스를 사용하여 참조할 수도 있습니다.
  
  이 네임스페이스에 포함된 요소의 목록은 Flex SDK 설치 디렉토리의 frameworks/spark-manifest.xml 파일에 정의되어 있습니다.
  
  아래의 테이블은 이 네임스페이스에 포함된 mx.* 패키지의 클래스 목록을 보여주고 있습니다.
  
  

  카테고리	클래스
  RPC 클래스	mx.messaging.channels.AMFChannel  mx.rpc.CallResponder  mx.messaging.ChannelSet  mx.messaging.Consumer  mx.messaging.channels.HTTPChannel  mx.rpc.http.mxml.HTTPService  mx.messaging.Producer  mx.rpc.remoting.mxml.RemoteObject  mx.rpc.remoting.mxml.Operation  mx.messaging.channels.RTMPChannel  mx.messaging.channels.SecureAMFChannel  mx.messaging.channels.SecureStreamingAMFChannel  mx.messaging.channels.SecureHTTPChannel  mx.messaging.channels.SecureStreamingHTTPChannel  mx.messaging.channels.SecureRTMPChannel  mx.messaging.channels.StreamingAMFChannel  mx.messaging.channels.StreamingHTTPChannel  mx.rpc.soap.mxml.WebService  mx.rpc.soap.mxml.Operation  mx.data.mxml.DataService
  Graphics 클래스	mx.graphics.BitmapFill  mx.geom.CompoundTransform  mx.graphics.GradientEntry  mx.graphics.LinearGradient  mx.graphics.LinearGradientStroke  mx.graphics.RadialGradient  mx.graphics.RadialGradientStroke  mx.graphics.SolidColor  mx.graphics.SolidColorStroke  mx.graphics.Stroke  mx.geom.Transform
  Effect 클래스	mx.effects.Parallel  mx.effects.Sequence  mx.states.Transition  mx.effects.Wait
  States 클래스	mx.states.State  mx.states.AddItems

  
  
  

컴포넌트 / Components

Flex 4 는 Flex 4 특징을 살린 새로운 컴포넌트 세트를 소개합니다. 이 컴포넌트는 Spark 컴포넌트로 알려져 있습니다.

주의: MX 컴포넌트 아키텍처는 Flex 의 이전 버전에 포함되어 있었습니다. MX 컴포넌트는 Flex 하위 버전과의 호환성을 지원하기 위해 Flex 4 로 이동되었습니다.

많은 경우, Flex 컴포넌트에서 Spark 와 MX 버전의 차이를 확인하는 것은 불가능할 것입니다. 주로 Flex4 레이아웃에 대한 컴포넌트의 상호작용과 스킨, 스테이트의 아키텍처에 관한 것입니다.

어떤 경우, Spark 컴포넌트 는 MX 컴포넌트와 다릅니다. 예를 들어, Spark Application과 MX Application 컴포넌트는 몇 가지 면에서 차이가 있습니다: 이 차이에는 배경색과 기본 레이아웃도 포함되어 있습니다.

아래의 테이블은 Flex4 에서 새로워진 자주 사용되는 컴포넌트의 목록입니다:

컴포넌트	컴포넌트
Application  BorderContainer  Button  ButtonBar  CheckBox  DataGroup  DataRenderer  DropDownList  Group  HGroupu  HScrollBar  HSlider  Label  List  NavigatorContent  NumericStepper  Panel	RadioButton  RadioButtonGroup  RichEditableText  RichText  Scroller  SkinnableContainer  SkinnableDataContainer  Spinner  TextArea  TextInput  ToggleButton  VGroup  VideoPlayer  VScrollBar  VSlider  Window  WindowedApplication

컴포넌트는 spark.* 패키지에 포함되어 있습니다. Adove Flash Platform 을 위한 ActionScript 3.0 레퍼런스에서 더 자세한 정보를 볼 수 있습니다.

눈에 보이는 컴포넌트는 스킨을 정의하는 추가적인 클래스를 갖고 있습니다. 예를 들어 Button 클래스 외에 ButtonSkin 클래스도 존재합니다. 컴포넌트를 위한 스킨 클래스는 일반적으로 spark.skins.* 패키지에 있습니다.

어플리케이션에서 Spark 컴포넌트와 MX 컴포넌트는 교체할 수 있습니다. 예를 들어:

<?xml version="1.0" encoding="utf-8"?>

<!-- gumbonents/BasicGumbonentUsage.mxml -->

<s:Application

    xmlns:fx="http://ns.adobe.com/mxml/2009"

    xmlns:mx="library://ns.adobe.com/flex/mx"

    xmlns:s="library://ns.adobe.com/flex/spark">

    <s:layout>

        <s:HorizontalLayout/>

    </s:layout>

    <s:Button label="Click Me"/>

    <mx:Button label="Click Me"/>

</s:Application>

Spark 컴포넌트는 MX 컨테이너와 함께 동작해야 하고 MX 컴포넌트는 Spark 컨테이너와 함께 동작해야 합니다.

참고: MX 네비게이터 컨테이너에 직접 속하는 컴포는트는 MX 컨테이너, 레이아웃이나 네비게이터 컨테이너, Spark NavigatorContent 컨테이너야 합니다. 직접 컨트롤이나 Spark NavigatorContent 컨테이너가 아닌 Spark 컨테이너를 가질 수 없습닏. NavigatorContent 컨테이너가 아닌 Spark 컨테이너를 네비게이터 내부에서 사용하려면, Spark NavigatorContent 컨테이너나 MX 컨테이너에 감싸야 합니다.

Spark 컴포넌트가 MX 컴포넌트에는 없는 기능이나 구조를 제공할 때, 점진적으로 Spark 컴포넌트를 어플리케이션에 적용할 수 있습니다. 어떤 MX 컴포넌트도 Flex 4 프레임워크에서 삭제되지 않았습니다.

모든 Spark 컴포넌트는 Flash Player 10 을 타겟으로 합니다. 만약 어플리케이션이 Spark 컴포넌트를 사용한다면, 사용자는 반드시 Flash Player 10 을 사용해야 합니다.

컴포넌트 구조 / Component architecture

Flex4 의 가장 큰 변화는 스키닝과 Spark 라고 불리는 컴포넌트 구조입니다. Flex 이전 버전의 많은 컴포넌트는 Spark 컴포넌트 구조로 다시 작성되었습니다.

Spark 컴포넌트 구조의 목적은 아래와 같습니다:

• 컴포넌트의 기능적인 로직과 외관을 깔끔하게 분리하여 정의합니다.
  
  Spark 컴포넌트는 로직과 외관의 분리를 지원하기 위해 두 클래스로 구성되어 있습니다: 컴포넌트의 로직을 정의하는ActionScript 클래스와 눈에 보이는 외관을 정의하는 MXML 스킨 클래스. 컴포넌트의 로직을ㅇ 변경하려면 컴포넌트 클래스를 상속받은 후 동작을 추가하면 됩니다. 컴포넌트의 로직이 아닌 외관을 변경하려면 스킨을 변경하면 됩니다.
  
  Flex4 는 컴포넌트 스키닝에 대한 단순화된 프로세스를 갖고 있습니다. ActionScript 에서 스킨을 정의하는 대신, Spark 구조를 통해 MXML 에서 스킨을 정의할 수 있습니다.
  
  
• 개발자가 쉽게 변경할 수 있는 기본 컴포넌트의 작은 세트를 생성합니다.
  
  Flex 이전 버전에서 컴포넌트의 기본 기능 변경은 주로 컴포넌트의 재작성을 의미했습니다. 예를 들어, 컨테이너의 레이아웃 알고리즘을 변경하기 위해, 맞춤 컨테이너 클래스를 생성해야 했습니다.
  
  Spark 컨테이너는 바꿀 수 있는 레이아웃 알고리즘을 사용하기 때문에, 미리 정의된 레이아웃의 세트에서 레이아웃을 선택할 수 있습니다. 맞춤 컨테이너를 생성하지 않고, 맞춤 레이아웃만 정의할 수도 있습니다.
  
  
• Flex 이전 버전의 컴포넌트와 같은 부모 클래스를 사용하여 Spark 컴포넌트 구현.
  
  새로운 Spark 컴포넌트 구조는 mx.core.UIComponent, mx.effects.Effect와 같은 기존의 Flex 클래스를 기반으로 합니다. Flex 를 업그레이드한 개발자는 이미 기본 클래스에 익숙할 것입니다. 이 것이 업그레이드 프로세스를 간단하게 합니다. 이 것은 같은 어플리케이션에서 Flex 이전 버전으로 빌드된 컴포넌트와 새로운 Spark 컴포넌트를 함께 사용할 수 있다는 말입니다.

Spark 컴포넌트 클래스와 관련된 것은 스킨 클래스 입니다. 스킨 클래스는 컴포넌트에서 그래픽, 레이아웃, 데이터 표현, 스킨, 뷰 스테이트와 같이 눈으로 보이는 부분과 관련된 모든 것을 관리합니다. 스킨 클래스와 컴포넌트 클래스 사이의 스키닝 계약은 서로 통신하기 위해 각 클래스가 준수해야 하는 룰을 정의합니다.

텍스트 프리머티브 / Text primitives

RichText, RichEditableText 와 같은 Flex 텍스트 기반 컨트롤은 Flash Player 10의 새로운 텍스트 객체 모델을 기반으로 새로운 기능을 제공합니다. 텍스트 객체 모델은 Flash Text Engine(FTE) 와 Text Layout Framework(TLF) 에 의해 정의됩니다.

TLF 는 리치 텍스트를 표현하기 위해 ActionScript 객체 모델을 사용합니다. 단락, 스팬(span), 하이퍼링크와 같은 개념은 하나의 중앙에 있는 문자열의 외관에 영향을 주는 형태으로 표현되지 않습니다. 대신 고유의 속성, 메쏘드, 이벤트와 함께 런타임에 접근 가능한 ActionScript 객체에 의해 표현됩니다. TLF 클래스는 flashx.textLayout.* 패키지에 있습니다.

FTE 는 텍스트의 각 행을 만드는 것과 같은 하위 레벨의 텍스트 기능을 지원합니다. 이 것은 Unicode 를 문자로 매핑하는 것, Unicode 양방향 텍스트 알고리즘을 사용하여 문자를 배치하는 것, 적절하게 행의 마지막을 판단하는 것, 문자를 픽셀로 표현하는 것 등을 포함합니다. ETF API 는 flash.text.engine.* 패키지에 정의되어 있습니다.

ETF 와 TLF 에 대한 자세한 정보는 Building th User Interface 에서 볼 수 있습니다.

Flex 텍스트 기반의 컴포넌트에서 제공하는 새로운 기능은 아래와 같습니다:

• Columns
• Paragraph and character level attributes
• Kerning
• Transforms
• Masks and blend modes
• Whitespace handling
• Margins and indentations
• Direction(left to right and right to left)

아래의 표는 spark.controls.* 패키지의 새로운 텍스트 컴포넌트에 대해 설명하고 있습니다.

클래스	설명
Label	가장 가벼운 텍스트 클래스. 이 클래스가 상호적이지 않고, FTE 를 지원하는 것을 제외하면, MX Label 클래스와 유사합니다.
RichText	텍스트 프리머티브에서 중간 컴포넌트. 이 클래스는 MX Text 클래스와 유사합니다. 리치한 형식의 텍스트와 문단 형식을 표현할 수 있지만, 상호적이지 않습니다. 스크롤, 선택, 편집과 같은 사용자와의 상호 동작을 지원하지 않습니다.
RichEditableText	텍스트 프리머티브 중 가장 무거운 컴포넌트. 이 클래스는 스킨을 정의한다는 것을 제외하면 TextArea 클래스와 유사합니다. 스크롤, 선택, 편집과 같은 사용자와의 상호 동작을 지원합니다.

위에서 설명한 텍스트 프리머티브 클래스외에, Spark 텍스트 클래스는 MX 와 동일한 TextInput 과 TextArea 클래스를 포함합니다. 이 클래스는 스키닝을 지원합니다.

언어 태그 / Language tags

Flex4 는 MXML 파일에서 사용할 수 있는 언어 태그를 소개합니다.

선언 / Declarations

클래스의 기본이 아닌, 시각적이지 않는 속성을 선언하려면 <fx:Declarations> 태그를 사용하면 됩니다. 이 태그는 일반적으로 effect, validator, formatter, data service 태그를 포함합니다. 이 태그는 기본적인 속성을 선언한 MXML 기반의 맞춤 컴포넌트를 위해 사용되기도 합니다.

아래의 예제는 <fx:Declarations> 태그에서 두 개의 효과를 정의합니다:

<?xml version="1.0"?>

<!-- behaviors\SparkAnimateProp.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

    xmlns:mx="library://ns.adobe.com/flex/mx"

    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Declarations>

        <s:Animate id="scaleUp"

           target="{myB1}">

           <s:SimpleMotionPath property="scaleX"

                valueFrom="1.0" valueTo="1.5"/>

       </s:Animate>

       <s:Animate id="scaleDown"

           target="{myB1}">

            <s:SimpleMotionPath property="scaleX"

                valueFrom="1.5" valueTo="1.0"/>

        </s:Animate>

    </fx:Declarations>

    <s:Button id="myB1"

        label="Scale Button"

        mouseDown="scaleUp.end(); scaleUp.play();"

        mouseUp="scaleDown.end(); scaleDown.play();"/>

</s:Application>

시각적 컴포넌트를 <fx:Declarations> 태그 내에서 선언할 수 있지만, 보이지 않으면 초기화 되지 않습니다. 반드시 컨테이너의 addElement() 메쏘드(Spark 컨테이너의 경우)나 addChild() 메쏘드(MX 컨테이너의 경우)를 호출하여 수동으로 디스플레이 리스트에 등록해야 합니다.

데피니션 / Definition

어플리케이션 파일의 다른 부분에서 사용할 수 있는 그래픽 하위 컴포넌트를 정의하려면 <fx:Library> 태그 안에 하나 이상의 <fx:Definition> 태그를 사용하면 됩니다.

<fx:Definition> 태그 내부의 요소는 <fx:Library> 태그 밖에서 추가되면, 초기화 되거나 디스플레이 목록에 추가되지 않습니다. <fx:Definition> 요소는 name 속성을 정의해야 합니다. 요소를 초기화 할 때, 이 속성을 태그 이름으로 사용합니다. Library 태그는 무한 개의 <fx:Definition> 태그를 가질 수 있습니다.

아래의 예제는 Definition 태그를 사용하여 MyCircle 과 MySquare 그래픽을 정의하고 있습니다. 그리고 어플리케이션 파일에서 몇 개의 인스턴스를 초기화 합니다:

<?xml version="1.0" encoding="utf-8"?>

<!-- language/DefinitionExample.mxml -->

<s:Application

  xmlns:fx="http://ns.adobe.com/mxml/2009"

  xmlns:mx="library://ns.adobe.com/flex/mx"

  xmlns:s="library://ns.adobe.com/flex/spark">

  <fx:Library>

    <fx:Definition name="MySquare">

      <s:Group>

        <s:Rect width="100%" height="100%">

          <s:stroke>

            <s:SolidColorStroke color="red"/>

          </s:stroke>

        </s:Rect>

      </s:Group>

    </fx:Definition>

    <fx:Definition name="MyCircle">

      <s:Group>

        <s:Ellipse width="100%" height="100%">

          <s:stroke>

            <s:SolidColorStroke color="blue"/>

          </s:stroke>

        </s:Ellipse>

      </s:Group>

    </fx:Definition>

  </fx:Library>

  <mx:Canvas>

    <fx:MySquare x="0" y="0" height="20" width="20"/>

    <fx:MySquare x="25" y="0" height="20" width="20"/>

    <fx:MyCircle x="50" y="0" height="20" width="20"/>

    <fx:MyCircle x="0" y="25" height="20" width="20"/>

    <fx:MySquare x="25" y="25" height="20" width="20"/>

    <fx:MySquare x="50" y="25" height="20" width="20"/>

    <fx:MyCircle x="0" y="50" height="20" width="20"/>

    <fx:MyCircle x="25" y="50" height="20" width="20"/>

    <fx:MySquare x="50" y="50" height="20" width="20"/>

  </mx:Canvas>

</s:Application>

Library 태그 내부의 각 Definition 은 정의의 첫 번째 노드에서 표현된 타입의 하위 클래스인 ActionScript 클래스로 컴파일됩니다. 위의 예제에서, 새로운 클래스는 mx.graphics.Group 의 하위 클래스 입니다. 클래스의 범위는 document 로 제한됩니다. private ActionScript 클래스로 다루어져야 합니다.

라이브러리 / Library

0 또는 그 이상의 이름 있는 그래픽 <fx:Definition> 요소를 정의하기 위해 <fx:Library> 태그를 사용합니다. 라이브러리의 데피니션 자체로는 그래픽의 인스턴스가 아니지만, document 에서 데피니션을 인스턴스로 무한정 참조할 수 있습니다.

Library 태그는 document 의 로트 태그의 첫 번째 요소여야 합니다. document 당 하나의 Library 태그를 사용할 수 있습니다. 아래의 예제는 <fx:Library> 태그에서 하나의 그래픽(MyTextGraphic)을 선언하고, 어플리케이션에서 세 번 사용합니다:

 

<?xml version="1.0" encoding="utf-8"?>

<!-- language/LibraryExample.mxml -->

<s:Application

  xmlns:fx="http://ns.adobe.com/mxml/2009"

  xmlns:mx="library://ns.adobe.com/flex/mx"

  xmlns:s="library://ns.adobe.com/flex/spark">

  <fx:Library>

    <fx:Definition name="MyTextGraphic">

      <s:Group>

        <s:RichText width="75">

          <s:content>Hello World!</s:content>

        </s:RichText>

        <s:Rect width="100%" height="100%">

          <s:stroke>

            <s:SolidColorStroke color="red"/>

          </s:stroke>

        </s:Rect>

      </s:Group>

    </fx:Definition>

  </fx:Library>

  

  <s:layout>

    <s:VerticalLayout/>

  </s:layout>

  <fx:MyTextGraphic/>

  <fx:MyTextGraphic/>

  <fx:MyTextGraphic/>

</s:Application>

프라이벗 / Private

<fx:Private> 태그