在che中增長EMF支持 - Day6：加入你本身的編輯器

繼上一篇以後的下一步，是添加自定義的編輯器讓你能像在經典Eclipse裏習慣的那樣利用Ecore建模。現有的EMF編輯器是SWT編寫的，所以咱們不能簡單的直接複用它（就像咱們爲代碼生成所作的同樣）。那麼，讓咱們來看看在Che中實現新的Ecore編輯器的不一樣作法。正如第一篇博文中所描述，咱們的首要目的是作一個像EMF tooling同樣基於表單的編輯器，而不是文本或者圖形。可是，須要考慮的如下幾點因素是幾乎相同的。

Che提供了一種靈活的擴展機制，能夠爲文件類型註冊對應的編輯器，一樣一個框架也是。所以，咱們主要須要考慮編輯器的內部部分，也就是顯示文件實際內容的部分。

爲此，咱們基本上有三種選擇：

1. 擴展示有的代碼編輯器（基於Orion）
2. 使用GWT編寫一個新的編輯器（Che用GWT實現）
3. 嵌入現有的HTML/JavaScript組件

若是你想要修改任何基於文本的人工代碼，第一個多是最簡單和最好的選擇。在這種狀況下，您可使用自定義高亮、代碼補全等來擴展Orion編輯器。對於咱們的Ecore編輯器，咱們的目標是基於表單的解決方案，所以對於咱們來講，Orion編輯器並非一個真正的選擇。

若是您須要從頭開始實現編輯器，那麼使用Google Widget Toolkit的第二個選擇多是最簡單的。當您使用與周圍應用程序（好比Che）相同的技術時，集成的過程就很直接，您能夠直接使用全部Che的API。可是，你須要GWT的開發經驗，然而GWT的生態系統已經不是那麼活躍了。

第三種選擇其實是最靈活的選擇。因爲Che是一個HTML/JavaScript應用程序，因此你能夠嵌入任何您喜歡的Web框架來建立編輯器。你能夠去訪問HTML/JavaScript框架的生態系統。它還使你的編輯器獨立於Che，這樣你只須要編寫一次並使用獨立的解決方案，甚至將其嵌入到其餘Web IDE中（如Atom或Theia）中。此外，這個選擇會讓你的開發週期更有效。 您能夠首先使用很是短的構建週期和簡單的調試來開發獨立組件，而後將其嵌入到框架中。

您可能已經猜到了，咱們使用第三個選擇去作Ecore Editor原型。在咱們介紹實際的編輯器以前，讓咱們更詳細地瞭解將HTML嵌入現有GWT應用程序（Che）的方法。

要在Che中嵌入咱們本身的現有HTML/JavaScript組件，咱們須要完成三個任務：

• 包括咱們本身的HTML
• 包括咱們本身的Javascript
• 包括咱們本身的CSS

從簡單的彈出窗口到更復雜的編輯器，Che都是使用GWT開發人員推薦的Model-View-Presenter模式來實現與UI相關的全部內容。想要在Che中嵌入HTML，你能夠擴展和配置提供的BaseView類。你能夠註冊一個特殊的GWT-UI Binder的xml文件，在其中指定本身的HTML。

要嵌入您的Javascript，您須要實現一個presenter。對於編輯器，Che提供了AbstractEditorPresenter類，它已經包含了諸如髒狀態處理之類的有用的功能。在你的實現過程當中，能夠在編輯器初始化時調用GWT ScriptInjector來注入Javascript文件。加載完成後，必須調用先前實現的視圖以顯示自定義的HTML。

一般，您須要與Javascript庫進行通訊，例如提供來自Che的數據。 爲此，您可使用GTW的Overlays。Overlays是表示JavaScript對象的Java類，能夠在實現的視圖中使用它們。

你能夠在註冊你的插件的位置來插入你的CSS，方法是把它添加到Che的HTML文檔中。可是，你須要確保你的CSS不會覆蓋Che定義的CSS。

如今你就只須要寫一個presenter去爲現有或者你定義的文件類型調用HTML/JavaScript組件。

下面的截圖就演示了一個簡單的自定義編輯器。它經過BasicView方法顯示一個靜態的HTML。

請繼續關注以後的博客，咱們將展現如何使用Model-View-Presenter模式將咱們本身的，更復雜的獨立的顯示Ecore文件內容的UI組件嵌入到Che中。