Google Git
Sign in
eclipse / gerrit / www.eclipse.org / che / refs/heads/CheConf18 / . / docs / assemblies / sdk-code-editors / index.html
blob: 581bdad5ed843797c7b30eeb3717e30766606e1b [file] [log] [blame]
<!-- jQuery Eclipse IP approval https://dev.eclipse.org/ipzilla/show_bug.cgi?id=10801 -->
<script type="text/javascript" charset="utf8" src="../../../docs/assets/scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" charset="utf8">
$(document).ready(function(){
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var image = images[i];
var parentElement = image.parentElement;
var a = document.createElement('a');
if (! image.getAttribute('src').includes("logo-codenvy.svg") && ! image.getAttribute('src').includes("codenvy-contribute.svg") ){
a.href = image.getAttribute('src');
a.target = "_blank";
a.appendChild(image);
parentElement.appendChild(a);
}
}
});
</script>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>SDK Editors -
Docs
- Eclipse Che</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Jekyll v3.5.1">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
<link rel="stylesheet" href="../../../docs/assets/css/screen.css">
<link rel="icon" type="image/x-icon" href="../../../docs/assets/imgs/favicon.ico">
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="wrap">
<header>
<nav class="mobile-nav show-on-mobiles">
<ul>
<li class="current">
<a href="../../../docs/index.html">Docs</a>
</li>
<li class="">
<a href="../../../docs/tutorials/multi-machine/index.html">Tutorials</a>
</li>
<li class="">
<a href="../../../docs/openshift/config/index.html">OpenShift</a>
</li>
<li>
<a href="https://github.com/eclipse/che-docs/tree/master/src/main">GitHub</a>
</li>
</ul>
</nav>
<div class="grid">
<div class="unit one-third center-on-mobiles">
<a href="https://eclipse.org/che/">
<span class="sr-only">Eclipse Che</span>
<img src="../../../docs/assets/imgs/logo-eclipseche.svg" alt="Eclipse Che Logo" width="249" height="115">
</a>
</div>
<nav class="main-nav unit two-thirds hide-on-mobiles">
<ul>
<li class="current">
<a href="../../../docs/index.html">Docs</a>
</li>
<li class="">
<a href="../../../docs/tutorials/multi-machine/index.html">Tutorials</a>
</li>
<li class="">
<a href="../../../docs/openshift/config/index.html">OpenShift</a>
</li>
<li>
<a href="https://github.com/eclipse/che-docs/tree/master/src/main">GitHub</a>
</li>
</ul>
</nav>
</div>
</header>
<section class="docs">
<div class="grid">
<div class="docs-nav-mobile unit whole show-on-mobiles">
<select onchange="if (this.value) window.location.href=this.value">
<option value="">Navigate the docs…</option>
<optgroup label="SETUP">
<ul>
<option value="../../../docs/index.html">Introduction</option>
<option value="../../../docs/setup/getting-started/index.html">Getting Started&#58 Local</option>
<option value="../../../docs/setup/getting-started-saas-cloud/index.html">Getting Started&#58 SaaS Cloud</option>
<option value="../../../docs/setup/configuration/index.html">Configuration</option>
<option value="../../../docs/setup/managing/index.html">Managing</option>
<option value="../../../docs/setup/cli/index.html">CLI Reference</option>
<option value="../../../docs/setup/glossary/index.html">Glossary</option>
<option value="../../../docs/setup/docker/index.html">Docker Installation</option>
<option value="../../../docs/setup/openshift/index.html">OpenShift Installation</option>
<option value="../../../docs/setup/selenium/index.html">How to run selenium tests</option>
</ul>
<ul>
<li class=""><a href="../../../docs/index.html">Introduction</a></li>
<li class=""><a href="../../../docs/setup/getting-started/index.html">Getting Started&#58 Local</a></li>
<li class=""><a href="../../../docs/setup/getting-started-saas-cloud/index.html">Getting Started&#58 SaaS Cloud</a></li>
<li class=""><a href="../../../docs/setup/configuration/index.html">Configuration</a></li>
<li class=""><a href="../../../docs/setup/managing/index.html">Managing</a></li>
<li class=""><a href="../../../docs/setup/cli/index.html">CLI Reference</a></li>
<li class=""><a href="../../../docs/setup/glossary/index.html">Glossary</a></li>
<li class=""><a href="../../../docs/setup/docker/index.html">Docker Installation</a></li>
<li class=""><a href="../../../docs/setup/openshift/index.html">OpenShift Installation</a></li>
<li class=""><a href="../../../docs/setup/selenium/index.html">How to run selenium tests</a></li>
</ul>
</optgroup>
<optgroup label="WORKSPACE ADMINISTRATION">
<ul>
<option value="../../../docs/devops/intro/index.html">Introduction</option>
<option value="../../../docs/devops/runtime-stacks/index.html">Runtime Stacks</option>
<option value="../../../docs/devops/runtime-recipes/index.html">Runtime Recipes</option>
<option value="../../../docs/devops/project-samples/index.html">Project Samples</option>
<option value="../../../docs/devops/runtime-machines/index.html">Runtime Machines</option>
<option value="../../../docs/devops/volume-mounts/index.html">Volume Mounts</option>
<option value="../../../docs/devops/ws-agents/index.html">Workspace Agents</option>
<option value="../../../docs/devops/workspaces-data-model/index.html">Workspace Data Model</option>
<option value="../../../docs/devops/runtime-stacks-data-model/index.html">Runtime Stacks Data Model</option>
<option value="../../../docs/devops/project-samples-data-model/index.html">Project Samples Data Model</option>
</ul>
<ul>
<li class=""><a href="../../../docs/devops/intro/index.html">Introduction</a></li>
<li class=""><a href="../../../docs/devops/runtime-stacks/index.html">Runtime Stacks</a></li>
<li class=""><a href="../../../docs/devops/runtime-recipes/index.html">Runtime Recipes</a></li>
<li class=""><a href="../../../docs/devops/project-samples/index.html">Project Samples</a></li>
<li class=""><a href="../../../docs/devops/runtime-machines/index.html">Runtime Machines</a></li>
<li class=""><a href="../../../docs/devops/volume-mounts/index.html">Volume Mounts</a></li>
<li class=""><a href="../../../docs/devops/ws-agents/index.html">Workspace Agents</a></li>
<li class=""><a href="../../../docs/devops/workspaces-data-model/index.html">Workspace Data Model</a></li>
<li class=""><a href="../../../docs/devops/runtime-stacks-data-model/index.html">Runtime Stacks Data Model</a></li>
<li class=""><a href="../../../docs/devops/project-samples-data-model/index.html">Project Samples Data Model</a></li>
</ul>
</optgroup>
<optgroup label="USER GUIDE">
<ul>
<option value="../../../docs/ide/projects/index.html">Projects</option>
<option value="../../../docs/ide/import-a-project/index.html">Import</option>
<option value="../../../docs/ide/ssh/index.html">SSH</option>
<option value="../../../docs/ide/sync/index.html">Local IDE Sync</option>
<option value="../../../docs/ide/editor-settings/index.html">Editor</option>
<option value="../../../docs/ide/intellisense/index.html">Intellisense</option>
<option value="../../../docs/ide/commands/index.html">Commands</option>
<option value="../../../docs/ide/git-svn/index.html">Git and SVN</option>
<option value="../../../docs/ide/previews/index.html">Previews</option>
<option value="../../../docs/ide/build/index.html">Build</option>
<option value="../../../docs/ide/run/index.html">Run</option>
<option value="../../../docs/ide/sharing/index.html">Share</option>
<option value="../../../docs/ide/debug/index.html">Debug</option>
<option value="../../../docs/ide/docker/index.html">Docker</option>
<option value="../../../docs/ide/electron/index.html">Install Che Desktop Client</option>
</ul>
<ul>
<li class=""><a href="../../../docs/ide/projects/index.html">Projects</a></li>
<li class=""><a href="../../../docs/ide/import-a-project/index.html">Import</a></li>
<li class=""><a href="../../../docs/ide/ssh/index.html">SSH</a></li>
<li class=""><a href="../../../docs/ide/sync/index.html">Local IDE Sync</a></li>
<li class=""><a href="../../../docs/ide/editor-settings/index.html">Editor</a></li>
<li class=""><a href="../../../docs/ide/intellisense/index.html">Intellisense</a></li>
<li class=""><a href="../../../docs/ide/commands/index.html">Commands</a></li>
<li class=""><a href="../../../docs/ide/git-svn/index.html">Git and SVN</a></li>
<li class=""><a href="../../../docs/ide/previews/index.html">Previews</a></li>
<li class=""><a href="../../../docs/ide/build/index.html">Build</a></li>
<li class=""><a href="../../../docs/ide/run/index.html">Run</a></li>
<li class=""><a href="../../../docs/ide/sharing/index.html">Share</a></li>
<li class=""><a href="../../../docs/ide/debug/index.html">Debug</a></li>
<li class=""><a href="../../../docs/ide/docker/index.html">Docker</a></li>
<li class=""><a href="../../../docs/ide/electron/index.html">Install Che Desktop Client</a></li>
</ul>
</optgroup>
<optgroup label="PORTABLE WORKSPACES">
<ul>
<option value="../../../docs/chedir/getting-started/index.html">Chedir - Getting Started</option>
<option value="../../../docs/chedir/why/index.html">Chedir - Why Chedir?</option>
<option value="../../../docs/chedir/installation/index.html">Chedir - Installation</option>
<option value="../../../docs/chedir/project-setup/index.html">Chedir - Project Setup</option>
<option value="../../../docs/chedir/up-and-down/index.html">Chedir - Up and Down</option>
<option value="../../../docs/chedir/chefiles/index.html">Chedir - Chefile</option>
<option value="../../../docs/chedir/ssh/index.html">Chedir - SSH</option>
<option value="../../../docs/chedir/factories/index.html">Chedir - Factories</option>
<option value="">Error Generating Page Link. Contact Maintainer./docs/factory-getting-started/</option>
<option value="">Error Generating Page Link. Contact Maintainer./docs/factory-creating/</option>
<option value="">Error Generating Page Link. Contact Maintainer./docs/factory-json-reference/</option>
</ul>
<ul>
<li class=""><a href="../../../docs/chedir/getting-started/index.html">Chedir - Getting Started</a></li>
<li class=""><a href="../../../docs/chedir/why/index.html">Chedir - Why Chedir?</a></li>
<li class=""><a href="../../../docs/chedir/installation/index.html">Chedir - Installation</a></li>
<li class=""><a href="../../../docs/chedir/project-setup/index.html">Chedir - Project Setup</a></li>
<li class=""><a href="../../../docs/chedir/up-and-down/index.html">Chedir - Up and Down</a></li>
<li class=""><a href="../../../docs/chedir/chefiles/index.html">Chedir - Chefile</a></li>
<li class=""><a href="../../../docs/chedir/ssh/index.html">Chedir - SSH</a></li>
<li class=""><a href="../../../docs/chedir/factories/index.html">Chedir - Factories</a></li>
<li class=""><a href="../../../docs/factory/getting-started/index.html">Factory - Getting Started</a></li>
<li class=""><a href="../../../docs/factory/creating/index.html">Factory - Creating</a></li>
<li class=""><a href="../../../docs/factory/json-reference/index.html">Factory - JSON Reference</a></li>
</ul>
</optgroup>
<optgroup label="DEVELOPER GUIDE - REST API">
<ul>
<option value="../../../docs/assemblies/intro/index.html">Introduction</option>
<option value="../../../docs/assemblies/archetype/index.html">Archetype</option>
<option value="../../../docs/assemblies/assembly-lifecycle/index.html">Assembly Dev Lifecycle</option>
<option value="../../../docs/assemblies/plugin-lifecycle/index.html">Plugin Lifecycle</option>
<option value="../../../docs/assemblies/sdk-rest-apis/index.html">SDK REST APIs</option>
<option value="../../../docs/assemblies/sdk-class-reference/index.html">SDK Class Reference</option>
<option value="../../../docs/assemblies/sdk-dependency-injection/index.html">SDK Dependency Injection</option>
<option value="../../../docs/assemblies/sdk-dto/index.html">SDK DTOs</option>
<option value="../../../docs/assemblies/sdk-properties/index.html">SDK Properties</option>
<option value="../../../docs/assemblies/sdk-code-editors/index.html">SDK Editors</option>
<option value="../../../docs/assemblies/sdk-embed-htmljs/index.html">SDK Embedded JavaScript</option>
<option value="../../../docs/assemblies/sdk-project-types/index.html">SDK Project Types</option>
<option value="../../../docs/assemblies/sdk-actions/index.html">SDK Actions</option>
<option value="../../../docs/assemblies/sdk-services/index.html">SDK Services</option>
<option value="../../../docs/assemblies/sdk-parts/index.html">SDK Parts</option>
<option value="../../../docs/assemblies/sdk-themes/index.html">SDK Themes</option>
<option value="../../../docs/assemblies/sdk-custom-agents/index.html">SDK Custom Agents</option>
<option value="../../../docs/assemblies/sdk-language-server-protocol/index.html">SDK Language Server Protocol</option>
<option value="../../../docs/assemblies/sdk-workspace/index.html">SDK Workspace</option>
</ul>
<ul>
<li class=""><a href="../../../docs/assemblies/intro/index.html">Introduction</a></li>
<li class=""><a href="../../../docs/assemblies/archetype/index.html">Archetype</a></li>
<li class=""><a href="../../../docs/assemblies/assembly-lifecycle/index.html">Assembly Dev Lifecycle</a></li>
<li class=""><a href="../../../docs/assemblies/plugin-lifecycle/index.html">Plugin Lifecycle</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-rest-apis/index.html">SDK REST APIs</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-class-reference/index.html">SDK Class Reference</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-dependency-injection/index.html">SDK Dependency Injection</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-dto/index.html">SDK DTOs</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-properties/index.html">SDK Properties</a></li>
<li class="current"><a href="../../../docs/assemblies/sdk-code-editors/index.html">SDK Editors</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-embed-htmljs/index.html">SDK Embedded JavaScript</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-project-types/index.html">SDK Project Types</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-actions/index.html">SDK Actions</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-services/index.html">SDK Services</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-parts/index.html">SDK Parts</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-themes/index.html">SDK Themes</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-custom-agents/index.html">SDK Custom Agents</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-language-server-protocol/index.html">SDK Language Server Protocol</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-workspace/index.html">SDK Workspace</a></li>
</ul>
</optgroup>
</select>
</div>
<div class="unit four-fifths">
<article>
<div class="improve right hide-on-mobiles">
<a href="https://github.com/codenvy/che-docs/blob/master/src/main/_docs/assemblies/assemblies-sdk-code-editors.md"><i class="fa fa-pencil"></i> &nbsp;Improve this page</a>
<!--<a href="https://github.com/eclipse/che/blob/master/docs/_docs/assemblies/assemblies-sdk-code-editors.md"><i class="fa fa-pencil"></i> &nbsp;Improve this page</a>-->
</div>
<div class="doc-title">
<h1>SDK Editors</h1>
<div class="doc-title-border">
</div>
</div>
<p>This part of the tutorial describes how to extend the Eclipse Che code editor to support a new language. It starts with defining a custom file type and associating it with the specific editor to be opened. Subsequently, we describe how to adapt and enhance the syntax highlighting as well as the code completion of the code editor.</p>
<h2 id="file-types">File Types</h2>
<p>In this part of the tutorial, we describe, how new file types can be defined in Che and how those file types can be associated with a specific editor to be opened with. File types can be anything, from a source file to a configuration or properties file. By defining a new file type, it will be displayed in the project explorer using a specific icon. Further, it can be opened and modified with the associated editor. Please note, that Che already provides support for many common file types, so before defining a new one, you should check whether it is already supported.</p>
<p>Defining a new file type consists of three basic steps:</p>
<ol>
<li>Define the file type itself, including specifying a name, a file extension and an icon</li>
<li>Register the new file type in the file type registry</li>
<li>Optional: Register the file type in the editor registry and thereby associate it with a specific editor to be opened with</li>
</ol>
<p>A simplified version of a registration of a new file type with the extension <code class="highlighter-rouge">.my</code> covering exactly these three necessary steps in correct order looks like this:</p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">FileType</span> <span class="n">myFileType</span> <span class="o">=</span> <span class="k">new</span> <span class="n">FileType</span><span class="o">(</span><span class="s">"My FileType\ anIcon, "</span><span class="n">my</span><span class="err">"</span><span class="o">);</span>
<span class="n">fileTypeRegistry</span><span class="o">.</span><span class="na">registerFileType</span><span class="o">(</span><span class="n">myFileType</span><span class="o">);</span>
<span class="n">editorRegistry</span><span class="o">.</span><span class="na">registerDefaultEditor</span><span class="o">(</span><span class="n">myFileType</span><span class="o">,</span> <span class="n">defaultTextEditorProvider</span><span class="o">);</span>
</code></pre>
</div>
<p>In the first line, the new <code class="highlighter-rouge">FileType</code> is defined, the parameters of its constructor define a name (visible in the UI), an icon, the mime type and a file extension. In line 2, the new file type is registered in Che’s <code class="highlighter-rouge">FileTypeRegistry</code>. In line 3 the file type is added to Che’s editor registry and thereby associated with Che’s default editor. Please note that step three is optional, as Che will associate all file types with the default text editor by itself. However, this step is necessary, if you later want to implement a custom editor provider.</p>
<p>Following a modular design, and following the guideline for the structure of Che plugins, the creation of the file type and the registration should be kept in two separate components (Java Classes).
The following diagram shows all components of a typical file type registration. The three classes highlighted in dark grey are to be implemented or adapted for the extension.
The class <code class="highlighter-rouge">MyGinModule</code> is responsible for creating the new file type. The icon for the new file type will go to a GWT resource class (<code class="highlighter-rouge">MyRessources</code>). Finally, the class <code class="highlighter-rouge">MyExtension</code> creates a <code class="highlighter-rouge">FileTypeRegistration</code> in Che’s <code class="highlighter-rouge">FileTypeRegistry</code>.</p>
<p><img src="../../../docs/assets/imgs/image11.png" alt="image11.png" />
If you haven’t used Gin or dependency injection before, we recommend you have a look at our brief <a href="../../../docs/assemblies/sdk-dependency-injection/index.html">dependency injection introduction</a>.</p>
<p>First, we define a new class <code class="highlighter-rouge">GinModule</code> for the instantiation of the custom <code class="highlighter-rouge">FileType</code>. It enables other classes to access the new file type using dependency injection. When adding more extensions later, the <code class="highlighter-rouge">GinModule</code> class can also create other components and mappings. So we will not call it <code class="highlighter-rouge">FileTypeGinModule</code>, but more generically <code class="highlighter-rouge">MyGinModule</code>. For now, the <code class="highlighter-rouge">GinModule</code> just provides the custom file type using the ID <code class="highlighter-rouge">MyFileType</code>. This makes the custom file type available for injection for other components using the annotation <code class="highlighter-rouge">@Named(“MyFileType”)</code>.</p>
<p>The creation of the file type defines a name, a custom icon and the file extension. If Strings, such as the file extension, are used at other places later, they should be externalized to a common place, for simpler reading, we keep them inlined for now. If those Strings also need to be consumed by a server component later, it should go to a “shared” module, for now, it is kept in the IDE (client) module.</p>
<p><em>che/samples/sample-plugin-filetype/che-sample-plugin-filetype-ide/src/main/java/org/eclipse/che/plugin/filetype/ide/inject/MyGinModule.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">plugin</span><span class="o">.</span><span class="na">myextension</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">inject</span><span class="o">.</span><span class="na">MyGinModule</span>
<span class="nd">@ExtensionGinModule</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">MyGinModule</span> <span class="kd">extends</span> <span class="n">AbstractGinModule</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="kt">void</span> <span class="nf">configure</span><span class="o">()</span> <span class="o">{</span>
<span class="c1">//Nothing to do here, yet</span>
<span class="o">}</span>
<span class="nd">@Provides</span>
<span class="nd">@Singleton</span>
<span class="nd">@Named</span><span class="o">(</span><span class="s">"MyFileType"</span><span class="o">)</span>
<span class="kd">protected</span> <span class="n">FileType</span> <span class="nf">provideMyFile</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nf">FileType</span><span class="o">(</span><span class="n">MyResources</span><span class="o">.</span><span class="na">INSTANCE</span><span class="o">.</span><span class="na">icon</span><span class="o">(),</span> <span class="s">"my"</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>The custom file type consumes an icon, which is retrieved from a GWT resource:</p>
<p><em>che/samples/sample-plugin-filetype/che-sample-plugin-filetype-ide/src/main/java/org/eclipse/che/plugin/filetype/ide/MyResources.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">plugin</span><span class="o">.</span><span class="na">myextension</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">MyResources</span>
<span class="kd">public</span> <span class="kd">interface</span> <span class="nc">MyResources</span> <span class="kd">extends</span> <span class="n">ClientBundle</span> <span class="o">{</span>
<span class="n">MyResources</span> <span class="n">INSTANCE</span> <span class="o">=</span> <span class="n">GWT</span><span class="o">.</span><span class="na">create</span><span class="o">(</span><span class="n">MyResources</span><span class="o">.</span><span class="na">class</span><span class="o">);</span>
<span class="nd">@Source</span><span class="o">(</span><span class="s">"icons/my.svg"</span><span class="o">)</span>
<span class="n">SVGResource</span> <span class="nf">icon</span><span class="o">();</span>
<span class="o">}</span>
</code></pre>
</div>
<p>The icon itself is a svg image located in the resources of the extension:
<a href="https://github.com/eclipse/che/tree/master/samples/sample-plugin-json/che-sample-plugin-json-ide/src/main/resources/org/eclipse/che/plugin/jsonexample">https://github.com/eclipse/che/tree/master/samples/sample-plugin-json/che-sample-plugin-json-ide/src/main/resources/org/eclipse/che/plugin/jsonexample</a></p>
<p>To register the custom file type at Che’s Editor registry, we create another class called <code class="highlighter-rouge">MyExtension</code>. Again, we name this class more generically, as it will additionally contain other extensions to the IDE. The extension gets the new file type and the <code class="highlighter-rouge">FileTypeRegistry</code> injected and creates the file type registration.</p>
<p><em>che/samples/sample-plugin-filetype/che-sample-plugin-filetype-ide/src/main/java/org/eclipse/che/plugin/filetype/ide/MyFileTypeExtension.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">plugin</span><span class="o">.</span><span class="na">myextension</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">MyExtension</span>
<span class="nd">@Extension</span><span class="o">(</span><span class="n">title</span> <span class="o">=</span> <span class="s">"My FileType Extension"</span><span class="o">)</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">MyFileTypeExtension</span> <span class="o">{</span>
<span class="nd">@Inject</span>
<span class="kd">private</span> <span class="kt">void</span> <span class="nf">registerFileType</span><span class="o">(</span>
<span class="kd">final</span> <span class="n">FileTypeRegistry</span> <span class="n">fileTypeRegistry</span><span class="o">,</span>
<span class="kd">final</span> <span class="nd">@Named</span><span class="o">(</span><span class="s">"MyFileType"</span><span class="o">)</span> <span class="n">FileType</span> <span class="n">myFileType</span><span class="o">)</span> <span class="o">{</span>
<span class="o">/...</span>
<span class="n">fileTypeRegistry</span><span class="o">.</span><span class="na">registerFileType</span><span class="o">(</span><span class="n">myFileType</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>After registering the file type, Che can map the extension to the definition of the file type. Therefore, Che will use the defined icon, if you create a file with the new extension <code class="highlighter-rouge">my</code> (as shown in the following screenshot). As we have not yet defined any editor type, Che will open the new file type in the default text editor and it will assume, that the content type is plain text.</p>
<p><img src="../../../docs/assets/imgs/image.png" alt="image.png" /></p>
<p>As you can see in the screenshot above, Che will open any new file type in the default editor. This even works without defining any editor extension. You might want to contribute another editor type for the new file type later. This is done by adding an editor extension and associating the file type with an editor provider. We will cover this more in detail in the section <a href="#code-completion">Code Completion</a>. As we do not have a custom editor provider, yet, the following example code associates the example file type with the default text editor. Please note, this step is redundant in this example, as Che will associate any unknown file type with the default editor anyways.</p>
<p>Since we might want to add more extensions to the editor, again, we use a more generic name for the extension class. As we extend the Che default editor, written in JavaScript and internally referred to a “JSEditor”, we follow the convention of other existing plugins and call the extension <code class="highlighter-rouge">MyJsEditorExtension</code>. The following extension class gets the <code class="highlighter-rouge">EditorRegistry</code>, the file type and the <code class="highlighter-rouge">DefaultTextEditorProvider</code> injected and creates the editor registration. As mentioned, this will have no visible effect in the example. However, if we would replace the Default Text Editor Provider with our own provider (<code class="highlighter-rouge">CustomEditorProvider</code>), we could extend or replace the editor used for our new file type.</p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">plugin</span><span class="o">.</span><span class="na">myextension</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">MyJsEditorExtension</span>
<span class="nd">@Extension</span><span class="o">(</span><span class="n">title</span> <span class="o">=</span> <span class="s">"My JS Editor Extension"</span><span class="o">)</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">MyJsEditorExtension</span> <span class="o">{</span>
<span class="nd">@Inject</span>
<span class="kd">public</span> <span class="nf">MyJsEditorExtension</span><span class="o">(</span><span class="kd">final</span> <span class="n">EditorRegistry</span> <span class="n">editorRegistry</span><span class="o">,</span>
<span class="kd">final</span> <span class="nd">@Named</span><span class="o">(</span><span class="s">"MyFileType"</span><span class="o">)</span> <span class="n">FileType</span> <span class="n">myFile</span><span class="o">,</span>
<span class="kd">final</span> <span class="n">CustomEditorProvider</span> <span class="n">editorProvider</span><span class="o">)</span> <span class="o">{</span>
<span class="n">editorRegistry</span><span class="o">.</span><span class="na">registerDefaultEditor</span><span class="o">(</span><span class="n">myFile</span><span class="o">,</span> <span class="n">editorProvider</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>So far, we have defined a new file type, which can be opened with the default text editor. Currently, the text editor provides no syntax highlighting and code completion, as it knows nothing about the format or grammar of our new language. The syntax highlighting of the default editor is actually provided by the embedded orion editor (referred to as JSEditor). Please refer to the section <a href="#syntax-highlighting">syntax highlighting</a> to learn how to extend it and add syntax highlighting for the new file type.</p>
<p>Further, the new file type can only be created using the generic “New” action and enter the extension manually. If you want to define a custom action, visible in the “New” menu, please refer to the section New File Actions.</p>
<h2 id="json-file-type-already-supported-by-che">JSON File Type (already supported by Che)</h2>
<p>The continuous JSON example, which is used throughout this tutorial uses the file type “.json”. As Che already registeres a JSON file type out of the box, that means, the necessary registrations, described above for the “my” file type example are already existing in the Che core framework. For reference, the corresponding registrations can be found in the following classes and can be used as another example.</p>
<h3 id="file-type-definition">File Type Definition</h3>
<p><em>che/core/ide/che-core-ide-app/src/main/java/org/eclipse/che/ide/filetypes/FileTypeModule.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">core</span><span class="o">/</span><span class="n">ide</span><span class="o">/</span><span class="n">che</span><span class="o">-</span><span class="n">core</span><span class="o">-</span><span class="n">ide</span><span class="o">-</span><span class="n">app</span><span class="o">/</span><span class="n">src</span><span class="o">/</span><span class="n">main</span><span class="o">/</span><span class="n">java</span><span class="o">/</span><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">filetypes</span><span class="o">.</span><span class="na">FileTypeModule</span> <span class="o">(</span><span class="n">alongside</span> <span class="n">with</span> <span class="n">other</span> <span class="n">file</span> <span class="n">types</span><span class="o">)</span>
<span class="nd">@Provides</span>
<span class="nd">@Singleton</span>
<span class="nd">@Named</span><span class="o">(</span><span class="s">"JsonFileType"</span><span class="o">)</span>
<span class="kd">protected</span> <span class="n">FileType</span> <span class="nf">provideJsonFile</span><span class="o">(</span><span class="n">Resources</span> <span class="n">resources</span><span class="o">)</span> <span class="o">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nf">FileType</span><span class="o">(</span><span class="n">resources</span><span class="o">.</span><span class="na">jsonFile</span><span class="o">(),</span> <span class="s">"json"</span><span class="o">);</span>
<span class="o">}</span>
</code></pre>
</div>
<h3 id="file-type-registration">File Type Registration</h3>
<p><em>che/core/ide/che-core-ide-app/src/main/java/org/eclipse/che/ide/core/StandardComponent.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">core</span><span class="o">/</span><span class="n">ide</span><span class="o">/</span><span class="n">che</span><span class="o">-</span><span class="n">core</span><span class="o">-</span><span class="n">ide</span><span class="o">-</span><span class="n">app</span><span class="o">/</span><span class="n">src</span><span class="o">/</span><span class="n">main</span><span class="o">/</span><span class="n">java</span><span class="o">/</span><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">core</span><span class="o">.</span><span class="na">StandardComponentInitializer</span>
<span class="n">fileTypeRegistry</span><span class="o">.</span><span class="na">registerFileType</span><span class="o">(</span><span class="n">jsonFile</span><span class="o">);</span>
</code></pre>
</div>
<h3 id="resources">Resources</h3>
<p><em>che/core/ide/che-core-ide-app/src/main/java/org/eclipse/che/ide/Resources.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">core</span><span class="o">/</span><span class="n">ide</span><span class="o">/</span><span class="n">che</span><span class="o">-</span><span class="n">core</span><span class="o">-</span><span class="n">ide</span><span class="o">-</span><span class="n">app</span><span class="o">/</span><span class="n">src</span><span class="o">/</span><span class="n">main</span><span class="o">/</span><span class="n">java</span><span class="o">/</span><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">Resources</span>
<span class="nd">@Source</span><span class="o">(</span><span class="s">"defaulticons/json.svg"</span><span class="o">)</span>
<span class="n">SVGResource</span> <span class="nf">jsonFile</span><span class="o">();</span>
</code></pre>
</div>
<p>Based on these existing registrations, Che will show the JSON file type as shown in the following screenshot. As JSON is a known format to the embedded Orion editor, it will also already provide syntax highlighting.</p>
<p><img src="../../../docs/assets/imgs/image01.png" alt="image01.png" /></p>
<h2 id="code-completion">Code Completion</h2>
<p>This part of the tutorial describes how the code-completion of Che’s default code editor can be extended through new suggestions. This also enables you to add code-completion for completely new languages. The following diagram shows all components of a typical file type registration. The classes highlighted in dark grey are to be implemented for the extension.</p>
<p><img src="../../../docs/assets/imgs/image06.png" alt="image06.png" />
First, we need to register a custom editor provider, <code class="highlighter-rouge">MyEditorProvider</code>, which plugs in our custom code completion. If you did not register a custom editor provider before, Che will use the <code class="highlighter-rouge">DefaultEditorProvider</code>, which we now replace. This is done in a class <code class="highlighter-rouge">JsEditorExtension</code> which contains all potential extensions for the JSEditor.</p>
<p>An editor provider is responsible for configuring a specific editor type. Therefore, it provides an <code class="highlighter-rouge">EditorConfiguration</code>, which is responsible for editor features such as code completion, quick assist or code formatting. To provide custom code completion, the <code class="highlighter-rouge">EditorConfiguration</code> needs to create a custom <code class="highlighter-rouge">CodeAssistProcessor</code>.</p>
<p>In the following example, we will describe how to provide a custom code completion to the existing JSON example editor. For simplicity, the code completion will just return a static list of keywords, however, the example can be extended to provide more sophisticated completion processing.</p>
<p>As a first step, we register a custom <code class="highlighter-rouge">JsonExampleEditorProvider</code>:</p>
<p><em>che/samples/sample-plugin-json/che-sample-plugin-json-ide/src/main/java/org/eclipse/che/plugin/jsonexample/ide/JsonExampleEditorExtension.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">plugin</span><span class="o">.</span><span class="na">jsonexample</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">JsonExampleJsEditorExtension</span>
<span class="nd">@Extension</span><span class="o">(</span><span class="n">title</span> <span class="o">=</span> <span class="s">"JSON Example Editor"</span><span class="o">)</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">JsonExampleJsEditorExtension</span> <span class="o">{</span>
<span class="nd">@Inject</span>
<span class="kd">public</span> <span class="nf">JsonExampleJsEditorExtension</span><span class="o">(</span>
<span class="kd">final</span> <span class="n">EditorRegistry</span> <span class="n">editorRegistry</span><span class="o">,</span>
<span class="kd">final</span> <span class="nd">@Named</span><span class="o">(</span><span class="s">"JsonFileType"</span><span class="o">)</span> <span class="n">FileType</span> <span class="n">jsonFile</span><span class="o">,</span>
<span class="kd">final</span> <span class="n">JsonExampleEditorProvider</span> <span class="n">editorProvider</span><span class="o">)</span> <span class="o">{</span>
<span class="n">editorRegistry</span><span class="o">.</span><span class="na">registerDefaultEditor</span><span class="o">(</span><span class="n">jsonFile</span><span class="o">,</span> <span class="n">editorProvider</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>An Editor Provider needs to implement the interface <code class="highlighter-rouge">EditorProvider</code>. If you want to use the default editor configuration, you can inherit from <code class="highlighter-rouge">AbstractTextEditorProvider</code>, in this case, you just need to define an ID and a description. Additionally, you can optionally create a custom <code class="highlighter-rouge">EditorPartPresenter</code> by implementing the method <code class="highlighter-rouge">getEditor</code>. If you do not implement <code class="highlighter-rouge">getEditor</code>, the default editor will be created by <code class="highlighter-rouge">AbstractTextEditorProvider</code>.
In this tutorial, we create an extension for the existing <code class="highlighter-rouge">DefaultTextEditor</code>. Therefore, we first retrieve the existing editor from the <code class="highlighter-rouge">DefaultEditorProvider</code> and initialize it with our new custom editor configuration <code class="highlighter-rouge">JsonExampleEditorConfiguration</code>, which will add the custom auto-completion to the editor.</p>
<p><em>che/samples/sample-plugin-json/che-sample-plugin-json-ide/src/main/java/org/eclipse/che/plugin/jsonexample/ide/editor/JsonExampleEditorProvider.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">plugin</span><span class="o">.</span><span class="na">jsonexample</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">editor</span><span class="o">.</span><span class="na">JsonExampleEditorProvider</span>
<span class="cm">/**
* The JSON Example specific {@link EditorProvider}.
*/</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">JsonExampleEditorProvider</span> <span class="kd">extends</span> <span class="n">AbstractTextEditorProvider</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">JsonExampleEditorConfigurationFactory</span> <span class="n">editorConfigurationFactory</span><span class="o">;</span>
<span class="cm">/**
* Constructor.
*
* @param editorConfigurationFactory
* the JSON Example Editor configuration factory
*/</span>
<span class="nd">@Inject</span>
<span class="kd">public</span> <span class="nf">JsonExampleEditorProvider</span><span class="o">(</span>
<span class="kd">final</span> <span class="n">JsonExampleEditorConfigurationFactory</span> <span class="n">editorConfigurationFactory</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="na">editorConfigurationFactory</span> <span class="o">=</span> <span class="n">editorConfigurationFactory</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">String</span> <span class="nf">getId</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="s">"JsonExampleEditor"</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">String</span> <span class="nf">getDescription</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="s">"JSON Example Editor"</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">TextEditor</span> <span class="nf">getEditor</span><span class="o">()</span> <span class="o">{</span>
<span class="n">TextEditor</span> <span class="n">editor</span> <span class="o">=</span> <span class="kd">super</span><span class="o">.</span><span class="na">getEditor</span><span class="o">();</span>
<span class="n">TextEditorConfiguration</span> <span class="n">configuration</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="na">editorConfigurationFactory</span><span class="o">.</span><span class="na">create</span><span class="o">(</span><span class="n">editor</span><span class="o">);</span>
<span class="n">editor</span><span class="o">.</span><span class="na">initialize</span><span class="o">(</span><span class="n">configuration</span><span class="o">);</span>
<span class="k">return</span> <span class="n">editor</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>As we just want to adapt the code completion, the example implementation of the editor configuration inherits from the existing <code class="highlighter-rouge">DefaultTextEditorConfiguration</code>. The method <code class="highlighter-rouge">getContentAssistantProcessors</code> is expected to return a mapping from content types to <code class="highlighter-rouge">CodeAssistProcessors</code>. In our case, if this mapping has exactly one entry registering the custom <code class="highlighter-rouge">JsonExampleCodeAssistProcessor</code> for the default content type.</p>
<p><em>che/samples/sample-plugin-json/che-sample-plugin-json-ide/src/main/java/org/eclipse/che/plugin/jsonexample/ide/editor/JsonExampleEditorConfiguration.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">plugin</span><span class="o">.</span><span class="na">jsonexample</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">editor</span><span class="o">.</span><span class="na">JsonExampleEditorConfiguration</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">JsonExampleEditorConfiguration</span> <span class="kd">extends</span> <span class="n">AutoSaveTextEditorConfiguration</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">Map</span><span class="o">&lt;</span><span class="n">String</span><span class="o">,</span> <span class="n">CodeAssistProcessor</span><span class="o">&gt;</span> <span class="n">codeAssist</span><span class="o">;</span>
<span class="kd">public</span> <span class="nf">JsonExampleEditorConfiguration</span><span class="o">()</span> <span class="o">{</span>
<span class="n">codeAssist</span> <span class="o">=</span> <span class="k">new</span> <span class="n">LinkedHashMap</span><span class="o">&lt;&gt;();</span>
<span class="n">codeAssist</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="n">DEFAULT_CONTENT_TYPE</span><span class="o">,</span> <span class="k">new</span> <span class="n">JsonExampleCodeAssistProcessor</span><span class="o">());</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">Map</span><span class="o">&lt;</span><span class="n">String</span><span class="o">,</span> <span class="n">CodeAssistProcessor</span><span class="o">&gt;</span> <span class="nf">getContentAssistantProcessors</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">codeAssist</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>A <code class="highlighter-rouge">CodeAssistProcessor</code> is responsible for calculating <code class="highlighter-rouge">CompletionProposals</code>. Therefore, it gets the editor, from which the completion was triggered, the current offset in this editor and a callback to be filled with completion proposals. In this example, we fill the list of proposals with three <code class="highlighter-rouge">SimpleCompletionProposals</code> (see below) containing static Strings (“firstName”, “lastName” and “age”). In a real completion use case, this simple and static example is to be replaced with a more advanced proposal calculation. If any exception occurs during the computation of the completion proposals, e.g. the server is not reachable, a corresponding message should be returned in <code class="highlighter-rouge">#getErrorMessage</code>.</p>
<p><em>che/samples/sample-plugin-json/che-sample-plugin-json-ide/src/main/java/org/eclipse/che/plugin/jsonexample/ide/editor/JsonExampleCodeAssistProcessor.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">class</span> <span class="nc">JsonExampleCodeAssistProcessor</span> <span class="kd">implements</span> <span class="n">CodeAssistProcessor</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="nf">computeCompletionProposals</span><span class="o">(</span><span class="n">TextEditor</span> <span class="n">editor</span><span class="o">,</span>
<span class="kt">int</span> <span class="n">offset</span><span class="o">,</span>
<span class="n">CodeAssistCallback</span> <span class="n">callback</span><span class="o">)</span> <span class="o">{</span>
<span class="n">List</span><span class="o">&lt;</span><span class="n">CompletionProposal</span><span class="o">&gt;</span> <span class="n">proposals</span> <span class="o">=</span> <span class="k">new</span> <span class="n">ArrayList</span><span class="o">&lt;&gt;();</span>
<span class="n">proposals</span><span class="o">.</span><span class="na">addAll</span><span class="o">(</span><span class="n">Arrays</span><span class="o">.</span><span class="na">asList</span><span class="o">(</span>
<span class="k">new</span> <span class="nf">SimpleCompletionProposal</span><span class="o">(</span><span class="s">"firstName"</span><span class="o">),</span>
<span class="k">new</span> <span class="nf">SimpleCompletionProposal</span><span class="o">(</span><span class="s">"lastName"</span><span class="o">),</span>
<span class="k">new</span> <span class="nf">SimpleCompletionProposal</span><span class="o">(</span><span class="s">"age"</span><span class="o">)</span>
<span class="o">));</span>
<span class="n">callback</span><span class="o">.</span><span class="na">proposalComputed</span><span class="o">(</span><span class="n">proposals</span><span class="o">);</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">String</span> <span class="nf">getErrorMessage</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="kc">null</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>A <code class="highlighter-rouge">CompletionProposal</code> represents a completion option to be displayed when the users trigger auto-completion in the editor. Therefore, it shows all necessary information for the user and allows to select the right proposal to be applied. The following example shows a code proposal based on a static String, which is retrieved as a parameter in the constructor. This String is used as the displayed name and, along with the defined icon, will be shown to the user in the proposal list. Finally, once the user has selected a proposal which should be applied, the <code class="highlighter-rouge">CompletionProposal</code> returns the <code class="highlighter-rouge">Completion</code> (using a callback) in the <code class="highlighter-rouge">#getCompletion</code> method.</p>
<p><em>che/samples/sample-plugin-json/che-sample-plugin-json-ide/src/main/java/org/eclipse/che/plugin/jsonexample/ide/editor/JsonExampleCodeAssistProcessor.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">plugin</span><span class="o">.</span><span class="na">jsonexample</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">editor</span><span class="o">.</span><span class="na">SimpleCompletionProposal</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">SimpleCompletionProposal</span> <span class="kd">implements</span> <span class="n">CompletionProposal</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">String</span> <span class="n">proposal</span><span class="o">;</span>
<span class="kd">public</span> <span class="nf">SimpleCompletionProposal</span><span class="o">(</span><span class="n">String</span> <span class="n">proposal</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="na">proposal</span> <span class="o">=</span> <span class="n">proposal</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">Widget</span> <span class="nf">getAdditionalProposalInfo</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="kc">null</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">String</span> <span class="nf">getDisplayString</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">proposal</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">Icon</span> <span class="nf">getIcon</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nf">Icon</span><span class="o">(</span><span class="s">""</span><span class="o">,</span> <span class="n">JsonExampleResources</span><span class="o">.</span><span class="na">INSTANCE</span><span class="o">.</span><span class="na">completion</span><span class="o">());</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="nf">getCompletion</span><span class="o">(</span><span class="n">CompletionCallback</span> <span class="n">callback</span><span class="o">)</span> <span class="o">{</span>
<span class="n">callback</span><span class="o">.</span><span class="na">onCompletion</span><span class="o">(</span><span class="k">new</span> <span class="n">SimpleCompletion</span><span class="o">(</span><span class="n">proposal</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p><img src="../../../docs/assets/imgs/image13.png" alt="image13.png" />
A <code class="highlighter-rouge">Completion</code> is finally responsible for applying a proposal, once the user has selected one. Therefore, after accessing the Document it can apply any text change necessary. In the following example, we append the static String of the <code class="highlighter-rouge">Completion</code> at the current offset. The <code class="highlighter-rouge">#getSelection</code> method can optionally set a new selection in the editor after the proposal has been applied. This is done in absolute document coordinates. Returning <code class="highlighter-rouge">null</code> (as in the example) will not set any new selection.</p>
<p><em>che/samples/sample-plugin-json/che-sample-plugin-json-ide/src/main/java/org/eclipse/che/plugin/jsonexample/ide/editor/SimpleCompletion.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">plugin</span><span class="o">.</span><span class="na">jsonexample</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">editor</span><span class="o">.</span><span class="na">SimpleCompletion</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">SimpleCompletion</span> <span class="kd">implements</span> <span class="n">Completion</span> <span class="o">{</span>
<span class="kd">private</span> <span class="kd">final</span> <span class="n">String</span> <span class="n">proposal</span><span class="o">;</span>
<span class="kd">public</span> <span class="nf">SimpleCompletion</span><span class="o">(</span><span class="n">String</span> <span class="n">proposal</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="na">proposal</span> <span class="o">=</span> <span class="n">proposal</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="nf">apply</span><span class="o">(</span><span class="n">Document</span> <span class="n">document</span><span class="o">)</span> <span class="o">{</span>
<span class="n">document</span><span class="o">.</span><span class="na">replace</span><span class="o">(</span>
<span class="n">document</span><span class="o">.</span><span class="na">getCursorOffset</span><span class="o">(),</span>
<span class="n">proposal</span><span class="o">.</span><span class="na">length</span><span class="o">(),</span>
<span class="n">proposal</span>
<span class="o">);</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">LinearRange</span> <span class="nf">getSelection</span><span class="o">(</span><span class="n">Document</span> <span class="n">document</span><span class="o">)</span> <span class="o">{</span>
<span class="k">return</span> <span class="kc">null</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>In the example, we have shown, how to extend the code completion and used a static list of Strings. However, in a real world example, the calculation of the available proposals might, of course, be more complex. Furthermore, our example completion happens entirely on the client-site, without accessing the server or the workspace. If you need to access dependencies or other resources of a project, please see here to learn how to implement server site services to be used for more advanced code completion.</p>
<h2 id="syntax-highlighting">Syntax Highlighting</h2>
<p>Syntax highlighting allows you to mark characters and keywords in certain colors, based on a given grammar. To enable syntax highlighting in the browser IDE, Che embeds the existing <a href="https://wiki.eclipse.org/Orion">Orion Editor</a>. It already provides a wide range of supported grammars to be used. Please refer to the section “contentType parameter” within <a href="https://wiki.eclipse.org/Orion/How_Tos/Code_Edit">this document</a> for a list of supported types.</p>
<p>If the orion editor already knows the language you want to support, you need to associate the file extension with the content type defined by orion. As an example, we could associate our a custom file type <code class="highlighter-rouge">.my</code> (<a href="#file-types">see here for its definition</a>) with the existing content type <code class="highlighter-rouge">Json</code>, which is already supported by the Orion editor. Therefore, we add the following line to <code class="highlighter-rouge">org.eclipse.che.ide.jseditor.client.filetype.ExtensionFileTypeIdentifier</code>:</p>
<p><em>che/core/ide/che-core-ide-api/src/main/java/org/eclipse/che/ide/api/editor/filetype/ExtensionFileTypeIdentifier.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="n">org</span><span class="o">.</span><span class="na">eclipse</span><span class="o">.</span><span class="na">che</span><span class="o">.</span><span class="na">ide</span><span class="o">.</span><span class="na">jseditor</span><span class="o">.</span><span class="na">client</span><span class="o">.</span><span class="na">filetype</span><span class="o">.</span><span class="na">ExtensionFileTypeIdentifier</span>
<span class="c1">//...</span>
<span class="k">this</span><span class="o">.</span><span class="na">mappings</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="s">"my"</span><span class="o">,</span> <span class="n">makeList</span><span class="o">(</span><span class="s">"application/json"</span><span class="o">));</span>
<span class="c1">//...</span>
</code></pre>
</div>
<p>By adding this mapping, the embedded Orion editor will now provide the JSON syntax highlighting for our custom file type.</p>
<p><img src="../../../docs/assets/imgs/image01.png" alt="image01.png" />
To adapt or extend the syntax highlighting of the orion editor, please have a look at the <a href="https://wiki.eclipse.org/Orion/Documentation/Developer_Guide/Plugging_into_the_editor#orion.edit.highlighter">Orion Documentation</a>.</p>
<h3 id="add-syntax-highlighting-for-your-own-language">Add syntax highlighting for your own language</h3>
<p>There are two options how you can add a syntax highlighting for your own language:</p>
<ul>
<li>Add the highlighting of content type, supported by Orion, but not by IDE.
Add extension with mime type to <a href="https://github.com/eclipse/che/blob/master/ide/che-core-ide-api/src/main/java/org/eclipse/che/ide/api/editor/filetype/ExtensionFileTypeIdentifier.java">File Extension Registry</a>. For example:</li>
</ul>
<p><em>/che/ide/che-core-ide-api/src/main/java/org/eclipse/che/ide/api/editor/filetype/ExtensionFileTypeIdentifier.java</em></p>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="c1">//...</span>
<span class="k">this</span><span class="o">.</span><span class="na">mappings</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="s">"ino"</span><span class="o">,</span> <span class="n">makeList</span><span class="o">(</span><span class="s">"text/x-c++src"</span><span class="o">));</span>
<span class="o">...</span><span class="c1">//</span>
</code></pre>
</div>
<ul>
<li>You can configure arbitrary new contentTypes and corresponding highlight configuration.
Usage example:</li>
</ul>
<div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="nd">@Inject</span>
<span class="kd">protected</span> <span class="kt">void</span> <span class="nf">configureContentType</span><span class="o">(</span><span class="kd">final</span> <span class="n">OrionContentTypeRegistrant</span> <span class="n">contentTypeRegistrant</span><span class="o">)</span> <span class="o">{</span>
<span class="c1">// register content type and configure orion</span>
<span class="kd">final</span> <span class="n">String</span> <span class="n">contentTypeId</span> <span class="o">=</span> <span class="s">"text/x-testlang"</span><span class="o">;</span>
<span class="n">OrionContentTypeOverlay</span> <span class="n">contentType</span> <span class="o">=</span> <span class="n">OrionContentTypeOverlay</span><span class="o">.</span><span class="na">create</span><span class="o">();</span>
<span class="n">contentType</span><span class="o">.</span><span class="na">setId</span><span class="o">(</span><span class="n">contentTypeId</span><span class="o">);</span>
<span class="n">contentType</span><span class="o">.</span><span class="na">setName</span><span class="o">(</span><span class="s">"Test Language"</span><span class="o">);</span>
<span class="n">contentType</span><span class="o">.</span><span class="na">setExtension</span><span class="o">(</span><span class="s">"testlang"</span><span class="o">);</span>
<span class="n">contentType</span><span class="o">.</span><span class="na">setExtends</span><span class="o">(</span><span class="s">"text/plain"</span><span class="o">);</span>
<span class="c1">// highlighting</span>
<span class="n">OrionHighlightingConfigurationOverlay</span> <span class="n">config</span> <span class="o">=</span> <span class="n">OrionHighlightingConfigurationOverlay</span><span class="o">.</span><span class="na">create</span><span class="o">();</span>
<span class="n">config</span><span class="o">.</span><span class="na">setId</span><span class="o">(</span><span class="s">"testlang.highlighting"</span><span class="o">);</span>
<span class="n">config</span><span class="o">.</span><span class="na">setContentTypes</span><span class="o">(</span><span class="n">contentTypeId</span><span class="o">);</span>
<span class="n">config</span><span class="o">.</span><span class="na">setPatterns</span><span class="o">(</span>
<span class="s">"[\n"</span> <span class="o">+</span>
<span class="s">" {include: \"orion.lib#string_doubleQuote\"},\n"</span> <span class="o">+</span>
<span class="s">" {include: \"orion.lib#string_singleQuote\"},\n"</span> <span class="o">+</span>
<span class="s">" {include: \"orion.lib#brace_open\"},\n"</span> <span class="o">+</span>
<span class="s">" {include: \"orion.lib#brace_close\"},\n"</span> <span class="o">+</span>
<span class="s">" {include: \"orion.lib#bracket_open\"},\n"</span> <span class="o">+</span>
<span class="s">" {include: \"orion.lib#bracket_close\"},\n"</span> <span class="o">+</span>
<span class="s">" {include: \"orion.lib#parenthesis_open\"},\n"</span> <span class="o">+</span>
<span class="s">" {include: \"orion.lib#parenthesis_close\"},\n"</span> <span class="o">+</span>
<span class="s">" {include: \"orion.lib#number_decimal\"},\n"</span> <span class="o">+</span>
<span class="s">" {include: \"orion.lib#number_hex\"},\n"</span> <span class="o">+</span>
<span class="s">" {\n"</span> <span class="o">+</span>
<span class="s">" match: \"\\\\b(?:false|true)\\\\b\",\n"</span> <span class="o">+</span>
<span class="s">" name: \"keyword.json\"\n"</span> <span class="o">+</span>
<span class="s">" }\n"</span> <span class="o">+</span>
<span class="s">"]"</span><span class="o">);</span>
<span class="n">contentTypeRegistrant</span><span class="o">.</span><span class="na">registerFileType</span><span class="o">(</span><span class="n">contentType</span><span class="o">,</span> <span class="n">config</span><span class="o">);</span>
<span class="o">}</span>
</code></pre>
</div>
</article>
</div>
<div class="unit one-fifth hide-on-mobiles">
<aside>
<h4>SETUP</h4>
<ul>
<li class=""><a href="../../../docs/index.html">Introduction</a></li>
<li class=""><a href="../../../docs/setup/getting-started/index.html">Getting Started&#58 Local</a></li>
<li class=""><a href="../../../docs/setup/getting-started-saas-cloud/index.html">Getting Started&#58 SaaS Cloud</a></li>
<li class=""><a href="../../../docs/setup/configuration/index.html">Configuration</a></li>
<li class=""><a href="../../../docs/setup/managing/index.html">Managing</a></li>
<li class=""><a href="../../../docs/setup/cli/index.html">CLI Reference</a></li>
<li class=""><a href="../../../docs/setup/glossary/index.html">Glossary</a></li>
<li class=""><a href="../../../docs/setup/docker/index.html">Docker Installation</a></li>
<li class=""><a href="../../../docs/setup/openshift/index.html">OpenShift Installation</a></li>
<li class=""><a href="../../../docs/setup/selenium/index.html">How to run selenium tests</a></li>
</ul>
<h4>WORKSPACE ADMINISTRATION</h4>
<ul>
<li class=""><a href="../../../docs/devops/intro/index.html">Introduction</a></li>
<li class=""><a href="../../../docs/devops/runtime-stacks/index.html">Runtime Stacks</a></li>
<li class=""><a href="../../../docs/devops/runtime-recipes/index.html">Runtime Recipes</a></li>
<li class=""><a href="../../../docs/devops/project-samples/index.html">Project Samples</a></li>
<li class=""><a href="../../../docs/devops/runtime-machines/index.html">Runtime Machines</a></li>
<li class=""><a href="../../../docs/devops/volume-mounts/index.html">Volume Mounts</a></li>
<li class=""><a href="../../../docs/devops/ws-agents/index.html">Workspace Agents</a></li>
<li class=""><a href="../../../docs/devops/workspaces-data-model/index.html">Workspace Data Model</a></li>
<li class=""><a href="../../../docs/devops/runtime-stacks-data-model/index.html">Runtime Stacks Data Model</a></li>
<li class=""><a href="../../../docs/devops/project-samples-data-model/index.html">Project Samples Data Model</a></li>
</ul>
<h4>USER GUIDE</h4>
<ul>
<li class=""><a href="../../../docs/ide/projects/index.html">Projects</a></li>
<li class=""><a href="../../../docs/ide/import-a-project/index.html">Import</a></li>
<li class=""><a href="../../../docs/ide/ssh/index.html">SSH</a></li>
<li class=""><a href="../../../docs/ide/sync/index.html">Local IDE Sync</a></li>
<li class=""><a href="../../../docs/ide/editor-settings/index.html">Editor</a></li>
<li class=""><a href="../../../docs/ide/intellisense/index.html">Intellisense</a></li>
<li class=""><a href="../../../docs/ide/commands/index.html">Commands</a></li>
<li class=""><a href="../../../docs/ide/git-svn/index.html">Git and SVN</a></li>
<li class=""><a href="../../../docs/ide/previews/index.html">Previews</a></li>
<li class=""><a href="../../../docs/ide/build/index.html">Build</a></li>
<li class=""><a href="../../../docs/ide/run/index.html">Run</a></li>
<li class=""><a href="../../../docs/ide/sharing/index.html">Share</a></li>
<li class=""><a href="../../../docs/ide/debug/index.html">Debug</a></li>
<li class=""><a href="../../../docs/ide/docker/index.html">Docker</a></li>
<li class=""><a href="../../../docs/ide/electron/index.html">Install Che Desktop Client</a></li>
</ul>
<h4>PORTABLE WORKSPACES</h4>
<ul>
<li class=""><a href="../../../docs/chedir/getting-started/index.html">Chedir - Getting Started</a></li>
<li class=""><a href="../../../docs/chedir/why/index.html">Chedir - Why Chedir?</a></li>
<li class=""><a href="../../../docs/chedir/installation/index.html">Chedir - Installation</a></li>
<li class=""><a href="../../../docs/chedir/project-setup/index.html">Chedir - Project Setup</a></li>
<li class=""><a href="../../../docs/chedir/up-and-down/index.html">Chedir - Up and Down</a></li>
<li class=""><a href="../../../docs/chedir/chefiles/index.html">Chedir - Chefile</a></li>
<li class=""><a href="../../../docs/chedir/ssh/index.html">Chedir - SSH</a></li>
<li class=""><a href="../../../docs/chedir/factories/index.html">Chedir - Factories</a></li>
<li class=""><a href="../../../docs/factory/getting-started/index.html">Factory - Getting Started</a></li>
<li class=""><a href="../../../docs/factory/creating/index.html">Factory - Creating</a></li>
<li class=""><a href="../../../docs/factory/json-reference/index.html">Factory - JSON Reference</a></li>
</ul>
<h4>DEVELOPER GUIDE - REST API</h4>
<ul>
<li class=""><a href="../../../docs/assemblies/intro/index.html">Introduction</a></li>
<li class=""><a href="../../../docs/assemblies/archetype/index.html">Archetype</a></li>
<li class=""><a href="../../../docs/assemblies/assembly-lifecycle/index.html">Assembly Dev Lifecycle</a></li>
<li class=""><a href="../../../docs/assemblies/plugin-lifecycle/index.html">Plugin Lifecycle</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-rest-apis/index.html">SDK REST APIs</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-class-reference/index.html">SDK Class Reference</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-dependency-injection/index.html">SDK Dependency Injection</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-dto/index.html">SDK DTOs</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-properties/index.html">SDK Properties</a></li>
<li class="current"><a href="../../../docs/assemblies/sdk-code-editors/index.html">SDK Editors</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-embed-htmljs/index.html">SDK Embedded JavaScript</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-project-types/index.html">SDK Project Types</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-actions/index.html">SDK Actions</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-services/index.html">SDK Services</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-parts/index.html">SDK Parts</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-themes/index.html">SDK Themes</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-custom-agents/index.html">SDK Custom Agents</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-language-server-protocol/index.html">SDK Language Server Protocol</a></li>
<li class=""><a href="../../../docs/assemblies/sdk-workspace/index.html">SDK Workspace</a></li>
</ul>
</aside>
</div>
<div class="clear"></div>
</div>
</section>
<script>
var anchorForId = function (id) {
var anchor = document.createElement("a");
anchor.className = "header-link";
anchor.href = "#" + id;
anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>";
anchor.title = "Permalink";
return anchor;
};
var linkifyAnchors = function (level, containingElement) {
var headers = containingElement.getElementsByTagName("h" + level);
for (var h = 0; h < headers.length; h++) {
var header = headers[h];
if (typeof header.id !== "undefined" && header.id !== "") {
header.appendChild(anchorForId(header.id));
}
}
};
document.onreadystatechange = function () {
if (this.readyState === "complete") {
var contentBlock = document.getElementsByClassName("artik")[0] || document.getElementsByClassName("openshift")[0] || document.getElementsByClassName("tutorials")[0] || document.getElementsByClassName("docs")[0] || document.getElementsByClassName("news")[0];
if (!contentBlock) {
return;
}
for (var level = 1; level <= 6; level++) {
linkifyAnchors(level, contentBlock);
}
}
};
</script>
</body>
</html>