在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中。