docs/parts.html - gerrit/www.eclipse.org/che - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="keywords" content="extensionsassemblydev-docs,  framework, UI, parts">
 <title>IDE UI: Parts | Eclipse Che Documentation</title>
 <link rel="stylesheet" href="css/syntax.css">

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
 <!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
 <link rel="stylesheet" href="css/modern-business.css">
 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <link rel="stylesheet" href="css/customstyles.css">
 <link rel="stylesheet" href="css/boxshadowproperties.css">
 <!-- most color styles are extracted out to here -->
 <link rel="stylesheet" href="css/theme-che.css">


     <link rel="stylesheet" href="/css/coderay.css" media="screen" type="text/css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" crossorigin="anonymous"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" crossorigin="anonymous"></script>
 <script src="js/jquery.navgoco.min.js"></script>


 <!-- Latest compiled and minified JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 <!-- Anchor.js -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/2.0.0/anchor.min.js" crossorigin="anonymous"></script>
 <script src="js/toc.js"></script>
 <script src="js/customscripts.js"></script>

 <link rel="shortcut icon" href="che/docs/images/favicon.ico">

 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->

 <link rel="alternate" type="application/rss+xml" title="che" href="http://0.0.0.0:4000/feed.xml">

     <script>
         $(document).ready(function() {
             // Initialize navgoco with default options
             $("#mysidebar").navgoco({
                 caretHtml: '',
                 accordion: true,
                 openClass: 'active', // open
                 save: false, // leave false or nav highlighting doesn't work right
                 cookie: {
                     name: 'navgoco',
                     expires: false,
                     path: '/'
                 },
                 slide: {
                     duration: 400,
                     easing: 'swing'
                 }
             });

             $("#collapseAll").click(function(e) {
                 e.preventDefault();
                 $("#mysidebar").navgoco('toggle', false);
             });

             $("#expandAll").click(function(e) {
                 e.preventDefault();
                 $("#mysidebar").navgoco('toggle', true);
             });

         });

     </script>
     <script>
         $(function () {
             $('[data-toggle="tooltip"]').tooltip()
         })
     </script>
     <script>
         $(document).ready(function() {
             $("#tg-sb-link").click(function() {
                 $("#tg-sb-sidebar").toggle();
                 $("#tg-sb-content").toggleClass('col-md-9');
                 $("#tg-sb-content").toggleClass('col-md-12');
                 $("#tg-sb-icon").toggleClass('fa-toggle-on');
                 $("#tg-sb-icon").toggleClass('fa-toggle-off');
             });
         });
     </script>


 </head>
 <body>
 <!-- Navigation -->
 <nav class="navbar navbar-inverse navbar-static-top">
     <div class="container topnavlinks">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
             <a class="fa fa-home fa-lg navbar-brand" href="index.html">&nbsp;<span class="projectTitle"> Eclipse Che Documentation</span></a>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav navbar-right">
                 <!-- toggle sidebar button -->
                 <li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>
                 <!-- entries without drop-downs appear here -->


                 <li><a href="https://medium.com/eclipse-che-blog/" target="_blank">Blog</a></li>


                 <li><a href="https://github.com/eclipse/che" target="_blank">Source Code</a></li>


                 <!-- entries with drop-downs appear here -->
                 <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->


                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Get Support<b class="caret"></b></a>
                     <ul class="dropdown-menu">


                         <li><a href="https://github.com/eclipse/che/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Akind%2Fbug" target="_blank">Known Bugs</a></li>


                         <li><a href="https://github.com/eclipse/che/issues/new" target="_blank">File an Issue</a></li>


                         <li><a href="https://stackoverflow.com/questions/tagged/eclipse-che" target="_blank">Che on StackOverflow</a></li>


                     </ul>
                 </li>


                 <!--
 			<li>


   <a class="email" title="Submit feedback" href="#" onclick="javascript:window.location='mailto:?subject= feedback&body=I have some feedback about the IDE UI: Parts page: ' + window.location.href;"><i class="fa fa-envelope-o"></i> Feedback</a>

 </li>
  -->

                 <!--comment out this block if you want to hide search-->
                 <li>
                     <!--start search-->
                     <div id="search-demo-container">
                         <input type="text" id="search-input" placeholder="search...">
                         <ul id="results-container"></ul>
                     </div>
                     <script src="js/jekyll-search.js" type="text/javascript"></script>
                     <script type="text/javascript">
                             SimpleJekyllSearch.init({
                                 searchInput: document.getElementById('search-input'),
                                 resultsContainer: document.getElementById('results-container'),
                                 dataSource: 'search.json',
                                 searchResultTemplate: '<li><a href="{url}" title="IDE UI: Parts">{title}</a></li>',
                     noResultsText: 'No results found.',
                             limit: 10,
                             fuzzy: true,
                     })
                     </script>
                     <!--end search-->
                 </li>
             </ul>
         </div>
         </div>
         <!-- /.container -->
 </nav>

 <!-- Page Content -->
 <div class="container">
   <div id="main">
     <!-- Content Row -->
     <div class="row">


             <!-- Sidebar Column -->
             <div class="col-md-3" id="tg-sb-sidebar">


 <ul id="mysidebar" class="nav">
   <li class="sidebarTitle"> </li>


   <li>
       <a href="#">Overview</a>
       <ul>


           <li><a href="index.html">Introduction</a></li>


           <li><a href="quick-start.html">Getting Started</a></li>


           <li><a href="single-multi-user.html">Single and Multi-User Flavors</a></li>


           <li><a href="infra-support.html">Supported Infrastructures</a></li>


       </ul>
    </li>


   <li>
       <a href="#">Che on Docker</a>
       <ul>


           <li><a href="docker-single-user.html">Docker - Single User</a></li>


           <li><a href="docker-multi-user.html">Docker - Multi User</a></li>


           <li><a href="docker-config.html">Docker - Configuration</a></li>


           <li><a href="docker-cli.html">Docker - CLI Reference</a></li>


       </ul>
    </li>


   <li>
       <a href="#">Che on Kubernetes</a>
       <ul>


           <li><a href="kubernetes-single-user.html">Kubernetes - Single User</a></li>


           <li><a href="kubernetes-multi-user.html">Kubernetes - Multi User</a></li>


           <li><a href="kubernetes-config.html">Kubernetes - Configuration</a></li>


           <li><a href="kubernetes-admin-guide.html">Kubernetes - Admin Guide</a></li>


       </ul>
    </li>


   <li>
       <a href="#">Che on OpenShift</a>
       <ul>


           <li><a href="openshift-single-user.html">OpenShift - Single User</a></li>


           <li><a href="openshift-multi-user.html">OpenShift - Multi User</a></li>


           <li><a href="openshift-config.html">OpenShift - Configuration</a></li>


           <li><a href="openshift-admin-guide.html">OpenShift - Admin Guide</a></li>


       </ul>
    </li>


   <li>
       <a href="#">User Management</a>
       <ul>


           <li><a href="user-management.html">Authentication and Authorization</a></li>


           <li><a href="authentication.html">Security Model</a></li>


           <li><a href="permissions.html">Permissions</a></li>


           <li><a href="organizations.html">Organizations in UD</a></li>


           <li><a href="resource-management.html">Resource Management</a></li>


       </ul>
    </li>


   <li>
       <a href="#">User Guides</a>
       <ul>


           <li><a href="creating-starting-workspaces.html">Creating and starting Workspaces</a></li>


           <li><a href="ide-projects.html">Projects</a></li>


           <li><a href="editor-code-assistance.html">Editor and Code-Assistance</a></li>


           <li><a href="dependency-management.html">Dependency Management</a></li>


           <li><a href="commands-ide-macro.html">Commands and IDE Macros</a></li>


           <li><a href="version-control.html">Version Control</a></li>


           <li><a href="debug.html">Debug</a></li>


       </ul>
    </li>


   <li>
       <a href="#">Workspace Administration</a>
       <ul>


           <li><a href="what-are-workspaces.html">Workspace Overview</a></li>


           <li><a href="stacks.html">Workspace - Stacks</a></li>


           <li><a href="recipes.html">Workspace - Recipes</a></li>


           <li><a href="servers.html">Workspace - Servers</a></li>


           <li><a href="installers.html">Workspace - Installers</a></li>


           <li><a href="volumes.html">Workspace - Volumes Mount</a></li>


           <li><a href="env-variables.html">Workspace - Environment Variables</a></li>


           <li><a href="projects.html">Workspace - Projects</a></li>


           <li><a href="workspaces-troubleshooting.html">Workspace - Troubleshooting</a></li>


           <li><a href="workspace-data-model.html">Workspace Data Model</a></li>


       </ul>
    </li>


   <li>
       <a href="#">Portable Workspaces</a>
       <ul>


           <li><a href="chedir-getting-started.html">Chedir - Getting Started</a></li>


           <li><a href="why-chedir.html">Chedir - Why Chedir?</a></li>


           <li><a href="chedir-installation.html">Chedir - Installation</a></li>


           <li><a href="chedir-project-setup.html">Chedir - Project Setup</a></li>


           <li><a href="chedir-up-and-down.html">Chedir - Up and Down</a></li>


           <li><a href="chefile.html">Chedir - Chefile</a></li>


           <li><a href="chedir-ssh.html">Chedir - SSH</a></li>


           <li><a href="factories-getting-started.html">Factory - Getting Started</a></li>


           <li><a href="creating-factories.html">Factory - Creating</a></li>


           <li><a href="factories_json_reference.html">Factory - JSON Reference</a></li>


       </ul>
    </li>


   <li>
       <a href="#">Developer Guides</a>
       <ul>


           <li><a href="framework-overview.html">Overview</a></li>


           <li><a href="rest-api.html">SDK - REST API</a></li>


           <li><a href="che-in-che-quickstart.html">SDK - Your First Plugin</a></li>


           <li><a href="build-reqs.html">SDK - Building Che</a></li>


           <li><a href="assemblies.html">SDK - Assemblies</a></li>


           <li><a href="logging.html">SDK - Logging</a></li>


           <li><a href="ide-extensions-gwt.html">SDK - GWT IDE Extensions</a></li>


           <li><a href="server-side-extensions.html">SDK - Server Side Extensions</a></li>


           <li><a href="custom-installers.html">SDK - Installers</a></li>


           <li><a href="project-types.html">SDK - Project Types</a></li>


           <li><a href="language-servers.html">SDK - Language Support</a></li>


           <li class="active"><a href="parts.html">IDE UI&#58 Parts</a></li>


           <li><a href="actions.html">IDE UI&#58 Actions</a></li>


       </ul>
    </li>


   <li>
       <a href="#">Dev Essentials</a>
       <ul>


           <li><a href="guice.html">Dependency Injection</a></li>


           <li><a href="dto.html">Transport&#58 DTO</a></li>


           <li><a href="json-rpc.html">Communication&#58 JSON-RPC</a></li>


           <li><a href="handling-projects-in-plugins.html">Handling Projects in Plugins</a></li>


           <li><a href="dao.html">Persistence, DAO</a></li>


           <li><a href="properties.html">Properties</a></li>


       </ul>
    </li>


   <li>
       <a href="#">Infrastructure and SPI</a>
       <ul>


           <li><a href="spi_overview.html">Overview</a></li>


           <li><a href="spi-implementation.html">Implementation Notes</a></li>


       </ul>
    </li>


       <!-- if you aren't using the accordion, uncomment this block:
          <p class="external">
              <a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
          </p>
          -->
 </ul>

 <!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above. Otherwise, if placed inside customscripts.js, the script runs before the sidebar code runs and the class never gets inserted.-->
 <script>$("li.active").parents('li').toggleClass("active");</script>

             </div>


         <!-- Content Column -->
         <div class="col-md-9" id="tg-sb-content">
             <div class="post-header">
    <h1 class="post-title-main">IDE UI: Parts</h1>
 </div>


 <div class="post-content">


 <!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
 <script>
 $( document ).ready(function() {
   // Handler for .ready() called.
 $('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2' });
 /* this offset helps account for the space taken up by the floating toolbar. */
 $('#toc').on('click', 'a', function() {
   var target = $(this.getAttribute('href'))
     , scroll_target = target.offset().top
   $(window).scrollTop(scroll_target - 10);
   return false
 })

 });
 </script>

 <div id="toc"></div>


     <!--


      -->

   <div class="paragraph">
 <p>Parts represent the content of the Che workbench, i.e. views and editors within the IDE. Che already provides various parts such as the project explorer, the output console, the build result view, file outline and the code editor. In this part of the tutorial, we describe how to implement a custom view and embed it into the Che IDE. Furthermore, we demonstrate how to open and hide views.</p>
 </div>
 <div class="paragraph">
 <p>Sample plugins: <a href="https://github.com/che-samples/che-plugin-menu">IDE</a> and <a href="https://github.com/che-samples/che-ide-server-extension">IDE-Server Side</a>.</p>
 </div>
 <div class="sect1">
 <h2 id="create-a-custom-part">Create a custom Part</h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>Creating a part in Che consists of two four components, which are marked in grey in the diagram below. In this section, we provide a general overview, in the following sections, we describe the concrete implementation more in detail.</p>
 </div>
 <div class="paragraph">
 <p>The central component is the implementation of the view itself (<code>MyViewImpl</code>). It will create all the UI widgets, which are shown within a part. <code>MyViewImpl</code> inherits from <code>BaseView</code>, a base implementation of common functionality for all views provided by Che. If the view needs to be accessed by other components, e.g. to set a selection, public methods should be extracted to an interface (<code>MyView</code>). To allow other components to get an instance of <code>MyView</code>, the interface is bound to the implementation within <code>MyGinModule</code>. See the section <a href="guice.html">Dependency Injection Basics</a> for more details about this. As mentioned before, the view implementation is responsible for the content of a view. The integration into the Che IDE, including configuring the tab (title, icon, etc.) is done by a part presenter (<code>MyPartPresenter</code>), which inherits from <code>BasePresenter</code>. Part presenter are called by Che or a custom action to interact with a part, e.g. to open it or to fill it with content. The part presenter forwards relevant calls to the implementation of a view (encapsulated by the interface).</p>
 </div>
 <div class="imageblock">
 <div class="content">
 <img src="/che/docs/images/devel/parts.png" alt="parts">
 </div>
 </div>
 <div class="paragraph">
 <p>In the following sections, we describe the implementation of the mentioned components more in detail. As an example, we create a part displaying "Hello World" and define an action to open it.</p>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="implementing-a-view">Implementing a View</h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>In this section, we describe the implementation of a simple "Hello World" view. The implementation is shown in the following listing. All views in Che inherit from <code>org.eclipse.che.ide.api.parts.base.BaseView</code>, which implements basic features for views embedded into the Che IDE. The super constructor requires the <code>PartStackUIResources</code> which we get injected as a parameter. Views in Che are implemented using GWT. Therefore, we can use any GWT widgets or framework capabilities to actually implement the views. In the following example, we simply create a label and set its text. To implement more complex views and use other GWT features, such as describing the UI using XML, please refer to the <a href="http://www.gwtproject.org/">GWT project page</a>.</p>
 </div>
 <div class="paragraph">
 <p>In the last line of the example, we call the method <code>#setContenWidget</code> of the base class to specifiy the root widget to be shown in the view. In our case, this is the <code>Label</code>, if you create a more complex layout of widgets, this would be the root container of the view.</p>
 </div>
 <div class="listingblock">
 <div class="content">
 <pre class="CodeRay highlight"><code data-lang="java"><span class="keyword">package</span> <span class="namespace">org.eclipse.che.plugin.parts.ide.helloworldview</span>;

 <span class="keyword">import</span> <span class="include">com.google.gwt.usder.client.ui.Label</span>;
 <span class="keyword">import</span> <span class="include">com.google.inject.Inject</span>;
 <span class="keyword">import</span> <span class="include">com.google.inject.Singleton</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.ide.api.parts.PartStackUIResources</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.ide.api.parts.base.BaseView</span>;

 <span class="directive">public</span> <span class="type">class</span> <span class="class">HelloWorldViewImpl</span> <span class="directive">extends</span> BaseView&lt;HelloWorldView.ActionDelegate&gt; <span class="directive">implements</span> HelloWorldView {

     <span class="annotation">@Inject</span>
     <span class="directive">public</span> HelloWorldViewImpl(PartStackUIResources resources){
         <span class="local-variable">super</span>(resources);
         <span class="predefined-type">Label</span> label = <span class="keyword">new</span> <span class="predefined-type">Label</span>(<span class="string"><span class="delimiter">&quot;</span><span class="content">Hello World</span><span class="delimiter">&quot;</span></span>);
         setContentWidget(label);
     }

 }</code></pre>
 </div>
 </div>
 <div class="paragraph">
 <p>As mentioned in the introduction of this section, an explicit interface should defined, when implementing a view, encapsulating all interaction with other components (see following listing). Therefore, the interface contains all methods, which shall be accessible by other components. In the following example, the interface defines a method <code>#setVisible</code> to allow controlling the visibility of the view. This method is already implemented by <code>BaseView</code> so we do not need to implement it in <code>HelloWorldViewImpl</code>. If you need to provide any other methods for a view, e.g. to pass in some input parameters to be shown, you should extend the view interface accordingly.</p>
 </div>
 <div class="paragraph">
 <p>Following the GWT pattern, the view interface also defines an <code>ActionDelegate</code>. This interface can be implemented by components, which want to listen to events triggered with the view, e.g. a button click. Our `HelloWorldView`is currently not triggering any actions, so the interface is empty.</p>
 </div>
 <div class="listingblock">
 <div class="content">
 <pre class="CodeRay highlight"><code data-lang="java"><span class="keyword">package</span> <span class="namespace">org.eclipse.che.plugin.parts.ide.helloworldview</span>;

 <span class="keyword">import</span> <span class="include">org.eclipse.che.ide.api.mvp.View</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.ide.api.parts.base.BaseActionDelegate</span>;

 <span class="directive">public</span> <span class="type">interface</span> <span class="class">HelloWorldView</span> <span class="directive">extends</span> <span class="predefined-type">View</span>&lt;HelloWorldView.ActionDelegate&gt; {


     <span class="type">void</span> setVisible(<span class="type">boolean</span> visible);

     <span class="type">interface</span> <span class="class">ActionDelegate</span> <span class="directive">extends</span> BaseActionDelegate {

     }
 }</code></pre>
 </div>
 </div>
 <div class="paragraph">
 <p>Finally, we have to make our view available for other components, using dependency injection. This is done in <code>MyGinModule</code>, which can contain other bindings, too. Please see the section <a href="guice.html">Dependency Injection Basics</a> for more details about this binding.</p>
 </div>
 <div class="listingblock">
 <div class="content">
 <pre class="CodeRay highlight"><code data-lang="java"><span class="keyword">package</span> <span class="namespace">org.eclipse.che.plugin.parts.ide.inject</span>;

 <span class="keyword">import</span> <span class="include">com.google.gwt.inject.client.AbstractGinModule</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.ide.api.extension.ExtensionGinModule</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.plugin.parts.ide.helloworldview.HelloWorldView</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.plugin.parts.ide.helloworldview.HelloWorldViewImpl</span>;

 <span class="annotation">@ExtensionGinModule</span>
 <span class="directive">public</span> <span class="type">class</span> <span class="class">MyGinModule</span> <span class="directive">extends</span> AbstractGinModule {

     <span class="annotation">@Override</span>
     <span class="directive">protected</span> <span class="type">void</span> configure() {
         bind(HelloWorldView.class).to(HelloWorldViewImpl.class);
     }

 }</code></pre>
 </div>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="implementing-a-part-presenter">Implementing a Part Presenter</h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>To connect the view implementation to the Che workbench, we need to implement a part presenter. It defines, how a view is embedded into Che (e.g. a title and an icon). Furthermore, it handles all interactions with the view. This goes in both directions. As a first example, if you want to hide a view, you will call the presenter. As a second example, if you click a button within a view, which should trigger something in Che, the presenter will receive this event and trigger the specified action.</p>
 </div>
 <div class="paragraph">
 <p>The following listing shows the <code>HelloWorldPresenter</code> for the previous example view. It retrieves the <code>HelloWorld`view using dependency injection in its constructor. The following methods define, how the view is presented as a tab in Che: a title, an icon and a tooltip. The method `#setVisible</code> delegates to the view itself. The method <code>#go</code> is called, when a view is opened. As a parameter, it receives a callback, which expects a view implementation to be set. With this call, the view implementation is wired to the Che workbench.</p>
 </div>
 <div class="listingblock">
 <div class="content">
 <pre class="CodeRay highlight"><code data-lang="java"><span class="keyword">package</span> <span class="namespace">org.eclipse.che.plugin.parts.ide.helloworldview</span>;
 <span class="keyword">import</span> <span class="include">com.google.gwt.user.client.ui.AcceptsOneWidget</span>;
 <span class="keyword">import</span> <span class="include">com.google.gwt.user.client.ui.IsWidget</span>;
 <span class="keyword">import</span> <span class="include">com.google.inject.Inject</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.ide.api.parts.base.BasePresenter</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.plugin.parts.ide.SamplePartsResources</span>;
 <span class="keyword">import</span> <span class="include">org.vectomatic.dom.svg.ui.SVGResource</span>;

 <span class="comment">/**
  * Presenter for the sample Hello World View.
  */</span>
 <span class="annotation">@Singelton</span>
 <span class="directive">public</span> <span class="type">class</span> <span class="class">HelloWorldPresenter</span> <span class="directive">extends</span> BasePresenter {

     <span class="directive">private</span> HelloWorldView view;

     <span class="annotation">@Inject</span>
     <span class="directive">public</span> HelloWorldPresenter(HelloWorldView view){
         <span class="local-variable">this</span>.view = view;
     }

     <span class="annotation">@Override</span>
     <span class="directive">public</span> <span class="predefined-type">String</span> getTitle() {
         <span class="keyword">return</span> <span class="string"><span class="delimiter">&quot;</span><span class="content">Hello World View</span><span class="delimiter">&quot;</span></span>;
     }

     <span class="annotation">@Override</span>
     <span class="directive">public</span> SVGResource getTitleImage() {
         <span class="keyword">return</span> (SamplePartsResources.INSTANCE.icon());
     }

     <span class="annotation">@Override</span>
     <span class="directive">public</span> <span class="predefined-type">String</span> getTitleToolTip() {
         <span class="keyword">return</span> <span class="string"><span class="delimiter">&quot;</span><span class="content">Hello World Tooltip</span><span class="delimiter">&quot;</span></span>;
     }

     <span class="annotation">@Override</span>
     <span class="directive">public</span> IsWidget getView() {
         <span class="keyword">return</span> view;
     }

     <span class="annotation">@Override</span>
     <span class="directive">public</span> <span class="type">void</span> setVisible(<span class="type">boolean</span> visible) {
         view.setVisible(visible);
     }

     <span class="annotation">@Override</span>
     <span class="directive">public</span> <span class="type">void</span> go(AcceptsOneWidget container) {
         container.setWidget(view);
     }
 }</code></pre>
 </div>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="interacting-from-within-a-view">Interacting from within a view</h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>To trigger any behavior from with views, the <code>ActionDelegate</code> is used as a receiver of events following the GWT MVP pattern. Therefore, you extend the interface by the required methods, in the following listing a method <code>#onButtonClicked</code>.</p>
 </div>
 <div class="listingblock">
 <div class="content">
 <pre class="CodeRay highlight"><code data-lang="java"><span class="comment">/** Required for delegating functions in view. */</span>
 <span class="directive">public</span> <span class="type">interface</span> <span class="class">ActionDelegate</span> <span class="directive">extends</span> BaseActionDelegate {
   <span class="comment">/** Performs some actions in response to a user's clicking on Button */</span>
   <span class="type">void</span> onButtonClicked();
 }</code></pre>
 </div>
 </div>
 <div class="paragraph">
 <p>The <code>ActionDelegate</code> interface has to be implemented and provided to the view. For a part, the part presenter is a good component to do both, especially, if the relevant operations to be triggered are related to the Che workbench or to Che services. Therefore, the part presenter implements the interface <code>MyView.ActionDelegate</code>, implements the defined method and sets itself as a delegate (see listing below).</p>
 </div>
 <div class="listingblock">
 <div class="content">
 <pre class="CodeRay highlight"><code data-lang="java"><span class="annotation">@Singelton</span>
 <span class="directive">public</span> <span class="type">class</span> <span class="class">MyPartPresenter</span> <span class="directive">extends</span> BasePresenter <span class="directive">implements</span> MyView.ActionDelegate {

     <span class="directive">private</span> MyView view;

     <span class="annotation">@Inject</span>
     <span class="directive">public</span> MyPartPresenter(MyView view){
         <span class="local-variable">this</span>.view = view;
         view.setDelegate(<span class="local-variable">this</span>);
     }

     <span class="directive">public</span> <span class="type">void</span> onButtonClicked(){
       <span class="comment">//Do sth.</span>
     }</code></pre>
 </div>
 </div>
 <div class="paragraph">
 <p>Finally, the action delegate can be called from within the view implementation, as shown below.</p>
 </div>
 <div class="listingblock">
 <div class="content">
 <pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">class</span> <span class="class">MyViewImpl</span> <span class="directive">extends</span> BaseView&lt;HelloWorldView.ActionDelegate&gt; <span class="directive">implements</span> MyView {

 /...

 public <span class="type">void</span> onButtonClicked(ClickEvent event) {
     delegate.onButtonClicked();
 }</code></pre>
 </div>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="opening-parts">Opening Parts</h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>To open parts, the service <code>WorkspaceAgent</code> is used. It provides a method <code>#openPart</code> which accepts two parameters:</p>
 </div>
 <div class="ulist">
 <ul>
 <li>
 <p>The part presenter of the part to be opened</p>
 </li>
 <li>
 <p>The location, where the part is to be opened</p>
 </li>
 </ul>
 </div>
 <div class="paragraph">
 <p>The following locations are supported by Che:</p>
 </div>
 <div class="ulist">
 <ul>
 <li>
 <p><code>EDITING</code>: area just above the editor, like a file tab</p>
 </li>
 <li>
 <p><code>NAVIGATION</code>: area on the left to project explorer</p>
 </li>
 <li>
 <p><code>TOOLING</code>: area to the right of the editor</p>
 </li>
 <li>
 <p><code>INFORMATION</code>: area under the editor, 'console' area</p>
 </li>
 </ul>
 </div>
 <div class="paragraph">
 <p>After a pat has been opened, it must be activated to ensure that it gets visible and receives the focus. This is done using <code>WorkspaceAgent#setActivePart</code>. The following code example shows an action, which opens the "Hello World" part defined before. Please see the section <a href="actions.html">Actions</a> for more details about the implementation of actions.</p>
 </div>
 <div class="listingblock">
 <div class="content">
 <pre class="CodeRay highlight"><code data-lang="java"><span class="keyword">package</span> <span class="namespace">org.eclipse.che.plugin.parts.ide.helloworldview</span>;

 <span class="keyword">import</span> <span class="include">com.google.inject.Inject</span>;
 <span class="keyword">import</span> <span class="include">com.google.inject.Singleton</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.ide.api.action.Action</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.ide.api.action.ActionEvent</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.ide.api.parts.PartStackType</span>;
 <span class="keyword">import</span> <span class="include">org.eclipse.che.ide.api.parts.WorkspaceAgent</span>;

 <span class="comment">/**
  * Action for showing a the Hello World View.
  */</span>
 <span class="annotation">@Singleton</span>
 <span class="directive">public</span> <span class="type">class</span> <span class="class">HelloWorldViewAction</span> <span class="directive">extends</span> <span class="predefined-type">Action</span> {

     <span class="directive">private</span> WorkspaceAgent workspaceAgent;
     <span class="directive">private</span> HelloWorldPresenter helloWorldPresenter;

     <span class="comment">/**
      * Constructor.
      *
      */</span>
     <span class="annotation">@Inject</span>
     <span class="directive">public</span> HelloWorldViewAction(WorkspaceAgent workspaceAgent, HelloWorldPresenter helloWorldPresenter) {
         <span class="local-variable">super</span>(<span class="string"><span class="delimiter">&quot;</span><span class="content">Show Hello World View</span><span class="delimiter">&quot;</span></span>);
         <span class="local-variable">this</span>.workspaceAgent = workspaceAgent;
         <span class="local-variable">this</span>.helloWorldPresenter = helloWorldPresenter;
     }


     <span class="annotation">@Override</span>
     <span class="directive">public</span> <span class="type">void</span> actionPerformed(<span class="predefined-type">ActionEvent</span> e) {
         workspaceAgent.openPart(helloWorldPresenter, PartStackType.INFORMATION);
         workspaceAgent.setActivePart(helloWorldPresenter);
     }
 }</code></pre>
 </div>
 </div>
 </div>
 </div>

     <div class="tags">

         <b>Tags: </b>


         <a href="tag_extensions.html" class="btn btn-default navbar-btn cursorNorm" role="button">extensions</a>


         <a href="tag_assembly.html" class="btn btn-default navbar-btn cursorNorm" role="button">assembly</a>


         <a href="tag_dev-docs.html" class="btn btn-default navbar-btn cursorNorm" role="button">dev-docs</a>


     </div>

 <!--
  -->

 </div>

 <hr class="shaded"/>

 <footer>
             <div class="row">
                 <div class="col-lg-12 footer">
                     Eclipse Che - Documentation <br/>
                     Site last generated: Sep 13, 2018 <br/>
                     <hr>
                     <a href="http://www.eclipse.org" target="_blank">Eclipse Foundation</a><br/>
                     <a href="http://www.eclipse.org/legal/privacy.php" target="_blank">Privacy Policy</a><br/>
                     <a href="http://www.eclipse.org/legal/termsofuse.php" target="_blank">Terms of Use</a><br/>
                     <a href="https://www.eclipse.org/legal/epl-2.0/" target="_blank">Eclipse Public License</a><br/>
                     <a href="http://www.eclipse.org/legal" target="_blank">Legal Resources</a><br/>
                 </div>
             </div>
 </footer>


     <!-- /.row -->
 </div>
 <!-- /.container -->
 </div>
 <!-- /#main -->
     </div>

 </body>

 </html>