SQLの窓

2011年06月20日


Flex4 : ローカルPCデータをテキストエリアにロード、テキストエリアの内容をローカルPC に保存



サンプルでは、Flex 内部のテキストエリアを使用していますが、Flex より
外部の JavaScript にアクセスする事によって、HTML 上にローカル PC の
ファイルの内容を利用する事ができます( 保存も同様です )

新規でテキストエリアに入力すると、改行コードが CR でした。HTML 側の
データを使う場合は、変換は必要無いと思います。

▼ クリックすると、実行ページが開きます

<?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()"
	usePreloader="false"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

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

<!--
***************************************************
 名前空間が必要になっています
 #id で個別設定が可能です
*********************************************** -->
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";

s|Button {
	color : #990000;
	font-size : 12;
}

</fx:Style>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

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

	// テキストファイルを読み込む為のオブジェクト
	private var fr:FileReference;

	// ファイル名をパネルのタイトルに表示する為の変数
	[Bindable]
	private var fname:String = "";

	// データ保存用
	import mx.graphics.codec.*;
	private	var png_enc:PNGEncoder;
	private var ba_data:ByteArray;
	private	var text_data:String;
	private var ctype:String = "utf-8";


	// *********************************************************
	// ログ表示
	// *********************************************************
	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("*");

		// ファイル読み込み用
		fr = new FileReference();
		// PNG 画像作成用
		png_enc = new PNGEncoder();


		// IO エラー
		fr.addEventListener(IOErrorEvent.IO_ERROR, 
			function (event:IOErrorEvent):void {
				Alert.show("IOError:" + event.text );
			}
		);

		// キャンセル
		fr.addEventListener(Event.CANCEL, 
			function (event:Event):void {
				Alert.show( "ファイル選択をキャンセルしました" );
			}
		);

		// ファイルが選択された
		fr.addEventListener(Event.SELECT,
			function (event:Event):void {
				log("ファイルが選択されました" );
				var file:FileReference = FileReference(event.target);
				fname = file.name;
				log("name : " + file.name );
				// 読み込み開始
				fr.load();
			}
		);

		// バイナリロード完了
		fr.addEventListener(Event.COMPLETE,
			function(event:Event):void {

				// ByteArray(バイナリ) を作成
				ba_data = ByteArray(fr.data);

				// ボタンによって、キャラクタセットを変更
				// ( バイナリより、テキストを読み込む )
				text_data = ba_data.readMultiByte(ba_data.length, ctype);

				// CRLF の場合、LF に変更
				var myPattern:RegExp = /\r\n/g;
				text_data = text_data.replace(myPattern,"\n");
				textCheck.text = text_data;

			}
		);

	}

	// *********************************************************
	// ファイル参照ダイアログを開く
	// *********************************************************
	private function selectFile():void {

		try {
			fr.browse();
		}
		catch (e:Error) {
			log(e);
		}

	}

	// *********************************************************
	// 保存
	// ※ テキストエリア内のテキストの直接保存
	// *********************************************************
	private function saveText():void {


		ba_data = new ByteArray();

		// テキストエリア内の文字列
		text_data = textCheck.text;

		// CR を CRLF に変更
		// デフォルト状態で入力すると、改行が \r になるようなので
		// どんな場合もいったん \r に変換してから、\r\n に再変換
		var myPattern:RegExp = /\r\n/g;
		text_data = text_data.replace(myPattern,"\r");
		myPattern = /\n/g;
		text_data = text_data.replace(myPattern,"\r");
		myPattern = /\r/g;
		text_data = text_data.replace(myPattern,"\r\n");

		ba_data.writeMultiByte( text_data, ctype );

		try {
			fr.save( ba_data, "save_data.txt" );
		}
		catch( e:Error ) {
			log( e );
		}

	}

	// *********************************************************
	// 保存
	// ※ Panel オブジェクト全体を画像として保存
	// *********************************************************
	public function saveImage2():void {

		// パネルサイズのビットマップデータを作成
		var bitmapData:BitmapData = new BitmapData(imagePanel.width, imagePanel.height);

		// 用意したビットマップデータにパネルを描画
		bitmapData.draw(imagePanel);

		// ビットマップデータを PNG に変換
		ba_data = png_enc.encode(bitmapData);

		// PNG バイナリ(ByteArray) を保存
		fr.save( ba_data, "save_panel.png" );

	}

]]>
</fx:Script>

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

<s:Button 
	id="loadButton1"
	x="10" y="10"
	width="140"
	label="UTF8N テキスト選択"
	click="ctype = 'utf-8';selectFile();"
/>

<s:Button 
	id="loadButton2"
	x="160" y="10"
	width="140"
	label="SJIS テキスト選択"
	click="ctype = 'shift_jis';selectFile();"
/>

<s:Button 
	id="saveButton"
	x="310" y="10"
	width="140"
	label="テキストファイル保存"
	click="saveText();"
/>

<s:Button 
	id="savePanelButton"
	x="460" y="10"
	width="120"
	label="Panel 保存"
	click="saveImage2();"
/>

<mx:Panel
	id="imagePanel"
	title="{fname}"
	x="10" y="40"
	paddingLeft="0"
	paddingRight="0"
	layout="absolute"
>
	<mx:TextArea
		x="0" y="0"
		id="textCheck"
		width="650"
		height="500"
	
	/>
</mx:Panel>

</s:Application>



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

Microsoft Office
container 終わり

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

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