반응형
http://www.adobe.com/devnet/flex/articles/flex4sdk_whatsnew.html
이번에는 플렉스 제품 매니저 Matt Chotin이 전해주는
플렉스 SDK에 대한 이야기입니다.
내용을 간단하게 정리해보았습니다.
혹 잘못된 내용이 있으면 바로 신고해주세요. ^^
(아래 이미지에 나오는 분이 Matt Chotin입니다. 저건 플렉스 빌더3 베타시절에
사용했던 것인가 보네요. 구글에서 이미지 검색해보시면 재미있는 합성사진이 많이 나옵니다).
플렉스빌더가 플래시빌더로 바뀌면서 플렉스는 어떻게 되는거냐 라고 궁금할 수 있는데
플렉스 SDK는 플래시플랫폼기반 컨텐츠를 만드는 핵심적인 도구로
계속 남아있게 됩니다.
아직 베타 상태이기때문에 중간중간 문법이 바뀔 수도 있습니다. ^^
최근에도 클래스 이름등의 큰 변화가 있었죠. ^^
http://opensource.adobe.com/wiki/display/flexsdk/Rename+List
플렉스4 SDK의 핵심적인 기능 3가지를 전달하고 있습니다.
* 이 내용은 이미 작년 Gumbo가 공개되었을때 알려진 내용들입니다.
베타에서는 이러한 약속(?)들이 얼마나 잘 구현되었는지를 살펴보는것도 흥미로운 일이겠네요.
Flex 4 초간단 리뷰
http://bluemetal.tistory.com/16
생각대로 디자인하기의 가장 큰 특징중 스파크(Spark)라고 불리는
새로운 스킨과 컴포넌트를 위한 아키텍쳐입니다.
기존의 헤일로(Halo)아키텍쳐 기반으로 설계되었지만
디자이너와 개발자가 생각을 잘 표현할 수 있도록
향상된 구조를 가지고 있습니다.
현재는 플래시 카탈리스트와 연동하기 위한 30여개의 컴포넌트에 적용되어있고
헤일로에 포함된 대부분의 컴포넌트들이 조만간 적용될 예정입니다.
FXG는 플래시 플랫폼내에서 상호 전달이 가능한 새로운 규약입니다.
기존에도 그래픽도구에서 플렉스로 전달할 수 있는 확장도구를 제공했지만
아무래도 일방적인 소통일 수 밖에 없었는데
FXG의 경우에는 서로 주고 받을 수 있는 형식(interchange format)이라는것이
가장 큰 차이가 아닌가 싶습니다.
레이아웃 형식에서 큰 차이점은
기존 Box 형식의 컨테이너 대신에
group이라는 새로운 형식이 등장했습니다.
자세한 사용사례는 아래 글을 참고하세요.
Flash builder Layout component Group
http://ho4040.egloos.com/4977997
데이터가 많은 경우 렌더링 등의 이유로
스크롤이 부드럽지 않은 경우가 있는데
이러한 부분에 많은 개선이 있다고 합니다.
그리고 애니메이션 엔진이 추가되었다고 하네요.
일반 효과처럼 트랜지션에서도 자동으로 되돌리기가 가능해지고
효과나 트랜지션에 픽셀벤더 필터를 적용할 수 있습니다.
기존에 익숙했던 네임스페이스인 xmlns:mx="http://www.adobe.com/2006/mxml" 대신에
새로운 네임스페이스가 추가됩니다.
그 이전에는 매크로미디어 시절에
xmlns:mx="http://www.macromedia.com/2003/mxml" 라는 네임스페이스를 사용했죠.
플렉스 1.5 시절입니다~
이렇게 새로운 네임스페이스를 만든 이유는
전반적인 프레임워크에 변화가 있었다는 이야기죠.
특히 스테이트(View states)는 컨셉도 좋고 유용한 기능임에도
사용하기가 편한 구조는 아니라 많이 사용이 안되었나 봅니다.
주로 뷰스택같은 구조를 주로 많이 사용하거나
스테이트를 사용하더라도 뷰스택처럼 사용하고 있기도 합니다.
그래서 스테이트를 좀 더 쉽게 사용할 수 있도록 개선했다고 합니다.
(이 부분은 나중에 다시 살펴보도록 하겠습니다.
어떤 부분이 개선된것인지 잘 구별이 안가서..ㅠㅠ)
일반적인 사용환경에서 최적화된 성능향상을 테스트하였다고 합니다.
혹 테스트 대상에 추가하고 싶다면 샘플과 함께 피드백을 달라고 하네요.
그리고 알려진 대로 ASDoc를 MXML코드상에서 직접 확인할 수 있구요.
바인딩 부분에서도 업그레이드가 되었다고 하는데요.
하나는 @을 이용한 바인딩 기능이네요.
아래코드에서 input1과 input2가 input3과 input4와 동일하게 동작합니다.
또는 Binding이라는 태그를 사용해서 아래와 같이 표현할 수도 있다고 합니다.
그리고 또 하나는 CSS에서 descendant(cascade 형식-특정컴포넌트 내부에 있는 컨트롤을 지정하는)과
id기반 그리고 유사요소(컨트롤의 특정 상태에 대한 지정)까지 가능하네요.
HTML과 CSS 사용시 차이점이라고 했었는데
이제 동일한 기능이 가능해졌습니다.
그만큼 CSS만 가지고 세부적인 컨트롤이 가능해졌구요.
--main.mxml
--searchVg.mxml
플래시플레이어의 새로운 텍스트엔진 기능도 SDK에 추가되었으며
오픈소스인 SWFObject 가 기본적으로 빌더에 적용되었네요.
이미 템플릿으로 적용하고 있는 분들도 계시죠.
SWFObject Flex template
http://reikop.raony.net/blog/57
SWF파일 삽입을 쉽게 도와주는 swfobject
http://mudchobo.tomeii.com/tt/304
이글은 결코
이벤트의 상품이 탐이 나서 작성하는것이 ...맞습니다.^^
이번에는 플렉스 제품 매니저 Matt Chotin이 전해주는
플렉스 SDK에 대한 이야기입니다.
내용을 간단하게 정리해보았습니다.
혹 잘못된 내용이 있으면 바로 신고해주세요. ^^
(아래 이미지에 나오는 분이 Matt Chotin입니다. 저건 플렉스 빌더3 베타시절에
사용했던 것인가 보네요. 구글에서 이미지 검색해보시면 재미있는 합성사진이 많이 나옵니다).
http://adamflater.blogspot.com/2008/02/top-10-reasons-to-go-to-flex360-atlanta.html
플렉스빌더가 플래시빌더로 바뀌면서 플렉스는 어떻게 되는거냐 라고 궁금할 수 있는데
플렉스 SDK는 플래시플랫폼기반 컨텐츠를 만드는 핵심적인 도구로
계속 남아있게 됩니다.
아직 베타 상태이기때문에 중간중간 문법이 바뀔 수도 있습니다. ^^
최근에도 클래스 이름등의 큰 변화가 있었죠. ^^
http://opensource.adobe.com/wiki/display/flexsdk/Rename+List
플렉스4 SDK의 핵심적인 기능 3가지를 전달하고 있습니다.
* 생각대로 디자인하기(Design in Mind)
- 도구내에서 쉽게 표현할 수 있는 새로운 수준의 프레임워크를 제공한다.
* 개발자 생산성 (Developer Productivity)
- 컴파일러의 성능을 향상시키고 데이터바인딩을 쉽게 처리해 생산성을 높일 수 있다
* 진화된 프레임워크 (Framework Evolution)
- 새로운 플래시 플레이어의 향상된 기능을 처리할 수 있고 그동안 요구되었던 여러 기능이 추가되었다.
- 도구내에서 쉽게 표현할 수 있는 새로운 수준의 프레임워크를 제공한다.
* 개발자 생산성 (Developer Productivity)
- 컴파일러의 성능을 향상시키고 데이터바인딩을 쉽게 처리해 생산성을 높일 수 있다
* 진화된 프레임워크 (Framework Evolution)
- 새로운 플래시 플레이어의 향상된 기능을 처리할 수 있고 그동안 요구되었던 여러 기능이 추가되었다.
* 이 내용은 이미 작년 Gumbo가 공개되었을때 알려진 내용들입니다.
베타에서는 이러한 약속(?)들이 얼마나 잘 구현되었는지를 살펴보는것도 흥미로운 일이겠네요.
Flex 4 초간단 리뷰
http://bluemetal.tistory.com/16
SPARK와 FXG
생각대로 디자인하기의 가장 큰 특징중 스파크(Spark)라고 불리는
새로운 스킨과 컴포넌트를 위한 아키텍쳐입니다.
기존의 헤일로(Halo)아키텍쳐 기반으로 설계되었지만
디자이너와 개발자가 생각을 잘 표현할 수 있도록
향상된 구조를 가지고 있습니다.
현재는 플래시 카탈리스트와 연동하기 위한 30여개의 컴포넌트에 적용되어있고
헤일로에 포함된 대부분의 컴포넌트들이 조만간 적용될 예정입니다.
FXG는 플래시 플랫폼내에서 상호 전달이 가능한 새로운 규약입니다.
기존에도 그래픽도구에서 플렉스로 전달할 수 있는 확장도구를 제공했지만
아무래도 일방적인 소통일 수 밖에 없었는데
FXG의 경우에는 서로 주고 받을 수 있는 형식(interchange format)이라는것이
가장 큰 차이가 아닌가 싶습니다.
레이아웃 형식에서 큰 차이점은
기존 Box 형식의 컨테이너 대신에
group이라는 새로운 형식이 등장했습니다.
자세한 사용사례는 아래 글을 참고하세요.
Flash builder Layout component Group
http://ho4040.egloos.com/4977997
데이터가 많은 경우 렌더링 등의 이유로
스크롤이 부드럽지 않은 경우가 있는데
이러한 부분에 많은 개선이 있다고 합니다.
그리고 애니메이션 엔진이 추가되었다고 하네요.
일반 효과처럼 트랜지션에서도 자동으로 되돌리기가 가능해지고
효과나 트랜지션에 픽셀벤더 필터를 적용할 수 있습니다.
새로운 네임스페이스
기존에 익숙했던 네임스페이스인 xmlns:mx="http://www.adobe.com/2006/mxml" 대신에
새로운 네임스페이스가 추가됩니다.
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
그 이전에는 매크로미디어 시절에
xmlns:mx="http://www.macromedia.com/2003/mxml" 라는 네임스페이스를 사용했죠.
플렉스 1.5 시절입니다~
이렇게 새로운 네임스페이스를 만든 이유는
전반적인 프레임워크에 변화가 있었다는 이야기죠.
특히 스테이트(View states)는 컨셉도 좋고 유용한 기능임에도
사용하기가 편한 구조는 아니라 많이 사용이 안되었나 봅니다.
주로 뷰스택같은 구조를 주로 많이 사용하거나
스테이트를 사용하더라도 뷰스택처럼 사용하고 있기도 합니다.
그래서 스테이트를 좀 더 쉽게 사용할 수 있도록 개선했다고 합니다.
(이 부분은 나중에 다시 살펴보도록 하겠습니다.
어떤 부분이 개선된것인지 잘 구별이 안가서..ㅠㅠ)
컴파일러 성능 개선
일반적인 사용환경에서 최적화된 성능향상을 테스트하였다고 합니다.
혹 테스트 대상에 추가하고 싶다면 샘플과 함께 피드백을 달라고 하네요.
그리고 알려진 대로 ASDoc를 MXML코드상에서 직접 확인할 수 있구요.
바인딩 부분에서도 업그레이드가 되었다고 하는데요.
하나는 @을 이용한 바인딩 기능이네요.
아래코드에서 input1과 input2가 input3과 input4와 동일하게 동작합니다.
<s:TextInput id="input1" text="{input2.text}"/>
<s:TextInput id="input2" text="{input1.text}"/>
<s:TextInput id="input3" text="@{input4.text}"/>
<s:TextInput id="input4"/>
<s:TextInput id="input2" text="{input1.text}"/>
<s:TextInput id="input3" text="@{input4.text}"/>
<s:TextInput id="input4"/>
또는 Binding이라는 태그를 사용해서 아래와 같이 표현할 수도 있다고 합니다.
<fx:Binding source="input5.text" destination="input6.text" twoWay="true"/>
그리고 또 하나는 CSS에서 descendant(cascade 형식-특정컴포넌트 내부에 있는 컨트롤을 지정하는)과
id기반 그리고 유사요소(컨트롤의 특정 상태에 대한 지정)까지 가능하네요.
HTML과 CSS 사용시 차이점이라고 했었는데
이제 동일한 기능이 가능해졌습니다.
그만큼 CSS만 가지고 세부적인 컨트롤이 가능해졌구요.
--main.mxml
<?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="1024" minHeight="768" xmlns:local="*">
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/halo";
@namespace s "library://ns.adobe.com/flex/spark";
@namespace local "*";
//컴포넌트에 지정된 클래스 선택자
s|Button{
fontFamily:"Gulim";
}
//컴포넌트의 특정 이벤트에 지정된 속성
s|Button:over{
color: #008000;
}
//특정 id값에 지정된 속성
#BLUE {color: #0000FF;}
#RED {color: #ff0000;}
local|searchVg s|Button {color: #FFF000;}
</fx:Style>
<s:VGroup>
<s:Button id="RED" label="빨간색"/>
<s:Button label="노란색"/>
<s:Button id="BLUE" label="파란색"/>
<local:searchVg/>
</s:VGroup>
</s:Application>
<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="1024" minHeight="768" xmlns:local="*">
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/halo";
@namespace s "library://ns.adobe.com/flex/spark";
@namespace local "*";
//컴포넌트에 지정된 클래스 선택자
s|Button{
fontFamily:"Gulim";
}
//컴포넌트의 특정 이벤트에 지정된 속성
s|Button:over{
color: #008000;
}
//특정 id값에 지정된 속성
#BLUE {color: #0000FF;}
#RED {color: #ff0000;}
local|searchVg s|Button {color: #FFF000;}
</fx:Style>
<s:VGroup>
<s:Button id="RED" label="빨간색"/>
<s:Button label="노란색"/>
<s:Button id="BLUE" label="파란색"/>
<local:searchVg/>
</s:VGroup>
</s:Application>
--searchVg.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup 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:Button label="노란색"/>
</s:VGroup>
<s:VGroup 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:Button label="노란색"/>
</s:VGroup>
id속성으로 정의된 빨간색,파란색 그리고 특정컴포넌트 내부에 지정한 속성
Button:over 와 같이 특정 이벤트에 지정된 속성 반영
플래시플레이어의 새로운 텍스트엔진 기능도 SDK에 추가되었으며
오픈소스인 SWFObject 가 기본적으로 빌더에 적용되었네요.
이미 템플릿으로 적용하고 있는 분들도 계시죠.
SWFObject Flex template
http://reikop.raony.net/blog/57
SWF파일 삽입을 쉽게 도와주는 swfobject
http://mudchobo.tomeii.com/tt/304
이글은 결코
[이벤트]도전! 리뷰왕, 새로운 Flash Platform 베타버전을 리뷰하면, 아이팟을 쏩니다.
http://adoberia.co.kr/iwt/blog/blog.php?tn=flex&id=320
http://adoberia.co.kr/iwt/blog/blog.php?tn=flex&id=320
이벤트의 상품이 탐이 나서 작성하는것이 ...맞습니다.^^
728x90
