Flex 4 Design View Extensibility Kit-カスタムコンポーネントをIDE上でレイアウトする-

FlexのカスタムコンポーネントをそのままFlash Builderに取り込むと、デザインビュー上でうまく配置できないことがあります。
（でも、実行すると正しく描画される）

特にmxのCanvasやAccordion等、Container系コンポーネントを拡張したカスタムコンポーネントをFlash Builder上で配置して、さらにその上からボタン等の他のコンポーネントを配置しても、見た目上、配置されません。mxmlのソースコードをみると、確かに配置されていますが。

この対処には、Design View Extensibility Kitを使って、Flash Builder上でレイアウトするための専用クラスを用意する必要があります。

※作成したカスタムコンポーネントが、コンポーネントライフサイクルにしたがって正しく作成されていない等、そもそも正しく描画されない場合は、Extensilibity Kitを使っても、うまく描画されません

Design View Extensibility Kit for Flex 4
http://coldfusionmx.com.br/devnet/flex/flashbuilder_extensibility/DesignViewExtKitReadme.htm

design.xmlの中に記述されているdesignExtensionタグで指定されるクラスが、Flash Builder上でレイアウトするための拡張クラスです。
例えば、mxのCanvasには、「com.adobe.flexide.extensions.components.mx.containers.CanvasExtension」クラスが指定されています。このように拡張クラスを指定しておかないと、IDE上でレイアウトがうまくいきません。

		<component name="mx.containers.Canvas" displayName="%Canvas.display.value" category="halolayout" filteredViewCategory="">
			<defaultAttribute name="width" value="200"/>
			<defaultAttribute name="height" value="200"/>
			<designExtension class="com.adobe.flexide.extensions.components.mx.containers.CanvasExtension"/>
			<mxmlProperties>
				<textfield id="label" name="%propertyLabel.label"/>
			</mxmlProperties>
		</component>

com.adobe.flexide.extensionsはSDKやFlash Builderの中を探してもみつかりません。上記URLページにあるDownloadリンクから、「DV4ExtensionKit.fxp」をダウンロードしてください。このファイルの中に含まれています。
拡張子はfxpですが、zip形式として解凍できます。
上記ファイルには、サンプルソースコードが含まれていますので、それをみれば使い方がわかるでしょう。
カスタムコンポーネント上に子コンポーネントを配置したときの、サイズの再計算・再描画等が出来るようになります。

ちなみに、TabNavigatorやDataGridを配置したときに、NavigatorContentやDataGridColumn等の子コンポーネントが自動的に挿入されますが、これはdesign.xml内でinserterClassを指定して、そのクラスが挿入処理を行っています。このinserterClassはさきほどのExtensionKitには含まれておらず、Flash Builderに含まれています。com.adobe.flexbuilder.mxml.editorの中にあります。