2006-01-05

VisualEditorのパレットにGUI部品を追加する

Visual Editorの簡単な拡張についてちょっと書いてみます。Visual Editorについては下の以前のエントリを参照。

Eclipse GUI作成プラグイン 『Visual Editor』



VE_Palette
左のVisual Editorの画面で赤く囲ってあるのがパレット。GUI画面を作るときは,ここから追加するGUI部品をマウスで選択して,画面上に貼り付けられます。

画面ではSwingとAWTの部品が表示されてますが,自分でカスタマイズしたGUI部品をVEで使いたい場合はどうすれば良いんでしょうか? これには二つ方法があります。一つ目はパレット上にある”Choose Bean”を選択して,表示されるダイアログに追加するGUI部品のクラス名を入力して選択する方法。二つ目はVEを拡張するプラグインを作成して,新たにパレットに項目を追加する方法です。

一つ目の方法を使えば,特別なことをしなくてもカスタマイズしたGUI部品も使えますが,いちいちクラス名を入力するのは面倒くさいですね。第一,面白くないです。なので今回は二つ目の方法の,VEパレットを拡張するプラグインを作成してみます。



テストに使用した環境は,Eclipse3.1,VisualEditor1.1.0です。他の環境では試してないので動作結果は不明。
テストのため,JLabelを継承したMyLabelというクラスを作成しました。これをVEパレットに追加してみます。以下にその手順を簡単に箇条書きしてみます。

  1. プロジェクトの新規作成
    • プラグイン・プロジェクト
        名前: AddPalette
        OSGiバンドルマニフェストは作成しない
        ”以下のテンプレートを使用してプラグインを作成”のチェックを外す
  2. 準備
    • GUI部品
        test.palette.parts.MyLabel
        テキストに接頭語と接尾語をつけるラベル
    • アイコン
        iconsフォルダ作成
        適当なアイコン追加。example.gif
    • Jarファイル
        srcフォルダをカレントフォルダにJarでエクスポート
        addpalette.jar
  3. XMIファイルの作成
    • このXMIファイルでパレットの表示内容を設定します。
    • ”プロパティ”でエンコーディングをUTF-8にする(注意! これをしないと日本語が使えません)
    • グループタグ
    • アイコンの指定
    • クラスファイルの指定
    • 表示文字列の指定
    • 変数名の指定
  4. plugin.xmlの編集
    • プラグイン依存関係を追加
        org.eclipse.ve.java.core
        org.eclipse.jdt.core
        org.eclipse.jdt.ui
    • 拡張
      • クラスパスコンテナページ
          org.eclipse.jdt.ui.classpathContainerPage
          name: AddPaletteライブラリ
          class: org.eclipse.ve.internal.java.wizard.RegisteredClasspathContainerWizardPage
      • クラスパスイニシャライザ
          org.eclipse.jdt.core.classpathContainerInitializer
          class: org.eclipse.ve.internal.java.core.RegisteredClasspathContainerInitializer
      • VEレジストレーション
          org.eclipse.ve.java.core.registrations
      • VEコントリビュータ
          org.eclipse.ve.java.core.contributors
  5. プラグインのテスト
    • ランタイムワークベンチを起動
    • SwingのJFrameを作成
    • ”AddPaletteライブラリ”を追加
    • JFrameをVEで開く
    • テストグループがあればOK
  6. プラグインのエクスポート
    • bin.includesに追加
      • icons/
        addpalette.xmi
    • ECLIPSE_HOME/pluginsに展開
    • Eclipseの再起動


このプラグインをインストールして,プロジェクトにAddPaletteライブラリを追加すると,以下のようにパレットに追加されます。

AddPalette




上記の手順で作ったプロジェクトのファイルを下に置いときます。細かいところは説明しきれないのでファイルを参照してください。というか正直良く分かってないところのほうが多いです。VE拡張は難しい!

AddPalette.zip

2 件のコメント:

shake さんのコメント...

Visual EditorのGUIアイコン拡張について取り上げているサイトが見つけられなかったため恐縮ですが古い記事にコメントを残させていただきます。

この記事を参考に拡張にチャレンジしたのですが、2.準備、3.XMIファイルの作成の項目が理解できず拡張が出来ずに居ます。

お忙しい上に古い内容ですが、補足説明などをお願いできませんでしょうか?

deltam さんのコメント...

>shakeさん
コメントありがとうございます。

私のVE拡張の知識はVer1.1.0で止まっておりまして最新のVer1.4.0は全く知らないのですが、答えられる範囲で補足説明してみます。
この記事を書いた時期に参照していたページも最後にまとめておきます


2.準備
・GUI部品
ここで言っているのは、パレットに追加するオリジナルのGUI部品を作るということです。このときはは"test.palette.parts.MyLabel"というSwingのJLabelを継承して適当に機能を追加したものを作ってみました。
Swing以外でもSWTから継承した部品を使うこともOKだったと思います。

・アイコン
ここではパレットに表示されるicon画像ファイルを追加しています。これはEclipseのメニューからフォルダやファイルの追加ができますので、それほど特殊な操作ではありません。

・Jarファイル
GUI部品で作ったクラスをまとめておくためのJarファイルです。パレットから追加するときはVEはこのjarからGUI部品クラスを探します。
GUI部品を作ったときのソースファイルのフォルダを右クリックすればEclipseならエクスポートというメニューがでると思います。


3.XMIファイルの作成
XMIファイルの形式を説明することは私の能力を超えます! 不親切ですが、上記説明と記事本文最後にあるZipファイル内の"addpalette.xmi"の中身を読んで、なんとか自分の目的に合わせてみてください。

あとplugin.xmlの編集内容などもリンクしてあるZipの中身を確認した方が分かりやすいと思います。


<参考資料>
サルノオボエガキ: VisualEditorのパレットにGUI部品を追加する
http://deltam.blogspot.com/2006/01/visualeditorgui.html
 使える資料のまとめです。

http://delicious.com/deltam/VisualEditor
 del.icio.usにブクマしたVE関係の資料です。