Flex4 SDK beta review

Flex/Air 2009.07.03 23:45
Flex4의 3가지 메인 테마
Flex 매니저인 Matt Chotin의 글에서 3가지 메인 테마에 대한 내용을 알 수 있습니다.
(http://www.adobe.com/devnet/flex/articles/flex4sdk_whatsnew.html)

생각속의 디자인(Design in Mind)
개발자와 디자이너의 끊임없는 협업을 위한 프레임워크 지원.

개발자 생산성(Developer Prodectivity)
컴파일러 성능 향상과 손쉬운 데이터바인딩으로 인한 생산성 강화.

프레임워크 진화(Framework Evolution)
Flash Player의 새로운 기능과 모두가 요구했던 기능들 추가.


무엇이 달라졌나?
어도비리아에 있는 기술문서를 참고 하였습니다.

플레이어 의존성
Flex4는 Flash Player 10을 필요로 합니다.

테마와 아키텍쳐 변경
Flex3의 테마였던 Halo 테마가 Flex4에서 Spark 테마로 변경 되었습니다. Halo 테마는 컴포넌트의 동작에 관련된 코드와 외형에 관련된 스킨이 함께 존재합니다. 하지만 Spark 테마에서는 코드와 스킨을 분리함으로써 개발자는 비즈니스 코드에 집중하고, 디자이너는 스킨에만 집중할 수 있습니다. 이것이 가능한 이유는, 안토니오님의 글에 따르면, 외형에 관련된 property를 CSS에서 설정할 수 있기 때문입니다.

FXG
Flash XML Graphics(이하 FXG)는 그래픽을 정의하기 위한 선언적인 문법 입니다. FXG는 Illustrator 같은 다른 어도비 툴들에서 주고받을 수 있는 포맷 입니다. 디자이너는 어도비 툴을 이용하여 그래픽을 만들어낼 수 있고, 그것을을 FXG 포맷으로 추출할 수 있습니다. 여러분은 RIA를 개발하기 위해 디자이너가 추출한 FXG 파일을 FB4에서 사용할 수 있습니다.

FXG는 다음 세 가지를 정의합니다.
- Graphics and text primitives
- Fills, strokes, gradients, and bitmaps
- Support for filters, masks, alphas, and blend modes
FXG에서, 모든 그래픽 엘리먼트는 IGraphicElement 인터페이스를 구현합니다.
FXG는 일반적으로 비주얼 엘리먼트를 그리기 위해 Spark 스킨에서 사용 됩니다.

간단한 예제는 다음과 같습니다.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:s="library://ns.adobe.com/flex/spark">

     <mx:Panel title="Line Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

       <s:Graphic x="0" y="0">
           <s:Line xFrom="0" xTo="100" yFrom="0" yTo="100">
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="1"/>
                 </s:stroke>
           </s:Line>
        </s:Graphic>

     </mx:Panel>
</s:Application>
자세한 정보는 다음을 참고 하세요.
http://livedocs.adobe.com/flex/gumbo/html/WSB7116AE5-4283-4aef-BADB-26BDE0253D1A.html

새로운 네임스페이스
Flex3에서 존재하던 단 하나의 mx를 포함해 두개의 신규 네임스페이스가 추가 되었습니다.
xmlns:fx="http://ns.adobe.com/mxml/2009"
- 컴포넌트가 없는 순수한 언어 네임스페이스 입니다.

xmlns:s="library://ns.adobe.com/flex/spark"
- Flex4의 Spark 테마 컴포넌트들을 포함 합니다.

xmlns:mx="library://ns.adobe.com/flex/halo"
- Flex3의 Halo 테마 컴포넌트들을 포함 합니다.

네임스페이스를 필요로하는 type selector
Flex4 에서는 Flex3의 컴포넌트들을 포함하기 때문에, 이름 충돌을 피하기 위해 type selector 지정시 네임스페이스를 필요로 합니다.
<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/halo";
 
    s|Button {
        color: #FF0000;
    }
 
    mx|DateChooser {
        color: #FF0000;
    }
</fx:Style>

MXML문서의 구조화 향상
Flex3 에서는 비주얼 컴포넌트와 넌-비주얼 컴포넌트를 Application 태그안에 포함할 수 있었습니다. Flex4 에서는 넌-비주얼 컴포넌트를 프로퍼티 선언으로 간주했기 때문에, 직접 적으로 포함될 수 없으며 넌-비주얼 컴포넌트를 위한 <fx:Declarations> 태그 하위에 포함될 수 있도록 변경 되었습니다.
<fx:Declarations>
     <mx:HTTPService />
</fx:Declarations>

컨테이너 변경
Flex3 에서는 레이아웃 로직이 컴포넌트 자체에 정의 되었습니다만, Flex4 에서 레이아웃은 컴포넌트에서 분리되었으며 이제는 선언적으로 레이아웃을 정의할 수 있습니다. 또한, 스크롤은 기본적으로 꺼져있으므로 스크롤을 위해 <s:Scroller > 태그를 이용해야 합니다. 스크롤 기능이 포함된 예제는 다음과 같습니다.
<s:Scroller height="50">
    <s:Group>
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
       
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>       
    </s:Group>
</s:Scroller>



신고

'Flex/Air' 카테고리의 다른 글

Flash Builder4 Beta review  (4) 2009.07.05
Adobe Flash Catalyst Beta review  (0) 2009.07.05
Flex4 SDK beta review  (2) 2009.07.03
Flex Builder에서 디버깅&프로파일링 하기 -2부-  (9) 2009.05.25
Flex Builder에서 디버깅&프로파일링 하기 -1부-  (0) 2009.04.20
AirMusic  (10) 2009.03.31
Posted by 째코