출처 : http://islet4you.tistory.com/27

포토뷰어라는 예제에 있는 것을 추출해 왔습니다
항상 모듈화라는 숙제를 가지고 보니 이런 좋은 예제가 아닌가 합니다.

package samples.photoviewer
{
 import flash.events.*;

 import mx.collections.ArrayCollection;
 import mx.collections.IViewCursor;
 import mx.core.Application;
 import mx.rpc.events.ResultEvent;
 import mx.rpc.http.HTTPService;
 import mx.utils.ArrayUtil;

 public class PhotoService
 {
  private var service:HTTPService;

        [Bindable]
  public var galleries:ArrayCollection;

  public function PhotoService(url:String)
  {
   service = new HTTPService();
   service.url = url;
   service.addEventListener(ResultEvent.RESULT, resultHandler);
   service.send();
  } // httpservice를 이용한 호출

  private function resultHandler(event:ResultEvent):void
  {
      var result:ArrayCollection = event.result.galleries.gallery is ArrayCollection
          ? event.result.galleries.gallery as ArrayCollection
          : new ArrayCollection(ArrayUtil.toArray(event.result.galleries.gallery));
      var temp:ArrayCollection = new ArrayCollection();
      var cursor:IViewCursor = result.createCursor();
      while (!cursor.afterLast)
      {
          temp.addItem(new Gallery(cursor.current));
          cursor.moveNext();
      }
      galleries = temp;
  }
 }
} // 결과를 arraycollection으로 적용

이 actionscript를 적용해서 구현을 한 예제를 보면
<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Copyright (C) 2003-2006 Adobe Macromedia Software LLC and its licensors.
// All Rights Reserved.
// The following is Sample Code and is subject to all restrictions on such code
// as contained in the End User License Agreement accompanying this product.
// If you have received this file from a source other than Adobe,
// then your use, modification, or distribution of it requires
// the prior written permission of Adobe.
//
////////////////////////////////////////////////////////////////////////////////
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
 paddingBottom="0" paddingTop="0"
 paddingLeft="0" paddingRight="0"
    layout="vertical"
    pageTitle="Photo Viewer"
 creationComplete="init()">

 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.rpc.events.*;
   
   import samples.photoviewer.Gallery;
   import samples.photoviewer.PhotoService;  //위의 소스를 import
   
   [Bindable]
   private var gallery:Gallery;
   
   [Bindable]
   private var service:PhotoService;
   
   private function init():void
   {
    service = new PhotoService("data/galleries.xml"); //httpservice를 호출
   }
  ]]>
 </mx:Script>
 
 <mx:Style source="main.css" />
 
 <mx:Binding source="service.galleries.getItemAt(0)" destination="gallery" />
 
 <mx:ViewStack id="views" width="100%" height="100%">
 
  <ThumbnailView id="thumbnailView" gallery="{gallery}"
   slideshowView="views.selectedChild = slideshowView"
   carouselView="views.selectedChild = carouselView"/>
 
  <CarouselView id="carouselView" gallery="{gallery}"
   slideshowView="views.selectedChild = slideshowView"
   thumbnailView="views.selectedChild = thumbnailView"/>
 
  <SlideShowView id="slideshowView" gallery="{gallery}"
   thumbnailView="views.selectedChild = thumbnailView"
   carouselView="views.selectedChild = carouselView"/>
   
 </mx:ViewStack>
   
</mx:Application>

Viewstack을 가지고 처리를 해주는 것이다.
아울러 여기서 보여주는 콤포넌트에 대해서는 다음시간에 따로 설명을 하도록 하겠습니다.
조금씩 업무별로 가는 프레임웍에 대한 레퍼런스가 만들어지면 올리도록 하겠슴당 ㅋ

출처 : http://blog.naver.com/mash9/20046392694

Flex를 어느 정도 하신 분들이라면 HTTPService 사용과 데이터 바인딩(binding)에 익숙해지셨겠지만, 제가 만난 분들 중에도

종종 실수를 하시는 분들이 계십니다. 그 분들이 누군지 밝히고자 하는건 아니고..  HTTPService 에서 데이터를 읽어와

DataGrid까지 바인딩(binding)시키는 부분에서 실수하기 쉬운 부분에 대해 설명하려 합니다.

먼저 아래처럼 웹서비스(web service)를 선언해줍니다.

여기서 result="resultHandler(event)" 는 이벤트 내부적으로 event 라는 이벤트 인스턴스(instance)가 생성되는데 이것을

