Flex에도 Java의 HashMap과 같이 key=value 형태로 저장하고 조회할 수 있는 클래스가 있다. 그것이 바로 Dictionary.

아래와 같이 사용할 수 있다.
var dict:Dictionary = new Dictionary(); // 이렇게 생성해서
dict[key] = value; // 이렇게 값을 저장하고
dict[key]          // 이렇게 값을 꺼낸다
 
key와 value에는 아마도 Object가 들어가는 걸로 봐서 어떤 값이든 들어가는 것 같다. HashMap에서도 그랬듯이 나는 key에는 String, value에는 String 또는 Object를 넣는 데 주로 사용할 듯하다.


혹시나 이해가 안 갈까 봐, 아래는 간단한 예제 코드
var dict:Dictionary = new Dictionary();
dict["userid"] = "tiger";
Alert.show("User ID : " + dict["userid"]);

결과는 User ID : tiger


단, HashMap처럼 keySet이나 contains 같은 메소드는 전혀 없고, 오직 넣고 꺼내기만 된다.

'Flex' 카테고리의 다른 글

id를 이용한 정적/동적 컴포넌트 참조  (0) 2009.05.19
아주 유용한 이클립스 단축키  (0) 2009.05.19
Flex에서 HTML 페이지 띄우기  (0) 2009.05.14
Flex3 유용한 사이트  (0) 2009.04.23
Flex 3 + BlazeDS  (0) 2009.04.16
AND

Flex에서 HTML(ASP, PHP, JSP 등 포함)를 띄울 일이 종종 생긴다.
이를 위해서 IFrame이라는 Flex Component가 있는데 이걸 제대로 사용하려면 wmode 같은 걸 설정하는데 이게 아무래도 Adobe 컴포넌트가 아니라서 DataGrid 스크롤이 휠로는 안 되는 등 뭔가 깔끔하게 처리되는 맛이 떨어진다. 그래서, 아예 웹브라우저를 하나 생성하는 게 가장 간편하고 확실한 방법인 듯하다.

아래 코드는 Flex에서 웹브라우저 팝업을 띄우는 예제이다.


// 작은 사이즈의 팝업으로 뜬다
if (ExternalInterface.available)
    ExternalInterface.call("window.open", url, "_blank", "width=800,height=600");
else {
    try {
        // 새로운 탭 또는 현재 웹브라우저와 같은 브라우저로 뜬다          
        navigateToURL(new URLRequest(url));
    }
    catch (e:Error) {
        Alert.show("Cannot open Popup : " + e.message);
    }
}


첫번째(if)에서 ExternalInterface.call은 현재 Flex가 동작하고 있는 웹브라우저에 자바스크립트 명령을 실행하는 방법이다. 즉, window.open(url, "_blank", "width=800,height=600"); 라는 자바스크립트 코드가 웹브라우저에서 실행된다. 이게 첫번째 옵션인 이유는 여기는 open 메소드의 세번째 인자로 다양한 옵션을 줄 수 있고, 팝업 차단이 되어 있어도 뜬다고 하기(확인 못 해 봤음) 때문이다. 나는 사이즈 옵션을 이용해 큰 브라우저가 아닌 작은 팝업을 만들고 싶었기 때문에 이것을 가장 우선으로 처리했다.
두번째(else)에서는
navigateToURL라는 메소드를 이용해 URL을 웹브라우저에 띄운다. 그런데, 여기는 별다른 옵션을 줄 수 없어 HTML 페이지가 새로운 탭에 열리거나 현재 웹브라우저와 같은 크기의 창이 열려 현재 Flex 화면을 가리기 때문에 ExternalInterface를 사용할 수 없을 경우에 어쩔 수 없이 사용하도록 처리했다.

참고:
navigateToURL을 이용해서 동적으로 생성된 컨텐츠를 다운로드 받게 할 수도 있다. navigateToURL에서 받는 URL의 페이지(ASP, PHP, JSP, Servlet 등)의 Contents Type을 text/html이 아닌 다른 값(예를 들면, Excel은 application/vnd.ms-excel)으로 하면 브라우저 창 대신 다운로드창이 떠서 다운로드할 수 있다.

'Flex' 카테고리의 다른 글

아주 유용한 이클립스 단축키  (0) 2009.05.19
Flex에서 Java의 HashMap과 같은 기능 사용  (0) 2009.05.15
Flex3 유용한 사이트  (0) 2009.04.23
Flex 3 + BlazeDS  (0) 2009.04.16
로딩속도 향상  (0) 2009.04.13
AND

