DataGrid の拡張 (1)

  App_01.mxml + LboxGrid_01.mxml



ソースコードのダウンロード
同一ディレクトリに、App_01.mxml と LboxGrid_01.mxml を置きます。

LboxGrid_01.mxml
  
<?xml version="1.0" encoding="utf-8"?>
<!-- *************************************************** -->
<!-- DataGrid 本体と、簡易行追加メソッド -->
<!-- *************************************************** -->
<mx:DataGrid
	height="400"
	xmlns:mx="http://www.adobe.com/2006/mxml"
>

<mx:Script>
<!-- *************************************************** -->
<!-- メソッド定義 -->
<!-- *************************************************** -->
<![CDATA[

	// 初回( 行が存在しない )フラグ
	private var init_flg:int = 1;
	// カレント行( -1 は先頭行の前 )
	private var cur_row:int = -1;

	import mx.controls.*;
	import mx.collections.*;

	// *************************************************
	// 行追加
	// 引数は配列
	// このバージョンでは、配列の要素は必ず6つ必要
	// このバージョンでは、初期に列は6つ固定
	// *************************************************
	public function AddRow(cols:Array):void {

		// 初回処理
		if ( this.init_flg == 1 ) {
			this.init_flg = 0;
			// dataProvider に実体をセット
			this.dataProvider = new ArrayCollection();
			// 先頭行を選択状態にする
			this.selectedIndex = 0;
		}

		// 行データをセットする Object を作成
		var obj:Object = new Object();

		// obj( 行データ ) の プロパティに値をセット
		obj["COL1"] = cols[0];
		obj["COL2"] = cols[1];
		obj["COL3"] = cols[2];
		obj["COL4"] = cols[3];
		obj["COL5"] = cols[4];
		obj["COL6"] = cols[5];

		// obj( 行データ )を追加
		this.dataProvider.addItem(obj);

		// 現在行の設定
		this.cur_row++;

	}
]]>
</mx:Script>

	<!-- *************************************************** -->
	<!-- デフォルト列定義 -->
	<!-- *************************************************** -->
	<mx:columns>
		<mx:DataGridColumn headerText="項目1" dataField="COL1" width="50"/>
		<mx:DataGridColumn headerText="項目2" dataField="COL2" width="150"/>
		<mx:DataGridColumn headerText="項目3" dataField="COL3" width="100"/>
		<mx:DataGridColumn headerText="項目4" dataField="COL4" width="100"/>
		<mx:DataGridColumn headerText="項目5" dataField="COL5" width="100"/>
		<mx:DataGridColumn headerText="項目6" dataField="COL6" width="100"/>
	</mx:columns>

</mx:DataGrid>
  

カスタムコントロールの置き場所と名前空間の指定
  
App_01.mxml では、xmlns="*" で名前空間を指定していないので <LboxGrid_01 id="grid"/> 
という実装になります

xmlns:my="*" にすると <my:LboxGrid_01 id="grid"/> になります。

下位ディレクトリ(例:Controls) を作成して、そこに LboxGrid.mxml を置くと、
xmlns="Controls.*" になります ( または、xmlns:my="Controls.*" )
  


呼び出し( App_01.mxml )
  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	 xmlns="*"
>

<!-- *************************************************** -->
<!-- LboxGrid_01.mxml を同一ディレクトリに置く -->
<!-- 名前空間無し -->
<!-- *************************************************** -->
<mx:Panel
	title="DataGrid の拡張"
	paddingTop="10"
	paddingBottom="10"
	paddingLeft="10"
	paddingRight="10"
>

	<LboxGrid_01 id="grid"/>

	<mx:HBox>
	<mx:Button
		label="表示1"
		click="grid.AddRow(
			[
				'リテラル',
				grid.toString(),
				grid.className,
				grid.name,
				grid.id,
				grid.parent.toString()
			]
		);"
	/>

	<mx:Button
		label="表示2"
		click="grid.AddRow(
			[
				this.className,
				'← this はｱﾌﾟﾘｹｰｼｮﾝ',
				mx.core.Application.application.className,
				this.getChildren()[0].className,
				Object(grid.parent).className,
				grid.parentDocument.className
			]
		);"
	/>
	</mx:HBox>

</mx:Panel>

</mx:Application>
  

◎ this は アプリケーションそのものを指しますので、mx.core.Application.application と同じになります
◎ " 内の " は、\" で表現可能なはずなのですが、2007/12/4 現在エラーが出ます。



  App_01.swf の実行



  
