Flex 2.0에서 JSON 활용하기

JSON(JavaScript Object Notation)은 XML에 비하여 가볍고 정형화된 형식으로, 최근에는 API 를 JSON 형식으로도 많은 업체들이 제공하고 있습니다. 여기서는 Flex 2.0 에서 JSON 을 사용하는 방법에 대하여 간략하게 소개할까 합니다.

1. JSON Component 다운로드 및 설정

corelib ActionScript 3 library 다운로드
다운로드 받은 압축 파일 중에서 "corelib.swc" 파일을 component library 디렉토리에 복사한다. ( 본인의 경우는 Flex Builder 2.0 의 기본 Library Path C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\libs 에 복사하였다. )
Flex Builder 2.0 에서
1 . 메뉴에서 Window > Open Perspective > Flex Development
2. 다시 메뉴에서 Window > Show View > Navigator
3. 사용하고자 하는 프로젝트를 선택 후에 마우스 오른쪽 버튼을 클릭 후 "Properties" 선택한다.
4. Flex Build Path > Library Path 을 선택 후에 아래 그림과 같이 corelib.swc 파일을 추가한다.

2. 소스

JSONTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute"
creationComplete="initApp();" fontSize="11">

<mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.http.mxml.HTTPService;
   import mx.controls.Alert;
   import com.adobe.serialization.json.JSON;

   public function initApp():void{
    var httpd:mx.rpc.http.mxml.HTTPService = new HTTPService();
    httpd.showBusyCursor = true;
    httpd.url = "j.php";
    httpd.addEventListener("result",resultHandler);
    httpd.addEventListener("fault",faultHandler);
    httpd.send();
  }

   public function resultHandler(event:ResultEvent):void{
    var rawData:String = String(event.result);
    var jObj:Object = JSON.decode(rawData);
    var dp:ArrayCollection = new ArrayCollection(jObj["DATA"]);
    title.text = jObj["INFO"]["TITLE"];
    date.text = jObj["INFO"]["DATE"];

    grid.dataProvider = dp;
   }

   public function faultHandler(event:FaultEvent):void{
    mx.controls.Alert.show(event.fault.message);
   }
  ]]>
</mx:Script>

<mx:DataGrid id="grid" right="10" left="10" top="99" bottom="10">
  <mx:columns>
   <mx:DataGridColumn headerText="번호" dataField="num"/>
   <mx:DataGridColumn headerText="이름" dataField="name"/>
  </mx:columns>
</mx:DataGrid>
<mx:Form height="81" left="10" right="10" top="10">
  <mx:FormItem label="제목 :" width="573">
   <mx:Label id="title" text=""/>
  </mx:FormItem>
  <mx:FormItem label="시간 :" width="573">
   <mx:Label id="date" text=""/>
  </mx:FormItem>
</mx:Form>
</mx:Application>

j.php

<?
header(sprintf("Content-type:text/plain;charset=utf-8"));

require "../../lib/JSON/JSON.php";

$json = new Services_JSON();
$rows = Array();

$rows["INFO"] = array("TITLE" => "JSON 사용 예", "DATE" => date("Y년 m월 d일"));
$rows["DATA"] = Array();

for($i=0;$i<10;$i++){
array_push($rows["DATA"],array("num" => $i,"name" => "손상모"));
}
$output = $json->encode($rows);

print($output);

3. 데모

http://www.ihelpers.co.kr/programming/flex/JSONTest.html

4. 참고

출처 : Tong - BlueSky_07님의 Flex/Flash/Apollo/As통

기쁨3배 & 행복3배 = DATABASE & MYSQL & MARIADB

Flex 2.0에서 JSON 활용하기

티스토리툴바

Flex 2.0에서 JSON 활용하기

관련글

티스토리툴바