2013/10/19

Flex:: HTTPServiceを使ってサーバからXMLデータを取得する方法

Flex 4.10:: HTTPServiceを使ってサーバからXMLデータを取得する方法を紹介します。

前手順としてXML作成とWebサーバのセットアップが必要です。

方法はHTTPServiceを使用して、ウェブサーバにあるXMLファイルを取得します。このデータをデータバインディングでListコントロールのdataProviderに繋ぎます。

■結果（画像）


■Flash コンテンツ
A Flash Content

■ソースコード
 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   
   [Bindable]
   private var arcColorItems:ArrayCollection;
   
   protected function testColorService_resultHandler(event:ResultEvent):void
   {
    arcColorItems = event.result.coloritems.coloritem;
    
   }
   
   protected function btnGetData_clickHandler(event:MouseEvent):void
   {
    testColorService.send();
   }
   
   protected function testColorService_faultHandler(event:FaultEvent):void
   {
    Alert.show(event.fault.faultString, "Error");
   }
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <s:HTTPService id="testColorService"
        url="https://localhost/testcolor.xml" //サーバーURL 任意に変更
        result="testColorService_resultHandler(event)"
        fault="testColorService_faultHandler(event)"/>
 </fx:Declarations>
 
 <s:VGroup>
  <s:Button id="btnGetData"
      label="Get Data"
      click="btnGetData_clickHandler(event)"/>
  <s:List id="lisColor"
    width="200" height="200"
    dataProvider="{arcColorItems}"
    labelField="colorname"/>
 </s:VGroup>
</s:Application>

■XMLデータ
 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<?xml version="1.0"?>
<coloritems>
    <coloritem>
        <id>1</id>
        <colorname>Red</colorname>
     <colorcode>#FF0000</colorcode>
    </coloritem>
    <coloritem>
        <id>2</id>
        <colorname>Cyan</colorname>
     <colorcode>#00FFFF</colorcode>
    </coloritem>
    <coloritem>
        <id>3</id>
        <colorname>Blue</colorname>
     <colorcode>#0000FF</colorcode>
    </coloritem>
    <coloritem>
        <id>4</id>
        <colorname>DarkBlue</colorname>
     <colorcode>#0000A0</colorcode>
    </coloritem>
    <coloritem>
        <id>5</id>
        <colorname>LightBlue</colorname>
     <colorcode>#ADD8E6</colorcode>
    </coloritem>
    <coloritem>
        <id>6</id>
        <colorname>Purple</colorname>
     <colorcode>#800080</colorcode>
    </coloritem>
    <coloritem>
        <id>7</id>
        <colorname>Yellow</colorname>
     <colorcode>#FFFF00</colorcode>
    </coloritem>
    <coloritem>
        <id>8</id>
        <colorname>Lime</colorname>
     <colorcode>#00FF00</colorcode>
    </coloritem>
    <coloritem>
        <id>9</id>
        <colorname>Magenta</colorname>
     <colorcode>#FF00FF</colorcode>
    </coloritem>
    <coloritem>
        <id>10</id>
        <colorname>White</colorname>
     <colorcode>#FFFFFF</colorcode>
    </coloritem>
    <coloritem>
        <id>11</id>
        <colorname>Silver</colorname>
     <colorcode>#C0C0C0</colorcode>
    </coloritem>
    <coloritem>
        <id>12</id>
        <colorname>Gray</colorname>
     <colorcode>#808080</colorcode>
    </coloritem>
    <coloritem>
        <id>13</id>
        <colorname>Black</colorname>
     <colorcode>#000000</colorcode>
    </coloritem>
    <coloritem>
        <id>14</id>
        <colorname>Orange</colorname>
     <colorcode>#FFA500</colorcode>
    </coloritem>
    <coloritem>
        <id>15</id>
        <colorname>Brown</colorname>
     <colorcode>#A52A2A</colorcode>
    </coloritem>
    <coloritem>
        <id>16</id>
        <colorname>Maroon</colorname>
     <colorcode>#800000</colorcode>
    </coloritem>
    <coloritem>
        <id>17</id>
        <colorname>Green</colorname>
     <colorcode>#008000</colorcode>
    </coloritem>
    <coloritem>
        <id>18</id>
        <colorname>Olive</colorname>
     <colorcode>#808000</colorcode>
    </coloritem>
</coloritems>

http://www.adobe.com/devnet/flex/videotraining/exercises/ex2_05_htt.html#articlecontentAdobe_numberedheader
Labels: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)