Flash Builder 4 beta 2のコンポーネントビューをカスタマイズする

Flex Builder のコンポーネントビューが気に入らないので、カスタマイズしてみました。このカスタマイズはAdobeのサポート対象外になる可能性があるかもしれないのでご注意ください。
対象はFlash Builder 4 beta 2 for Mac OS Xですが、Flex Builderでも同じような方法が適用できるはずです。

コンポーネントビューに表示するコンポーネントを制限する

Flex Builderのコンポーネントビューには、標準で利用できるコンポーネントが配置されていて、デザインビューにドラッグ＆ドロップで配置できます。
ところが、実際の開発では、画面デザインを統一するため、特定のコンポーネントのみ使ってもらい、余計なコンポーネントは使わないようにしたい、ということがあります。

そこで、コンポーネントビューから特定のコントロールを除外してみます。
ただし、コンポーネントビューから除外するだけで、ソースコード上からは利用可能です。
ソースコード上での利用を抑止するためには、コンパイラで頑張るか、チェック用のプリコンパイラを作る等の方法で対処する必要があります。

今回は、標準コントロールのうち、Flex4から追加された「DataGroup」をコンポーネントビューから除外してみます。

コンポーネントをコンポーネントビューに表示するための設定は、以下の場所に記述されています。

/Applications/Adobe Flash Builder Beta 2/plugins/com.adobe.flexbuilder.codemodel_4.0.0.253292/resources/design

上記ディレクトリの中にあるxmlファイルに、コンポーネントのクラス名やコンポーネントのカテゴリが記述されています。このファイルは一般に「design.xml」と呼ばれているものです。

今回除外する「DataGroup」はsparkパッケージのコンポーネントなので、「flex4.xml」を編集します。

/Applications/Adobe Flash Builder Beta 2/plugins/com.adobe.flexbuilder.codemodel_4.0.0.253292/resources/design/flex4.xml

ファイルを開くと、タグの中にタグがたくさん記述されています。この中にname="spark.components.DataGroup"の属性を持つタグがあるので、「削除」します。コメントアウトではうまくいきません。（私だけ？？）

        <component name="spark.components.DataGroup" displayName="%DataGroup.display.value"
                   category="gumbolayout" filteredViewCategory="layout_combined">
            <defaultAttribute name="width" value="200"/>
            <defaultAttribute name="height" value="200"/>
            <designExtension class="com.adobe.flexide.extensions.components.spark.components.DataGroupExtension" />
            <mxmlProperties>
                <!-- no common properties -->
            </mxmlProperties>
        </component>

flex4.xmlを保存して、Flash Builder 4を起動します。
コンポーネントビューを表示すると、リストから「DataGroup」が除外されています。

sparkやmx等のコンポーネントパッケージとxmlの対応関係はcodemodel.jarの中にあるDesignクラスにハードコーディングで記述されています。

/Applications/Adobe Flash Builder Beta 2/plugins/com.adobe.flexbuilder.codemodel_4.0.0.253292/codemodel.jar

com.adobe.flexbuilder.codemodel.internal.design.Design

  private Document readHardcodedDesignXml(IClassPathEntry entry)
  {
    IActionScriptProjectSettings context = entry.getContext();
    if (context != null) {
      IFlexSDK flexSDK = context.getFlexSDK();
      if (flexSDK != null) {
        IPath sdkLocation = flexSDK.getLocation();
        IPath absoluteSwcPath = entry.getResolvedPath();
        IPath relativeSwcPath = PathUtils.absoluteToRelative(absoluteSwcPath, sdkLocation);
        if (!(relativeSwcPath.isAbsolute())) {
          String swcFilename = absoluteSwcPath.lastSegment();
          int sdkMajorVersion = flexSDK.getVersion().getMajor();

          String xmlFile = null;
          String propertiesFilename = null;
          if ("spark.swc".equals(swcFilename)) {
            xmlFile = "flex4.xml";
            propertiesFilename = "flex4.xml".replaceAll("\\.xml$", ".properties");
          } else if ("framework.swc".equals(swcFilename)) {
            xmlFile = (sdkMajorVersion == 3) ? "framework.xml" : "framework4.xml";
            propertiesFilename = "framework.xml".replaceAll("\\.xml$", ".properties");
          } else if (("charts.swc".equals(swcFilename)) || ("datavisualization.swc".equals(swcFilename))) {
            xmlFile = (sdkMajorVersion == 3) ? "datavisualization.xml" : "datavisualization4.xml";
            propertiesFilename = "datavisualization.xml".replaceAll("\\.xml$", ".properties");
          } else if ("airframework.swc".equals(swcFilename)) {
            xmlFile = (sdkMajorVersion == 3) ? "airframework.xml" : "airframework4.xml";
            propertiesFilename = "airframework.xml".replaceAll("\\.xml$", ".properties");
          } else if ("utilities.swc".equals(swcFilename)) {
            xmlFile = "utilities.xml";
            propertiesFilename = "utilities.xml".replaceAll("\\.xml$", ".properties");
          }

          if (xmlFile != null) return readDesignXmlFile(xmlFile, propertiesFilename);
        }
      }
    }

    return null;
  }

コンポーネントの表示名を変更する

コンポーネントビューに表示されるコンポーネント名は、ButtonやTextInput等、英名（物理名）になっています。
コンポーネントの表示名は国際化に対応しているので、画面のデザイン担当者には和名（論理名）で見せたい、というような場合、propertiesファイルをいじることで対応できます。

デフォルトのpropertiesは、さきほどのdesign.xmlが格納されたディレクトリと同じ場所に、xmlと対応する形で格納されています。
/Applications/Adobe Flash Builder Beta 2/plugins/com.adobe.flexbuilder.codemodel_4.0.0.253292/resources/design

flex4.xml ⇔ flex4.properties

日本語ロケールのpropertiesは以下の場所にあります。

/Applications/Adobe Flash Builder Beta 2/plugins/com.adobe.flexbuilder.codemodel.nl1_4.0.0.253292/nl/ja_JP/resources/design
ファイル名：flex4.properties

（変更前）
FxTextInput.display.value = TextInput