Flex Builderのカスタマイズ（コンポーネント関連）

自作コンポーネントの組み込み等、コンポーネント関連のFlex Builderのカスタマイズ方法をまとめる。

【注意】
※以降に示す方法はAdobeから正式に公開されているものではなく、configファイル等の内容から類推し設定を変えてみた結果から得たものである。

Flex BuilderのPluginの定義ファイルを変更することにより、FlexBuilder?上での振る舞いをカスタマイズすることができる。

【カスタマイズ項目】

1. Componentsウインドウのツリー表示のカスタマイズ。
2. デザイン画面へ貼り付けた時のプロパティのデフォルト値を指定。
3. デザイン画面へ貼り付けた時のxmlnsを固定。
4. デザイン画面へ貼り付けた時の独自動作を設定。
5. プロパティウインド(Standard View)に任意のプロパティを表示。

Componentsウインド及びデザイン画面への貼り付け時の動作

Componentsウインドの表示及び、デザイン画面への貼り付け時の動作はPlugin用のxmlファイルを作成することによりカスタマイズ可能である。以下にカスタマイズ例を示す。

【定義ファイル】
Program Files\Adobe\Flex Builder 2.0 Beta 3\plugins\com.adobe.flexbuilder.components.config_2.0.340\config\components\
※このディレクトリには標準でbuiltin.xml（標準のコンポーネント用）とcharts.xml（チャート）が存在する。

【定義ファイル例】
ファイル名：@myComponents.xml

<?xml version="1.0"?>
<components>
	<namespaces>
		<namespace prefix="mycompo" uri="MyComponents.*"/>
		<namespace prefix="mycompo2" uri="MyComponents2.*"/>
	</namespaces>
	<categories>
		<category id="mycontrols" label="@MyControls" defaultExpand="true">
			<component name="MyLabel" namespace="mycompo">
				<defaultAttribute name="text" value="MyLabel"/>
			</component>
			<component name="MyButton" namespace="mycompo2">
				<defaultAttribute name="label" value="MyButton"/>
			</component>
			<component name="Button" namespace="mx">
				<defaultAttribute name="label" value="ButtonX"/>
				<defaultAttribute name="styleName" value="XStyle"/>
			</component>
			<component name="TextInput" text="123,456,789" namespace="mx">
				<defaultAttribute name="backgroundColor" value="#ffff80" />
				<defaultAttribute name="cornerRadius" value="7" />
				<defaultAttribute name="borderStyle" value="solid" />
			</component>
		</category>
		<category id="mylayout" label="@MyLayout" defaultExpand="true">
			<component name="Canvas" namespace="mx">
				<defaultAttribute name="width" value="100"/>
				<defaultAttribute name="height" value="100"/>
			</component>
		</category>
	</categories>
</components>

ツリー表示

&attachref(ComponentWindow.png);

貼り付けた結果

貼り付け動作のカスタマイズ

コンポーネントの定義に、inserterClassを指定することにより、貼り付け時に独自の動作を行うことができる。
※詳細未調査。

<component name="HBox" namespace="mx"
     inserterClass="com.adobe.flexbuilder.editors.mxml.views.components.inserters.SizedContainerInserter" /> 

Hboxの場合はWidthとHeightの設定ダイアログが表示される。

プロパティウインドウ（Standard View）の表示

プロパティウインドウ（Standard View）には使用頻度が高いプロパティが表示される。無条件に表示されるもの以外にも、コンポーネント毎にカスタマイズ可能である。
自作コンポーネントの場合、標準のプロパティのみしか表示されないが、このカスタマイズにより任意のプロパティを表示することが可能となる。

【定義ファイル】
Program Files\FlexBuilder? 2.0 Beta3\plugin\com.adobe.flexbuilder.editors.mxml_2.0.340\config\commonDescriber.xml

※このファイルに標準コンポーネント、チャートコンポーネントが定義されている。　カスタムコンポーネントもこのファイルに追記することとなる。

【カスタマイズ】

【定義方法】

<component id="mycompo:MyLabel"> 
    <textfield id="text" name="Text:"/>
    <textfield id="enabled" name="Enabled:"/>
</component>
・mycompo:MyLabel -- コンポーネント名。
・text,enabled -- プロパティ名
・Text:,Enabled: -- プロパティウインドウ上のラベル

既存の定義と同じにしたければ、
<component id="mycompo:MyLabel" use="mx:Label" />
※text、enableを表示。

既存の定義とその他のプロパティを表示したければ、
<component id="mycompo:MyLabel" use="mx:Label"> 
    <textfield id="myProperty" name="MyProp:"/>
</component>

プロパティウインドウ上の入力コントロールには以下のものが使えるようである。
※他のものが使えるかどうか、独自の入力コントロールが作れるかどうかは未調査。

<combo id="enabled" name="Enabled:" /> 
<textfield id="click" name="On click:" /> 
<filepicker id="icon" name="Icon:" /> 
<slider id="verticalGap" name="Gap:" min="0" max="20" increment="1" /> 
<colorpicker id="selectedColor" name="Selected color:" /> 
<combo id="enabled" name="Enabled:" /> 
<textfield id="click" name="On click:" />

B-Wiki 20050210 Copyright © 2003-2005 ishii. License is GPL.
Based on "PukiWiki" 1.4.5-2005/02/10 by PukiWiki Developers Team.
Powered by PHP 4.3.11. HTML convert time: 0.033 sec.