<mx:Button
	label="表示2"
	click="grid.AddRow(
		[
			this.className,
			'← this はｱﾌﾟﾘｹｰｼｮﾝ',
			mx.core.Application.application.className,
			this.getChildren()[0].className,
			Object(grid.parent).className,
			grid.parentDocument.className
		]
	);"
/>
  

grid.parent は、DisplayObjectContainer なので、UIComponent で定義される className 等の
プロパティを参照できません。ですから、Object でキャストして 存在するはずのプロパティ を参照しています。

以下のように指定しても良いですが、確実に存在するので、Object で参照するほうが簡単に済みます
mx.core.UIComponent(grid.parent).className



  メソッド部分を .as ファイルに分割

LboxGrid.mxml
  
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid height="400" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script source="M_AddRow.as"/>

	<!-- *************************************************** -->
	<!-- デフォルト列定義 -->
	<!-- *************************************************** -->
	<mx:columns>
		<mx:DataGridColumn headerText="項目1" dataField="COL1" width="50"/>
		<mx:DataGridColumn headerText="項目2" dataField="COL2" width="150"/>
		<mx:DataGridColumn headerText="項目3" dataField="COL3" width="100"/>
		<mx:DataGridColumn headerText="項目4" dataField="COL4" width="100"/>
		<mx:DataGridColumn headerText="項目5" dataField="COL5" width="100"/>
		<mx:DataGridColumn headerText="項目6" dataField="COL6" width="100"/>
	</mx:columns>

</mx:DataGrid>
  

M_AddRow.as
  
// 初回( 行が存在しない )フラグ
private var init_flg:int = 1;
// カレント行( -1 は先頭行の前 )
private var cur_row:int = -1;

import mx.controls.*;
import mx.collections.*;

// *************************************************
// 行追加
// 引数は配列
// このバージョンでは、配列の要素は必ず6つ必要
// このバージョンでは、初期に列は6つ固定
// *************************************************
public function AddRow(cols:Array):void {

	// 初回処理
	if ( this.init_flg == 1 ) {
		this.init_flg = 0;
		// dataProvider に実体をセット
		this.dataProvider = new ArrayCollection();
		// 先頭行を選択状態にする
		this.selectedIndex = 0;
	}

	// 行データをセットする Object を作成
	var obj:Object = new Object();

	// obj( 行データ ) の プロパティに値をセット
	obj["COL1"] = cols[0];
	obj["COL2"] = cols[1];
	obj["COL3"] = cols[2];
	obj["COL4"] = cols[3];
	obj["COL5"] = cols[4];
	obj["COL6"] = cols[5];

	// obj( 行データ )を追加
	this.dataProvider.addItem(obj);

	// 現在行の設定
	this.cur_row++;

}
  



  メソッドをさらに追加

M_Clear.as
  
// *************************************************
// クリア
// 行を全てクリアして、カレント行を初期状態にする
// *************************************************
public function Clear():void {

	this.dataProvider = new ArrayCollection();
	this.init_flg = 1;
	this.cur_row = -1;

}
  

ここでのソース分割は、include と同じでソースレベルでの分割なので、
一つのソースでコンパイルが通る必要はありません。

source="M_Clear.as" での読み込みは、M_AddRow.as 内で
include ステートメントを使用しても同じ結果となります。

LboxGrid.mxml
  
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid height="400" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script source="M_AddRow.as"/>
<mx:Script source="M_Clear.as"/>

	<!-- *************************************************** -->
	<!-- デフォルト列定義 -->
	<!-- *************************************************** -->
	<mx:columns>
		<mx:DataGridColumn headerText="項目1" dataField="COL1" width="50"/>
		<mx:DataGridColumn headerText="項目2" dataField="COL2" width="150"/>
		<mx:DataGridColumn headerText="項目3" dataField="COL3" width="100"/>
		<mx:DataGridColumn headerText="項目4" dataField="COL4" width="100"/>
		<mx:DataGridColumn headerText="項目5" dataField="COL5" width="100"/>
		<mx:DataGridColumn headerText="項目6" dataField="COL6" width="100"/>
	</mx:columns>

</mx:DataGrid>
  



  SWC へのコンパイル と ビルド

