Eclipse 4 (e4) Tutorial Part 1 – The e4 Application Model

> 適当に訳してみました。わからない単語は想像です。

Eclipse 4 (e4) Tutorial Part 1 – The e4 Application Model

http://eclipsesource.com/blogs/2012/05/10/eclipse-4-final-sprint-part-1-the-e4-application-model/

-----
<p>Eclipse 4へのカウントダウンは、始まっています。現在のケプラーリリースでは、コア·ツール·コンポーネントは再度、EclipseのSDK 4.3に基づいて構築されています。このシリーズは、Eclipse 4アプリケーションプラットフォーム（別名RCP 2.0）に新しい概念を紹介します。ほとんどのプロジェクトは、最初に互換性レイヤを使用することになるでしょう。しかし、新しいコンセプトを眺めて、それらを試してみることには,
十分な価値があります。</p>
<p>すべてのEclipse 4アプリケーションの基礎である、アプリケーションモデルから始めることにしましょう。最初のパートでは、このモデルを変更するためのさまざまなオプションをご紹介したいと思います。</p>
<h3>アプリケーション vs モデルビュー</h3>
<p>Eclipse4において、アプリケーションモデルは、ビュー、メニュー提供とキー割り当てを含むワークベンチを定義します。このモデルは、最初にコンポーネントを実装することを要求しないのです。たとえば、ビューを実装せずにモデルを動かすことができます。</p>
<p>アプリケーションモデルの基礎は、ウインドウとパーツです。Eclipse 3.xのプラットフォームとは異なり、E4はビューとエディタをパーツの概念に統合しています。それは、ウィンドウ内のビューとして表現されます。モデルにパーツを追加する場合、後になってから、任意のビュー実装に接続することができます。一般的なワークベンチの設計と、個々のパーツ実装が分離されていることを
示すために、このセクションではSWTコードを見せることはしません。代わりに、モデルについて、並びに、モデルをどのようにしてコードに結びつけるかについて焦点を当てます。</p>
<p style="text-align:center"><a href="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/picture6.png"><img class="aligncenter  wp-image-7675" alt="E4のアプリケーションモデルpicture6エクリプス4（E4）講座第1" title="picture6" height="335" src="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/picture6.png" width="637" /></a>
アプリケーションモデルの各パーツは、後で、実装に接続します</p>
<h3>インストール</h3>
<p>あなたは次のリンクからEclipse 4の最新版を入手できます。<a href="http://www.eclipse.org/eclipse4/">http://www.eclipse.org/eclipse4/を</a> 。 IDE自体は、Eclipse 4に基づいており、RCPおよびRCP 2アプリケーションを作成するためのいくつかの便利なツールが含まれています。さらに、e4のツールをインストールすることをお勧めします。（トム・シンドルさん、ありがとう）
このツールは、アプリケーションを生成するための大変便利なテンプレートを提供するだけでなく、アプリケーションモデルを編集するためのエディタを提供します。
執筆時点で、これらのツールは、まだインキュベーター状態であり、
更新サイトからインストールできます。最新版はこちらから入手してください。 <a href="http://download.eclipse.org/e4/downloads/">http://download.eclipse.org/e4/downloads/</a></p>
<p><a href="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/installe4tools.png"><img class="aligncenter size-full wp-image-7676" title="installe4tools" alt="E4のアプリケーションモデルinstalle4toolsエクリプス4（E4）講座第1" src="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/installe4tools.png" width="353" height="92" /></a></p>
<h3>最初の一歩</h3>
<p>Eclipse 4をインストールした後に、開始する最も簡単な方法は、新しいe4アプリケーションを作成するためのe4テンプレートを使用することです。プロジェクトを作成するには、「新しいプロジェクト」ウィザード内の「e4アプリケーション·プロジェクト」項目を選択します。このアプリケーションに対しては、アプリケーションの名前を除いて何も変更する必要はありません。テンプレートはプロダクト定義を作成します。このプロダクト定義を起動するだけでアプリケーションを起動することができます。それを開始するには、* .productファイルを開き、エディタの右上隅にある実行またはデバッグボタンをクリックしてください。下図を見るとわかるように、生成されたテンプレート·アプリケーションにはすでに、ウインドウ、2つのメニュー、ツールバーとパースペクティブスタックが含まれています。</p>
<p style="text-align:center"><a href="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/picture1_003.png"><img class="aligncenter size-full wp-image-7677" alt="E4のアプリケーションモデル写真1 003エクリプス4（E4）講座第1" title="picture1_003" height="31" src="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/picture1_003.png" width="123" /></a>プロダクトを起動するには、ここをクリックしてください。</p>
<h3>エディタ</h3>
<p>アプリケーションモデルを変更するには、プロジェクトのルートレベルに配置されている Application.e4xmi を開くことによって起動するエディタが必要になります。左側には、モデルの完全な内容を示すツリーがあることがおわかりでしょう。ツリー内の要素をダブルクリックすると、詳細ビ​​ューが右側に開かれ、その要素のプロパティを変更できるようになります。</p>
<p>アプリケーションのトップレベル要素は通常1つまたは複数のウィンドウです。それらはアプリケーションモデルの"windows"の下に見つけることができます。テンプレートプロジェクトには、すでにTrimmedWindowが含まれています。この要素をダブルクリックすると、例えば、このウィンドウのサイズを変更することができます。アプリケーションを再起動することにより、その結果を確認してください。</p>
<p>ツリー内を右クリックすることで、新しい要素を追加したり、既存のものを取り除くことができます。例として、あなたは、既存のPerspectiveStackを削除し、代わりに、単一のパーツを追加することができます。アプリケーションの再起動後には、アプリケーションのメインエリアはもはや境界を持たないことに気付くでしょう。ただし、新しいパーツは表示されていません。このような結果をある程度制御することができると便利でしょう。私は、次のセクションでそれを行う方法を説明します。</p>
<p style="text-align:center"> <a href="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/picture2.png"><img class="aligncenter size-full wp-image-7678" alt="E4のアプリケーションモデル写真2はEclipse 4（E4）講座第1" title="写真2" height="261" src="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/picture2.png" width="254" /></a>ワークベンチを編集するには、アプリケーションモデルを開くこと</p>
<h3>ライブ編集</h3>
<p>Eclipseは、あなた
が実装を提供することなく、アプリケーションモデルを使用してワークベンチを定義することができます。しかし、多くの場合、空のパーツを特定するのは困難であり、作業を難しくするでしょう。これを解決するために、トム・シンドルは、ライブエディタの考え方を導入しました。このエディタは、実行中のアプリケーションのモデルを見たり、変更したり、モデル内で選択した
要素を実行中のアプリケーション上にハイライトすることができます。
ライブエディタを有効にするには、あなたのアプリケーションとともに2つのプラグインを起動させる必要があります。
実行構成設定で、それらのプラグイン項目をチェックし、さらに”Add required”を押すと
必要なプラグインを含めることができます。
あなたが最初にプロダクトファイル経由で起動したとき、実行構成が作成されているはずです。</p>
<p><a href="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/picture3.png"><img class="aligncenter size-full wp-image-7679" title="しゃし" alt="E4のアプリケーションモデルしゃしエクリプス4（E4）講座第1" src="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/picture3.png" width="381" height="63" /></a></p>
<p>実行中のアプリケーションから、Alt + Shift + F9キー経由でライブエディタを起動することができます。このエディタはあなたのIDEのエディタのように動作します、しかし、それは直接、実行中のアプリケーションモデルにアクセスします。例えば、エディタでTrimmedWindowを開いて、そのサイズや位置を変更すると、直接実行しているアプリケーションに反映されます。
</p>
<p><a href="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/picture4.png"><img class="aligncenter size-full wp-image-7680" title="picture4" alt="E4のアプリケーションモデルpicture4エクリプス4（E4）講座第1" src="http://eclipsesource.com/blogs/wp-content/uploads/2012/05/picture4.png" width="385" height="117" /></a></p>
<p>ライブエディタは、既にある要素を編集できるだけでなく、新しい要素を加えることもできます。
例えば、あなたがアプリケーションモデルに新たなウインドウを加える（ツリーのwindowsノード上右クリック）と、新たなウインドウがアプリケーションの中に開かれます。
アプリケーション中で可視化されているコンポーネントがどれかを知るために、コンポーネントを色づけすることができます。
ライブエディタ上の要素を右クリック

