Eclipse 4 (e4) Tutorial: Part 2 Application Model and Views


http://eclipsesource.com/blogs/2012/06/12/eclipse-4-e4-tutorial-part-2/

-----

<h2>アプリケーションモデルからビュー実装へ</h2>
<p>このチュートリアルシリーズは、RCP 2.0として知られている
Eclipse4　アプリケーションプラットフォームのコア概念を紹介します。e4で革新されたことの一つは、アプリケーションモデルとビューなどのパーツ実装を分離したことです。このチュートリアルの最初のパートでは、アプリケーションモデルの概要に
加えて、エディタもしくはAPIを使って、異なる方法でモデルを変更する方法を紹介します。
アプリケーションモデルを使って、個々のビューを実装することなしにアプリケーションの基本設計を
定義し、テストできます。チュートリアルの２番目のパートでは、欠けている部分であるビューの実装方法を説明します。
これまでは、アプリケーションモデルの中のその部分に対して、プレースホルダのみを生成してきました。</p>
<h3>ビューなしのアプリケーションモデル？</h3>
<p>ぱっと見て、なぜ、Eclipse4は、アプリケーションモデルとUIコンポーネント実装を明確に分離すること
を促しているのかについて、戸惑うかもしれません。これは、ある部分が他の部分なしには意味をなさない場合、特にそう感じるでしょう。Eclipse 3.xやその他のフレームワークでは、ビューなどのUIコンポーネント実装は、
所定のインタフェースを実装していく必要があります。このアプローチは、ビューを生成するために開発者が実装しなければならないメソッドを正確に
定義しています。しかし、このアプローチは、UIコンポーネント実装の再利用性を制限してしまいます。</p>
<p>この問題についてのよく知られた例として、Eclipse 3.xにおけるビューとエディタ間の相違を
上げることができます。
それらを実装するには、異なるインタフェースが必要となります。もし、あなたがビューをエディタとして再利用したい場合は、リファクタリングしなければなりません。
逆の場合も同様です。もう一つの例は、ダイアログの中でビューを再利用しようとする場合です。最後の例は、RCPアプリケーションを、他のコンテキスト、例えば、モバイルデバイス（RAP mobile / Tabris参照）で動かす場合、ワークベンチのデザインは、小さな画面に合うように変更される必要があります。そのため、UIコンポーネントをモジュール化し独立して実装することが、Eclipse4の１つのゴール
となります。エディターやビューのようなフレームワーククラスに結び付かない、小さく、独立したパーツからなる
UI構成物は様々なコンテキストで再利用されることが可能です。</p>
<h3>アプリケーションモデルなしのビュー？</h3>
<p>アプリケーションモデルとビューの実装のモジュール性を示すために、このチュートリアルの
最初のパートでは、実装なしにアプリケーションモデルを生成することから始めました。e4ツールを使うことで、空のアプリケーションモデルを視覚化することさえ可能となります。アプリケーションモデルを実装で満たす前に、その反対、言うなればアプリケーションモデルなしに
SWTを使ったビューを実装することを示そうと思います。Eclipse4のモジュールベースのUI開発の例を示すために、正確なワークベンチのデザインを知る前に、
アプリケーションのパーツを開発してみましょう。</p>
<p>Eclipse4では、ビューは与えられたインタフェースを実装するといったようなことは不要です。そのかわり、ビューは、ワークベンチが提供する必要があるパラメータを定義します。簡単な例を１つあげると、SWTビューは、親コンポジットを必要とします。その上にSWTビューが
配置されます。アノテーション“@Inject”は、Eclipse4フレームワークによって、「注入」されるべきビューのパラメータを決めるために後で使われます。
依存性注入のさらなる詳細は、この連載の将来のチュートリアルで触れます。</p>
<p>次のコード例は、SWTの最も簡単な "Hello World!” です。　</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="java" style="font-family:monospace"><span style="color:#000000;font-weight:bold">public</span> <span style="color:#000000;font-weight:bold">class</span> ExampleView <span style="color:#009900">{</span>
   @Inject
   <span style="color:#000000;font-weight:bold">public</span> ExampleView<span style="color:#009900">(</span><span style="color:#003399">Composite</span> parent<span style="color:#009900">)</span> <span style="color:#009900">{</span>
      <span style="color:#003399">Label</span> label <span style="color:#339933">=</span> <span style="color:#000000;font-weight:bold">new</span> <span style="color:#003399">Label</span><span style="color:#009900">(</span>parent, SWT.<span style="color:#006633">NONE</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
      label.<span style="color:#006633">setText</span><span style="color:#009900">(</span><span style="color:#0000ff">"Hello World!"</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
   <span style="color:#009900">}</span>
<span style="color:#009900">}</span></pre></td></tr></table></div>

<p>アプリケーションモデルを使うと、このビューは、アプリケーションの中でワークベンチの一部として
後で表示できます。ビューのようなものの、高い再利用性やテスト容易性を示すために、最初は、ワークベンチなしに
ビューを使用してみましょう。次のコード例では、SWTを使うだけで、“HelloWorld”を開く方法をお見せします。特筆すべきことは、プレーンなJavaプログラムだということです。これを実行するのに必要なものは、関連するSWTライブラリだけです。このことから、そのビューはどこででも再利用できます。例えば、ダイアログ、ウィザード、Eclipse
ワークベンチの外ででも。</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="java" style="font-family:monospace"><span style="color:#000000;font-weight:bold">public</span> <span style="color:#000000;font-weight:bold">static</span> <span style="color:#000066;font-weight:bold">void</span> main<span style="color:#009900">(</span><span style="color:#003399">String</span><span style="color:#009900">[</span><span style="color:#009900">]</span> args<span style="color:#009900">)</span> <span style="color:#009900">{</span>
   Display display <span style="color:#339933">=</span> <span style="color:#000000;font-weight:bold">new</span> Display<span style="color:#009900">(</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
   Shell shell <span style="color:#339933">=</span> <span style="color:#000000;font-weight:bold">new</span> Shell<span style="color:#009900">(</span>display<span style="color:#009900">)</span><span style="color:#339933">;</span>
   shell.<span style="color:#006633">setLayout</span><span style="color:#009900">(</span><span style="color:#000000;font-weight:bold">new</span> FillLayout<span style="color:#009900">(</span><span style="color:#009900">)</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
   <span style="color:#000000;font-weight:bold">new</span> ExampleView<span style="color:#009900">(</span>shell<span style="color:#009900">)</span><span style="color:#339933">;</span>
   shell.<span style="color:#006633">open</span><span style="color:#009900">(</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
   <span style="color:#000000;font-weight:bold">while</span><span style="color:#009900">(</span> <span style="color:#339933">!</span>shell.<span style="color:#006633">isDisposed</span><span style="color:#009900">(</span><span style="color:#009900">)</span> <span style="color:#009900">)</span> <span style="color:#009900">{</span>
      <span style="color:#000000;font-weight:bold">if</span><span style="color:#009900">(</span> <span style="color:#339933">!</span> display.<span style="color:#006633">readAndDispatch</span><span style="color:#009900">(</span><span style="color:#009900">)</span> <span style="color:#009900">)</span> <span style="color:#009900">{</span>
         display.<span style="color:#006633">sleep</span><span style="color:#009900">(</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
      <span style="color:#009900">}</span>
   <span style="color:#009900">}</span>
<span style="color:#009900">}</span></pre></td></tr></table></div>

<p>このスクリーンショットは、プレーンなJavaプログラムから起動された Hello Worldアプリケーションが
走っていることを表しています。</p>
<p><a href="http://eclipsesource.com/blogs/wp-content/uploads/2012/06/helloworld.png"><img class="aligncenter size-full wp-image-8000" title="helloworld" alt="helloworld Eclipse 4 (e4) Tutorial: Part 2 Application Model and Views" src="http://eclipsesource.com/blogs/wp-content/uploads/2012/06/helloworld.png" width="206" height="71" /></a></p>
<h3>再結合</h3>
<p>これまでのところ、アプリケーションモデルとビュ実装をお互いに分離して、生成およびテストして
きました。いよいよ、両方のパーツを一緒にする時がやって来ました。これをやるには、アプリケーションモデルの中で、ワークベンチ内のビューを表す"Part"要素を加えます。このパーツは、ビュー実装とリンクされます。e4ツールで生成されるe4テンプレートアプリケーション(Eclipse4 チュートリアル パート１のインストールの章参照)を使うと、例えば、パーツは、パーツスタック内に生成されます。</p>
<p>このスクリーンショットを見るとわかるように、パーツは、ビューやエディタの置き場所として、
アプリケーションモデルに追加されます。</p>
<p><a href="http://eclipsesource.com/blogs/wp-content/uploads/2012/06/add-part.png"><img class="aligncenter size-medium wp-image-8001" title="add part" alt="add part 260x300 Eclipse 4 (e4) Tutorial: Part 2 Application Model and Views" src="http://eclipsesource.com/blogs/wp-content/uploads/2012/06/add-part-260x300.png" width="260" height="300" /></a></p>
<p>パーツをビュー実装にリンクするために、そのビューのクラスをクラスURIの形式で指定する必要があります。アプリケーションを開始するとき、Eclipse4は、ワークベンチ内にパーツを生成し、リンクされたビュー
は初期化されます。ビューによって必要とされるパラメータは、現在のコンテキストから取得され、ビューに注入されます。例えば、Eclipse4はパーツのコンテント領域をビューに対するコンポジットの親として使います。
それゆえ、パーツの中にビューを置くという言い方が適切だと感じていただけると思います。</p>
<p style="text-align: center;"><a href="http://eclipsesource.com/blogs/wp-content/uploads/2012/06/setclassuri.png"><img class="aligncenter size-medium wp-image-8002" title="setclassuri" alt="setclassuri 300x88 Eclipse 4 (e4) Tutorial: Part 2   Application Model and Views" src="http://eclipsesource.com/blogs/wp-content/uploads/2012/06/setclassuri-300x88.png" width="300" height="88" /></a>

<br/>図：パーツはクラスURIを用いてビュー実装にリンクされる
</p>
<h3>他の分離について（ハンドラ―を追加すること）</h3>
<p>次のステップのために、我々のアプリケーションにいくつかのふるまいを加えたいと思います。そのため、ハンドラを実装します。それは、アプリケーションのツールバー上のボタン
によってトリガされます。UIコンポーネントの実装と同様に、Eclipse4　は、フレームワークとハンドラの実装をきれいに
分離することができるようになっています。これによって、再利用性とテスト容易性を向上させています。具体例を示すために、ハンドラをアプリケーションモデルへの統合とは独立して、実装・テスト
し、前の章と同じワークフローで進めてみます。そのあとのステップで、統合します。
</p>
<p>Eclipse4でUIコンポーネントが動作する方法に沿って、ハンドラ―も所定のインタフェースを
実装する必要はありません。かわりに、必要なパラメタを定義します。これは、必要最小限にパラメタ数を減らし、ハンドラのテストも簡単にします。次のコード例は、“Hello World!”ダイアログを開くといった、とても基本的なハンドラの実装をお見せします。           ハンドラがダイアログを開くために必要なパラメータは、シェル、たった一つです。“@Execute”アノテーションを使うことで、ハンドラはEclipse4フレームワークに、そのメソッドが
実行対象であることを知らせます。
加えて、このアノテーションは、“@Inject”と同様の効果を持っています。どういった意味かと言いますと、execute()メソッドに必要なパラメータは、シェルの場合と同様にフレームワークによって注入されます。ここで例としているハンドラは、状態を持っていないため、execute()メソッドstaticメソッドとしています。</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="java" style="font-family:monospace"><span style="color:#000000;font-weight:bold">public</span> <span style="color:#000000;font-weight:bold">class</span> MyHandler <span style="color:#009900">{</span>
 
   @Execute
   <span style="color:#000000;font-weight:bold">public</span> <span style="color:#000000;font-weight:bold">static</span> <span style="color:#000066;font-weight:bold">void</span> execute<span style="color:#009900">(</span>Shell shell<span style="color:#009900">)</span><span style="color:#009900">{</span>
      MessageDialog.<span style="color:#006633">openInformation</span><span style="color:#009900">(</span>shell, <span style="color:#0000ff">""</span>, <span style="color:#0000ff">"Hello World!"</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
   <span style="color:#009900">}</span>
 
<span style="color:#009900">}</span></pre></td></tr></table></div>

<p>Eclipse4のハンドラは、本当に使うパラメータだけを要求すればよいので、
テストや、再利用、そして連結することがとても簡単になります。次のコード例は、実装されたハンドラをテストする簡単なJavaプログラムを示します。これらのテストは、JUnitの中でも記述できます。</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="java" style="font-family:monospace"><span style="color:#000000;font-weight:bold">public</span> <span style="color:#000000;font-weight:bold">static</span> <span style="color:#000066;font-weight:bold">void</span> main<span style="color:#009900">(</span><span style="color:#003399">String</span><span style="color:#009900">[</span><span style="color:#009900">]</span> args<span style="color:#009900">)</span> <span style="color:#009900">{</span>
   Display display <span style="color:#339933">=</span> <span style="color:#000000;font-weight:bold">new</span> Display<span style="color:#009900">(</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
   Shell shell <span style="color:#339933">=</span> <span style="color:#000000;font-weight:bold">new</span> Shell<span style="color:#009900">(</span>display<span style="color:#009900">)</span><span style="color:#339933">;</span>
   shell.<span style="color:#006633">open</span><span style="color:#009900">(</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
   MyHandler.<span style="color:#006633">execute</span><span style="color:#009900">(</span>shell<span style="color:#009900">)</span><span style="color:#339933">;</span>
   <span style="color:#000000;font-weight:bold">while</span><span style="color:#009900">(</span> <span style="color:#339933">!</span>shell.<span style="color:#006633">isDisposed</span><span style="color:#009900">(</span><span style="color:#009900">)</span> <span style="color:#009900">)</span> <span style="color:#009900">{</span>
      <span style="color:#000000;font-weight:bold">if</span><span style="color:#009900">(</span> <span style="color:#339933">!</span> display.<span style="color:#006633">readAndDispatch</span><span style="color:#009900">(</span><span style="color:#009900">)</span> <span style="color:#009900">)</span> <span style="color:#009900">{</span>
         display.<span style="color:#006633">sleep</span><span style="color:#009900">(</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
      <span style="color:#009900">}</span>
   <span style="color:#009900">}</span>
<span style="color:#009900">}</span></pre></td></tr></table></div>

<p>ツールバー上のボタンとハンドラを統合するには、アプリケーションモデルの他の要素が必要です。ハンドラを統合する最も簡単な方法は、“Direct ToolItem”を使用することです。（図参照）パーツと同様に、ハンドラの実装は、クラスURIを設定することによってモデルと結合されます。ツールアイテムを例題アプリケーションで表示するために、ラベルやアイコンを設定することも必要です。</p>

<p style="text-align: center;"><a href="http://eclipsesource.com/blogs/wp-content/uploads/2012/06/adddirecttoolitem.png"><img class="aligncenter size-full wp-image-8003" title="adddirecttoolitem" alt="adddirecttoolitem Eclipse 4 (e4) Tutorial: Part 2   Application Model and Views" src="http://eclipsesource.com/blogs/wp-content/uploads/2012/06/adddirecttoolitem.png" width="281" height="239" /></a>
<br/>図：アプリケーションのツールバー上で"Direct ToolItem"を生成する</p>

<p style="text-align:left">“Direct ToolItem”を使うことは、ハンドラとツールバー上のアイテムを統合をもっとも速く
行う手段です。しかし、再利用性を最大限に高めるためには、コマンドを使用することをお勧めします。これを行うには、単純にアプリケーションモデルのルートレベルにハンドラとコマンドを
作成するだけです。ハンドラは実装ではなく、コマンドに結び付けられます。（図参照）直接実装に結び付ける“Direct ToolItem”を使用する代わりに、“Handled ToolItem”
は、コマンドに結び付けられます。このような方法で、コマンドは、アプリケーション内で再利用されます。
その例として、キーバインディングはハンドラの実行をトリガするために用いられます。</p>
<p style="text-align: center;"><a href="http://eclipsesource.com/blogs/wp-content/uploads/2012/06/bind-handler.png"><img class="aligncenter size-medium wp-image-8004" title="bind handler" alt="bind handler 300x90 Eclipse 4 (e4) Tutorial: Part 2   Application Model and Views" src="http://eclipsesource.com/blogs/wp-content/uploads/2012/06/bind-handler-300x90.png" width="300" height="90" /></a><br/>図：ハンドラはコマンドと同様に実装にも結びつけられる</p>
<h3>まとめ</h3>
<p>Eclipse4におけるUI実装では、必要なパラメータを定義します。このアプローチは、最小のインタフェースと実装によって、テストと再利用を大変容易にします。このチュートリアルは、アプリケーションモデル上の対応する要素なしに、ビューやハンドラを
生成してテストする方法を示しました。次回は、アプリケーションモデルの拡張とモジュール化、つまり、複数のプラグインからビューやハンドラを提供する方法について述べていきます。</p>