Flex3 유용한 사이트

Flex 2009. 4. 23. 02:42
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' 카테고리의 다른 글

Flex에서 Java의 HashMap과 같은 기능 사용  (0) 2009.05.15
Flex에서 HTML 페이지 띄우기  (0) 2009.05.14
Flex 3 + BlazeDS  (0) 2009.04.16
로딩속도 향상  (0) 2009.04.13
FormItem 안의 내용을 옆으로 배치  (0) 2009.04.13
AND

Flex 3 + BlazeDS

Flex 2009. 4. 16. 23:49
기본적으로 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의 조합이 최적인 것 같다.

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

'Flex' 카테고리의 다른 글

Flex에서 HTML 페이지 띄우기  (0) 2009.05.14
Flex3 유용한 사이트  (0) 2009.04.23
로딩속도 향상  (0) 2009.04.13
FormItem 안의 내용을 옆으로 배치  (0) 2009.04.13
Label, TextInput에 손 모양 커서 적용  (0) 2009.04.13
AND

로딩속도 향상

Flex 2009. 4. 13. 16:02
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 오류가 발생하기 때문이다.

'Flex' 카테고리의 다른 글

Flex3 유용한 사이트  (0) 2009.04.23
Flex 3 + BlazeDS  (0) 2009.04.16
FormItem 안의 내용을 옆으로 배치  (0) 2009.04.13
Label, TextInput에 손 모양 커서 적용  (0) 2009.04.13
문자열 클립보드에 저장  (0) 2009.04.12
AND

일반적으로 입력/수정 폼 형태에는 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>

'Flex' 카테고리의 다른 글

Flex3 유용한 사이트  (0) 2009.04.23
Flex 3 + BlazeDS  (0) 2009.04.16
로딩속도 향상  (0) 2009.04.13
Label, TextInput에 손 모양 커서 적용  (0) 2009.04.13
문자열 클립보드에 저장  (0) 2009.04.12
AND

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

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

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

'Flex' 카테고리의 다른 글

Flex3 유용한 사이트  (0) 2009.04.23
Flex 3 + BlazeDS  (0) 2009.04.16
로딩속도 향상  (0) 2009.04.13
FormItem 안의 내용을 옆으로 배치  (0) 2009.04.13
문자열 클립보드에 저장  (0) 2009.04.12
AND

문자열 클립보드에 저장

System.setClipboard(dataString);

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

'Flex' 카테고리의 다른 글

Flex3 유용한 사이트  (0) 2009.04.23
Flex 3 + BlazeDS  (0) 2009.04.16
로딩속도 향상  (0) 2009.04.13
FormItem 안의 내용을 옆으로 배치  (0) 2009.04.13
Label, TextInput에 손 모양 커서 적용  (0) 2009.04.13
AND


대단한 프로그램은 아니고,
이번에 프로그램을 한참 개발하고 다국어 버전으로 변경할 일이 있었는데
30여개의 소스 파일을 일일이 뒤지면서 한글로 만들어 놓은 코드를 다국어 처리코드로 바꾸는 게 여간 힘든 작업이 아니었다.
(눈과 팔이 너무 아팠다. ^^;)
만만하게 보고 그냥 무식하게 하려다가, 결국 반 정도를 한 후에 프로그램을 만들었다. ^^;

아래에 있는 소스가 자바로 만든 변환 프로그램.

[code java]
import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.InputStreamReader;
import java.util.Arrays;
import java.util.Comparator;
import java.util.HashMap;

public class I18NReplace {
    private static final String I18N_CODE_PREFIX = "{resourceManager.getString('rb','";
    private static final String I18N_CODE_POSTFIX = "')}";

