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



ブラウザでダウンロード
ソース分割
機能を追加していく前に、ソースを整理してメンテナンス性を上げておきます
Style.css
画面の見栄えを定義する css 部分を外部ファイルにしています
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
01.global {
02.    fontSize: 14;
03.    color: #FFFFFF;
04.}
05. 
06./*
07.    ● backgroundGradientColors
08.        背景グラデーションの塗りの着色で使用するカラーを指定します。
09.        これは、RGB カラーを指定する 2 つの uint 値から成る配列に
10.        設定する必要があります。
11.        エレメント 0 および 1 は、カラーグラデーション
12.        の開始値と終了値を指定します。
13.        単色の背景の場合は、エレメント 0 と 1 に同じカラー値を設定します。
14.        値 undefined は、backgroundColor プロパティに基づいて
15.        背景グラデーションが生成されることを示します。
16.        デフォルト値undefined.
17.*/
18.Application {
19.    backgroundGradientColors: 0,9044009
20.}
21. 
22.FormHeading {
23.    fontSize: 18;
24.}
25. 
26.TextInput {
27.    color: #000000;
28.}
29. 
30..labelAlign {
31.    textAlign: left;
32.}
33. 
34./*
35.    ● fillColors
36.        コントロールの背景の着色に使用されるカラーです。
37.        フラットな外観のコントロールを作成するには、
38.        どちらの値にも同じカラーを渡します。
39.        デフォルト値[ 0xFFFFFF, 0xCCCCCC ]
40.    ● fillAlphas
41.        [1, 1] を使うと、コントロールの背景が不透明
42.        になります。
43.        デフォルト値[ 0.6, 0.4 ]
44.*/
45..sendButton {
46.    fillColors: #000000,#000000;
47.    fillAlphas: 1,1;
48.    color: #FFFFFF;
49.    textRollOverColor: #FFFFFF;
50.}
Script.as
アプリケーション固有の処理部分を外部ファイルにしています。
※ ここで記述されている include "Parts.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.// HTTPServiceを使用してHTTPリクエスト（GET）を行う
12.// *****************************************************
13.private function sendData():void {
14.    // ● リクエストするURLをセット
15.    // ★ http:// で記述すると、ベースが ローカルでも動作します
16.    srv.url = "response.php";
17. 
18.    srv.request.fld1 = fld1.text;
19.    srv.request.fld2 = fld2.text;
20.    srv.request.fld3 = fld3.text;
21. 
22.    // レスポンス結果のデータフォーマット
23.    srv.resultFormat = "text";
24.    srv.method = "GET";
25.    srv.send();
26. 
27.}
28. 
29. 
30.// *****************************************************
31.// HTTPServiceが成功
32.// *****************************************************
33.private function resultHandler(e:ResultEvent):void {
34. 
35.    Alert.show(e.result.toString());
36. 
37.}
38. 
39.// *****************************************************
40.// HTTPServiceでエラーが発生した
41.// *****************************************************
42.private function faultHandler(e:FaultEvent):void {
43. 
44.    Alert.show(e.fault.message);
45. 
46.}
Parts.as
アプリケーションの共通部分です。

※ イベントを意図的に起こさせる処理をサンプルとして記述しています
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
01.// *********************************************************
02.// アプリケーションの初期化
03.// *********************************************************
04.public function initData():void {
05. 
06.    firebug("処理開始");
07.    fld1.setFocus();
08. 
09.    // JavaScript に公開するメソッドの登録
10.    ExternalInterface.addCallback("sendSyain", sendSyain);
11.    // いかなるドメインからも OK
12.    Security.allowDomain("*");
13.}
14. 
15.// *********************************************************
16.// JavaScript 用のインターフェイス
17.// *********************************************************
18.public function sendSyain(log:String="送信"):void {
19. 
20.    // sendData();
21.    // クリックイベントを発生させる
22.    var ce:MouseEvent = new MouseEvent( MouseEvent.CLICK );
23.    btn.dispatchEvent( ce );
24.    firebug("クリックイベントを発生させました");
25.    firebug(log);
26. 
27.}
28. 
29.// *********************************************************
30.// ログ表示
31.// *********************************************************
32.public function firebug(data:Object):void {
33. 
34.    var fmt:DateFormatter = new DateFormatter();
35. 
36.    fmt.formatString = "YYYY/MM/DD HH:NN:SS";
37.    var logdt:String = fmt.format( new Date );
38. 
39.    ExternalInterface.call(
40.        "console.log", logdt,
41.        data+""
42.    );
43. 
44.}
LboxText.mxml
ユーザ定義のコントロールです。
このコントロール自身は、Main.mxml と同じディレクトリに置いて
xmlns="*" によって、修飾無しで使用されます

