在che中增加EMF支持 - Day5：创建一个插件并注册一种文件类型

2019年10月2日 180次阅读 来源: SimGuo

我们下一步主要的目标是为在Che中添加一个能够编辑EMF模型的自定义的编辑器。为了完成这个，我们首先为Che创建一个自定义的插件，这样我们就不会将我们的代码和che的核心代码混淆。在我们第一个插件中，我们将对Che进行两个扩展：注册.ecore文件作为一个自定义的文件类型，并为这个文件类型注册一个自定义的编辑器。我们将详细的描述这两个插件，因为他们将会是以后的扩展的一个模板。

Che里面的插件基本都是加到我们自定义build里的maven模板。注意Che没有运行时可以添加的插件。

我们将手动将模块整合进Che build的过程里，但这会需要一些人工的工作。幸运的是，Che提供了一个简单的方式：会用maven archtypes生成一个简单的插件，可以作为您自己的插件的基础。

以下描述基于Eclipse Che（5.13.0）。

执行下面的步骤。

  1. 复制git clone https://github.com/eclipse/che-archetypes.git
  2. 切换到Clone的项目目录
  3. 确认版本号git checkout tags/5.13.0

  4. 执行下面的指令：

    mvn org.apache.maven.plugins:maven-archetype-plugin:2.4:generate -DarchetypeRepository=https://maven.codenvycorp.com/content/groups/public/ -DarchetypeGroupId=org.eclipse.che.archetype -DarchetypeArtifactId=plugin-menu-archetype -DarchetypeVersion=5.13.0 -DgroupId=my.plugin -DartifactId=my-sample-plugin -Dversion=0.1-SNAPSHOT -DskipITs -DinteractiveMode=false

这将在“my-sample-plugin”目录中生成一个示例插件。 该示例包含一个菜单项，触发“Hello from Che !!!”输出。 您可以浏览插件目录以了解有关示例代码的更多信息。

想要用che构建这个插件，切换到my-sample-plugin目录并执行：

mvn clean install

最后，在my-sample-plugin目录中执行如下指令来启动Che（$PWD指当前目录）。

docker run -it --rm -v /var/run/docker.sock:/var/run/docker.sock -v $PWD/mydata:/data -v $PWD/assembly-che/assembly-main/target/eclipse-che-0.1-SNAPSHOT/eclipse-che-0.1-SNAPSHOT:/assembly eclipse/che-cli:5.13.0 start

现在，在“https：// localhost：8080”打开浏览器并创建一个新工作区。 您可以看到生成的示例菜单和操作。

《在che中增加EMF支持 - Day5：创建一个插件并注册一种文件类型》

现在我们有了一个正在运行的插件，让我们回到我们最初的目标:Che内的EMF支持。我们将使用该插件为Che添加一些扩展：自定义文件类型和自定义编辑器。

目前，没有任何扩展名，Che显示“.ecore”扩展名的通用文件图标如下图：

《在che中增加EMF支持 - Day5：创建一个插件并注册一种文件类型》

作为下一个示例，我们要注册文件扩展名“.ecore”并显示适当的图标。

首先，我们将我们的图标添加到插件目录my-sample-plugin/plugins/my-sample-plugin/my-sample-plugin-ide/src/main/resources。

然后，我们需要在GWT中加载图标。为此，我们在my.plugin.ide包中创建了一个新的界面IconResource.java，其中包含以下内容：

package my.plugin.ide;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import org.vectomatic.dom.svg.ui.SVGResource;
public interface IconResource extends ClientBundle {
   IconResource INSTANCE = GWT.create(IconResource.class);
   @Source("icon.svg")
   SVGResource icon();
}

由于我们在org.vectomatic.dom.svg中添加了一个依赖项，我们需要在my-sample-plugin-ide/pom.xml中添加这个依赖项。

   org.vectomatic
   lib-gwt-svg
   0.5.12

这样，我们就定义了自定义文件类型，并将其加入到Gin模块中。打开SampleMenuGinModule.java并添加下面的代码，代码内容基本上是为自定义文件类型的一个小工厂：包括了文件类型相关的图标和扩展名。

@Provides
@Singleton
@Named("EcoreFileType")
protected FileType provideEcoreFile(IconResource res) {
   return new FileType(res.icon(), "ecore");
}

最后，我们需要注册文件类型并为其注册编辑器。现在我们直接将Che的默认文本编辑器作为编辑器，之后我们将使用这段代码将我们自定义的编辑器作为默认的。

为了进行注册，我们创建一个新的java类MyEditorExtension.java。这个扩展类是插件与Che交互的核心位置。这将允许我们在此处处理一切相关的事情，比如文件类型、编辑器、操作、视图等等。

标记@Extension告诉Che，这个类提供了扩展。所有方法都将通过dependency injection方式执行，允许您加入所有必需的参数和服务。 在下面的示例中，我们加入两个Che服务：编辑器注册表和文件类型注册表，以及我们的自定义文件类型。首先，我们将自定义文件类型添加到文件类型注册表中，其次，我们将自定义文件类型与默认文本编辑器相关联。

@Extension(title = "Ecore Editor")
public class MyEditorExtension {
   @Inject
   public void registerForFiletype(final EditorRegistry editorRegistry,
                                   final FileTypeRegistry fileTypeRegistry,
                                   final @Named("EcoreFileType") FileType ecoreFile,
                                   final DefaultTextEditorProvider provider
                                   ){
       fileTypeRegistry.registerFileType(ecoreFile);
       editorRegistry.registerDefaultEditor(ecoreFile,provider);
   }
}

现在我们重建Che，所有使用文件扩展名“.ecore”的文件都将使用自定义图标并打开默认文本编辑器：

《在che中增加EMF支持 - Day5：创建一个插件并注册一种文件类型》

在这篇博文中，我们为Che创建了一个插件，允许我们添加自定义内容，而无需将我们的代码与Che代码混合。到目前为止，我们的自定义内容很简单，加了一个图表和注册了一个默认编辑器。但我们的最终目标是添加自定义编辑器，使得你能够在Eclipse的桌面IDE中一样修改Ecore文件。有几种不同的方法来开发这样的编辑器，我们将在本博客的下一部分介绍。

    原文作者：SimGuo
    原文地址: https://segmentfault.com/a/1190000018904237
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