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



ブラウザでダウンロード
ソース分割
機能を追加していく前に、ソースを整理してメンテナンス性を上げておきます
画面の見栄えを定義する css 部分を外部ファイルにしています
global {
	fontSize: 14;
	color: #FFFFFF;
}

/*
	● backgroundGradientColors
		背景グラデーションの塗りの着色で使用するカラーを指定します。
		これは、RGB カラーを指定する 2 つの uint 値から成る配列に
		設定する必要があります。
		エレメント 0 および 1 は、カラーグラデーション
		の開始値と終了値を指定します。
		単色の背景の場合は、エレメント 0 と 1 に同じカラー値を設定します。
		値 undefined は、backgroundColor プロパティに基づいて
		背景グラデーションが生成されることを示します。 
		デフォルト値undefined.
*/
Application {
	backgroundGradientColors: 0,9044009
}

FormHeading {
	fontSize: 18;
}

TextInput {
	color: #000000;
}

.labelAlign {
	textAlign: left;
}

/*
	● fillColors
		コントロールの背景の着色に使用されるカラーです。
		フラットな外観のコントロールを作成するには、
		どちらの値にも同じカラーを渡します。 
		デフォルト値[ 0xFFFFFF, 0xCCCCCC ]
	● fillAlphas
		[1, 1] を使うと、コントロールの背景が不透明
		になります。
		デフォルト値[ 0.6, 0.4 ]
*/
.sendButton {
	fillColors: #000000,#000000;
	fillAlphas: 1,1;
	color: #FFFFFF;
	textRollOverColor: #FFFFFF;
}
アプリケーション固有の処理部分を外部ファイルにしています。
※ ここで記述されている include "Parts.as" は、共通部分です。
import mx.controls.*;
import mx.events.*; 
import mx.rpc.events.*;
import mx.formatters.*;
import flash.external.*;
import flash.events.*; 

include "Parts.as"

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

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

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

}


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

	Alert.show(e.result.toString());

}

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

	Alert.show(e.fault.message);

}
アプリケーションの共通部分です。

※ イベントを意図的に起こさせる処理をサンプルとして記述しています
// *********************************************************
// アプリケーションの初期化
// *********************************************************
public function initData():void {

	firebug("処理開始");
	fld1.setFocus();

	// JavaScript に公開するメソッドの登録
	ExternalInterface.addCallback("sendSyain", sendSyain);
	// いかなるドメインからも OK
	Security.allowDomain("*");
}

// *********************************************************
// JavaScript 用のインターフェイス
// *********************************************************
public function sendSyain(log:String="送信"):void {

	// sendData();
	// クリックイベントを発生させる
	var ce:MouseEvent = new MouseEvent( MouseEvent.CLICK );
	btn.dispatchEvent( ce );
	firebug("クリックイベントを発生させました");
	firebug(log);

}

// *********************************************************
// ログ表示
// *********************************************************
public function firebug(data:Object):void {

	var fmt:DateFormatter = new DateFormatter();

	fmt.formatString = "YYYY/MM/DD HH:NN:SS";
	var logdt:String = fmt.format( new Date );

	ExternalInterface.call(
		"console.log", logdt,
		data+""
	);

}
ユーザ定義のコントロールです。
このコントロール自身は、Main.mxml と同じディレクトリに置いて
xmlns="*" によって、修飾無しで使用されます

※ 機能としては、Enter キーで次のコントロールの移動を行います
※ 拡張子は、mxml である必要があります
※ ファイル名がクラス名になります
( TextInput を継承した、LboxText クラス )
<?xml version="1.0" encoding="utf-8"?>
<mx:TextInput
	xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="initControl(event)"
>

<mx:Script>
<![CDATA[

	import mx.managers.*;
	import mx.events.*;

	// *****************************************************
	// 初期処理
	// *****************************************************
	private function initControl(e:FlexEvent):void {

		// イベント追加
		this.addEventListener(FlexEvent.ENTER, focusControl);

	}

	// *************************************************
	// ENTER to TAB
	// *************************************************
	private function focusControl(event:FlexEvent):void{

		var fm:FocusManager = FocusManager(this.focusManager);
		var target:Object = fm.getNextFocusManagerComponent();
		target.setFocus();

	}

]]>
</mx:Script>

</mx:TextInput>
画面および環境の定義となります

1) Flex の名前空間
2) ユーザーコントロール の名前空間
3) HTTP 通信コントロール
4) 画面定義
5) 外部ソースの参照
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	xmlns="*"
>

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

<!-- *************************************************** -->
<!-- HTTP 通信用 -->
<!-- *************************************************** -->
<mx:HTTPService
	id="srv"
	showBusyCursor="true"
	result="resultHandler(event)"
	fault="faultHandler(event)"
/>

<!-- *************************************************** -->
<!-- 入力フォーム -->
<!-- *************************************************** -->
<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"
		/>

	</mx:FormItem>
	<mx:FormItem
		label="氏名"
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<LboxText
			id="fld2"
			width="300"
		/>

	</mx:FormItem>
	<mx:FormItem
		label="フリガナ"
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<LboxText
			id="fld3"
			width="300"
		/>

	</mx:FormItem>

	<mx:FormItem
		label=""
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<mx:Button
			id="btn"
			label="送信"
			click="sendData()"
			styleName="sendButton"
		/>
	</mx:FormItem>


</mx:Form>

</mx:Application>
Flex より送られたデータの処理と結果の返信を行います

※ 複雑な処理になると、入出力に XML フォーマットが使用されます
<?
header( "Content-Type: text/html; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

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

// Windows 用として CRLF
$text .= $_GET['fld1']."\r\n";
$text .= $_GET['fld2']."\r\n";
$text .= $_GET['fld3']."\r\n";

$utf8 = $text;

// 書き込みは Windows 用として SHIFT_JIS
$text = mb_convert_encoding( $text, "SHIFT_JIS", "UTF-8" );

file_put_contents( $_GET['fld1'].".txt", $text );

// Flex は utf-8 なので、変換前を返す
print_r($utf8);
?>
HTML
Firebug Lite(改) が実装されています
● swf は、SWFObject で組み込まれています
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>WEB Flex のテスト</TITLE>
<STYLE type="text/css">
* {
	font-family: "MS Pゴシック";
	font-size: 12px;
}
BODY {
	background-color: white;
	color: black;
}
</STYLE>
<SCRIPT 
	language="javascript"
	type="text/javascript"
	src="http://homepage2.nifty.com/lightbox/firebug/firebug.js">
</SCRIPT>
<SCRIPT 
	language="javascript"
	type="text/javascript"
	src="swfobject.js">
</SCRIPT>

<SCRIPT language="javascript" type="text/javascript"> 
 
 
</SCRIPT> 
</HEAD>

<!-- *******************************************************
 BODY
******************************************************** -->
<BODY>

<div id="flashcontent"></div>

<script type="text/javascript">
	var so = new SWFObject(
		"Main.swf?reload=" + (new Date()).getTime(),
		 "id_sample", "550", "380", "9", "#FFFFFF");

	so.write("flashcontent");
	document.getElementById("id_sample").focus();
</script>

</BODY>
</HTML>