SWC 作成
compc -source-path . -include-classes Controls.LboxGrid -output LboxGrid.swc -include-file M_AddRow.as Controls\M_AddRow.as -include-file M_Clear.as Controls\M_Clear.as

ビルド
  
mxmlc App.mxml -library-path+=LboxGrid.swc
  

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

<mx:Panel
	title="DataGrid の拡張"
	paddingTop="10"
	paddingBottom="10"
	paddingLeft="10"
	paddingRight="10"
>

	<my:LboxGrid id="grid"/>

	<mx:HBox>
	<mx:Button label="クリア" click="grid.Clear();"/>

	<mx:Button
		label="表示1"
		click="grid.AddRow(
			[
				'リテラル',
				grid.toString(),
				grid.className,
				grid.name,
				grid.id,
				grid.parent.toString()
			]
		);"
	/>

	<mx:Button
		label="表示2"
		click="grid.AddRow(
			[
				this.className,
				'← this はｱﾌﾟﾘｹｰｼｮﾝ',
				mx.core.Application.application.className,
				this.getChildren()[0].className,
				mx.core.UIComponent(grid.parent).className,
				grid.parentDocument.className
			]
		);"
	/>
	</mx:HBox>

</mx:Panel>

</mx:Application>
  



  名前空間を指定

Manifest.xml
  
<?xml version="1.0"?>
<componentPackage>
	<component id="LboxGrid" class="LboxGrid"/>
</componentPackage>
  

SWC 作成
compc -source-path Controls -include-classes LboxGrid -output LboxGrid.swc -include-file M_AddRow.as Controls\M_AddRow.as -include-file M_Clear.as Controls\M_Clear.as -namespace ｈｔｔｐ://winofsql.jp/flex2/lib Manifest.xml -include-namespaces ｈttp://winofsql.jp/flex2/lib

ビルド
  
mxmlc App.mxml -library-path+=LboxGrid.swc
  

  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:my="http://winofsql.jp/flex2/lib">

<mx:Panel
	title="DataGrid の拡張"
	paddingTop="10"
	paddingBottom="10"
	paddingLeft="10"
	paddingRight="10"
>

	<my:LboxGrid id="grid"/>

	<mx:HBox>
	<mx:Button label="クリア" click="grid.Clear();"/>

	<mx:Button
		label="表示1"
		click="grid.AddRow(
			[
				'リテラル',
				grid.toString(),
				grid.className,
				grid.name,
				grid.id,
				grid.parent.toString()
			]
		);"
	/>

	<mx:Button
		label="表示2"
		click="grid.AddRow(
			[
				this.className,
				'← this はｱﾌﾟﾘｹｰｼｮﾝ',
				mx.core.Application.application.className,
				this.getChildren()[0].className,
				mx.core.UIComponent(grid.parent).className,
				grid.parentDocument.className
			]
		);"
	/>
	</mx:HBox>

</mx:Panel>

</mx:Application>
  



  App.swf の実行










  infoboard   管理者用   




フリーフォントWEBサービス
フリーフォントで簡単ロゴ作成
アイコン・はんこ画像作成
フリーフォントで横書きロゴ作成
フリーフォントで縦書きロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し素材作成
フリーフォントで PDF 作成
デュアルフォント
書体見本
フリーフォント配布サイト
キーボード画像作成
フリーフォント ギャラリー
イラストACよりフリーダウンロード
UTF-8文字Tool
SQLの窓WEBサービス
リアルタイムHTML
テキスト変換
ストリートビューとMAPのコード
SyntaxHighlighter
Shadowbox 埋め込みコード作成

SQLの窓フリーソフト
SQLの窓 Build C++
販売管理B
「送る」に入れる簡易ダンプ
WMI Query
コンピュータアイコンメニュー
ドメイン内検索

素材
足成
Image * After
ぱくたそ
イラストAC
イラスト素材サイト

一般WEBツールリンク
WEB アーカイブ
疑わしいファイルや URL を分析する
HTML整形ツール
JSONLint
ttf to woff converter
Run Code
Twitter Card validator
Google URL Shortener
C#<->VB.NET

SQLの窓
logical　error
GINPRO
WAHA land
職人的フリーソフトの使い方
WEB 職人
ソース掲示板

フリーソフト
7-Zip
FileZilla
PrimoPDF(英語版)
GifCam
GIMP Portable
Classic Shell

JSライブラリ
jQuery
Lightbox
Shadowbox.js
The Google Hosted Libraries
cdnjs
Three.js