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

신고
Posted by 나비 나비:D

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

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

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

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


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

<mx:HTTPService id="service" resultFormat="e4x" result="resultHandler(event)" />

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

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

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

import mx.collections.XMLListCollection;

import mx.rpc.events.ResultEvent;


[Bindable] private var dataset:XMLListCollection = new XMLListCollection();
   

private function resultHandler(e:ResultEvent):void
{
    dataset = new XMLListCollection(new XMLList(e.result.node));
}



많은 분들이 이 부분에서 실수를 하는데 '예제로 배우는 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를 사용해야지만 또 나중에 필터링에 대해 깊이 들어갈때 도움이 됩니다.

 


<mx:DataGrid dataProvider="{maAC}" /> 



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


신고
Posted by 나비 나비:D

BLOG main image
by 나비:D

공지사항

카테고리

분류 전체보기 (278)
Programming? (0)
----------------------------- (0)
나비의삽질 (5)
Application (177)
SQL (51)
Web (27)
etc. (14)
Omnia (0)
---------------------------.. (0)

글 보관함

달력

«   2017/08   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
Total : 870,694
Today : 153 Yesterday : 169