ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文

  メンテナンス 前画面に戻る

対象スレッド 件名: mxml : DateField を使ったHTML上での日付入力
名前: lightbox
処理選択
パスワード

件名 mxml : DateField を使ったHTML上での日付入力
名前 lightbox
コメント
@DIV
<?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()"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

	// 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() が実行されました" );

		// 別ドメインから、close メソッドを実行可能なようにする
		Security.allowDomain("*");

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

	}

	// *********************************************************
	// 選択した日付文字列の引き渡し
	// *********************************************************
	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>
@END