userguides/n4js-ide-setup.html - gerrit/www.eclipse.org/n4js - Git at Google

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="generator" content="Asciidoctor 1.5.7.1">
 <title>N4JS IDE Setup</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <!-- ************* Meta ************* -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

 <!-- ************* OpenGraph ************-->
 <meta name="description" content="The Eclipse N4JS language and its IDE enable high-quality JavaScript development for large Node.js projects.">

 <meta property="og:site_name" content="Eclipse N4JS"/>
 <meta property="og:title" content="Eclipse N4JS Language and IDE"/>
 <meta property="og:url" content="https://numberfour.github.io/n4js"/>
 <meta property="og:description" content="The Eclipse N4JS language and its IDE enable high-quality JavaScript development for large Node.js projects."/>
 <meta property="og:image" content="../images/n4js.png">

 <!-- ************* Favicon ************-->
 <link rel="icon" href="../images/favicon.ico" />
 <link rel="icon" type="image/png" href="../images/favicon-32x32.png" sizes="32x32" />
 <link rel="icon" type="image/png" href="../images/favicon-16x16.png" sizes="16x16" />

 <!-- ************* Back-to-top JQuery ************* -->
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

 <!-- ************* Prism.js Syntax Highlighter ******-->
 <link href="../styles/prism.min.css" rel="stylesheet"/>
 <script src="../scripts/prism.js"></script>

 <!-- ************* Styles ************* -->

 <link rel="stylesheet" type="text/css" href="../styles/n4js-adoc.css">

 <!-- ****************** NavBar ****************** -->
 <div id="menubar">
     <div class="banner">
         <a href="../index.html"><img id="logo" src="../images/n4js-logo.png" alt="N4JS Language and IDE"></a>
     </div>
 <ul>
   <li><a href="../downloads.html"></i>Download</a></li>
   <li><a href="../community.html"></i>Community</a></li>
   <li><a href="index.html">Documentation</a></li>
 </ul>
 </div>
 <button id="tocbutton">TOC</button>

 </head>
 <body class="book toc2 toc-right">
 <div id="header">
 <div id="toc" class="toc2">
 <div id="toctitle">Jump to topic:</div>
 <ul class="sectlevel0">
 <li><a href="#_n4js_ide_setup">N4JS IDE Setup</a>
 <ul class="sectlevel1">
 <li><a href="#_installation">Installation</a>
 <ul class="sectlevel2">
 <li><a href="#_requirements">Requirements</a></li>
 </ul>
 </li>
 <li><a href="#_launching_the_ide">Launching the IDE</a></li>
 <li><a href="#_creating_a_new_project">Creating a new project</a>
 <ul class="sectlevel2">
 <li><a href="#_project_explorer">Project Explorer</a></li>
 </ul>
 </li>
 <li><a href="#_creating_a_new_class">Creating a new class</a></li>
 <li><a href="#_outline_view">Outline View</a></li>
 <li><a href="#_running_as_node_js">Running as node.js</a></li>
 <li><a href="#_whats_next">What&#8217;s Next?</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
 <div id="content">
 <h1 id="_n4js_ide_setup" class="sect0"><a class="link" href="#_n4js_ide_setup">N4JS IDE Setup</a></h1>
 <div class="openblock partintro">
 <div class="content">
 <div class="paragraph">
 <div class="title">N4JS IDE Setup</div>
 <p><strong>Get the most from type safe development with the custom-built N4JS IDE</strong></p>
 </div>
 <div class="paragraph">
 <p>In order to fully utilize the strengths of the language, N4JS has its own Eclipse-based IDE
 with custom features designed to support safe and intuitive development of large-scale
 server-side applications.
 Code is validated as you type and workflow tools such as content assist
 and quick-fixes ensure applications are written safely and consistently. The N4JS IDE
 is a powerful tool for developing
 collaborative projects that are to be maintained over a long period of time.</p>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="_installation"><a class="link" href="#_installation">Installation</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>For all available options for downloads and installation steps using the Eclipse Installer, see the <a href="https://www.eclipse.org/n4js/downloads.html">download page</a>.</p>
 </div>
 <div class="sect2">
 <h3 id="_requirements"><a class="link" href="#_requirements">Requirements</a></h3>
 <div class="paragraph">
 <p><strong>Java 8</strong></p>
 </div>
 <div class="paragraph">
 <p>In order to run the N4JS IDE, Java 8 is required. Installer packages can be downloaded from
 <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Oracle&#8217;s Java pages</a>.
 For Mac OS X users: Always install the <strong>JDK</strong> - the JRE is installed
 and only used in web browsers, not applications.</p>
 </div>
 <div class="paragraph">
 <p><strong>Existing Eclipse installation</strong></p>
 </div>
 <div class="paragraph">
 <p>When installing the N4JS features into an existing Eclipse installation, Xtext 2.9.1 must be available.
 In general, N4JS is based on the Eclipse Mars release.</p>
 </div>
 <div class="paragraph">
 <p><strong>node.js</strong></p>
 </div>
 <div class="paragraph">
 <p>In order to run or test code from the IDE, <a href="https://nodejs.org/en/">node.js 6</a> (or later) is required.</p>
 </div>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="_launching_the_ide"><a class="link" href="#_launching_the_ide">Launching the IDE</a></h2>
 <div class="sectionbody">
 <div class="imageblock">
 <div class="content">
 <img src="images/startupprefs.png" alt="startupprefs">
 </div>
 </div>
 <div class="paragraph">
 <p>When launching the N4JS IDE, a dialog box allows to specify a workspace which is used to
 organize related projects in a single folder.
 A new name and location for the workspace can be selected but for this example we shall
 use the default settings.</p>
 </div>
 <div class="admonitionblock tip">
 <table>
 <tr>
 <td class="icon">
 <i class="fa icon-tip" title="Tip"></i>
 </td>
 <td class="content">
 To manage the workspaces that are displayed in the workspace launcher,
 navigate to <span class="menuseq"><b class="menu">Preferences</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="submenu">Startup and Shutdown</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="menuitem">Workspaces</b></span>
 </td>
 </tr>
 </table>
 </div>
 <div class="paragraph">
 <p><strong>N4JS IDE Overview</strong></p>
 </div>
 <div class="imageblock">
 <div class="content">
 <img src="images/ide.png" alt="ide">
 </div>
 </div>
 <div class="paragraph">
 <p>Developers who have previous experience using Eclipse will be familiar with many common UI
 features such as the Editor, Project Outline, Project Explorer and Console views.
 The arrangement of views can be easily selected using the perspectives icons as highlighted
 in the upper-right of the window as shown above.</p>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="_creating_a_new_project"><a class="link" href="#_creating_a_new_project">Creating a new project<a id="new_project"></a></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>After having set up a default workspace, a new project can be created using the New N4JS
 Project wizard which is accessed at <span class="menuseq"><b class="menu">File</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="submenu">New</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="menuitem">N4JS Project</b></span> (Or using the keyboard shortcuts
 <span class="keyseq"><kbd>&#8984;</kbd>+<kbd>Option</kbd>+<kbd>N</kbd></span> for Mac,
 <kbd>Alt-Shift-N</kbd> on Windows)</p>
 </div>
 <div class="imageblock">
 <div class="content">
 <img src="images/newproject.png" alt="newproject">
 </div>
 </div>
 <div class="paragraph">
 <p>In this case, we name the project "hello.world" and select <kbd>Finish</kbd> to create a project in the
 default location (our current workspace).
 The New N4JS Project wizard will also ask to specify a working set to include the project in.
 Working sets are for grouping together elements to be displayed and will allow the user to
 focus on specific projects and files without
 switching between workspaces. At this point, it is not necessary to add working sets, but when
 dealing with
 multiple projects, working sets can be a highly efficient way of switching between related
 projects and resources.</p>
 </div>
 <div class="sect2">
 <h3 id="_project_explorer"><a class="link" href="#_project_explorer">Project Explorer</a></h3>
 <div class="paragraph">
 <p>The Project Explorer view will display the structure of our new project:</p>
 </div>
 <div class="imageblock">
 <div class="content">
 <img src="images/projectexplorer.png" alt="projectexplorer">
 </div>
 </div>
 <div class="paragraph">
 <p>In the Project Explorer view, our project "hello.world" contains three folders with our resources:</p>
 </div>
 <div class="ulist">
 <ul>
 <li>
 <p><strong>src</strong> will contain our .n4js source files.</p>
 </li>
 <li>
 <p><strong>src-gen</strong> will contain the transpiled JavaScript that is generated after compiling n4js files.
 The IDE automatically transpiles n4js files on save.</p>
 </li>
 <li>
 <p><strong>manifest.n4mf</strong> is the project description file which contains descriptions of dependencies.</p>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="_creating_a_new_class"><a class="link" href="#_creating_a_new_class">Creating a new class<a id="creating_classes"></a></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>In our new N4JS project, we can use the New N4JS Class wizard (accessed at <strong><span class="menuseq"><b class="menu">File</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="submenu">New</b>&#160;<i class="fa fa-angle-right caret"></i> <b class="menuitem">N4JS Class</b></span></strong>
 or <span class="keyseq"><kbd>&#8984;</kbd>+<kbd>Option</kbd>+<kbd>n</kbd></span>)
 to create a new class called "HelloWorld":</p>
 </div>
 <div class="imageblock">
 <div class="content">
 <img src="images/helloworldclass.png" alt="helloworldclass">
 </div>
 </div>
 <div class="paragraph">
 <p>Let&#8217;s have a look at what a simple <strong>HelloWorld!</strong> example looks like in N4JS:</p>
 </div>
 <div class="listingblock">
 <div class="title">HelloWorld.n4js</div>
 <div class="content">
 <pre class="highlight"><code class="language-n4js" data-lang="n4js">export public class HelloWorld {
   public say_hi() {
 	  var message: string = "Hello World!";
 	  console.log(message);
   }
 }
 var announce = new HelloWorld();
 announce.say_hi();</code></pre>
 </div>
 </div>
 <div class="paragraph">
 <p>We can see some similarities with Java and JavaScript in this example, but with some notable features:</p>
 </div>
 <div class="ulist">
 <ul>
 <li>
 <p><strong>export</strong> makes the HelloWorld class available for import in another file or project.
 We modify this using the <strong>public</strong> keyword to specify where it is available. This demonstrates
 the use of <strong>modules</strong>
 inside N4JS which are fully explained in the <a href="../features/modules.html#modules">Modules</a> feature</p>
 </li>
 <li>
 <p><strong>string</strong> we use the type annotation string to define that the message variable is of type <strong>string</strong>.
 More can be read about type annotations in the <a href="../features/nominal-and-structural-typing.html#nominal_and_structural_typing">Nominal vs. Structural Typing</a> feature.</p>
 </li>
 </ul>
 </div>
 <div class="paragraph">
 <p>As we have used the export keyword and made the class public using the public <strong>access modifier</strong>,
 it is possible to call the methods of this class in another project. If we wanted to restrict access
 to this element, we would use protected
 so it may only be accessed from subclasses and private for within the same module only.
 The default visibility of an element is project.</p>
 </div>
 <div class="paragraph">
 <p>If we create a new class and define it as follows:</p>
 </div>
 <div class="listingblock">
 <div class="title">HelloCaller.n4js</div>
 <div class="content">
 <pre class="highlight"><code class="language-n4js" data-lang="n4js">import { HelloWorld } from "HelloWorld";

 export public class Caller  {
   public call ()  {
     var c = new HelloWorld;
     return c;
   }
 }</code></pre>
 </div>
 </div>
 <div class="paragraph">
 <p>We can run this module named "HelloCaller" and invoke the methods from our HelloWorld class.</p>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="_outline_view"><a class="link" href="#_outline_view">Outline View<a id="outline_view"></a></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>The Outline View is a useful tool that provides a quick overview of the structure of our applications.
 If we look at the Outline View while we are editing our HelloWorld examples, we can see the following:</p>
 </div>
 <div class="imageblock">
 <div class="content">
 <img src="images/outlineview.png" alt="outlineview">
 </div>
 </div>
 <div class="paragraph">
 <p>The Outline View displays the structure of our very basic class with only one method. As
 projects become more populated
 and increase in complexity, the
 Outline View becomes helpful by assisting with navigating through the structure of a file.</p>
 </div>
 <div class="admonitionblock tip">
 <table>
 <tr>
 <td class="icon">
 <i class="fa icon-tip" title="Tip"></i>
 </td>
 <td class="content">
 Instead of having the Outline View always open in the IDE, the shortcut <span class="keyseq"><kbd>&#8984;</kbd>+<kbd>O</kbd></span>
 will open a Quick Outline window on demand. With this Quick Outline window open, begin typing to
 easily search for fields, methods and classes.
 </td>
 </tr>
 </table>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="_running_as_node_js"><a class="link" href="#_running_as_node_js">Running as node.js</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>To run this file, right-click inside the editor view and select <strong>Run as | Launch in Node.js</strong>:</p>
 </div>
 <div class="imageblock">
 <div class="content">
 <img src="images/runhello.png" alt="runhello">
 </div>
 </div>
 <div class="paragraph">
 <p>The Console View will display the result of our console.log command, and our Hello World!
 example is running in the N4JS IDE without
 errors.</p>
 </div>
 </div>
 </div>
 <div class="sect1">
 <h2 id="_whats_next"><a class="link" href="#_whats_next">What&#8217;s Next?</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>After creating a project and running some sample code, the next step we can have a look at is
 exporting our project as an npm package followed by running it from the command line and
 publishing to the npm registry. This is covered in the <a href="npm-export-guide.html#_npm_export_guide">export to npm</a> guide.</p>
 </div>
 </div>
 </div>
 </div>
 <div id="footer">
 <div id="footer-text">
 </div>
 </div>
 <div class="Grid social" style="color:#d5dfea">
   <div class="Cell Cell--2-12 m-Cell--withMargin">
     <h2>Quick Links</h2>
     <ul>
       <li><a href="../downloads.html">Download</a></li>
       <li><a href="index.html">Documentation</a></li>
       <li><a href="https://github.com/eclipse/n4js/">Source</a></li>
       <li><a href="https://github.com/eclipse/n4js/issues">Issues</a></li>
     </ul>
   </div>
   <div class="Cell Cell--2-12 m-Cell--withMargin">
     <br/><br/>
     <ul>
       <li><a href="https://www.eclipse.org/forums/index.php/f/365/">Forum</a></li>
       <li><a href="http://n4js.blogspot.de/">Blog</a></li>
       <li><a href="https://dev.eclipse.org/mailman/listinfo/n4js-dev">Mailing List</a></li>
       <li><a href="https://projects.eclipse.org/projects/technology.n4js">Eclipse Project Page</a></li>
       <li><a href="https://twitter.com/n4jsdev">Tweets by n4jsdev</a></li>
     </ul>
   </div>
   <div class="Cell Cell--2-12 m-Cell--withMargin">
     <br/><br/>
     <ul>
       <li><a href="http://www.eclipse.org/">Eclipse Home</a></li>
       <li><a href="http://www.eclipse.org/legal/privacy.php">Privacy Policy</a></li>
       <li><a href="http://www.eclipse.org/legal/termsofuse.php">Terms of Use</a></li>
       <li><a href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a></li>
       <li><a href="http://www.eclipse.org/legal/">Legal</a></li>
     </ul>
   </div>
   <div style="clear: both; height: 0; overflow: hidden;"></div>
 </div>

 <script>
   // Toggle the table of contents
   $( "button#tocbutton" ).click(function() {
     if ($("#tocbutton").css('right') == '25px') {
       $( "#tocbutton" ).animate({right: '215px'},"slow");
       $( "#toc.toc2" ).animate({right: '0'},"slow");
   }
     else {
       $( "#tocbutton" ).animate({right: '25px'},"slow");
       $( "#toc.toc2" ).animate({right: '-13rem'},"slow");
   }
   });
 </script>
 <script type="text/javascript">
   // Create a back to top button
   $('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
   var amountScrolled = 300;
   $(window).scroll(function() {
   if ( $(window).scrollTop() > amountScrolled ) {
   	$('a.back-to-top').fadeIn('slow');
   } else {
   	$('a.back-to-top').fadeOut('slow');
   }
   });
   $('a.back-to-top, a.simple-back-to-top').click(function() {
   $('html, body').animate({
   	scrollTop: 0
   }, 700);
   return false;
   });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="generator" content="Asciidoctor 1.5.7.1">
	<title>N4JS IDE Setup</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<!-- *********** Meta *********** -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

	<!-- *********** OpenGraph **********-->
	<meta name="description" content="The Eclipse N4JS language and its IDE enable high-quality JavaScript development for large Node.js projects.">

	<meta property="og:site_name" content="Eclipse N4JS"/>
	<meta property="og:title" content="Eclipse N4JS Language and IDE"/>
	<meta property="og:url" content="https://numberfour.github.io/n4js"/>
	<meta property="og:description" content="The Eclipse N4JS language and its IDE enable high-quality JavaScript development for large Node.js projects."/>
	<meta property="og:image" content="../images/n4js.png">

	<!-- *********** Favicon **********-->
	<link rel="icon" href="../images/favicon.ico" />
	<link rel="icon" type="image/png" href="../images/favicon-32x32.png" sizes="32x32" />
	<link rel="icon" type="image/png" href="../images/favicon-16x16.png" sizes="16x16" />

	<!-- *********** Back-to-top JQuery *********** -->
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

	<!-- *********** Prism.js Syntax Highlighter ****-->
	<link href="../styles/prism.min.css" rel="stylesheet"/>
	<script src="../scripts/prism.js"></script>

	<!-- *********** Styles *********** -->

	<link rel="stylesheet" type="text/css" href="../styles/n4js-adoc.css">

	<!-- **************** NavBar **************** -->
	<div id="menubar">
	<div class="banner">
	<a href="../index.html"><img id="logo" src="../images/n4js-logo.png" alt="N4JS Language and IDE"></a>
	</div>
	<ul>
	<li><a href="../downloads.html"></i>Download</a></li>
	<li><a href="../community.html"></i>Community</a></li>
	<li><a href="index.html">Documentation</a></li>
	</ul>
	</div>
	<button id="tocbutton">TOC</button>

	</head>
	<body class="book toc2 toc-right">
	<div id="header">
	<div id="toc" class="toc2">
	<div id="toctitle">Jump to topic:</div>
	<ul class="sectlevel0">
	<li><a href="#_n4js_ide_setup">N4JS IDE Setup</a>
	<ul class="sectlevel1">
	<li><a href="#_installation">Installation</a>
	<ul class="sectlevel2">
	<li><a href="#_requirements">Requirements</a></li>
	</ul>
	</li>
	<li><a href="#_launching_the_ide">Launching the IDE</a></li>
	<li><a href="#_creating_a_new_project">Creating a new project</a>
	<ul class="sectlevel2">
	<li><a href="#_project_explorer">Project Explorer</a></li>
	</ul>
	</li>
	<li><a href="#_creating_a_new_class">Creating a new class</a></li>
	<li><a href="#_outline_view">Outline View</a></li>
	<li><a href="#_running_as_node_js">Running as node.js</a></li>
	<li><a href="#_whats_next">What’s Next?</a></li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	<div id="content">
	<h1 id="_n4js_ide_setup" class="sect0"><a class="link" href="#_n4js_ide_setup">N4JS IDE Setup</a></h1>
	<div class="openblock partintro">
	<div class="content">
	<div class="paragraph">
	<div class="title">N4JS IDE Setup</div>
	<p><strong>Get the most from type safe development with the custom-built N4JS IDE</strong></p>
	</div>
	<div class="paragraph">
	<p>In order to fully utilize the strengths of the language, N4JS has its own Eclipse-based IDE
	with custom features designed to support safe and intuitive development of large-scale
	server-side applications.
	Code is validated as you type and workflow tools such as content assist
	and quick-fixes ensure applications are written safely and consistently. The N4JS IDE
	is a powerful tool for developing
	collaborative projects that are to be maintained over a long period of time.</p>
	</div>
	</div>
	</div>
	<div class="sect1">
	<h2 id="_installation"><a class="link" href="#_installation">Installation</a></h2>
	<div class="sectionbody">
	<div class="paragraph">
	<p>For all available options for downloads and installation steps using the Eclipse Installer, see the <a href="https://www.eclipse.org/n4js/downloads.html">download page</a>.</p>
	</div>
	<div class="sect2">
	<h3 id="_requirements"><a class="link" href="#_requirements">Requirements</a></h3>
	<div class="paragraph">
	<p><strong>Java 8</strong></p>
	</div>
	<div class="paragraph">
	<p>In order to run the N4JS IDE, Java 8 is required. Installer packages can be downloaded from
	<a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Oracle’s Java pages</a>.
	For Mac OS X users: Always install the <strong>JDK</strong> - the JRE is installed
	and only used in web browsers, not applications.</p>
	</div>
	<div class="paragraph">
	<p><strong>Existing Eclipse installation</strong></p>
	</div>
	<div class="paragraph">
	<p>When installing the N4JS features into an existing Eclipse installation, Xtext 2.9.1 must be available.
	In general, N4JS is based on the Eclipse Mars release.</p>
	</div>
	<div class="paragraph">
	<p><strong>node.js</strong></p>
	</div>
	<div class="paragraph">
	<p>In order to run or test code from the IDE, <a href="https://nodejs.org/en/">node.js 6</a> (or later) is required.</p>
	</div>
	</div>
	</div>
	</div>
	<div class="sect1">
	<h2 id="_launching_the_ide"><a class="link" href="#_launching_the_ide">Launching the IDE</a></h2>
	<div class="sectionbody">
	<div class="imageblock">
	<div class="content">
	<img src="images/startupprefs.png" alt="startupprefs">
	</div>
	</div>
	<div class="paragraph">
	<p>When launching the N4JS IDE, a dialog box allows to specify a workspace which is used to
	organize related projects in a single folder.
	A new name and location for the workspace can be selected but for this example we shall
	use the default settings.</p>
	</div>
	<div class="admonitionblock tip">
	<table>
	<tr>
	<td class="icon">
	<i class="fa icon-tip" title="Tip"></i>
	</td>
	<td class="content">
	To manage the workspaces that are displayed in the workspace launcher,
	navigate to <span class="menuseq"><b class="menu">Preferences</b> <i class="fa fa-angle-right caret"></i> <b class="submenu">Startup and Shutdown</b> <i class="fa fa-angle-right caret"></i> <b class="menuitem">Workspaces</b></span>
	</td>
	</tr>
	</table>
	</div>
	<div class="paragraph">
	<p><strong>N4JS IDE Overview</strong></p>
	</div>
	<div class="imageblock">
	<div class="content">
	<img src="images/ide.png" alt="ide">
	</div>
	</div>
	<div class="paragraph">
	<p>Developers who have previous experience using Eclipse will be familiar with many common UI
	features such as the Editor, Project Outline, Project Explorer and Console views.
	The arrangement of views can be easily selected using the perspectives icons as highlighted
	in the upper-right of the window as shown above.</p>
	</div>
	</div>
	</div>
	<div class="sect1">
	<h2 id="_creating_a_new_project"><a class="link" href="#_creating_a_new_project">Creating a new project<a id="new_project"></a></a></h2>
	<div class="sectionbody">
	<div class="paragraph">
	<p>After having set up a default workspace, a new project can be created using the New N4JS
	Project wizard which is accessed at <span class="menuseq"><b class="menu">File</b> <i class="fa fa-angle-right caret"></i> <b class="submenu">New</b> <i class="fa fa-angle-right caret"></i> <b class="menuitem">N4JS Project</b></span> (Or using the keyboard shortcuts
	<span class="keyseq"><kbd>⌘</kbd>+<kbd>Option</kbd>+<kbd>N</kbd></span> for Mac,
	<kbd>Alt-Shift-N</kbd> on Windows)</p>
	</div>
	<div class="imageblock">
	<div class="content">
	<img src="images/newproject.png" alt="newproject">
	</div>
	</div>
	<div class="paragraph">
	<p>In this case, we name the project "hello.world" and select <kbd>Finish</kbd> to create a project in the
	default location (our current workspace).
	The New N4JS Project wizard will also ask to specify a working set to include the project in.
	Working sets are for grouping together elements to be displayed and will allow the user to
	focus on specific projects and files without
	switching between workspaces. At this point, it is not necessary to add working sets, but when
	dealing with
	multiple projects, working sets can be a highly efficient way of switching between related
	projects and resources.</p>
	</div>
	<div class="sect2">
	<h3 id="_project_explorer"><a class="link" href="#_project_explorer">Project Explorer</a></h3>
	<div class="paragraph">
	<p>The Project Explorer view will display the structure of our new project:</p>
	</div>
	<div class="imageblock">
	<div class="content">
	<img src="images/projectexplorer.png" alt="projectexplorer">
	</div>
	</div>
	<div class="paragraph">
	<p>In the Project Explorer view, our project "hello.world" contains three folders with our resources:</p>
	</div>
	<div class="ulist">
	<ul>
	<li>
	<p><strong>src</strong> will contain our .n4js source files.</p>
	</li>
	<li>
	<p><strong>src-gen</strong> will contain the transpiled JavaScript that is generated after compiling n4js files.
	The IDE automatically transpiles n4js files on save.</p>
	</li>
	<li>
	<p><strong>manifest.n4mf</strong> is the project description file which contains descriptions of dependencies.</p>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	<div class="sect1">
	<h2 id="_creating_a_new_class"><a class="link" href="#_creating_a_new_class">Creating a new class<a id="creating_classes"></a></a></h2>
	<div class="sectionbody">
	<div class="paragraph">
	<p>In our new N4JS project, we can use the New N4JS Class wizard (accessed at <strong><span class="menuseq"><b class="menu">File</b> <i class="fa fa-angle-right caret"></i> <b class="submenu">New</b> <i class="fa fa-angle-right caret"></i> <b class="menuitem">N4JS Class</b></span></strong>
	or <span class="keyseq"><kbd>⌘</kbd>+<kbd>Option</kbd>+<kbd>n</kbd></span>)
	to create a new class called "HelloWorld":</p>
	</div>
	<div class="imageblock">
	<div class="content">
	<img src="images/helloworldclass.png" alt="helloworldclass">
	</div>
	</div>
	<div class="paragraph">
	<p>Let’s have a look at what a simple <strong>HelloWorld!</strong> example looks like in N4JS:</p>
	</div>
	<div class="listingblock">
	<div class="title">HelloWorld.n4js</div>
	<div class="content">
	<pre class="highlight"><code class="language-n4js" data-lang="n4js">export public class HelloWorld {
	public say_hi() {
	var message: string = "Hello World!";
	console.log(message);
	}
	}
	var announce = new HelloWorld();
	announce.say_hi();</code></pre>
	</div>
	</div>
	<div class="paragraph">
	<p>We can see some similarities with Java and JavaScript in this example, but with some notable features:</p>
	</div>
	<div class="ulist">
	<ul>
	<li>
	<p><strong>export</strong> makes the HelloWorld class available for import in another file or project.
	We modify this using the <strong>public</strong> keyword to specify where it is available. This demonstrates
	the use of <strong>modules</strong>
	inside N4JS which are fully explained in the <a href="../features/modules.html#modules">Modules</a> feature</p>
	</li>
	<li>
	<p><strong>string</strong> we use the type annotation string to define that the message variable is of type <strong>string</strong>.
	More can be read about type annotations in the <a href="../features/nominal-and-structural-typing.html#nominal_and_structural_typing">Nominal vs. Structural Typing</a> feature.</p>
	</li>
	</ul>
	</div>
	<div class="paragraph">
	<p>As we have used the export keyword and made the class public using the public <strong>access modifier</strong>,
	it is possible to call the methods of this class in another project. If we wanted to restrict access
	to this element, we would use protected
	so it may only be accessed from subclasses and private for within the same module only.
	The default visibility of an element is project.</p>
	</div>
	<div class="paragraph">
	<p>If we create a new class and define it as follows:</p>
	</div>
	<div class="listingblock">
	<div class="title">HelloCaller.n4js</div>
	<div class="content">
	<pre class="highlight"><code class="language-n4js" data-lang="n4js">import { HelloWorld } from "HelloWorld";

	export public class Caller {
	public call () {
	var c = new HelloWorld;
	return c;
	}
	}</code></pre>
	</div>
	</div>
	<div class="paragraph">
	<p>We can run this module named "HelloCaller" and invoke the methods from our HelloWorld class.</p>
	</div>
	</div>
	</div>
	<div class="sect1">
	<h2 id="_outline_view"><a class="link" href="#_outline_view">Outline View<a id="outline_view"></a></a></h2>
	<div class="sectionbody">
	<div class="paragraph">
	<p>The Outline View is a useful tool that provides a quick overview of the structure of our applications.
	If we look at the Outline View while we are editing our HelloWorld examples, we can see the following:</p>
	</div>
	<div class="imageblock">
	<div class="content">
	<img src="images/outlineview.png" alt="outlineview">
	</div>
	</div>
	<div class="paragraph">
	<p>The Outline View displays the structure of our very basic class with only one method. As
	projects become more populated
	and increase in complexity, the
	Outline View becomes helpful by assisting with navigating through the structure of a file.</p>
	</div>
	<div class="admonitionblock tip">
	<table>
	<tr>
	<td class="icon">
	<i class="fa icon-tip" title="Tip"></i>
	</td>
	<td class="content">
	Instead of having the Outline View always open in the IDE, the shortcut <span class="keyseq"><kbd>⌘</kbd>+<kbd>O</kbd></span>
	will open a Quick Outline window on demand. With this Quick Outline window open, begin typing to
	easily search for fields, methods and classes.
	</td>
	</tr>
	</table>
	</div>
	</div>
	</div>
	<div class="sect1">
	<h2 id="_running_as_node_js"><a class="link" href="#_running_as_node_js">Running as node.js</a></h2>
	<div class="sectionbody">
	<div class="paragraph">
	<p>To run this file, right-click inside the editor view and select <strong>Run as \| Launch in Node.js</strong>:</p>
	</div>
	<div class="imageblock">
	<div class="content">
	<img src="images/runhello.png" alt="runhello">
	</div>
	</div>
	<div class="paragraph">
	<p>The Console View will display the result of our console.log command, and our Hello World!
	example is running in the N4JS IDE without
	errors.</p>
	</div>
	</div>
	</div>
	<div class="sect1">
	<h2 id="_whats_next"><a class="link" href="#_whats_next">What’s Next?</a></h2>
	<div class="sectionbody">
	<div class="paragraph">
	<p>After creating a project and running some sample code, the next step we can have a look at is
	exporting our project as an npm package followed by running it from the command line and
	publishing to the npm registry. This is covered in the <a href="npm-export-guide.html#_npm_export_guide">export to npm</a> guide.</p>
	</div>
	</div>
	</div>
	</div>
	<div id="footer">
	<div id="footer-text">
	</div>
	</div>
	<div class="Grid social" style="color:#d5dfea">
	<div class="Cell Cell--2-12 m-Cell--withMargin">
	<h2>Quick Links</h2>
	<ul>
	<li><a href="../downloads.html">Download</a></li>
	<li><a href="index.html">Documentation</a></li>
	<li><a href="https://github.com/eclipse/n4js/">Source</a></li>
	<li><a href="https://github.com/eclipse/n4js/issues">Issues</a></li>
	</ul>
	</div>
	<div class="Cell Cell--2-12 m-Cell--withMargin">
	<br/><br/>
	<ul>
	<li><a href="https://www.eclipse.org/forums/index.php/f/365/">Forum</a></li>
	<li><a href="http://n4js.blogspot.de/">Blog</a></li>
	<li><a href="https://dev.eclipse.org/mailman/listinfo/n4js-dev">Mailing List</a></li>
	<li><a href="https://projects.eclipse.org/projects/technology.n4js">Eclipse Project Page</a></li>
	<li><a href="https://twitter.com/n4jsdev">Tweets by n4jsdev</a></li>
	</ul>
	</div>
	<div class="Cell Cell--2-12 m-Cell--withMargin">
	<br/><br/>
	<ul>
	<li><a href="http://www.eclipse.org/">Eclipse Home</a></li>
	<li><a href="http://www.eclipse.org/legal/privacy.php">Privacy Policy</a></li>
	<li><a href="http://www.eclipse.org/legal/termsofuse.php">Terms of Use</a></li>
	<li><a href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a></li>
	<li><a href="http://www.eclipse.org/legal/">Legal</a></li>
	</ul>
	</div>
	<div style="clear: both; height: 0; overflow: hidden;"></div>
	</div>

	<script>
	// Toggle the table of contents
	$( "button#tocbutton" ).click(function() {
	if ($("#tocbutton").css('right') == '25px') {
	$( "#tocbutton" ).animate({right: '215px'},"slow");
	$( "#toc.toc2" ).animate({right: '0'},"slow");
	}
	else {
	$( "#tocbutton" ).animate({right: '25px'},"slow");
	$( "#toc.toc2" ).animate({right: '-13rem'},"slow");
	}
	});
	</script>
	<script type="text/javascript">
	// Create a back to top button
	$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
	var amountScrolled = 300;
	$(window).scroll(function() {
	if ( $(window).scrollTop() > amountScrolled ) {
	$('a.back-to-top').fadeIn('slow');
	} else {
	$('a.back-to-top').fadeOut('slow');
	}
	});
	$('a.back-to-top, a.simple-back-to-top').click(function() {
	$('html, body').animate({
	scrollTop: 0
	}, 700);
	return false;
	});
	</script>
	</body>
	</html>