※ 機能としては、Enter キーで次のコントロールの移動を行います
※ 拡張子は、mxml である必要があります
※ ファイル名がクラス名になります
( TextInput を継承した、LboxText クラス )
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
01.<?xml version="1.0" encoding="utf-8"?>
02.<mx:TextInput
03.    xmlns:mx="http://www.adobe.com/2006/mxml"
04.    creationComplete="initControl(event)"
05.>
06. 
07.<mx:Script>
08.<![CDATA[
09. 
10.    import mx.managers.*;
11.    import mx.events.*;
12. 
13.    // *****************************************************
14.    // 初期処理
15.    // *****************************************************
16.    private function initControl(e:FlexEvent):void {
17. 
18.        // イベント追加
19.        this.addEventListener(FlexEvent.ENTER, focusControl);
20. 
21.    }
22. 
23.    // *************************************************
24.    // ENTER to TAB
25.    // *************************************************
26.    private function focusControl(event:FlexEvent):void{
27. 
28.        var fm:FocusManager = FocusManager(this.focusManager);
29.        var target:Object = fm.getNextFocusManagerComponent();
30.        target.setFocus();
31. 
32.    }
33. 
34.]]>
35.</mx:Script>
36. 
37.</mx:TextInput>
Main.mxml
画面および環境の定義となります

1) Flex の名前空間
2) ユーザーコントロール の名前空間
3) HTTP 通信コントロール
4) 画面定義
5) 外部ソースの参照
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
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="*"
06.>
07. 
08.<!-- *************************************************** -->
09.<!-- 外部ソース -->
10.<!-- *************************************************** -->
11.<mx:Style source="Style.css" />
12.<mx:Script source="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.<!-- *************************************************** -->
27.<mx:Form width="90%" height="90%">
28.    <mx:FormHeading height="40" label="社員データ登録"/>
29.     
30.    <mx:FormItem
31.        label="社員コード"
32.        labelStyleName="labelAlign"
33.        paddingBottom="30"
34.    >
35.        <LboxText
36.            id="fld1"
37.            maxChars="4"
38.            width="50"
39.        />
40. 
41.    </mx:FormItem>
42.    <mx:FormItem
43.        label="氏名"
44.        labelStyleName="labelAlign"
45.         paddingBottom="30"
46.    >
47.        <LboxText
48.            id="fld2"
49.            width="300"
50.        />
51. 
52.    </mx:FormItem>
53.    <mx:FormItem
54.        label="フリガナ"
55.        labelStyleName="labelAlign"
56.         paddingBottom="30"
57.    >
58.        <LboxText
59.            id="fld3"
60.            width="300"
61.        />
62. 
63.    </mx:FormItem>
64. 
65.    <mx:FormItem
66.        label=""
67.        labelStyleName="labelAlign"
68.         paddingBottom="30"
69.    >
70.        <mx:Button
71.            id="btn"
72.            label="送信"
73.            click="sendData()"
74.            styleName="sendButton"
75.        />
76.    </mx:FormItem>
77. 
78. 
79.</mx:Form>
80. 
81.</mx:Application>
response.php
Flex より送られたデータの処理と結果の返信を行います

※ 複雑な処理になると、入出力に XML フォーマットが使用されます
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
01.<?
02.header( "Content-Type: text/html; 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.// Windows 用として CRLF
09.$text .= $_GET['fld1']."\r\n";
10.$text .= $_GET['fld2']."\r\n";
11.$text .= $_GET['fld3']."\r\n";
12. 
13.$utf8 = $text;
14. 
15.// 書き込みは Windows 用として SHIFT_JIS
16.$text = mb_convert_encoding( $text, "SHIFT_JIS", "UTF-8" );
17. 
18.file_put_contents( $_GET['fld1'].".txt", $text );
19. 
20.// Flex は utf-8 なので、変換前を返す
21.print_r($utf8);
22.?>
HTML
● Firebug Lite(改) が実装されています
● swf は、SWFObject で組み込まれています
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
01.<HTML>
02.<HEAD>
03.<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
04.<TITLE>WEB Flex のテスト</TITLE>
05.<STYLE type="text/css">
06.* {
07.    font-family: "ＭＳ Ｐゴシック";
08.    font-size: 12px;
09.}
10.BODY {
11.    background-color: white;
12.    color: black;
13.}
14.</STYLE>
15.<SCRIPT
16.    language="javascript"
17.    type="text/javascript"
18.    src="http://homepage2.nifty.com/lightbox/firebug/firebug.js">
19.</SCRIPT>
20.<SCRIPT
21.    language="javascript"
22.    type="text/javascript"
23.    src="swfobject.js">
24.</SCRIPT>
25. 
26.<SCRIPT language="javascript" type="text/javascript">
27.  
28.  
29.</SCRIPT>
30.</HEAD>
31. 
32.<!-- *******************************************************
33. BODY
34.******************************************************** -->
35.<BODY>
36. 
37.<div id="flashcontent"></div>
38. 
39.<script type="text/javascript">
40.    var so = new SWFObject(
41.        "Main.swf?reload=" + (new Date()).getTime(),
42.         "id_sample", "550", "380", "9", "#FFFFFF");
43. 
44.    so.write("flashcontent");
45.    document.getElementById("id_sample").focus();
46.</script>
47. 
48.</BODY>
49.</HTML>