// 下階層用テンプレート
#topicpath
----
//ここにコンテンツを記述します。
#contents

**概要 [#z69fd4c1]
さて前回はGoogleの検索機能を呼び出したり、スペルミスを変更するダイアログだったりを作成しました。今回はその検索結果を表示するためのビューを作成していきたいと思います。プロジェクトは引き続き「nu.mine.kino.plugin.google.ui」を使用します。

**plugin.xml、MANIFEST.MFを記述する [#wc09e01d]

「META-INF/MANIFEST.MF」をマニフェストエディタで開き、[拡張]タブを選択して[追加]をクリックします。すると、拡張ポイントを選択するダイアログが開くので、「org.eclipse.ui.views」を選択し[終了]をクリックします。

#ref(view.gif)

次に、この「org.eclipse.ui.views」を右クリックして[新規]−[view]を選択します。下に要素が追加されました。右側にはidやクラス名を指定する画面が表示されているので、以下のように指定します。

|LEFT:id|LEFT:nu.mine.kino.plugin.google.ui.views.GoogleResultView|
|LEFT:name|LEFT:Google検索結果|
|LEFT:class|LEFT:nu.mine.kino.plugin.google.ui.views.GoogleResultView|
|LEFT:category|LEFT:nu.mine.kino.plugin.google|
|LEFT:icon|LEFT:icons/icon.png|



カテゴリーなども追加して結局plugin.xmlには以下のコードが追加されました。

   <extension
         point="org.eclipse.ui.views">
      <view
            category="nu.mine.kino.plugin.google"
            class="nu.mine.kino.plugin.google.ui.views.GoogleResultView"
            icon="icons/icon.png"
            id="nu.mine.kino.plugin.google.ui.views.GoogleResultView"
            name="Google検索結果"/>
      <category
            id="nu.mine.kino.plugin.google"
            name="Googleプラグイン"/>
   </extension>

**ビュークラスを追加する [#w2233d70]
**ビューのクラスを追加する [#w2233d70]
先のマニフェストエディタでidやクラス名を指定しましたが、classのラベルはクリックできるようになっています。

#ref(label.gif)


これをクリックするとビューのクラスを作成するウィザードが起動します。そのまま終了をクリックすると「GoogleResultView」のソースコードが作成されます。


では、そのソースコードに色々追加していこうと思います。

**ビューの本体にテーブルビューワを配置する [#jd8459ae]
まずはビューの本体を構築していきます。ビューの構築は
 public void createPartControl(Composite parent);
をOverrideすることで行います。引数のCompositeに色々ウィジェットを配置していくわけですね。


さて今回は下記のとおりビュー全体にTableViewerを配置することにしました。ここで出てくるTableViewerとはEclipseの「問題ビュー」のようにヘッダとデータ部分を持った表形式のビューワーです。
 public void createPartControl(Composite parent) {
     // ビューワを追加。
     Composite container = new Composite(parent, SWT.NONE);
     container.setLayout(new FillLayout());
 
     viewer = new TableViewer(container, SWT.FULL_SELECTION | SWT.BORDER);
     viewer.setContentProvider(new ArrayContentProvider());
     viewer.setInput(getViewSite());
     initTable(viewer);
 
     createActions();
     initializeToolBar();
     initializeMenu();
 }

TableViewerにカラムを追加する処理は initTable(viewer); で行っています。具体的なソースは以下の通りです。

 private void initTable(final TableViewer viewer) {
     table = viewer.getTable();
     TableLayout layout = new TableLayout();
     table.setLayout(layout);
     table.setHeaderVisible(true); //ヘッダを表示する 
     table.setLinesVisible(true);  //ラインを表示する
 
     ColumnLayoutData[] columnLayouts = getColumnLayouts();
 
     for (int i = 0; i < columnLayouts.length; i++) {
         layout.addColumnData(columnLayouts[i]);
         TableColumn tc = new TableColumn(table, SWT.NONE, i);
         tc.setText(VISIBLE_FIELDS[i].getColumnHeaderText());
         tc.setImage(VISIBLE_FIELDS[i].getColumnHeaderImage());
     }
 }

ColumnLayoutDataはフィールドの幅などレイアウト情報を管理するクラスです((Eclipseでテーブルビューワを使うときはカラムの制御は[[ColumnLayoutData:http://www.eclipse.org/documentation/html/plugins/org.eclipse.platform.doc.isv/doc/reference/api/org/eclipse/jface/viewers/ColumnLayoutData.html]]でやるのがよいみたいです((とりあえずEclipseのMarkerViewなどの実装はそうなってた))。[[ColumnLayoutData:http://www.eclipse.org/documentation/html/plugins/org.eclipse.platform.doc.isv/doc/reference/api/org/eclipse/jface/viewers/ColumnLayoutData.html]]はフィールドの幅などの情報を表現するクラスです。))。

このColumnLayoutDataクラスは
 table = viewer.getTable();
 TableLayout layout = new TableLayout();
 table.setLayout(layout);
というようにTableViewerとTableLayoutが関連づけられており、TableLayoutに
 layout.addColumnData(columnLayouts[i]);
とすることでTableViewerに関連づいています。


さて
 ColumnLayoutData[] columnLayouts = getColumnLayouts();
で、各カラムのレイアウト情報を配列で取得していますが、現段階ではgetColumnLayouts();は
 private ColumnLayoutData[] getColumnLayouts() {
   return DEFAULT_COLUMN_LAYOUTS;
 }
とフィールドに定義されている配列をそのまま返すようになっています。ここはあとで「すでに前回の情報が保存されていたらその情報を復元する」という処理に変更します。たとえば前回使用していたときにフィールドの幅などを変更していたとして、その幅を次回に復元する、といったことをできるようにするわけですね。



**実際にカラムを追加する [#j593a6c7]
実際にカラムを追加する処理は
 for (int i = 0; i < columnLayouts.length; i++) {
   layout.addColumnData(columnLayouts[i]);
   TableColumn tc = new TableColumn(table, SWT.NONE, i);
   tc.setText(VISIBLE_FIELDS[i].getColumnHeaderText());
   tc.setImage(VISIBLE_FIELDS[i].getColumnHeaderImage());
 }
の箇所です。先のレイアウト情報をセットするのと、ヘッダの文言やイメージデータをカラムごとにセットしています。この
 VISIBLE_FIELDS[];
インスタンスはあらかじめ
の箇所です。先のレイアウト情報をセットするのと、ヘッダの文言やイメージデータをカラムごとにセットしています。ここで出てくる VISIBLE_FIELDS[] のインスタンスはあらかじめ
 private final IField[] VISIBLE_FIELDS = 
    { new TitleField(),new SummaryField(), new URLField() };
とフィールドに定義されているインスタンスです。IFieldは

 public interface IField {
     String getColumnHeaderText();
     Image getColumnHeaderImage();
     String getValue(Object obj);
     Image getImage(Object obj);
     int compare(Object obj1, Object obj2);
 }
というように、ヘッダ名やヘッダに表示するアイコンの情報、またビューワの各カラムにオブジェクトが渡されたときにオブジェクトを文字列に変換する変換処理、などを備えたインタフェースです。実装しているクラスTitleField,SummaryField,URLFieldはそれぞれ
というように、ヘッダ名やヘッダに表示するアイコンの情報、またビューワの各カラムにオブジェクトが渡されたときにオブジェクトを文字列に変換する変換処理、などを備えたインタフェースです。実装しているクラスTitleField, SummaryField, URLField はそれぞれ

 public class TitleField implements IField {
   public String getColumnHeaderText() {return "Title";}
   public String getValue(Object obj) {
     ResultElement element = (ResultElement) obj;
     return element.getTitle();
   }
   -- 以下省略 --
 }

 public class SummaryField implements IField {
   public String getColumnHeaderText() {return "Summary";}
   public String getValue(Object obj) {
     ResultElement element = (ResultElement) obj;
     return element.getSnippet();
   }
   -- 以下省略 --
 }

 public class URLField implements IField {
   public String getColumnHeaderText() {return "URL";}
   public String getValue(Object obj) {
     ResultElement element = (ResultElement) obj;
     return element.getURL();
   }
   -- 以下省略 --
 }

と定義されています。つまりここまでで、ビューにはTableViewerが配置されていて、そのTableViewerにはTitle,Summary,URLの3つのカラムがある、ということになります。
というようにヘッダ部分の文言が定義されています。ここまででビューにはTableViewerが配置されていて、そのTableViewerにはTitle,Summary,URLという3つのカラムがある、ということになります。








ここまででビューのソースは以下のようになりました。

 package nu.mine.kino.plugin.google.ui.views;
 
 import nu.mine.kino.plugin.google.ui.views.fields.IField;
 import nu.mine.kino.plugin.google.ui.views.fields.SummaryField;
 import nu.mine.kino.plugin.google.ui.views.fields.TitleField;
 import nu.mine.kino.plugin.google.ui.views.fields.URLField;
 
 import org.eclipse.jface.action.IMenuManager;
 import org.eclipse.jface.action.IToolBarManager;
 import org.eclipse.jface.viewers.ArrayContentProvider;
 import org.eclipse.jface.viewers.ColumnLayoutData;
 import org.eclipse.jface.viewers.ColumnPixelData;
 import org.eclipse.jface.viewers.TableLayout;
 import org.eclipse.jface.viewers.TableViewer;
 import org.eclipse.swt.SWT;
 import org.eclipse.swt.layout.FillLayout;
 import org.eclipse.swt.widgets.Composite;
 import org.eclipse.swt.widgets.Table;
 import org.eclipse.swt.widgets.TableColumn;
 import org.eclipse.ui.part.ViewPart;
 
 public class GoogleResultView extends ViewPart {
     private TableViewer viewer;
     public static final String ID = "nu.mine.kino.plugin.google.ui.views.GoogleResultView"; //$NON-NLS-1$
     private Table table;
 
     // TableViewerの各カラムを定義するフィールド
     private final IField[] VISIBLE_FIELDS = { new TitleField(),
             new SummaryField(), new URLField() };
 
     // TableLayoutと一緒になって使う。各カラムのデフォルトの表示幅などの情報を設定する。
     private final ColumnPixelData[] DEFAULT_COLUMN_LAYOUTS = {
             new ColumnPixelData(200), new ColumnPixelData(200),
             new ColumnPixelData(200) };
 
     /**
      * フィールドのColumnLayoutData[]か、mementoの値で初期化された ColumnLayoutData[]を返すメソッド。
      * 
      * @return
      */
     private ColumnLayoutData[] getColumnLayouts() {
         return DEFAULT_COLUMN_LAYOUTS;
     }
 
     // TableViewerの初期化。
     private void initTable(final TableViewer viewer) {
         table = viewer.getTable();
         TableLayout layout = new TableLayout();
         table.setLayout(layout);
         table.setHeaderVisible(true);
         table.setLinesVisible(true);
         ColumnLayoutData[] columnLayouts = getColumnLayouts();
 
         for (int i = 0; i < columnLayouts.length; i++) {
             layout.addColumnData(columnLayouts[i]);
             TableColumn tc = new TableColumn(table, SWT.NONE, i);
             tc.setText(VISIBLE_FIELDS[i].getColumnHeaderText());
             tc.setImage(VISIBLE_FIELDS[i].getColumnHeaderImage());
         }
     }
 
     /**
      * Create contents of the view part
      * 
      * @param parent
      */
     @Override
     public void createPartControl(Composite parent) {
         // ビューワを追加。
         Composite container = new Composite(parent, SWT.NONE);
         container.setLayout(new FillLayout());
 
         viewer = new TableViewer(container, SWT.FULL_SELECTION | SWT.BORDER);
         viewer.setContentProvider(new ArrayContentProvider());
         viewer.setInput(getViewSite());
         initTable(viewer);
 
         //
         createActions();
         initializeToolBar();
         initializeMenu();
     }
     // 以下、割愛
 }
 
**スクリーンショット [#e6fb2426]
実際にビューを表示してみると、こんな感じです。
#ref(view2.gif)


さて引き続き、[[前回の状態を復元する処理>Eclipse/プラグイン開発のTIPS集/GooglePlugin/前回の状態を復元する処理]]を追加したいと思います。

----
この記事は
#vote(おもしろかった[2],そうでもない[0])

#comment
#topicpath


SIZE(10){現在のアクセス:&counter;}


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS