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

0

我们下一步主要的目标是为在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”打开浏览器并创建一个新工作区。 您可以看到生成的示例菜单和操作。

clipboard.png

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

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

clipboard.png

作为下一个示例,我们要注册文件扩展名“.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”的文件都将使用自定义图标并打开默认文本编辑器:

clipboard.png

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

你可能感兴趣的

载入中...