콜백함수(callback function)에 넣겠다는 뜻입니다. resultFormat 은 대부분 웹서비스는 XML 기반으로 데이터를 연동시킬 목적으로

구현할것이라면 e4x 라고 선언해주어야 나중에 뒷탈(?)이 없습니다. 종종 원치않은 바이너리가 들어가는 경우가 생깁니다.

많은 분들이 이 부분에서 실수를 하는데 '예제로 배우는 Adobe 플렉스 2' 에 (저를 포함한 많은 분들이 이 책으로 시작하셨죠)

DataGrid 에 데이터를 바인딩 시키기는 부분이 나오는데 책에서는 HTTPService.lastResult 를 바로 DataGrid에 바인딩 시킵니다.

HTTPService.lastResult 을 바로 DataGrid에 바인딩 시켰을경우 데이터가 1개의 노드가 존재할때 문제가 null 객체에 접근 에러가

뜨고 말지요. XML이 한개 였을경우 데이터가 어레이(array) 형태가 아닌 오브젝트(object) 형태라고 인식하기 때문입니다. 때문에

번거롭지만 위 처럼 XMLList를 통해 어레이(array) 형태란것을 인식시키고 이것을 바인딩된 변수 dataset에 넣어주는것입니다.

저 함수에서 DataGrid.dataProvider 에 넣어줄수도 있지만 그렇게 했을경우 정상적인 바인딩이 이루어지지 않을뿐더러 버그를

유발할수도 있습니다. 외부로 들어온 데이터는 저렇게 모두 바인딩 변수에 넣어주시는 편이 좋습니다.

바인딩을 설명하기위해 dataProvider 에 ArrayCollection 을 넣어서 설명하는 부분 때문에 ArrayCollection 에 담는 분도

계시더구요. 전에도 잠깐 언급했듯이 HTTPService 는 기본 XMLListCollection 을 사용하는것이 정석입니다.

XMLListCollection를 사용해야지만 또 나중에 필터링에 대해 깊이 들어갈때 도움이 됩니다.

마무리는 다음과 같이 선언해주면 끝입니다. 간단하지만 의외로 실수하기 쉬운 부분이죠.

Cairngorm Framework

1. Cairngorm Framework 정의
cairngorm은 사전적인 의미로는 연수정이란 뜻입니다.
발음을 하면 컨검? 주위에서는 그냥 캔곰이라고 부르더군요. 이하 강좌는 캔곰이라는 용어를 사용하여 진행하도록 하겠습니다. 알아서 이해해 주시면 감사…^^
캔곰 프레임워크는 Flex를 위한 작은 규모의 프레임워크입니다. 기존에 사용하던 프레임워크와는 차이가 많이 나죠. 저도 처음엔 뭐 이런게 프레임워크인가 생각했던 적이 있습니다. 하지만 그래도 몇가지 사항에서 중요합니다.
캔곰은 Flex Application을 사용하여 Enterprise Software를 개발하기 위한 디자인패턴들로 구현되어 있습니다. 또한 캔곰 사용의 장점은 동일한 패턴으로 서비스를 정의하고 관리함으로서 간결한 코드를 작성할 수 있습니다. 단점은 파일 개수가 많아 진다는 것이 아닐까 싶네요.

2. 캔곰 프레임워크 설치하기
캔곰 프레임워크는 Flex에서 사용하는 라이브러리 포맷인 swc 형태로 배포됩니다. 또한 소스코드까지 포함되어 있으므로 좀 더 구체적인 내용을 알고 싶은 분들은 소스코드를 분석하셔도 됩니다.

2.1 캔곰 프레임웍2.1을 다운로드 합니다.
URL : http://labs.adobe.com/wiki/index.php/Cairngorm

<그림 1>

2.2 다운로드 받은 파일의 압축을 풉니다.
압축을 풀면 bin 폴더에서 Cairngorm.swc 파일을 확인할 수 있습니다.

<그림 2>


2.3 프로젝트의 library path로 이동한 다음 ‘Add SWC’버튼을 클릭 한 후 bin폴더에 있는 Cairngorm.swc파일을 추가합니다.

<그림 3>


3. Cairngorm Framework 구조
3.1 캔곰은 MVC구조 형태로 패턴화 되어 있습니다. 프리젠테이션과 비즈니스 로직을 분리 할 수 있는 형태의 템플릿을 제공합니다.
3.2 캔곰 architecture

<그림 4>

