Flex3 유용한 사이트

http://examples.adobe.com/flex3/componentexplorer/explorer.html
- Flex3 각 컴포넌트들의 실제 작동하는 예제와 소스코드를 제공

http://livedocs.adobe.com/flex/3/langref/
- Flex3 모든 컴포넌트들의 상속관계, 속성, 스타일 등을 찾을 수 있다

http://livedocs.adobe.com/flex/3/html/index.html
- Flex3 help 페이지인데 주로 왼쪽의 검색창에서 알고 싶은 내용의 설명이나 예제를 찾는 데 사용

http://blog.flexexamples.com/
- Flex에 대해 어느 정도 감을 잡고 이것저것 응용하기 시작하면서부터 필요한 아주 다양한 예제가 있는 곳

Flex 3 + BlazeDS

기본적으로 Flex는 화면단만을 개발할 수 있다.
(기본제공 컴포넌트가 다양해서 일반적인 화면은 쉽게 개발할 수 있고, 기본제공 컴포넌트로 구현할 수 없는 복잡한 화면은 기본 컴포넌트를 상속해서 확장하거나 ActionScript 코딩을 통해 구현하면 된다.)
다수의 사용자가 접속하는 시스템의 경우 애플리케이션 서버에 DB 등에 접속하는 코드가 있고, 이 코드와 Flex로 구현한 화면간의 통신을 구현해야 한다.
화면단의 Flex와 서버간의 통신기능을 제공하는 유료제품으로 Adobe의 LiveCycle Data Service가 있다. 그런데, 이것을 사용해서 시스템을 구축하면 운영서버의 CPU수에 따라 라이센스 비용을 지불해야 한다. 이 비용이 꽤 비싼 것으로 알고 있다. 우리나라에선 Flex Builder도 외국에 비해 상당히 비싼데, LCDS까지 이렇게 비싸니 우리나라에서 Flex가 빨리 보급되지 못 하는 이유 중 하나라고 생각된다.
LCDS에 대한 대안으로 아이러니하게도 Adobe에서 BlazeDS라는 것을 제공한다. 이것은 오픈소스로 무료로 사용할 수 있다. LCDS는 Flex Builder에서 편리하게 개발할 수 있는 기능을 제공하지만, BlazeDS는 Flex Builder에는 기능이 제공되지 않아 약간의 수작업이 필요하다. 하지만 약간의 유틸리티를 이용하면서 구성만 잘 하면 비용대비 효과가 우수한 시스템을 구축할 수 있다.

(이하 내용은 제가 사용하면서 예측한 내용으로 사실과 다를 수 있음을 알려 드립니다)
BlazeDS는 Flex로 구현된 화면단과 J2EE로 구현된 서버단간에 HTTP로 데이터를 원활히 주고 받을 수 있도록 연결해 주는 역할을 수행한다. 서버단에서 수행되는 메커니즘을 보면 Struts하고 유사하다고 보면 된다. 화면에서 특정 이름으로 서버단의 BlazeDS 서블릿을 호출하면, 서블릿은 그 이름에 해당하는 클래스를 XML 설정파일에서 찾아 객체를 생성하고 해당 메소드에 인자를 넘겨 호출한 후 결과를 리턴한다. 여기서 중요한 역할이 화면단에서 ActionScript 형태로 만들어 보낸 인자를 그에 맞는 Java 객체로 변환해서 메소드에 전달하는 것과 해당 메소드의 처리결과(Java 객체)를 Flex 화면에서 받을 수 있도록 전달해 주는 것이다. BlazeDS의 이런 역할 덕분에 Flex 화면과 J2EE 웹컨테이너간의 통신이 가능하다.
여기서, 서블릿이 특정 이름에 대해 호출하는 클래스는 특별한 제약이 없이 POJO면 가능하다. 즉, 여기부턴 자유롭게 구성이 가능하므로 예를 들면 Spring으로 이후를 구성할 수도 있다는 뜻이다. 아니면 Struts2의 Action처럼 클래스를 구현하고 DB처리는 Hibernate나 iBatis로 구현해도 된다.

대형 시스템을 구성한다면 BlazeDS를 이용해서 서버단 라이센스 비용을 대폭 줄일 수 있겠고, 대신 Flex Builder는 개발자수만큼 사야 될 것이다. Flex Builder는 기본과 Pro 버전이 있는데 기본이 1명당 40만원 정도였던 것 같고, Pro는 백만원이 넘었던 것으로 기억한다.(환율따라 자주 변함) Pro는 Advanced DataGrid라고 DataGrid에 트리형태의 표현 등 기능이 추가된 것과 차트 기능이 추가된다. 본인은 유료 Pro 버전을 쓰고 있는데 Advanced DataGrid는 별로 쓸 일이 없었고, 차트 기능은 편리해서 잘 사용하고 있다. 개발자가 많다면 대부분은 기본버전을 구매하고, 한두명만 Pro버전을 구매해서 이 사람들에게 차트개발을 몰아주는 것도 방법이 될 수 있을 것 같다. 솔직히 Flex 써 보니 사용하기도 괜찮고 모양도 예쁘게 만들어져서 좋긴 한데 우리나라에선 너무 비싸게 파는 것 같다.