    /**
     * @param args
     */
    public static void main(String[] args) throws Exception {
        HashMap map = new HashMap();
        BufferedReader br = null;
        BufferedReader brSrc = null;

        try {
            // 다국어 코드, 값이 정의된 리소스번들 파일
            br = new BufferedReader(new InputStreamReader(
                                    new FileInputStream("code.properties"), "UTF-8"));
            // 다국어 버전으로 변환할 소스 파일
            brSrc = new BufferedReader(new InputStreamReader(
                                    new FileInputStream("test.mxml"), "UTF-8"));
           
            String line = null;
            // 다국어 코드, 값을 HashMap에 저장
            while ( (line = br.readLine()) != null ) {
                String[] arr = line.split("=");
                if (arr.length == 2) {
                    map.put(arr[0], arr[1]);
                }
            }
           
            Object[] keys  = map.keySet().toArray();
            // 길이가 긴 문자열부터 변환하기 위해 문자열 길이 내림차순으로 키를 정렬
            Arrays.sort(keys, new KeyOrderComparator());
           
            String srcLine = null;
            while ( (srcLine = brSrc.readLine()) != null ) {
                // 주석 라인은 skip
                if (!srcLine.trim().startsWith("//") &&
                    !srcLine.trim().startsWith("/*") &&
                    !srcLine.trim().startsWith("<!--")) {
                    for (int i = 0; i < keys.length; i++) {
                        if (srcLine.indexOf((String)keys[i]) > -1) {
                            srcLine = srcLine.replaceAll((String)keys[i],
                                    I18N_CODE_PREFIX + (String)map.get(keys[i]) + I18N_CODE_POSTFIX);
                        }
                    }
                }
               
                System.out.println(srcLine);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (br != null)
                    br.close();
            } catch (Exception e) {}
           
            try {
                if (brSrc != null)
                    brSrc.close();
            } catch (Exception e) {}
        }
    }
}

class KeyOrderComparator implements Comparator {
    /**
     * 문자열의 길이에 따라 내림차순 정렬
     */
    public int compare(Object key1, Object key2) {
        return ((String)key2).length() - ((String)key1).length();
    }
}
[/code]
I18NReplace.java

[code]
데이터=data
[/code]
code.properties

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="데이터">
...
</mx:TitleWindow>
[/code]
test.mxml


사용법이 복잡하진 않지만, 급하게 대강 만든 프로그램이라 GUI 등의 친절한 기능은 없다.

1. code.properties는 코드와 값을 넣은 건데 일반적인 순서와는 반대다.
이유는, 다국어 적용하기 전에 '데이터'라고 코딩을 했는데 이를 다국어 처리하기 위해서는
한글용 리소스번들 파일에 'data=데이터' 라는 내용이 있어야 한다.
그리고, '데이터' 대신에 다국어 처리 코드( Flex를 예로 들면, {resourceManager.getString('rb','data')} )를 넣으면
언어 설정에 따라 한국어일 때는 '데이터', 영어일 때는 'Data'라는 내용이 보이게 된다.
그런데, 지금 할 일이 '데이터'라고 하드코딩되어 있는 부분을 {resourceManager.getString('rb','data')}로 바꾸는 것이니까
code.properties 파일에는 '데이터=data' 즉, message=key 형태로 되어 있어야 한다.

2. test.mxml은 '데이터'라는 내용이 하드코딩되어 있는 소스 파일

3. I18N_CODE_PREFIX는 다국어처리코드에서 key 앞에 붙는 코드, I18N_CODE_POSTFIX는 key 뒤에 붙는 코드

참고로, 중간에 Arrays.sort 는 문자열길이에 따라 내림차순으로 정렬하는 건데,
그래야 '데이터 관리'라는 문자열이 소스에서 나왔을 때, '데이터 관리'라는 게 code.properties에 있을 때 우선적으로 처리하고
이게 없으면 '데이터'나 '관리'를 따로 변환하게 되어 원치 않는 결과가 나오게 된다.
이렇게 '데이터 관리'를 하나의 단어로 정의하는 것은 언어에 따라 어순이 바뀌거나,
두 단어 이상이 합쳐져서 만들어진 단어의 경우 언어에 따라 다른 의미가 될 수 있어서이다.

또, 참고로 파일을 읽을 때 "UTF-8"라는 설정이 있는데 이것은 "UTF-8" 인코딩으로 저장한 파일을 읽기 위해 사용한 것이다.
소스 파일이나 리소스번들 파일의 인코딩 형태에 따라 빼거나 고쳐서 사용하면 된다.


이렇게 설정한 상태에서 이 I18NReplace을 실행하면 치환된 결과가 표준출력으로 나오고,
이 결과를 원래 소스에 붙인 다음에 잘못 된 부분을 수정해서 저장하면 다국어 처리가 끝난다.

꼭 다국어 처리 변환에만 사용할 필요는 없고, 어떤 규칙에 따라 문자열을 치환해야 하는 경우 사용하면 되겠다.
당연한 얘기지만, code.properties 파일 정의시 띄어쓰기는 정확히 맞춰 주어야 한다.
AND