- View : End User의 View화면을 지칭합니다. View는 사용자의 이벤트를 받아 CairngormEventDispatcher를 사용하여 Controller에 등록되어 있는 커맨드를 호출하는 역할을 담당합니다.
- Model : Controller와 View를 중계하는 역할을 담당합니다. 최종적으로 처리된 결과를 ModelLocator를 통해 View에 전달됩니다.
- Controller : Command를 실행하여 서비스를 요청하는 역할을 담당합니다. 처리된 결과는 ModelLocator를 통해 View에 전달됩니다.

3.3 캔곰 패키지 구조
각각의 기능 그룹별로 패키지 폴더를 구성합니다. 뭐 반드시 지켜야 하는 구조는 아니지만 되도록이면 동일한 형태의 Naming Rule을 사용하기를 권장합니다.

- Business : Delegate 클래스를 모아 놓은 폴더입니다. 그리고 데이터 서비스를 정의하는 Services.mxml도 이곳이 포함됩니다.
- Commands : Delegate를 호출하고 리턴된 결과 값을 View에 전달하는 역할을 담당하는 command 클래스를 모아 놓은 폴더입니다. Command 클래스는 캔곰에서 제공하는 Command,Responder 인터페이스를 상속받아 구현합니다.
- Control : command를 관리하는 controller 클래스를 모아 놓은 폴더입니다. CairngormEventDispatcher를 통해 Control에 등록된 Command를 실행합니다. Controller 클래스는 캔곰에서 제공하는 FrontController를 상속받아 구현합니다.
- Model : View들을 관리하는 역할을 담당하는 ModelLocator를 모아 놓은 폴더입니다. ModelLocator 클래스는 캔곰에서 제공하는 ModelLocator클래스를 상속받아 구현합니다(개인적으로는 사용 안 함).
- Vo : RemoteObject서비스를 사용할때만 해당되는 클래스일 듯 합니다. Value Object의 약어로서 View에서 표시될 속성들을 모아놓은 클래스입니다. Vo는 ValueObject를 상속받아 구현합니다. Vo사용의 장점은 타입 체크를 통해 좀 더 명확하게 무슨 정보 인지를 판단 할 수 있습니다.

4. 캔곰 사용하기
예제로 게시판 리스트와 게시글 읽기 기능 두 가지를 가지고 캔곰을 적용해 서비스 데이터를 연동해 보도록 하겠습니다. 단 RemoteObject를 정의하여 자바 클래스를 호출하는 부분은 “RemoteObject 사용하기” 강좌에서 계속 진행 할 예정입니다.

4.1 프로젝트의 패키지를 아래와 같이 business,command,control,event,model,view.vo를 정의합니다.

<그림 5>

4.2 이벤트 정의

- ViewEvent.as : CairngormEvent를 상속받은 클래스로서 리턴 페이지 객체를 저장하기 위한 view 속성을 포함하고 있습니다. 추후 커맨드를 호출하기 위해서는 반드시 ViewEvent를 생성하여 사용해야 합니다

사용자 이벤트 정의

<그림 6>

  *

initialize 이벤트

<그림 7>

  *

serviceResult” 이벤트 처리

<그림 8>

-

완성된 전체 게시판 구조는 아래 그림 형태로 실행됩니다

<그림 9>

   import mx.controls.Alert;
   import mx.events.CloseEvent;

   // show alert
   private function clickButton():void {
     Alert.yesLabel = "예", Alert.noLabel = "아니오";
     Alert.show("예 아니오 냐는?", "", Alert.YES|Alert.NO, this, buttonAlertListener, null);
   }
  
   // alert listener
   private function buttonAlertListener(evt:CloseEvent):void {
    if ( evt.detail == Alert.YES ) {
        Alert.okLabel = "예";
        Alert.show("예 선택했다는");
    } else if ( evt.detail == Alert.NO ) {
        Alert.okLabel = "아니오 선택했소";
        Alert.buttonWidth = 200;
        Alert.show("아니오 선택했다는");
    }
   }

간단 예제 입니다
Alert.yesLabe  Alert.noLabel   Alert.okLabel 등으로 버튼 이름을 한글로 세팅해줄수 있숩니다.

만약 버튼에 할당한 이름이 길다면  Alert.buttonWidth = 200 으로 버튼 길이를 조정하여 글자가 짤리는걸 방지할수 있습니다.

선택에 따라 맞는 행위?를 실행시키려면 Alert.show에 각종 인자를 줍니다

...buttonAlertListener ... 부분이 선택에 따라 실행할 함수 지정 부분

그럼 private function buttonAlertListener(evt:CloseEvent):void 식으로 함수 만들어서
조건에 따라 맞는 행위를 기술해 주시면 된다는.. :)