'flex2.0' 태그의 글 목록

'flex2.0'에 해당되는 글 2건

flex :: flex에서 httpservice를 actionscript에 적용해서 하는 예제

2008. 2. 2. 23:42

출처 : 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"?>

<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

flex :: HTTPService 에서 XML을 받아 DataGrid에 바인딩해보자.

Application/Flex

2008. 2. 2. 23:40

출처 : 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));
}