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



ブラウザでダウンロード
ソースの位置整理
さらにメンテナンス性を上げる為に、1つのディレクトリ内に全てのソースを
カタログせずに、ディレクトリに分けて保存します
  • Main.mxml
  • extern
    1. Style.css
    2. Script.as
    3. Parts.as
  • control
    • LboxText.mxml
  • php
    • response.php
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	xmlns="control.*"
>

<!-- *************************************************** -->
<!-- 外部ソース -->
<!-- *************************************************** -->
<mx:Style source="extern/Style.css" />
<mx:Script source="extern/Script.as" />

<!-- *************************************************** -->
<!-- HTTP 通信用 -->
<!-- *************************************************** -->
<mx:HTTPService
	id="srv"
	showBusyCursor="true"
	result="resultHandler(event)"
	fault="faultHandler(event)"
/>
		・
		・
		・
		・
Script.as から include される Parts.as は、
Script.as から見たパスで指定します
Script.as
import mx.controls.*;
import mx.events.*; 
import mx.rpc.events.*;
import mx.formatters.*;
import flash.external.*;
import flash.events.*; 

include "Parts.as"
		・
		・
		・
		・
XML( e4x ) によるデータの取得とバインド利用
新しく策定された ECMAScript for XML 仕様には、XML データを処理するための
新しいクラス群や機能が定義されています。

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

ActionScript 3.0 は、E4X 準拠のクラスとして、
新しい XML、XMLList、QName、および Namespace クラスを備えています。
結論から言うと、e4x をレスポンス形式として使う事によって最大限の
有用な機能を利用できるという事で、それ以外の形式は特別な用途で
使用されると考えられます。

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

※ XML( e4x ) 記述の注意事項
1) 属性の前に @ を付加する
2) @属性 が直接属性の値を参照
3) 末端の要素が、その内部のテキストノードの値を参照
Script.as
import mx.controls.*;
import mx.events.*; 
import mx.rpc.events.*;
import mx.formatters.*;
import flash.external.*;
import flash.events.*; 

include "Parts.as"

[Bindable] public var idx:int = 0;
[Bindable] public var xdata:XML;

// *****************************************************
// HTTPServiceを使用してHTTPリクエスト(GET)を行う
// *****************************************************
private function sendData():void {
	// ● リクエストするURLをセット
	// ★ http:// で記述すると、ベースが ローカルでも動作します
	srv.url = "php/response.php";

	srv.request.fld1 = fld1.text;
	srv.request.fld2 = fld2.text;
	srv.request.fld3 = fld3.text;

	// レスポンス結果のデータフォーマット
	srv.resultFormat = "e4x";
	srv.method = "GET";
	srv.send();

}

// *****************************************************
// HTTPServiceが成功
// *****************************************************
private function resultHandler(e:ResultEvent):void {

	xdata = XML(e.result);

	firebug( xdata.row.(@id=="0001").COL_3 );
	firebug( xdata.row[1].COL_3 );

}

// *****************************************************
// HTTPServiceでエラーが発生した
// *****************************************************
private function faultHandler(e:FaultEvent):void {

	Alert.show(e.fault.message);

}
Main.mxml
<!-- *************************************************** -->
<!-- 入力フォーム -->
<!-- *************************************************** -->
<mx:Form width="90%" height="90%">
	<mx:FormHeading height="40" label="社員データ登録"/>
	
	<mx:FormItem
		label="社員コード"
		labelStyleName="labelAlign"
		paddingBottom="30"
	>
		<LboxText
			id="fld1"
			maxChars="4"
			width="50"
			text="{xdata.row[idx].@id}"
		/>

	</mx:FormItem>
	<mx:FormItem
		label="氏名"
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<LboxText
			id="fld2"
			width="300"
			text="{xdata.row[idx].COL_1}"
		/>

	</mx:FormItem>
	<mx:FormItem
		label="フリガナ"
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<LboxText
			id="fld3"
			width="300"
			text="{xdata.row[idx].COL_2}"
		/>

	</mx:FormItem>

	<mx:FormItem
		label=""
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<mx:HBox>
			<mx:Button
				id="btn"
				label="読み込み"
				click="idx=0;sendData()"
				styleName="sendButton"
			/>
			<mx:Button
				label="本人"
				click="idx=0"
				width="100"
				styleName="changeButton"
			/>
			<mx:Button
				label="管理者"
				click="idx=1"
				width="100"
				styleName="changeButton"
			/>
		</mx:HBox>
	</mx:FormItem>


</mx:Form>
response.php
<?
header( "Content-Type: text/xml; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

mb_language( "ja" );
mb_internal_encoding("UTF-8");

// 入力データ( UTF-8 )
// $_GET['fld1'] => 社員コード
// $_GET['fld2'] => 氏名
// $_GET['fld3'] => フリガナ



print "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
?>
<data>
	<row id="0001">
		<COL_1 type="氏名">山田 太郎</COL_1>
		<COL_2 type="フリガナ">ヤマダ タロウ</COL_2>
		<COL_3 type="番号">1234567890</COL_3>
	</row>
	<row id="0002">
		<COL_1 type="氏名">鈴木 花子</COL_1>
		<COL_2 type="フリガナ">スズキ ハナコ</COL_2>
		<COL_3 type="番号">9981</COL_3>
	</row>
</data>
以下は、response.php を MySQL のデータベースからの取得対応したものです
<?
header( "Content-Type: text/xml; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

mb_language( "ja" );
mb_internal_encoding("UTF-8");

// 入力データ( UTF-8 )
// $_GET['fld1'] => 社員コード
// $_GET['fld2'] => 氏名
// $_GET['fld3'] => フリガナ

$link = mysql_connect('localhost', 'root', '');
mysql_select_db( 'lightbox', $link );
$query = "select * from 社員マスタ where 社員コード = '{$_GET['fld1']}'";
$query = mb_convert_encoding( $query, "SHIFT_JIS", "UTF-8" );
$result = mysql_query($query, $link);
$row = mysql_fetch_array($result); 
$row[1] = mb_convert_encoding( $row[1], "UTF-8", "SHIFT_JIS" );
$row[2] = mb_convert_encoding( $row[2], "UTF-8", "SHIFT_JIS" );

$query = "select * from 社員マスタ where 社員コード = '{$row[9]}'";
$query = mb_convert_encoding( $query, "SHIFT_JIS", "UTF-8" );
$result = mysql_query($query, $link);
$row2 = mysql_fetch_array($result); 
$row2[1] = mb_convert_encoding( $row2[1], "UTF-8", "SHIFT_JIS" );
$row2[2] = mb_convert_encoding( $row2[2], "UTF-8", "SHIFT_JIS" );

mysql_close($link);

print "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
?>
<data>
	<row id="<?= $row[0] ?>">
		<COL_1 type="氏名"><?= $row[1] ?></COL_1>
		<COL_2 type="フリガナ"><?= $row[2] ?></COL_2>
		<COL_3 type="">1234567890</COL_3>
	</row>
	<row id="<?= $row2[0] ?>">
		<COL_1 type="氏名"><?= $row2[1] ?></COL_1>
		<COL_2 type="フリガナ"><?= $row2[2] ?></COL_2>
		<COL_3 type="番号">9981</COL_3>
	</row>
</data>