참고로 Flex Builder는 3.0 말고 3.2 이상을 쓰는 것이 좋다. 맨 처음 3.0 썼는데 소스 하나 고치고 저장할 때마다 빌드시간이 너무 오래 걸려서 짜증났는데, 3.2 쓰면서 빌드 시간이 거의 5초 이내로 줄어서 쓸만해졌다.
참고 또 하나, Flex와 BlazeDS로 현재 개발환경을 구성한다면 Eclipse 3.4 (Ganymede)에 Flex Builder 3.2 Eclipse Plugin 버전을 사용하면 된다. Eclipse 3.3에서 3.4로 버전업 되면서 다른 건 몰라도 Search 결과는 참 보기 좋게 바뀌었다. 그래서, 3.4 강추!
-> 얘길 들어보니 Flex Builder 3.2를 써도 Eclipse 3.3을 쓰면 빌드 시간이 여전히 길다고 하니 반드시 Flex Builder 3.2에 Eclipse 3.4의 조합이 최적인 것 같다.

이와 관련된 링크나 설치방법, 샘플 등은 본인이 워낙 게으른 관계로 제공하지 못 하고, 그냥 열심히 해 보시라는 말 밖에 못 드리는 점 양해 바랍니다.

로딩속도 향상

ViewStack이나 TabNavigator 등 다른 컴포넌트들을 포함하면서
필요에 따라 일부는 보여주고, 나머지는 숨기는 레이아웃 컴포넌트들이 있다.
이런 것들은 creationPolicy라는 속성이 있는데,
이 속성값을 all로 하면 ViewStack이나 TabNavigator를 생성할 때 포함된 컴포넌트까지 모두 생성하고(포함된 컴포넌트가 많을수록 로딩속도가 느려짐),
auto로 하면 포함된 컴포넌트를 보여달라는 요청이 올 때에 컴포넌트를 생성한다.
(ViewStack은 해당 화면을 보여 줄 때, TabNavigator는 해당 탭을 선택했을 때)

그러므로, Application 안의 ViewStack에 업무화면들을 잔뜩 쌓아 놓고 메뉴에 따라 보여주는 형태라면 이 ViewStack의 creationPolicy를 auto로 하는 것이 로딩속도 향상에 좋다.
책을 보면 로딩속도 향상을 위해 작은 단위로 module을 만들어 놓고 필요할 때마다 moduleLoader 같은 걸로 띄우라고 하는데 귀찮아서 이것저것 보던 중에 creationPolicy라는 좋은 속성을 발견해서 쉽게 해결했다.
단, ViewStack에 creationPolicy를 설정하면 그 안에 포함된 화면 안에 있는 ViewStack이나 TabNavigator들에 creationPolicy 설정하지 않으면 상위 컴포넌트의 creationPolicy를 따라간다.

경험상 Application 안의 ViewStack 외에 그 안에서 사용하는 ViewStack이나 TabNavigator는 creationPolicy를 all로 하는 게 좋다. auto로 하면 안 보이는 탭이나 화면의 컴포넌트들이 null 상태인데, 이 때 안 보이는 컴포넌트들을 참조하려고 하면 맨 처음 한 번은 null 오류가 발생하기 때문이다.

FormItem 안의 내용을 옆으로 배치

일반적으로 입력/수정 폼 형태에는 Form 컴포넌트를 사용하는 게 좋다.
그런데, 한 내용에 가로로 2개의 입력이 필요할 경우에는 FormItem의 direction 속성을 horizontal로 설정하면 된다. 이 속성을 사용하지 않으면 세로로 위치한다.

<mx:FormItem label="비밀번호" labelWidth="200" direction="horizontal">
  <mx:TextInput id="pw1" width="200"/>
  <mx:TextInput id="pw2" width="200"/>
</mx:FormItem>

Label, TextInput에 손 모양 커서 적용

Label과 TextInput에 click 이벤트 처리하면 스크립트를 실행시킬 수는 있다.
그런데, click 이벤트 처리한다고 여기에 마우스를 올렸을 때 자동으로 마우스 커서가 손모양으로 바뀌진 않는다.
아래의 3개 속성을 설정해 주어야 된다.

useHandCursor="true"
buttonMode="true"
mouseChildren="false"

물론 다른 컴포넌트도 적용할 수 있을 것 같긴 한데 내가 적용해 본 것은 여기까지.
내 생각엔 useHandCursor 하나만으로 적용되어야 할 것 같은데 3개나 해 줘야 하다니...

문자열 클립보드에 저장

문자열 클립보드에 저장

System.setClipboard(dataString);

이 스크립트가 실행된 뒤엔 Ctrl+V하면 아마 이 내용이 붙겠지.