Flex3 : ローカルの MySQL に接続して DataGrid に Streaming 的に順次表示

  asSQL の Examples の Streaming Results の実装です。




ブラウザでダウンロード

asSQLを使っていますが、実行時には必要ありません。

ビルドする場合は、readme.txt に従って、ダウンロードしてビルドして下さい。
本来 AIR で作成して配布するようなアプリケーションではありますが、AIR はトレースが
面倒なので WEB ベースで Firebug Lite を使ってコンソールに表示しています

IE7 以降ではローカルの 特殊なHTML を実行しようとするとセキュリティチェックを解除する必要がありますが、
Firefox や Google Chrome 等では特に問題無く動いています。

内容は、Examples - assql - Project Hosting on Google Code の実装です。
( 上記オリジナルサンプルのままだと、DataGrid が初期化されてないのでうまくいかないと思いますが・・・ )

DataGrid に一気にデータをロードするのでは無く、決められた行数毎にロードするというものです。
これは、大量のデータを表示する場合にバックグラウンドでデータを追加していく事を想定していると思われますが、
実際にそこまで検証はしていません。少ないデータですと一気にロードしても差は無いと思います。




  ソースコード



元は、Flex3 : DataGrid をユーザコントロール化したサンプルパッケージ を使っていますので

データをロード後に、LboxGrid のメソッドを実行できます( ソースコード同梱 )
このサンプルでは、MySQL のテーブルの列名で以下のようにデータを取得できます

grid.GetColumnText(2, "氏名")

※ 2 は行番号( 0 start )です。

  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:my="winofsql.Controls.*"
	initialize="initData();"
>

<mx:Style source="Style.css" />
<mx:Style>
LboxGrid {
	color: black;
}
</mx:Style>

<mx:Script>
<![CDATA[

	import mx.controls.*;
	import mx.events.*; 
	import mx.formatters.*;
	import flash.external.*;
	import flash.events.*;
	import mx.collections.*;

	import com.maclema.mysql.Statement;
	import com.maclema.mysql.Connection;
	import com.maclema.mysql.ResultSet;
	import mx.rpc.AsyncResponder;
	import com.maclema.mysql.MySqlToken;
	import com.maclema.util.ResultsUtil;
	import com.maclema.mysql.events.MySqlEvent;

	private var con:Connection;

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

		// パラメータをプロパティとして持つ Object を取得
		var param:Object = mx.core.Application.application.parameters;

		// LboxGrid 初期化
		grid.Reset();

		// ヘッダタイトルを表示
		grid.ShowHeader();

		// 行を選択しない
		grid.Unselect();

		// メッセージを HTML で一部強調する
		info.htmlText="<b>server / user / password / database</b> の順で入力";


		firebug( "初期処理終了" );

	}

	// *********************************************************
	// 接続
	// *********************************************************
	public function connectMySQL():void {

		firebug( "接続処理開始" );

		// 行の初期化
		grid.dataProvider = new ArrayCollection();

		con = new Connection(
			server.text,
			3306,
			user.text,
			pass.text,
			database.text
		);
//		con = new Connection("localhost", 3306, "root", "", "lightbox");

		// エラー処理
		con.addEventListener("ioError" ,
			function(e:IOErrorEvent ):void {
				firebug( "接続エラーです" );
			}
		);

		// 接続処理
		con.addEventListener("connect",
			function (e:Event):void {

				var st:Statement = con.createStatement();

				st.streamResults = true;
				st.streamingInterval = 500;

				st.sql = sql.text;
				var token:MySqlToken = st.executeQuery();

				// 上記処理に対するイベントを登録
				token.addEventListener(MySqlEvent.COLUMNDATA, 
					function(e:MySqlEvent):void {
					   firebug( "COLUMNDATA" );
					   grid.columns = 
					      ResultsUtil.getDataGridColumns(
					        e.resultSet
					      );
					}
				);
				token.addEventListener(MySqlEvent.ROWDATA, 
					function(e:MySqlEvent):void { 
						firebug( "ROWDATA:");
						addNewRows(e.resultSet);
					}
				);
		
				token.addResponder(new AsyncResponder(
					// 成功イベント
					function(data:Object, token:Object):void {
					   firebug( "接続成功:");
					   addNewRows(ResultSet(data));
					   try { con.disconnect(); } catch( er:Error ){}
					},
					// 失敗イベント
					function(info:Object, token:Object):void {
					   Alert.show("Error: "
					    + info + Statement(token).sql);
					   try { con.disconnect(); } catch( er:Error ){}
					},
					// 実行時のステートメントを渡しておく
					st
					)
				);
			}
		);

		// データーベースは SJIS
		con.connect("sjis");

		firebug( "接続処理終了" );
	}

	// *********************************************************
	// 行の一括追加
	// *********************************************************
	private function addNewRows(rs:ResultSet):void {

		firebug( "行" );

		var dp:ArrayCollection = ArrayCollection(grid.dataProvider);
		var newRows:ArrayCollection = 
			rs.getRows(false, dp.length, (rs.size()-dp.length));
		// 追加
		dp.source = dp.source.concat( newRows.source );
		// 変更を反映させる
		dp.refresh();

	}

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

]]>
</mx:Script>

<mx:Panel
	horizontalAlign="left"
	paddingLeft="10"
	paddingRight="10"
	paddingBottom="10"
>
	<!-- 表示するだけならば、mx:DataGrid でも OK -->
	<my:LboxGrid id="grid" width="500" height="200"	rowHeight="22" />

	<!-- ログインの情報 -->
	<mx:HBox>
		<mx:VBox>
			<mx:TextInput id="server" text="localhost" />
			<mx:TextInput id="user" text="root"/>
			<mx:TextInput id="pass" />
			<mx:TextInput id="database" text="lightbox"/>
		</mx:VBox>
		<mx:VBox>
			<mx:Button label="実行" click="connectMySQL()" />
			<mx:Label id="info" />
			<mx:TextArea id="sql" width="300" text="show tables" />
		</mx:VBox>
	</mx:HBox>

</mx:Panel>
</mx:Application>
  










  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