GOL @Wiki

NetBeansで無理やりFlexする

最終更新：2008年10月07日 15:41

divadiva

- view

管理者のみ編集可

FlexやAIRで遊ぶ場合、Flex Builderが開発環境としてはベストです。ですが、NetBeans派の私としてはできればNetBeansを使う機会を増やしたい。ってことで、NetBeansでFlexする方法について、細々と書いていきます。

ちなみに下記はNetBeans 6.5（記事執筆時はBeta）以上での動作を確認しています。6.1はわかりません。やってみてください。あと、日本語化したNetBeans6.5で作業していますので下記の説明を読むときは注意してください。

いちおう下記手順で作成したNetBeansプラグインモジュールをアップロードしておきます。→コチラ

最小限の環境を整備する
1. MXMLをコード補完する
2. MXMLをファイルタイプとして認識させる
その他
1. 構築用antビルドファイル
2. モジュールにサインする

最小限の環境を整備する

MXMLをコード補完する

まずは手始めにMXMLのコード補完機能を実装（？）します。と言っても、MXMLのXMLスキーマをシステムに登録し、XMLスキーマに沿ったコード補完を実現するだけです。

方法はこのチュートリアルページに沿って作業するだけです。
上記ページではNetBeans5.5.1とJDK1.4 or 1.5を前提にしていますが、NetBeans6.5 on JDK1.6.0_10rc2の環境で問題なく動きました。

詳細は上記チュートリアルを参照してほしいのですが、まずは、「NetBeansモジュール」カテゴリの「モジュール」プロジェクトをテンプレートとして利用して、NetBeansプラグインモジュールプロジェクトを新規作成します。プロジェクト名は好きなものを自由につけてください。プロジェクト作成時の基本モジュール構成設定では、コード名ベースは、FQDNをドメイン名側から書いていきます。たとえば、「org.foo.bar」「jp.co.foo.bar」みたいな感じです。ここでは仮に「org.nbm.flex」として説明を進めます。モジュール表示名はわかりやすいものに変えましょう。また、XMLレイヤーを生成するようにチェックボックスにチェックを入れてください。ローカライズ版バンドルのファイル名は特に支障がなければそのままで結構です。

プロジェクトが生成されたらいよいよコード補完の実装ですが、まずは利用するライブラリをプロジェクトに設定します。プロジェクト名上で右クリックしてメニューを出し、プロパティを選択します。「ライブラリ」カテゴリを選択し、「XMLエンティティーカタログ」「ユーティリティーAPI」「UIユーティリティーAPI」の3つのライブラリを追加します。

次に、カタログ登録クラスを作成します。まずは通常のJavaクラス生成ウィザードでクラスを生成します。たとえば「org.nbm.flex.catalog.RegisterCatalog」のようにします。
Javaクラスファイルが生成されたらその中身を書いていきます。まずは「org.netbeans.modules.xml.catalog.spi.CatalogReader」
「org.netbeans.modules.xml.catalog.spi.CatalogDescriptor」
「org.xml.sax.EntityResolver」
の3つのインタフェースをimplements宣言します。
あとはインタフェースの抽象メソッドを実装すればいいのですが、その前に、MXMLのXMLスキーマとアイコン用のイメージファイル（16x16）をプロジェクトに登録しておきます。最初に「org.nbm.flex.catalog.resources」などのリソース用のパッケージを作成し、そのパッケージ以下に、ここからダウンロードしたMXMLのXMLスキーマファイル（今回はflex3.xsd）と、自作のアイコンファイルを置いてください。私はFLex SDKのサンプルに含まれていた32x32サイズの「ｆ」マークのアイコンファイルをGIMPで16x16に加工しました。

あとはチュートリアルに載っているソースコードを自分の環境に合わせて改変しながらコピペすればOKです。こんな感じですね。

package org.nbm.flex.catalog;
 
～ インポート文は省略 ～
 
public class RegisterCatalog implements CatalogReader, CatalogDescriptor, EntityResolver {
　
   private static final String MXML_XSD = "flex3.xsd";
   private static final String MXML = "http://www.adobe.com/2006/mxml";
   private static final String MXML_URL = "nbres:/org/nbm/flex/catalog/resources/flex3.xsd";
   private static final String MXML_ID = "SCHEMA:" + MXML;
　
   public Iterator getPublicIDs() {
       List<String> list = new ArrayList<String>();
　
       list.add(MXML_ID);
　
       return list.listIterator();
   }
　
   public void refresh() {
   }
　
   public String getSystemID(String publicId) {
       if (publicId.equals(MXML_ID)) {
           return MXML_URL;
       } else {
           return null;
       }
   }
　
   public String resolveURI(String arg0) {
       return null;
   }
　
   public String resolvePublic(String arg0) {
       return null;
   }
　
   public void addCatalogListener(CatalogListener arg0) {
   }
　
   public void removeCatalogListener(CatalogListener arg0) {
   }
　
   public Image getIcon(int arg0) {
       return Utilities.loadImage("org/nbm/flex/catalog/resources/<アイコンファイル名>");
   }
　
   public String getDisplayName() {
       return "Flex MXML Catalog";
   }
　
   public String getShortDescription() {
       return "XML Catalog for Flex MXML Schema";
   }
　
   public void addPropertyChangeListener(PropertyChangeListener arg0) {
   }
　
   public void removePropertyChangeListener(PropertyChangeListener arg0) {
   }
　
   public InputSource resolveEntity(String publicId, String systemId) throws SAXException, IOException {
       if (MXML.equals(systemId)) {
           return new org.xml.sax.InputSource(MXML_URL);
       }
       if (systemId != null && systemId.endsWith(MXML_XSD)) {
           return new org.xml.sax.InputSource(MXML_URL);
       }
       return null;
   }
   
}

次にlayer.xmlを記述し、flex3.xsdがXMLカタログに登録されるようにするものです。XMLカタログに登録されると「ツール」メニューの「DTDおよびXMLスキーマ」のところにflex3.xsdが登録されます。できあがったlayer.xmlは下記のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE filesystem PUBLIC "-//NetBeans//DTD Filesystem 1.1//EN"  "http://www.netbeans.org/dtds/filesystem-1_1.dtd">
<filesystem>
   <folder name="Plugins">
       <!-- Register XML module catalog plugin -->
       <folder name="XML">
           <folder name="UserCatalogs">
               <file name="org-nbm-flex-catalog-RegisterCatalog.instance">
                   <attr name="instanceCreate" newvalue="org.nbm.flex.catalog.RegisterCatalog"/>
                   <attr name="instanceOf" stringvalue="org.netbeans.modules.xml.catalog.spi.CatalogReader"/>
               </file>
           </folder>
       </folder>
   </folder>
</filesystem>

以上で実装作業は終了です。プロジェクト名を実行してみてください。「開発中IDEでのインストール/再読み込み」を選択して現在実行中のNetBeans環境に対してビルド、インストールすることも可能ですが、安全のため、通常の「実行」にしましょう。新たにNetBeansが起動され、その新しい環境内で作成したモジュールが動作します。

あとはテスト用にWebプロジェクトなどを生成してさらにXMLドキュメントを新規生成しコード補完機能が動作するかテストしてみてください。
たとえば下記の様なXMLファイルを記述し、

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

最終行で、

</mx:Application>

が記述候補として自動的に表示されればOKです。

MXMLをファイルタイプとして認識させる

さて以上でMXMLのコード補完機能が動作するようになったのですが、そもそもMXMLファイルがXMLとして認識されていなければ、XMLスキーマファイルをベースとするコード補完機能が働きません。
そこで「*.mxml」ファイルがXMLのファイル形式としてNetBeansに認識されるようにしましょう。

今回はこのページを参考にして進めてください。

モジュールプロジェクトは既にコード補完機能のところで作成したので、新たに作る必要はありません。プロジェクト名を右クリック、「新規...」「ファイルの種類...」を選択し、ウィザードを起動します。「ファイルの認識」の設定ダイアログにて、MIMEタイプに「text/xml」を、ファイル名の拡張子に「.mxml」を入力します。次へ進み、「名前、アイコン、場所」の設定ダイアログにて、クラス名の接頭辞に適当なものを入力します。これはウィザードで自動生成されるクラスの先頭につく文字列となります。今回は「MXML」としておきます。アイコンはコード補完のところで使用したものと同じものでいいです。パッケージは「org.nbm.flex」としておけばいいでしょう。Bundle.propertiesとlayer.xmlが既に存在している場合は内容が追加されます。

今回の作業がすべて終了すると、空のMXMLファイルを生成する機能が使用できるようになるのですが、その空MXMLファイルのテンプレートを記述します。先ほどのウィザードで生成された MXMLTemplate.mxmlをたとえば下記のように修正します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
　
	<mx:Script>
		<![CDATA[
		]]>
	</mx:Script>
　
</mx:Application>

次にlayer.xmlの下記の箇所を確認してください。

   <folder name="Templates">
       <folder name="Other">
           <file name="MXMLTemplate.mxml" url="MXMLTemplate.mxml">
               <attr name="SystemFileSystem.localizingBundle" stringvalue="org.retriever.golden.tt.nbm.flex.Bundle"/>
               <attr name="template" boolvalue="true"/>
           </file>
       </folder>
   </folder>

これは、ファイル生成ウィザードで空のMXMLファイルの生成を指示された時の処理について規定しているところです。
ファイル生成ウィザードで空のMXMLファイルが指定された際にメッセージを表示するように修正します。まずは上記layer.xmlの <attr ... /> に下記を追加します。

<attr name="templateWizardURL" urlvalue="nbresloc:/org/nbm/flex/MXMLDescription.html"/>

上記で新規ファイルのテンプレートウィザードから呼び出す説明用HTMLを指定しましたので、その説明用HTMLファイルを作成します。org.nbm.flex パッケージにMXMLDescription.htmlという名前で、空のHTMLファイルを生成し、下記のような内容にします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
MXMLファイルを生成します。
</body>
</html>

さて、これでファイルタイプは認識されるようになりますが、もう少し追加作業があります。
プロジェクト名の上で右クリック、プロパティダイアログを表示し、ライブラリを追加します。今回追加するのは、「汎用言語フレームワーク」です。

ライブラリを追加したら、プロジェクト名の上で右クリック、[新規]-[その他]で新規ファイル生成ウィザードを起動し、「モジュールの開発」カテゴリの「言語サポート」を選択しウィザードを起動します。「MIMEタイプおよび拡張子」ダイアログにて、MIMEタイプに「text/x-mxml」、拡張子に「mxml」を指定し、ウィザードの処理を開始します。

ウィザード処理終了後、layer.xmlの下記の部分、

   <folder name="Editors">
       <folder name="text">
           <folder name="x-mxml">
               <file name="language.nbs" url="language.nbs"/>
           </folder>
       </folder>
   </folder>

を下記のように変更します。

   <folder name="Editors">
       <folder name="text">
           <folder name="x-mxml">
               <file name="language.nbs" url="language.nbs">
                   <attr name="icon" stringvalue="org/nbm/flex/アイコンファイル名" />
               </file>
           </folder>
       </folder>
   </folder>

最後にMXMLResolver.xmlの、