docs/assemblies/sdk-embed-htmljs/index.html - gerrit/www.eclipse.org/che - Git at Google



 <!-- 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 Embedded JavaScript -

       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=""><a href="../../../docs/assemblies/sdk-code-editors/index.html">SDK Editors</a></li>


     <li class="current"><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-embed-htmljs.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-embed-htmljs.md"><i class="fa fa-pencil"></i> &nbsp;Improve this page</a>-->
           </div>
           <div class="doc-title">
             <h1>SDK Embedded JavaScript</h1>
             <div class="doc-title-border">
             </div>
           </div>

 <p>The Che IDE is developed based on GWT. If you want to extend the Che UI with new UI components, the default is to develop those custom components using GWT, too. Please refer to <a href="../../../docs/assemblies/sdk-parts/index.html">this tutorial</a> to learn how to extend Che with new parts (view or editors).</p>

 <p>However, as Che is a browser application based on HTML and JavaScript, it is also possible to embed native web components. Those do not have to be based on GWT. This also enables you to reuse any kind of existing UI component in Che. As an existing example, Che embeds the Orion code editor.</p>

 <h1 id="details">Details</h1>
 <p>For instructions on how to build and run an extension, see <a href="../../../docs/assemblies/plugin-lifecycle/index.html">Building Extensions</a>.</p>

 <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="nx">Location</span><span class="err">:</span>     <span class="nx">github</span><span class="p">.</span><span class="nx">com</span><span class="o">/</span><span class="nx">eclipse</span><span class="o">/</span><span class="nx">che</span><span class="o">/</span><span class="nx">samples</span><span class="o">/</span><span class="nx">sample</span><span class="o">-</span><span class="nx">plugin</span><span class="o">-</span><span class="nx">embedjs</span>
 <span class="nl">Type</span><span class="p">:</span>         <span class="nx">IDE</span> <span class="nx">extension</span>
 <span class="nl">groupId</span><span class="p">:</span>      <span class="nx">org</span><span class="p">.</span><span class="nx">eclipse</span><span class="p">.</span><span class="nx">che</span><span class="p">.</span><span class="nx">sample</span>
 <span class="nl">artifactId</span><span class="p">:</span>   <span class="nx">che</span><span class="o">-</span><span class="nx">sample</span><span class="o">-</span><span class="nx">plugin</span><span class="o">-</span><span class="nx">embedjs</span><span class="o">-</span><span class="nx">ide</span>
 </code></pre>
 </div>

 <h1 id="steps">Steps</h1>
 <p>In this tutorial, we demonstrate, how to embed a minimal HTML/JavaScript component into Che. We will create a custom part, which shows a “Hello World” produced by a simple JavaScript snippet (see screenshot below). You can extend this example, to embed any HTML/JavaScript component you like.</p>

 <p><img src="../../../docs/assets/imgs/che_helloworld.png" alt="che_helloworld.png" /></p>

 <p>The following example is based on a simple part, which is opened by a sample action. Therefore, we recommend to get familiar with the implementation of <a href="../../../docs/assemblies/sdk-parts/index.html">Parts</a> and <a href="../../../docs/assemblies/sdk-actions/index.html">Actions</a> first.</p>

 <p>The <code class="highlighter-rouge">HelloWorldView</code> is a default view, in this example, the <code class="highlighter-rouge">HelloWorldView</code> just creates an empty Panel. The panel will finally be represented by a HTML element in the running browser application.</p>

 <p>In the <code class="highlighter-rouge">HelloWorldPresenter</code> we use the GWT <code class="highlighter-rouge">ScriptInjector</code> library to inject a custom script (helloWorld.js) into the main window of the browser application. Finally, we use <code class="highlighter-rouge">HelloWorldOverlay</code> to call the custom JavaScript from within our GWT application. In our example, it will modify the HTML element, which represents the Panel, and will add the “Hello World from JavaScript” text to it.</p>

 <p><img src="../../../docs/assets/imgs/Selection_017.png" alt="Selection_017.png" /></p>

 <p>The <code class="highlighter-rouge">HelloWorld.js</code> contains a simple function, which replaces the text content of an arbitrary element in the DOM. It could also add new elements and therefore embed an arbitrary sub component to running the browser application.</p>

 <p><em>che/samples/sample-plugin-embedjs/che-sample-plugin-embedjs-ide/src/main/resources/org/eclipse/che/plugin/embedjsexample/public/helloworld.js</em></p>

 <div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">HelloWorld</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">contents</span><span class="p">)</span> <span class="p">{</span>
     <span class="nx">element</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">contents</span><span class="p">;</span>
 <span class="p">};</span>
 </code></pre>
 </div>

 <p>To add the custom JavaScript function to the running application, we use the GWT ScriptInjector library. We load the JavaScript file and add it to the top window of the application. If adding the script was successful, we directly call the method <code class="highlighter-rouge">#sayHelloWorld</code> of the <code class="highlighter-rouge">HelloWordView</code>, which we explain in the following.</p>

 <div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="nd">@Singleton</span>
 <span class="kd">public</span> <span class="kd">class</span> <span class="nc">HelloWorldViewPresenter</span> <span class="kd">extends</span> <span class="n">BasePresenter</span> <span class="kd">implements</span> <span class="n">HelloWorldView</span><span class="o">.</span><span class="na">ActionDelegate</span><span class="o">,</span> <span class="n">HasView</span> <span class="o">{</span>

     <span class="kd">private</span> <span class="kd">final</span> <span class="n">HelloWorldView</span> <span class="n">helloWorldView</span><span class="o">;</span>

     <span class="nd">@Inject</span>
     <span class="kd">public</span> <span class="nf">HelloWorldViewPresenter</span><span class="o">(</span><span class="kd">final</span> <span class="n">HelloWorldView</span> <span class="n">helloWorldView</span><span class="o">)</span> <span class="o">{</span>
         <span class="k">this</span><span class="o">.</span><span class="na">helloWorldView</span> <span class="o">=</span> <span class="n">helloWorldView</span><span class="o">;</span>

         <span class="n">ScriptInjector</span><span class="o">.</span><span class="na">fromUrl</span><span class="o">(</span><span class="n">GWT</span><span class="o">.</span><span class="na">getModuleBaseURL</span><span class="o">()</span> <span class="o">+</span> <span class="n">Constants</span><span class="o">.</span><span class="na">JAVASCRIPT_FILE_ID</span><span class="o">)</span>
                 <span class="o">.</span><span class="na">setWindow</span><span class="o">(</span><span class="n">ScriptInjector</span><span class="o">.</span><span class="na">TOP_WINDOW</span><span class="o">)</span>
                 <span class="o">.</span><span class="na">setCallback</span><span class="o">(</span><span class="k">new</span> <span class="n">Callback</span><span class="o">&lt;</span><span class="n">Void</span><span class="o">,</span> <span class="n">Exception</span><span class="o">&gt;()</span> <span class="o">{</span>
                     <span class="nd">@Override</span>
                     <span class="kd">public</span> <span class="kt">void</span> <span class="nf">onSuccess</span><span class="o">(</span><span class="kd">final</span> <span class="n">Void</span> <span class="n">result</span><span class="o">)</span> <span class="o">{</span>
                         <span class="n">Log</span><span class="o">.</span><span class="na">info</span><span class="o">(</span><span class="n">HelloWorldViewPresenter</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="n">Constants</span><span class="o">.</span><span class="na">JAVASCRIPT_FILE_ID</span> <span class="o">+</span> <span class="s">" loaded."</span><span class="o">);</span>
                         <span class="n">sayHello</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">onFailure</span><span class="o">(</span><span class="kd">final</span> <span class="n">Exception</span> <span class="n">e</span><span class="o">)</span> <span class="o">{</span>
                         <span class="n">Log</span><span class="o">.</span><span class="na">error</span><span class="o">(</span><span class="n">HelloWorldViewPresenter</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="s">"Unable to load "</span><span class="o">+</span><span class="n">Constants</span><span class="o">.</span><span class="na">JAVASCRIPT_FILE_ID</span><span class="o">,</span> <span class="n">e</span><span class="o">);</span>
                     <span class="o">}</span>
                 <span class="o">}).</span><span class="na">inject</span><span class="o">();</span>

     <span class="o">}</span>

     <span class="kd">private</span> <span class="kt">void</span> <span class="nf">sayHello</span><span class="o">()</span> <span class="o">{</span>
         <span class="k">this</span><span class="o">.</span><span class="na">helloWorldView</span><span class="o">.</span><span class="na">sayHello</span><span class="o">(</span><span class="s">"Hello from Java Script!"</span><span class="o">);</span>
     <span class="o">}</span>
 </code></pre>
 </div>

 <p>The <code class="highlighter-rouge">HelloWorldViewImpl</code> creates an empty panel (which is defined in <code class="highlighter-rouge">che/samples/sample-plugin-embedjs/che-sample-plugin-embedjs-ide/src/main/java/org/eclipse/che/plugin/embedjsexample/ide/view/HelloWorldViewImpl.ui.xml</code>).</p>

 <p>Furthermore, it implement the method <code class="highlighter-rouge">#sayHello</code> and forwards it to <code class="highlighter-rouge">HelloWorldViewOverlay</code>.</p>

 <p><em>che/samples/sample-plugin-embedjs/che-sample-plugin-embedjs-ide/src/main/java/org/eclipse/che/plugin/embedjsexample/ide/view/HelloWorldViewImpl.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">HelloWorldViewImpl</span> <span class="kd">extends</span> <span class="n">BaseView</span><span class="o">&lt;</span><span class="n">HelloWorldView</span><span class="o">.</span><span class="na">ActionDelegate</span><span class="o">&gt;</span> <span class="kd">implements</span> <span class="n">HelloWorldView</span> <span class="o">{</span>

     <span class="kd">interface</span> <span class="nc">HelloWorldViewImplUiBinder</span> <span class="kd">extends</span> <span class="n">UiBinder</span><span class="o">&lt;</span><span class="n">Widget</span><span class="o">,</span> <span class="n">HelloWorldViewImpl</span><span class="o">&gt;</span> <span class="o">{</span>
     <span class="o">}</span>

     <span class="kd">private</span> <span class="kd">final</span> <span class="kd">static</span> <span class="n">HelloWorldViewImplUiBinder</span> <span class="n">UI_BINDER</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">HelloWorldViewImplUiBinder</span><span class="o">.</span><span class="na">class</span><span class="o">);</span>

     <span class="nd">@UiField</span>
     <span class="n">FlowPanel</span> <span class="n">helloWorldPanel</span><span class="o">;</span>

     <span class="nd">@Inject</span>
     <span class="kd">public</span> <span class="nf">HelloWorldViewImpl</span><span class="o">(</span><span class="n">PartStackUIResources</span> <span class="n">resources</span><span class="o">)</span> <span class="o">{</span>
         <span class="kd">super</span><span class="o">(</span><span class="n">resources</span><span class="o">);</span>
         <span class="n">setContentWidget</span><span class="o">(</span><span class="n">UI_BINDER</span><span class="o">.</span><span class="na">createAndBindUi</span><span class="o">(</span><span class="k">this</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">sayHello</span><span class="o">(</span><span class="n">String</span> <span class="n">content</span><span class="o">)</span> <span class="o">{</span>
         <span class="n">HelloWorldViewOverlay</span><span class="o">.</span><span class="na">sayHello</span><span class="o">(</span><span class="n">helloWorldPanel</span><span class="o">.</span><span class="na">getElement</span><span class="o">(),</span> <span class="n">content</span><span class="o">);</span>
         <span class="n">helloWorldPanel</span><span class="o">.</span><span class="na">setVisible</span><span class="o">(</span><span class="kc">true</span><span class="o">);</span>
     <span class="o">}</span>

 <span class="o">}</span>
 </code></pre>
 </div>
 <p>Finally the <code class="highlighter-rouge">HelloWorldOverlay</code> provides access to the JavaScript function and therefore redirects the Java method to a call of the <code class="highlighter-rouge">HelloWorld</code> function that we added before. Such overlays are used for communicating between the Che IDE, written in Java/GWT and native JavaScript components, which are embedded into it.</p>

 <div class="language-java highlighter-rouge"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">class</span> <span class="nc">HelloWorldViewOverlay</span> <span class="kd">extends</span> <span class="n">JavaScriptObject</span> <span class="o">{</span>

     <span class="kd">protected</span> <span class="nf">HelloWorldViewOverlay</span><span class="o">()</span> <span class="o">{</span>
     <span class="o">}</span>

     <span class="kd">public</span> <span class="kd">final</span> <span class="kd">static</span> <span class="kd">native</span> <span class="kt">void</span> <span class="nf">sayHello</span><span class="o">(</span><span class="kd">final</span> <span class="n">Element</span> <span class="n">element</span><span class="o">,</span> <span class="n">String</span> <span class="n">message</span><span class="o">)</span> <span class="cm">/*-{
         new $wnd.HelloWorld(element, contents);
     }-*/</span><span class="o">;</span>

 <span class="o">}</span>
 </code></pre>
 </div>

 <h1 id="use">Use</h1>
 <p>This particular extension adds an action to the main context menu group. This is the group that appears when you right click on the project tree. To verify that your plugin is installed, you can also check the Profile &gt; Preferences &gt; Plugins &gt; List to verify that the “Hello world from JavaScript example” plugin has been installed.
 <img src="../../../docs/assets/imgs/Capture_embed.PNG" alt="Capture_embed.PNG" /></p>

         </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=""><a href="../../../docs/assemblies/sdk-code-editors/index.html">SDK Editors</a></li>


     <li class="current"><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>