SQLの窓

2011年06月12日


Flex4 : HTML から DateField に日付をセットする



Flex4 : DateField を使ったHTML上での日付入力 では、DateField で選択
した日付文字列を HTML 側で利用するのが主な目的でしたが、今回は HTML 側
から「初期値」をセットする方法です。もちろん、処理の途中でも変更できる
ように、Flex 側に公開メソッドを追加します。単に初回のみならば、flashvars
でもかまいません。両方使えるようにしています
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData()"
	creationComplete="initControl()"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

<!--
***************************************************
 現在のクラスの非デフォルト、非ビジュアルプロパ
 ティ を宣言します。例えば、効果、バリデーター、
 およびフォ ーマッターを定義します。
*********************************************** -->
<fx:Declarations>
</fx:Declarations>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

	// HTTPService のイベント用
	import mx.rpc.events.*;
	// Alert 用
	import mx.controls.*;
	// CloseEvent
	import 	mx.events.*;

	// *********************************************************
	// ログ表示
	// *********************************************************
	private function log(data:Object):void {

		// 日付編集用
		var fmt:DateFormatter = new DateFormatter();

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

		// JavaScript の呼び出し
		ExternalInterface.call(
			"console.log", logdt,
			" "+data
		);

	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	private function initData():void {

		// メッセージ
		log("initData() が実行されました" );

		Security.allowDomain("*");

		// flashvars の取得
		var f_vars:Object = mx.core.FlexGlobals.topLevelApplication.parameters;
		ExternalInterface.call(
			"console.dir", f_vars
		);

		if ( f_vars['date'] != null ) {
			log("init date");
			var arr:Array = f_vars['date'].split("/");
			dateField.selectedDate = new Date(arr[0],arr[1]-1,arr[2]);
		}

//		dateField.monthNames = 
//		["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];

//		dateField.dayNames = 
//		["日","月","火","水","木","金","土"];

		ExternalInterface.addCallback("close",
			function():void {
				dateField.close();
			}
		);

		ExternalInterface.addCallback("setYmd",
			function(y:Number,m:Number,d:Number):void {
				log("setYmd : " + y + "/" + m + "/" + d );
				var dt:Date = new Date;
				dt.fullYear = y;
				dt.month = m-1;
				dt.date = d;
				dateField.selectedDate = dt;
				// 以下のようにすると一行
				//dateField.selectedDate = new Date(y,m-1,d);
			}
		);

		ExternalInterface.addCallback("setDateString",
			function(str:String):void {
				log("setDateString : " + str );
				var arr:Array = str.split("/");
				dateField.selectedDate = new Date(arr[0],arr[1]-1,arr[2]);
			}
		);

	}

	// *********************************************************
	// コントロールの初期化
	// *********************************************************
	private function initControl():void {

		// 外部から初期画面で初期値を設定する為に内部から	
		// コントロールが使えるようになった事を通知する必要
		// があります
		ExternalInterface.call(
			"loadMyDate"
		);

	}

	// *********************************************************
	// 日付選択イベント
	// *********************************************************
	private function dateChanged(date:Date):void {

		var wk:String = DateField.dateToString(date,"YYYY/MM/DD");
		log(wk);

		ExternalInterface.call(
			"setMyDate", dateField.text
		);

	}

	// *********************************************************
	// HTML 側のエリアを開く
	// *********************************************************
	private function HtmlSpace():void {

		log("rollOver" );
		ExternalInterface.call(	"openMyDate" );

	}

	// *********************************************************
	// カレンダーが表示していない時に、HTML 側のエリアを閉じる
	// *********************************************************
	private function HtmlSpaceEndNoAction():void {

		if ( !dateField.dropdown.visible ) {
			log("rollOut" );
			dateField.close();
			ExternalInterface.call(	"closeMyDate" );
		}

	}

]]>
</fx:Script>

<!--
***************************************************
 Flex4 における 絶対位置指定の画面定義
*********************************************** -->

<mx:DateField
	x = "-70" y="2"
	id="dateField"
	yearNavigationEnabled="true"
	formatString="YYYY/MM/DD"
	change="dateChanged(DateField(event.target).selectedDate)"
	rollOver="HtmlSpace()"
	rollOut="HtmlSpaceEndNoAction()"

	dayNames="['日','月','火','水','木','金','土']"
	monthNames="[
		'1月','2月','3月','4月','5月',
		'6月','7月','8月','9月','10月',
		'11月','12月'
	]"
/>

</s:Application>

flashvars の取得は、mx.core.FlexGlobals.topLevelApplication.parameters
です。Firefox を使用すると、その内容の一覧を Firebug で表示できるように
しています( console.dir の呼び出し )

JavaScript でロード時にセットするには、HTML がロードされても、Flash
はそれとは同期していないので、creationComplete イベントを追加した上
で、そのタイミングでさらに JavaScript を呼び出すようにしています。

呼び出された JavaScript で再度、Flex の公開メソッドを呼び出すので、
多少処理が交差しますが、現在のところ問題は出ていません。もし、問題
が出るようでしたら、JavaScript 側で初期値を return するように書き換
えれば、Flex 側でそれを取得して内部でセットするといいと思います。
( 但しそれだと、初期日付設定専用の外部呼び出しになってしまいます )
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>ブラウザの開発者ツールを使った、Flex4 のデバッグテスト</title>
<style type="text/css">
* {
	font-family: "MS Pゴシック";
	font-size: 14px!important;
}
BODY {
	background-color: white;
	color: black;
}
#id_sample {
	border:solid 1px #C0C0C0;
}
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script language="javascript" type="text/javascript"> 

function setMyDate(str) {

	document.getElementById("mydate").value = str;
	document.getElementById("id_sample").width = 30;
	document.getElementById("id_sample").height = 30;

}
function openMyDate() {

	document.getElementById("id_sample").width = 160;
	document.getElementById("id_sample").height = 210;

}

function closeMyDate() {

	document.getElementById("id_sample").width = 30;
	document.getElementById("id_sample").height = 30;

}

// Flex 側がロード完了すると呼び出される
function loadMyDate() {

	document.getElementById("id_sample").setYmd(2000,1,30);
//	document.getElementById("id_sample").setDateString("2000/3/12");

}

</script>
</head>

<body>

<div style='position:relative;'>
<input id="mydate" type="text" style='position:absolute;left:10px;top:20px;'
 onmouseover='closeMyDate();document.getElementById("id_sample").close()'>
<input id="dummy" type="text" style='position:absolute;left:10px;top:60px;width:400px'
	value="この入力部分の上に、Flash のエリアが表示されます"
>

<div style='position:absolute;left:150px;top:17px;'>
<div id="flashcontent"></div>
</div>
</div>

<script type="text/javascript">
var flashvars = {
};
var params = {
  allowScriptAccess:"always"
 ,bgcolor:"#ffffff"
}; 
var attributes = {
  id: "id_sample",
  name: "id_sample"
};
swfobject.embedSWF(
	"Main.swf?reload="+(new Date()).getTime(),
	"flashcontent", 
	"30",
	"30",
	"10.0.0",
	"",
	flashvars,
	params,
	attributes
);
</script>

</body>
</html>



【Flexの最新記事】
posted by lightbox at 2011-06-12 17:06 | Flex | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり