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

http によるデータ送信

Flex を使うとたいてい見栄えが同じなので、
HTML上の css と同じ感覚で最低限の変更のサンプルです

コード上は、JavaScript 側から送信できるインターフェイスを追加していますので、
F12 で firebug lite を表示させて、最下行のコマンドラインから
:dir(id_sample)
で、関数の存在を確認できます。
実行は以下のようにして行います。

id_sample.sendSyain("文字列")

---------------------------------------------------------------------------------
Firefox の Firebug では、document.getElementById("id_sample").sendSyain("文字列")
として下さい。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="initData();"
>
 
<mx:Style>
 
    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;
    }
 
</mx:Style>
<mx:Script>
<![CDATA[
 
    import mx.controls.*;
    import mx.events.*; 
    import mx.rpc.events.*;
    import mx.formatters.*;
    import flash.external.*;
 
    // *********************************************************
    // アプリケーションの初期化
    // *********************************************************
    public function initData():void {
 
        firebug("処理開始");
        fld1.setFocus();
 
        // JavaScript に公開するメソッドの登録
        ExternalInterface.addCallback("sendSyain", sendSyain);
        // いかなるドメインからも OK
        Security.allowDomain("*");
    }
 
    // *********************************************************
    // JavaScript 用のインターフェイス
    // *********************************************************
    public function sendSyain(log:String="送信"):void {
 
            sendData();
            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+""
        );
     
    }
 
    // *****************************************************
    // HTTPServiceを使用してHTTPリクエスト（GET）を行う
    // *****************************************************
    private function sendData():void {
        // ● リクエストするURLをセット
        // ★ http:// で記述すると、ベースが ローカルでも動作します
        srv.url = "http://localhost/php/ph/flex3_http_sample2/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);
    }
 
]]>
</mx:Script>
 
<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"
    >
        <mx:TextInput
            id="fld1"
            maxChars="4"
            width="50"
        />
 
    </mx:FormItem>
    <mx:FormItem
        label="氏名"
        labelStyleName="labelAlign"
         paddingBottom="30"
    >
        <mx:TextInput
            id="fld2"
            width="300"
        />
 
    </mx:FormItem>
    <mx:FormItem
        label="フリガナ"
        labelStyleName="labelAlign"
         paddingBottom="30"
    >
        <mx:TextInput
            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>

PHP 側のコード

file_put_contents で、Windows 用に1行1データでフォーマットされたテキストを
入力された社員コード.txt というファイルに書き込みます

<?
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);
?>