などによってTrimBarライブエディタで要素を右クリックして「表示制御」を選択すると、実行中のアプリケーションで、対応する部分が赤く着色されます。</p>
<p> アプリケーションモデル内の要素は、実行中のアプリケーション上で色付けされます。</p>
<p>この機能を使うと、アプリケーションモデルの中の変化を簡単に視覚化できます。特に、UIで直接見えない要素に対して有効です。例えば、ウインドウに新たなPartを追加するとき、
まだ内包する要素を持っていないため、色付け無しには可視化できないでしょう。</p>
<p>アプリケーションモデルの変更にライブエディタを使うと、その変更は実行中のアプリケーションに
のみ反映されます。実際のアプリケーションにその変更を反映させるには、
"XMI"タブを使ってモデルの変更バージョンをコピーし、それを
IDE上のモデルにコピーします。</p>
<h3>モデルへのプログラミングアクセス</h3>
<p>アプリケーションモデルの主要な利点のひとつに、APIを通した変更が可能なことが挙げられます。
アプリケーションモデルは、EMFで表現されているので、そのAPIは、以前にEMFを扱ったことがある方にはなじみ深いでしょう。このAPIを使用すると、例えば、ユーザの反応に応じたアプリケーションのパーツをプログラミングで生成・変更することができます。テンプレートアプリケーションで、このことを試すには、OpenHandlerクラスなどの既存のハンドラを
使うとよいでしょう。このハンドラを見てわかるように、execute()メソッドは、@executeアノテーションでマークアップされています。このメソッドは、接続されたToolItemがユーザによって押されたときに
実行されます。</p>
<p>詳しくは後で触れますが、依存性注入(DI)は、プログラマがこのメソッドに必要なパラメータを決める
ことを容易にしてくれます。以下のコード例では、メソッドはパラメータとしてアプリケーションウィンドウを要求しており、
フレームワークによって注入されます。最初の行では、新しいパーツが生成され、次の行で、そのパーツをウインドウに追加しています。上で説明したライブエディタを使って、その結果をチェックできます。最初にアプリケーションとライブエディタを起動します。それから、例題アプリケーションのツールバーにあるopenボタンを押します。ライブエディタで、新しいパーツが正しく追加され、それがアプリケーション内で色付けされていることが確認できます。</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="java" style="font-family:monospace">@Execute
<span style="color:#000000;font-weight:bold">public</span> <span style="color:#000066;font-weight:bold">void</span> execute<span style="color:#009900">(</span>MWindow mWindow<span style="color:#009900">)</span> <span style="color:#009900">{</span>
    MPart newPart <span style="color:#339933">=</span> MBasicFactory.<span style="color:#006633">INSTANCE</span>.<span style="color:#006633">createPart</span><span style="color:#009900">(</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
    mWindow.<span style="color:#006633">getChildren</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#006633">add</span><span style="color:#009900">(</span>newPart<span style="color:#009900">)</span><span style="color:#339933">;</span>
<span style="color:#009900">}</span></pre></td></tr></table></div>

<p>次のコード例では、新しいウインドウが生成されています。この新たなウインドウを
アプリケーションに追加するために、パラメータとしてアプリケーションが必要となります。APIを使って、ウインドウの大きさが設定され、ウインドウに新たなパーツが追加されています。そしてウインドウがアプリケーションに追加されています。ウインドウをアプリケーションに追加することで、実行中のアプリケーション内に開かれます。
（訳注：モデル内で追加操作するということ？）結果を確認するために、アプリケーションを再起動して、もう一度ボタンを押してみましょう。</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="java" style="font-family:monospace">@Execute
<span style="color:#000000;font-weight:bold">public</span> <span style="color:#000066;font-weight:bold">void</span> execute<span style="color:#009900">(</span>MApplication application<span style="color:#009900">)</span> <span style="color:#009900">{</span>
    MWindow mWindow <span style="color:#339933">=</span> MBasicFactory.<span style="color:#006633">INSTANCE</span>.<span style="color:#006633">createTrimmedWindow</span><span style="color:#009900">(</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
    mWindow.<span style="color:#006633">setHeight</span><span style="color:#009900">(</span><span style="color:#cc66cc">200</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
    mWindow.<span style="color:#006633">setWidth</span><span style="color:#009900">(</span><span style="color:#cc66cc">400</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
    mWindow.<span style="color:#006633">getChildren</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#006633">add</span><span style="color:#009900">(</span>MBasicFactory.<span style="color:#006633">INSTANCE</span>.<span style="color:#006633">createPart</span><span style="color:#009900">(</span><span style="color:#009900">)</span><span style="color:#009900">)</span><span style="color:#339933">;</span>
    application.<span style="color:#006633">getChildren</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#006633">add</span><span style="color:#009900">(</span>mWindow<span style="color:#009900">)</span><span style="color:#339933">;</span>
<span style="color:#009900">}</span></pre></td></tr></table></div>

<h3>スクリプト記述</h3>
<p>ライブエディタのもう1つの優れた機能は、実行中にモデルAPIでパーツにアクセスするスクリプトを走らせる機能です。このJavaScriptで書かれたコードは、動的に解釈されます。スクリプトは、アプリケーションモデルの任意の部分で実行できます。これを行うには、アプリケーションとライブエディタを起動(ALT+SHIFT+F9)します。右ウィンドウなど、任意の要素をクリックし、「スクリプトを実行」を選択します。開かれたウインドウ
の中に、JavaAPIをラップしているJavaScriptで記述できます。次のコード例は、実行中にウインドウのラベルをセットします。</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="java" style="font-family:monospace">mainObject.<span style="color:#006633">setLabel</span><span style="color:#009900">(</span><span style="color:#0000ff">"Hello Eclipse"</span><span style="color:#009900">)</span></pre></td></tr></table></div>

<p>２番目の例は要素を不可視にします。ツールバー要素上でこの例を試すことができます。
その要素は、モデルツリーの"TrimmedWindow =&gt; TrimBar =&gt; WindowTrim =&gt; ToolBar"に
見つけることができます。</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="java" style="font-family:monospace">mainObject.<span style="color:#006633">setVisible</span><span style="color:#009900">(</span><span style="color:#000066;font-weight:bold">false</span><span style="color:#009900">)</span></pre></td></tr></table></div>

<h3>まとめ</h3>
<p>e4アプリケーションモデルは一貫性を持った方法で、事前に個々のパーツを実装することなしに、アプリケーションの一般的な設計を定義することができます。私たちは、本稿において様々な方法でアプリケーションモデルを変更することを説明しました。
ここには、ライブエディタやAPIを用いて、アプリケーションを実行中にモデルを変更する方法も
含まれています。その章では、アプリケーションにプレースホルダのみを生成しました。本連載の次のパートでは、アプリケーションモデルをUIコンポーネントの実装に接続する方法、つまり、パーツとそれを満たすビュー実装との接続を生成する方法について説明します。</p>
<p></p>
<p><a href="http://eclipsesource.com/blogs/2012/05/10/eclipse-4-final-sprint-part-1-the-e4-application-model/">パート1：Eclipse4の紹介</a></p>
<p><a href="http://eclipsesource.com/blogs/2012/06/12/eclipse-4-e4-tutorial-part-2/">パート2：アプリケーションモデルとビュー</a></p>
<p><a href="http://eclipsesource.com/blogs/2012/06/26/eclipse-4-e4-tutorial-part-3-extending-the-application-model/">パート3：既存モデルの拡張</a></p>
<p><a href="http://eclipsesource.com/blogs/tutorials/eclipse-4-e4-tutorial-part-4-dependency-injection-basics/">パート4：依存性注入</a></p>
<p><a href="http://eclipsesource.com/blogs/tutorials/eclipse-4-e4-tutorial-soft-migration-from-3-x-to-eclipse-4-e4/">パート5：Eclipseの3.xからのソフトな移行</a></p>
<p><a href="http://eclipsesource.com/blogs/tutorials/eclipse-4-e4-tutorial-part-6-behavior-annotations/">パート6：振る舞いのアノテーション</a></p>
<p></p>
<p></p>
<p></p>
<p>著者：ジョナスヘルミング</p>