Flex を使った WEBアプリの基本(4) :【WEB Flex】



ブラウザでダウンロード
ソースの位置整理
さらにメンテナンス性を上げる為に、1つのディレクトリ内に全てのソースを
カタログせずに、ディレクトリに分けて保存します
  • Main.mxml
  • extern
    1. Style.css
    2. Script.as
    3. Parts.as
  • control
    • LboxText.mxml
  • php
    • response.php
Main.mxml
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
01.<?xml version="1.0" encoding="utf-8"?>
02.<mx:Application
03.    xmlns:mx="http://www.adobe.com/2006/mxml"
04.    initialize="initData();"
05.    xmlns="control.*"
06.>
07. 
08.<!-- *************************************************** -->
09.<!-- 外部ソース -->
10.<!-- *************************************************** -->
11.<mx:Style source="extern/Style.css" />
12.<mx:Script source="extern/Script.as" />
13. 
14.<!-- *************************************************** -->
15.<!-- HTTP 通信用 -->
16.<!-- *************************************************** -->
17.<mx:HTTPService
18.    id="srv"
19.    showBusyCursor="true"
20.    result="resultHandler(event)"
21.    fault="faultHandler(event)"
22./>
23.        ・
24.        ・
25.        ・
26.        ・
Script.as から include される Parts.as は、
Script.as から見たパスで指定します
Script.as
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
01.import mx.controls.*;
02.import mx.events.*;
03.import mx.rpc.events.*;
04.import mx.formatters.*;
05.import flash.external.*;
06.import flash.events.*;
07. 
08.include "Parts.as"
09.        ・
10.        ・
11.        ・
12.        ・
XML( e4x ) によるデータの取得とバインド利用
新しく策定された ECMAScript for XML 仕様には、XML データを処理するための
新しいクラス群や機能が定義されています。

それらは総称して E4X と呼ばれています。

ActionScript 3.0 は、E4X 準拠のクラスとして、
新しい XML、XMLList、QName、および Namespace クラスを備えています。

結論から言うと、e4x をレスポンス形式として使う事によって最大限の
有用な機能を利用できるという事で、それ以外の形式は特別な用途で
使用されると考えられます。

ここでは、[Bindable] というバインド可能な変数を定義する事によって、
この変数が変更されると、バインド先のデータが変更されるというイベント
処理を簡単な記述で実現できます。

※ XML( e4x ) 記述の注意事項
1) 属性の前に @ を付加する
2) @属性 が直接属性の値を参照
3) 末端の要素が、その内部のテキストノードの値を参照
Script.as
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
01.import mx.controls.*;
02.import mx.events.*;
03.import mx.rpc.events.*;
04.import mx.formatters.*;
05.import flash.external.*;
06.import flash.events.*;
07. 
08.include "Parts.as"
09. 
10.[Bindable] public var idx:int = 0;
11.[Bindable] public var xdata:XML;
12. 
13.// *****************************************************
14.// HTTPServiceを使用してHTTPリクエスト（GET）を行う
15.// *****************************************************
16.private function sendData():void {
17.    // ● リクエストするURLをセット
18.    // ★ http:// で記述すると、ベースが ローカルでも動作します
19.    srv.url = "php/response.php";
20. 
21.    srv.request.fld1 = fld1.text;
22.    srv.request.fld2 = fld2.text;
23.    srv.request.fld3 = fld3.text;
24. 
25.    // レスポンス結果のデータフォーマット
26.    srv.resultFormat = "e4x";
27.    srv.method = "GET";
28.    srv.send();
29. 
30.}
31. 
32.// *****************************************************
33.// HTTPServiceが成功
34.// *****************************************************
35.private function resultHandler(e:ResultEvent):void {
36. 
37.    xdata = XML(e.result);
38. 
39.    firebug( xdata.row.(@id=="0001").COL_3 );
40.    firebug( xdata.row[1].COL_3 );
41. 
42.}
43. 
44.// *****************************************************
45.// HTTPServiceでエラーが発生した
46.// *****************************************************
47.private function faultHandler(e:FaultEvent):void {
48. 
49.    Alert.show(e.fault.message);
50. 
51.}
Main.mxml
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
01.<!-- *************************************************** -->
02.<!-- 入力フォーム -->
03.<!-- *************************************************** -->
04.<mx:Form width="90%" height="90%">
05.    <mx:FormHeading height="40" label="社員データ登録"/>
06.     
07.    <mx:FormItem
08.        label="社員コード"
09.        labelStyleName="labelAlign"
10.        paddingBottom="30"
11.    >
12.        <LboxText
13.            id="fld1"
14.            maxChars="4"
15.            width="50"
16.            text="{xdata.row[idx].@id}"
17.        />
18. 
19.    </mx:FormItem>
20.    <mx:FormItem
21.        label="氏名"
22.        labelStyleName="labelAlign"
23.         paddingBottom="30"
24.    >
25.        <LboxText
26.            id="fld2"
27.            width="300"
28.            text="{xdata.row[idx].COL_1}"
29.        />
30. 
31.    </mx:FormItem>
32.    <mx:FormItem
33.        label="フリガナ"
34.        labelStyleName="labelAlign"
35.         paddingBottom="30"
36.    >
37.        <LboxText
38.            id="fld3"
39.            width="300"
40.            text="{xdata.row[idx].COL_2}"
41.        />
42. 
43.    </mx:FormItem>
44. 
45.    <mx:FormItem
46.        label=""
47.        labelStyleName="labelAlign"
48.         paddingBottom="30"
49.    >
50.        <mx:HBox>
51.            <mx:Button
52.                id="btn"
53.                label="読み込み"
54.                click="idx=0;sendData()"
55.                styleName="sendButton"
56.            />
57.            <mx:Button
58.                label="本人"
59.                click="idx=0"
60.                width="100"
61.                styleName="changeButton"
62.            />
63.            <mx:Button
64.                label="管理者"
65.                click="idx=1"
66.                width="100"
67.                styleName="changeButton"
68.            />
69.        </mx:HBox>
70.    </mx:FormItem>
71. 
72. 
73.</mx:Form>
response.php
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
01.<?
02.header( "Content-Type: text/xml; Charset=utf-8" );
03.header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
04. 
05.mb_language( "ja" );
06.mb_internal_encoding("UTF-8");
07. 
08.// 入力データ( UTF-8 )
09.// $_GET['fld1'] => 社員コード
10.// $_GET['fld2'] => 氏名
11.// $_GET['fld3'] => フリガナ
12. 
13. 
14. 
15.print "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
16.?>
17.<data>
18.    <row id="0001">
19.        <COL_1 type="氏名">山田 太郎</COL_1>
20.        <COL_2 type="フリガナ">ヤマダ タロウ</COL_2>
21.        <COL_3 type="番号">1234567890</COL_3>
22.    </row>
23.    <row id="0002">
24.        <COL_1 type="氏名">鈴木 花子</COL_1>
25.        <COL_2 type="フリガナ">スズキ ハナコ</COL_2>
26.        <COL_3 type="番号">9981</COL_3>
27.    </row>
28.</data>
以下は、response.php を MySQL のデータベースからの取得対応したものです
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
01.<?
02.header( "Content-Type: text/xml; Charset=utf-8" );
03.header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
04. 
05.mb_language( "ja" );
06.mb_internal_encoding("UTF-8");
07. 
08.// 入力データ( UTF-8 )
09.// $_GET['fld1'] => 社員コード
10.// $_GET['fld2'] => 氏名
11.// $_GET['fld3'] => フリガナ
12. 
13.$link = mysql_connect('localhost', 'root', '');
14.mysql_select_db( 'lightbox', $link );
15.$query = "select * from 社員マスタ where 社員コード = '{$_GET['fld1']}'";
16.$query = mb_convert_encoding( $query, "SHIFT_JIS", "UTF-8" );
17.$result = mysql_query($query, $link);
18.$row = mysql_fetch_array($result);
19.$row[1] = mb_convert_encoding( $row[1], "UTF-8", "SHIFT_JIS" );
20.$row[2] = mb_convert_encoding( $row[2], "UTF-8", "SHIFT_JIS" );
21. 
22.$query = "select * from 社員マスタ where 社員コード = '{$row[9]}'";
23.$query = mb_convert_encoding( $query, "SHIFT_JIS", "UTF-8" );
24.$result = mysql_query($query, $link);
25.$row2 = mysql_fetch_array($result);
26.$row2[1] = mb_convert_encoding( $row2[1], "UTF-8", "SHIFT_JIS" );
27.$row2[2] = mb_convert_encoding( $row2[2], "UTF-8", "SHIFT_JIS" );
28. 
29.mysql_close($link);
30. 
31.print "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
32.?>
33.<data>
34.    <row id="<?= $row[0] ?>">
35.        <COL_1 type="氏名"><?= $row[1] ?></COL_1>
36.        <COL_2 type="フリガナ"><?= $row[2] ?></COL_2>
37.        <COL_3 type="">1234567890</COL_3>
38.    </row>
39.    <row id="<?= $row2[0] ?>">
40.        <COL_1 type="氏名"><?= $row2[1] ?></COL_1>
41.        <COL_2 type="フリガナ"><?= $row2[2] ?></COL_2>
42.        <COL_3 type="番号">9981</COL_3>
43.    </row>
44.</data>