documentation/105_five_minutes_idea.html - www.eclipse.org/Xtext - Git at Google

 <!DOCTYPE html>
 <html>

   <head>
 	<meta charset="UTF-8">
 	<title>Xtext - 5 Minutes Tutorial</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="description"
 		content="The website of Eclipse Xtext, an open-source framework for development of programming languages and domain-specific languages">
 	<meta name="author" content="Sven Efftinge">
 	<meta name="author" content="Miro Spoenemann">
 	<!--  styles -->
 	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
 	<!--[if lt IE 9]>
 	  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 	<![endif]-->

 	<!-- Le fav and touch icons -->
 	<link rel="shortcut icon" href="/Xtext/images/favicon.png">

 	<link href="/Xtext/css/bootstrap.css" rel="stylesheet" type='text/css'>
 	<link href="/Xtext/css/bootstrap-responsive.css" rel="stylesheet" type='text/css'>
 	<link href="/Xtext/css/shield-responsive.css" rel="stylesheet" type='text/css'>
 	<link href='/Xtext/css/fonts.css' rel='stylesheet' type='text/css'>
 	<link href="/Xtext/css/prettyPhoto.css" rel="stylesheet" media="screen" type='text/css'>
 	<link href="/Xtext/css/prettify.css" type="text/css" rel="stylesheet"/>
 	<link href="/Xtext/css/style.css" rel="stylesheet" type='text/css'>
 	<!-- cover flow -->
 	<link href="/Xtext/css/coverflow.css" rel="stylesheet" type='text/css'>
 	<!--[if lt IE 9]>
 	  <link href="/css/iebugs.css" rel="stylesheet" type='text/css'>
 	<![endif]-->
 </head>


   <body>
   <!-- Google Tag Manager -->
 <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-TGDS5S"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
 })(window,document,'script','dataLayer','GTM-TGDS5S');</script>
 <!-- End Google Tag Manager -->

     <header class="site-header">

   <!-- Navbar -->
   <div class="navbar navbar-fixed-top">
     <div class="navbar-inner">
       <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse"
           data-target=".nav-collapse"> <span class="icon-bar"></span> <span
           class="icon-bar"></span> <span class="icon-bar"></span>
         </a> <a class="brand" href="/Xtext/index.html"></a>
         <div class="nav-collapse collapse" style="height: 0px;">
           <ul class="nav">
             <!--li ><a href="/Xtext/news.html">News</a></li-->
             <li ><a href="/Xtext/download.html">Download</a></li>
             <li ><a href="/Xtext/documentation/index.html">Documentation</a></li>
             <li ><a href="/Xtext/community.html">Community</a></li>
             <li ><a href="http://info.itemis.com/professional-xtext-support" target="_blank">Trainings &amp; Support</a></li>
           </ul>
           <!--div class="nav pull-right">
             <li ><a><iframe src="https://ghbtns.com/github-btn.html?user=eclipse&repo=xtext&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></a></li>
           </div-->
         </div>
         <!--/.nav-collapse -->
       </div>
     </div>
   </div>
   <!-- Navbar End -->

 </header>


     <div class="page-content">
   <script>
     function startSearch(event) {
         if (event.keyCode == 13) {
             var q = 'site:eclipse.org/Xtext/documentation+' + event.target.value;
             window.open('https://www.google.com/search?q=' + q, "_self");
         }
     }
   </script>
   <div class="wrapper">
   	<div id="page">
       <div class="inner">
         <div id="maincontainer" class="container">
           <span class="edit-on-github pull-right">
             <a href="https://github.com/eclipse/xtext/edit/maintenance/xtext-website/documentation/105_five_minutes_idea.md">Edit on Github</a>
           </span>
           <div class="span3" style="margin-left: 0px;">
             <div class="search-bar">
               <img src="/Xtext/images/search-gray.png"/>
               <input type="search" id="google-search" onkeyup="startSearch(event);"/>
             </div>
             <ul id="nav-outline" style="margin-left: 0px;">
 	<li class="nav-part">Getting Started</li>
 	<!--li><a href="101_five_minutes.html">5 Minutes Tutorial</a>
 	</li-->
 	<li><a href="102_domainmodelwalkthrough.html">15 Minutes Tutorial</a>
 	</li>
 	<li><a href="103_domainmodelnextsteps.html">15 Minutes Tutorial - Extended</a>
 	</li>
 	<li><a href="104_jvmdomainmodel.html">Five simple steps to your JVM language</a>
 	</li>
 	<!--li class="nav-part">Seven JVM Languages Built With Xbase</li>
 	<li><a href="201_sevenlang_introduction.html">Introduction</a>
 	</li>
 	<li><a href="202_scripting.html">Scripting Language</a>
 	</li>
 	<li><a href="203_builddsl.html">Build Language</a>
 	</li>
 	<li><a href="204_mongodb.html">DSL for MongoDB</a>
 	</li>
 	<li><a href="205_guice.html">DSL for Guice</a>
 	</li>
 	<li><a href="206_httprouting.html">Http Routing Language</a>
 	</li>
 	<li><a href="207_template.html">Template Language</a>
 	</li>
 	<li><a href="208_tortoise.html">Little Tortoise</a>
 	</li-->
 	<li class="nav-part">Reference Documentation</li>
 	<li><a href="301_grammarlanguage.html">The Grammar Language</a>
 	</li>
 	<li><a href="302_configuration.html">Configuration</a>
 	</li>
 	<li><a href="303_runtime_concepts.html">Runtime Concepts</a>
 	</li>
 	<li><a href="304_ide_concepts.html">IDE Concepts</a>
 	</li>
 	<li><a href="305_xbase.html">Xtext and Java</a>
 	</li>
 	<li><a href="306_mwe2.html">MWE2</a>
 	</li>
 	<li><a href="307_special_languages.html">Typical Language Configurations</a>
 	</li>
 	<li><a href="308_emf_integration.html">Integration with EMF and Other EMF Editors</a>
 	</li>
 	<!--li><a href="309_idea_integration.html">IntelliJ IDEA Support</a-->
 	</li>
 	<li><a href="310_web_integration.html">Web Editor Support</a>
 	</li>
 	<li><a href="350_continuous_integration.html">Continuous Integration</a>
 	</li>
 	<!--li class="nav-part">Appendix</li>
 	<li><a href="401_migrating_from_1_0_x.html">Migrating from Xtext 1.0.x to 2.0</a>
 	</li>
 	<li><a href="402_migrating_from_0_7.html">Migrating from Xtext 0.7.x to 1.0</a>
 	</li-->
 	<li class="nav-part">Additional Resources
 	<li><a href="http://download.eclipse.org/modeling/tmf/xtext/javadoc/2.8/">API Documentation (JavaDoc)</a>
 </ul>
           </div>
           <div class="span8 doc-contents">
             <h1 id="first-five-minutes">5 Minutes Tutorial</h1>

 <p>In this chapter you will learn how to create a new Xtext project in IDEA, generate a fully working language infrastructure, and how to start editors tailored to your language for testing. We show you how this works for editors based on IntelliJ IDEA and web browsers.</p>

 <p>But before we get started, download <a href="https://www.jetbrains.com/idea/">IDEA</a>, and install Xtext from one of our <a href="../download.html">update sites</a>. If you need no further assistance on that you may skip the following part and continue with <a href="#new-project">creating a new Xtext project</a>.</p>

 <h2 id="installing-xtext">Installing Xtext</h2>

 <p>Start IDEA and open the <em>Plugins</em> dialog via the <em>Configure</em> menu.</p>

 <p><img src="images/idea/FiveMinTutorialIdea_WelcomePlugins.png" alt="" /><br />
 <img src="images/idea/FiveMinTutorialIdea_Plugins.png" alt="" /></p>

 <p>Hit <em>Browse repositories… → Manage repositories…</em> </p>

 <p><img src="images/idea/FiveMinTutorialIdea_BrowseRepositories.png" alt="" /></p>

 <p>… and enter the <a href="../download.html">update sites</a> of your choice. <br />
 <img src="images/idea/FiveMinTutorialIdea_Repositories.png" alt="" /></p>

 <p>Select the Xtext update site, …<br />
 <img src="images/idea/FiveMinTutorialIdea_XtextRepository.png" alt="" /></p>

 <p>… select all the offered plugins, and hit <em>Download and Install</em>.<br />
 <img src="images/idea/FiveMinTutorialIdea_InstallXtext.png" alt="" /></p>

 <p>Once the installation is done restart IDEA, e.g. by selecting on of the plugins and hitting <em>Restart IntelliJ IDEA</em>.<br />
 <img src="images/idea/FiveMinTutorialIdea_InstallXtextRestart.png" alt="" /></p>

 <h2 id="new-project">Creating A New Xtext Project</h2>

 <p>Start the Xtext project wizard by selecting <em>Create New Project</em><br />
 <img src="images/idea/FiveMinTutorialIdea_Welcome.png" alt="" /></p>

 <p>Select <em>Xtext</em> in the list on the left. Choose you favorite Java SDK, check the <em>Web integration</em> and <em>Testing support</em> for this tutorial, keep remaining settings, and go the <em>next</em> page.  <br />
 <img src="images/idea/FiveMinTutorialIdea_WizardPageLanguage.png" alt="" /></p>

 <p>Change the <em>Project Name</em> to <em>org.xtext.example.mydsl</em>, and <em>finish</em>.<br />
 <img src="images/idea/FiveMinTutorialIdea_WizardPageProjectName.png" alt="" /></p>

 <p>Your first Xtext project is set up, now! Find the generated grammar stub within the sub project <em>org.xtext.example.mydsl → src → main → java → org.xtext.example.mydsl</em>, as shown in the screen shot.<br />
 <img src="images/idea/FiveMinTutorialIdea_FreshProject.png" alt="" /></p>

 <h2 id="testing-idea-editor">Try The IDEA Editor</h2>

 <p>The generation of your DSL-specific parser and editor infrastructure can be easily invoked by means of our dedicated Gradle extensions. Hence, open the <em>Gradle projects</em> view, e.g. via the magic button in the button in the lower left corner of the IDE. Make sure to have an active Internet connection and access to the JCenter artifact repository, since required artifacts will be downloaded during the first run. Make also sure to have Gradle working in online mode, which can be set in <em>Preferences… → Build, Execution, Deployment → Build Tools → Gradle</em> by unchecking <em>Offline work</em>.<br />
 <img src="images/idea/FiveMinTutorialIdea_OpenGradleView.png" alt="" /></p>

 <p>Expand the items named <em>org.xtext.example.mydsl.parent → Tasks → intellij idea</em> and hit <em>runIdea</em>.<br />
 <img src="images/idea/FiveMinTutorialIdea_RunIdea.png" alt="" /></p>

 <p>Once the test IDE is loaded create a new project, e.g., a Java project. You may skip the determination of the SDK to be used and proceed to the prompt of the project name.<br />
 <img src="images/FiveMinTutorial_IdeaNewProject.png" alt="" /></p>

 <p>Let’s call the project <em>Sample</em>.<br />
 <img src="images/FiveMinTutorial_IdeaProjectName.png" alt="" /></p>

 <p>Once your project is set up create a plain file named <em>Sample.mydsl</em> in the <em>src</em> folder, and your DSL editor is opened. Enter the example text below, check out the content assist (<em>CTRL/CMD + Space</em>) as well as the live validation offered by the editor.</p>

 <pre><code class="language-mydsl">Hello Xtext!
 Hello World!
 </code></pre>

 <p><img src="images/idea/FiveMinTutorialIdea_IdeaEditor.png" alt="" /></p>

 <h2 id="testing-web-editor">Try The Web Editor</h2>

 <p>For testing the web editor a local web server needs to be started. That can be launched by means of the Gradle build system, too. Thus, open the <em>Gradle projects</em> view as shown above. Again, make sure to have an active Internet connection and access to the JCenter artifact repository, since required artifacts will be downloaded during the first run. Make also sure to have Gradle working in online mode, which can be set in <em>Preferences… → Build, Execution, Deployment → Build Tools → Gradle</em> by unchecking <em>Offline work</em>.<br />
 <img src="images/idea/FiveMinTutorialIdea_OpenGradleView.png" alt="" /></p>

 <p>Expand the items named <em>org.xtext.example.mydsl.parent → Tasks → run</em> and hit <em>jettyRun</em>. A bunch of required components is downloaded first, and after successful compilation a Jetty web server is launched. It is accessible via the URL printed in the <em>Run tool</em> view.</p>

 <p><img src="images/idea/FiveMinTutorialIdea_JettyRun.png" alt="" /></p>

 <p>Open that URL in your favorite browsers, click into the text field, and enter sample text</p>

 <pre><code class="language-mydsl">Hello Xtext!
 Hello World!
 </code></pre>
 <p>Check out the content assist by hitting <em>Ctrl/Cmd + Space</em>.</p>

 <p><img src="images/FiveMinTutorial_BrowserEditor.png" alt="" /></p>

 <p>To stop the web server hit the red stop button on left of the <em>Run tool</em> view of IDEA or go to IDEA’s main menu <em>→ Run → Stop</em>.</p>

 <h2 id="five-minutes-conclusion">Conclusion</h2>

 <p>In your first five minutes with Xtext, you have learned how to create a valid set of projects for building editors for your DSLs with IntelliJ IDEA. You have run Xtext’s code generation and compilation by means of the Gradle build system. That allows you to test the generated editors implementing your DSLs.</p>

 <p>Next up you should go through the more comprehensive <a href="102_domainmodelwalkthrough.html">Domain Model Example</a>. It explains the different concepts of the Xtext grammar language and illustrates how to customize various aspects of the language. </p>

 <hr />

 <p><strong><a href="102_domainmodelwalkthrough.html">Next Chapter: 15 Minutes Tutorial</a></strong></p>

           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

     <footer class="site-footer">
   <div id="extra">
     <div class="inner">
       <div class="container">
         <div class="row">
           <div class="span6">
             <h3 class="footer-links-header">Quick Links</h3>
             <ul class="footer-links clearfix">
               <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>
             <ul class="footer-links clearfix">
               <li><a href="http://www.eclipse.org">Eclipse Home</a></li>
               <li><a href="http://marketplace.eclipse.org/">Market Place</a></li>
               <li><a href="http://live.eclipse.org/">Eclipse Live</a></li>
               <li><a href="http://www.planeteclipse.org/">Eclipse Planet</a></li>
             </ul>
           </div>
           <div class="span6">
             <h3 class="footer-links-header"><a href="https://twitter.com/xtext" style="color: white;">@Xtext</a> on Twitter</h3>
             <a class="twitter-timeline" href="https://twitter.com/xtext" data-widget-id="346625441290928128"
             data-chrome="noheader nofooter transparent"
             data-theme="dark">Tweets by @xtext</a>
             <script>
             !function(d,s,id) {
               var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
               if(!d.getElementById(id)) {
                 js=d.createElement(s);
                 js.id=id;
                 js.src=p+"://platform.twitter.com/widgets.js";
                 fjs.parentNode.insertBefore(js,fjs);
               }
             }(document,"script","twitter-wjs");
             </script>

           </div>
         </div>
       </div>
     </div>
   </div>
   <a href="#" class="scrollup fadeOutRight animated" style="display: none;">ScrollUp</a>
   <!-- Le javascript
       ================================================== -->
   <!-- Placed at the end of the document so the pages load faster -->

   <script src="/Xtext/js/jquery-1.11.3.min.js"></script>
   <script src="/Xtext/js/bootstrap.min.js"></script>
   <script src="/Xtext/js/jquery.easing.1.3.js" type="text/javascript"></script>
   <script src="/Xtext/js/jquery.prettyPhoto.js" type="text/javascript"></script>
   <script src="/Xtext/js/twitter.js" type="text/javascript"></script>
   <script src="/Xtext/js/prettify.js" type="text/javascript"></script>
   <script src="/Xtext/js/lang-xtend.js" type="text/javascript"></script>
   <script src="/Xtext/js/lang-common.js" type="text/javascript"></script>
   <script src="/Xtext/js/custom.js" type="text/javascript"></script>
   <script src="https://apis.google.com/js/platform.js" async defer></script>
   <!--script type="text/javascript">
     var _gaq = _gaq || [];
       _gaq.push([ '_setAccount', 'UA-2429174-3' ]);
     _gaq.push([ '_trackPageview' ]);
     (function() {
       var ga = document.createElement('script');
       ga.type = 'text/javascript';
       ga.async = true;
       ga.src = ('https:' == document.location.protocol ? 'https://ssl'
           : 'http://www')
           + '.google-analytics.com/ga.js';
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(ga, s);
     })();
   </script-->
   <script src="/Xtext/js/coverflow.min.js" type="text/javascript"></script>
   <script>
       $(function() {
         $('#coverflow').coverflow({
           active : 1,
           visibleAside: 2,
           overlap : 0.5,
           scale : 0.9,
           angle : 20,
           trigger : {
             "itemfocus" : true,
             "swipe" : true,
             "mousewheel" : false
           }
         });
         $('#coverflow :hidden').toggle();
         $(window).resize(function() {
           $('#coverflow').coverflow();
         });
       });

   </script>
 </footer>


   </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Xtext - 5 Minutes Tutorial</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description"
	content="The website of Eclipse Xtext, an open-source framework for development of programming languages and domain-specific languages">
	<meta name="author" content="Sven Efftinge">
	<meta name="author" content="Miro Spoenemann">
	<!-- styles -->
	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Le fav and touch icons -->
	<link rel="shortcut icon" href="/Xtext/images/favicon.png">

	<link href="/Xtext/css/bootstrap.css" rel="stylesheet" type='text/css'>
	<link href="/Xtext/css/bootstrap-responsive.css" rel="stylesheet" type='text/css'>
	<link href="/Xtext/css/shield-responsive.css" rel="stylesheet" type='text/css'>
	<link href='/Xtext/css/fonts.css' rel='stylesheet' type='text/css'>
	<link href="/Xtext/css/prettyPhoto.css" rel="stylesheet" media="screen" type='text/css'>
	<link href="/Xtext/css/prettify.css" type="text/css" rel="stylesheet"/>
	<link href="/Xtext/css/style.css" rel="stylesheet" type='text/css'>
	<!-- cover flow -->
	<link href="/Xtext/css/coverflow.css" rel="stylesheet" type='text/css'>
	<!--[if lt IE 9]>
	<link href="/css/iebugs.css" rel="stylesheet" type='text/css'>
	<![endif]-->
	</head>


	<body>
	<!-- Google Tag Manager -->
	<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-TGDS5S"
	height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
	<script>(function(w,d,s,l,i){w[l]=w[l]\|\|[];w[l].push({'gtm.start':
	new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
	'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
	})(window,document,'script','dataLayer','GTM-TGDS5S');</script>
	<!-- End Google Tag Manager -->

	<header class="site-header">

	<!-- Navbar -->
	<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
	<div class="container">
	<a class="btn btn-navbar" data-toggle="collapse"
	data-target=".nav-collapse"> <span class="icon-bar"></span> <span
	class="icon-bar"></span> <span class="icon-bar"></span>
	</a> <a class="brand" href="/Xtext/index.html"></a>
	<div class="nav-collapse collapse" style="height: 0px;">
	<ul class="nav">
	<!--li ><a href="/Xtext/news.html">News</a></li-->
	<li ><a href="/Xtext/download.html">Download</a></li>
	<li ><a href="/Xtext/documentation/index.html">Documentation</a></li>
	<li ><a href="/Xtext/community.html">Community</a></li>
	<li ><a href="http://info.itemis.com/professional-xtext-support" target="_blank">Trainings & Support</a></li>
	</ul>
	<!--div class="nav pull-right">
	<li ><a><iframe src="https://ghbtns.com/github-btn.html?user=eclipse&repo=xtext&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></a></li>
	</div-->
	</div>
	<!--/.nav-collapse -->
	</div>
	</div>
	</div>
	<!-- Navbar End -->

	</header>


	<div class="page-content">
	<script>
	function startSearch(event) {
	if (event.keyCode == 13) {
	var q = 'site:eclipse.org/Xtext/documentation+' + event.target.value;
	window.open('https://www.google.com/search?q=' + q, "_self");
	}
	}
	</script>
	<div class="wrapper">
	<div id="page">
	<div class="inner">
	<div id="maincontainer" class="container">
	<span class="edit-on-github pull-right">
	<a href="https://github.com/eclipse/xtext/edit/maintenance/xtext-website/documentation/105_five_minutes_idea.md">Edit on Github</a>
	</span>
	<div class="span3" style="margin-left: 0px;">
	<div class="search-bar">
	<img src="/Xtext/images/search-gray.png"/>
	<input type="search" id="google-search" onkeyup="startSearch(event);"/>
	</div>
	<ul id="nav-outline" style="margin-left: 0px;">
	<li class="nav-part">Getting Started</li>
	<!--li><a href="101_five_minutes.html">5 Minutes Tutorial</a>
	</li-->
	<li><a href="102_domainmodelwalkthrough.html">15 Minutes Tutorial</a>
	</li>
	<li><a href="103_domainmodelnextsteps.html">15 Minutes Tutorial - Extended</a>
	</li>
	<li><a href="104_jvmdomainmodel.html">Five simple steps to your JVM language</a>
	</li>
	<!--li class="nav-part">Seven JVM Languages Built With Xbase</li>
	<li><a href="201_sevenlang_introduction.html">Introduction</a>
	</li>
	<li><a href="202_scripting.html">Scripting Language</a>
	</li>
	<li><a href="203_builddsl.html">Build Language</a>
	</li>
	<li><a href="204_mongodb.html">DSL for MongoDB</a>
	</li>
	<li><a href="205_guice.html">DSL for Guice</a>
	</li>
	<li><a href="206_httprouting.html">Http Routing Language</a>
	</li>
	<li><a href="207_template.html">Template Language</a>
	</li>
	<li><a href="208_tortoise.html">Little Tortoise</a>
	</li-->
	<li class="nav-part">Reference Documentation</li>
	<li><a href="301_grammarlanguage.html">The Grammar Language</a>
	</li>
	<li><a href="302_configuration.html">Configuration</a>
	</li>
	<li><a href="303_runtime_concepts.html">Runtime Concepts</a>
	</li>
	<li><a href="304_ide_concepts.html">IDE Concepts</a>
	</li>
	<li><a href="305_xbase.html">Xtext and Java</a>
	</li>
	<li><a href="306_mwe2.html">MWE2</a>
	</li>
	<li><a href="307_special_languages.html">Typical Language Configurations</a>
	</li>
	<li><a href="308_emf_integration.html">Integration with EMF and Other EMF Editors</a>
	</li>
	<!--li><a href="309_idea_integration.html">IntelliJ IDEA Support</a-->
	</li>
	<li><a href="310_web_integration.html">Web Editor Support</a>
	</li>
	<li><a href="350_continuous_integration.html">Continuous Integration</a>
	</li>
	<!--li class="nav-part">Appendix</li>
	<li><a href="401_migrating_from_1_0_x.html">Migrating from Xtext 1.0.x to 2.0</a>
	</li>
	<li><a href="402_migrating_from_0_7.html">Migrating from Xtext 0.7.x to 1.0</a>
	</li-->
	<li class="nav-part">Additional Resources
	<li><a href="http://download.eclipse.org/modeling/tmf/xtext/javadoc/2.8/">API Documentation (JavaDoc)</a>
	</ul>
	</div>
	<div class="span8 doc-contents">
	<h1 id="first-five-minutes">5 Minutes Tutorial</h1>

	<p>In this chapter you will learn how to create a new Xtext project in IDEA, generate a fully working language infrastructure, and how to start editors tailored to your language for testing. We show you how this works for editors based on IntelliJ IDEA and web browsers.</p>

	<p>But before we get started, download <a href="https://www.jetbrains.com/idea/">IDEA</a>, and install Xtext from one of our <a href="../download.html">update sites</a>. If you need no further assistance on that you may skip the following part and continue with <a href="#new-project">creating a new Xtext project</a>.</p>

	<h2 id="installing-xtext">Installing Xtext</h2>

	<p>Start IDEA and open the <em>Plugins</em> dialog via the <em>Configure</em> menu.</p>

	<p><img src="images/idea/FiveMinTutorialIdea_WelcomePlugins.png" alt="" /><br />
	<img src="images/idea/FiveMinTutorialIdea_Plugins.png" alt="" /></p>

	<p>Hit <em>Browse repositories… → Manage repositories…</em> </p>

	<p><img src="images/idea/FiveMinTutorialIdea_BrowseRepositories.png" alt="" /></p>

	<p>… and enter the <a href="../download.html">update sites</a> of your choice. <br />
	<img src="images/idea/FiveMinTutorialIdea_Repositories.png" alt="" /></p>

	<p>Select the Xtext update site, …<br />
	<img src="images/idea/FiveMinTutorialIdea_XtextRepository.png" alt="" /></p>

	<p>… select all the offered plugins, and hit <em>Download and Install</em>.<br />
	<img src="images/idea/FiveMinTutorialIdea_InstallXtext.png" alt="" /></p>

	<p>Once the installation is done restart IDEA, e.g. by selecting on of the plugins and hitting <em>Restart IntelliJ IDEA</em>.<br />
	<img src="images/idea/FiveMinTutorialIdea_InstallXtextRestart.png" alt="" /></p>

	<h2 id="new-project">Creating A New Xtext Project</h2>

	<p>Start the Xtext project wizard by selecting <em>Create New Project</em><br />
	<img src="images/idea/FiveMinTutorialIdea_Welcome.png" alt="" /></p>

	<p>Select <em>Xtext</em> in the list on the left. Choose you favorite Java SDK, check the <em>Web integration</em> and <em>Testing support</em> for this tutorial, keep remaining settings, and go the <em>next</em> page. <br />
	<img src="images/idea/FiveMinTutorialIdea_WizardPageLanguage.png" alt="" /></p>

	<p>Change the <em>Project Name</em> to <em>org.xtext.example.mydsl</em>, and <em>finish</em>.<br />
	<img src="images/idea/FiveMinTutorialIdea_WizardPageProjectName.png" alt="" /></p>

	<p>Your first Xtext project is set up, now! Find the generated grammar stub within the sub project <em>org.xtext.example.mydsl → src → main → java → org.xtext.example.mydsl</em>, as shown in the screen shot.<br />
	<img src="images/idea/FiveMinTutorialIdea_FreshProject.png" alt="" /></p>

	<h2 id="testing-idea-editor">Try The IDEA Editor</h2>

	<p>The generation of your DSL-specific parser and editor infrastructure can be easily invoked by means of our dedicated Gradle extensions. Hence, open the <em>Gradle projects</em> view, e.g. via the magic button in the button in the lower left corner of the IDE. Make sure to have an active Internet connection and access to the JCenter artifact repository, since required artifacts will be downloaded during the first run. Make also sure to have Gradle working in online mode, which can be set in <em>Preferences… → Build, Execution, Deployment → Build Tools → Gradle</em> by unchecking <em>Offline work</em>.<br />
	<img src="images/idea/FiveMinTutorialIdea_OpenGradleView.png" alt="" /></p>

	<p>Expand the items named <em>org.xtext.example.mydsl.parent → Tasks → intellij idea</em> and hit <em>runIdea</em>.<br />
	<img src="images/idea/FiveMinTutorialIdea_RunIdea.png" alt="" /></p>

	<p>Once the test IDE is loaded create a new project, e.g., a Java project. You may skip the determination of the SDK to be used and proceed to the prompt of the project name.<br />
	<img src="images/FiveMinTutorial_IdeaNewProject.png" alt="" /></p>

	<p>Let’s call the project <em>Sample</em>.<br />
	<img src="images/FiveMinTutorial_IdeaProjectName.png" alt="" /></p>

	<p>Once your project is set up create a plain file named <em>Sample.mydsl</em> in the <em>src</em> folder, and your DSL editor is opened. Enter the example text below, check out the content assist (<em>CTRL/CMD + Space</em>) as well as the live validation offered by the editor.</p>

	<pre><code class="language-mydsl">Hello Xtext!
	Hello World!
	</code></pre>

	<p><img src="images/idea/FiveMinTutorialIdea_IdeaEditor.png" alt="" /></p>

	<h2 id="testing-web-editor">Try The Web Editor</h2>

	<p>For testing the web editor a local web server needs to be started. That can be launched by means of the Gradle build system, too. Thus, open the <em>Gradle projects</em> view as shown above. Again, make sure to have an active Internet connection and access to the JCenter artifact repository, since required artifacts will be downloaded during the first run. Make also sure to have Gradle working in online mode, which can be set in <em>Preferences… → Build, Execution, Deployment → Build Tools → Gradle</em> by unchecking <em>Offline work</em>.<br />
	<img src="images/idea/FiveMinTutorialIdea_OpenGradleView.png" alt="" /></p>

	<p>Expand the items named <em>org.xtext.example.mydsl.parent → Tasks → run</em> and hit <em>jettyRun</em>. A bunch of required components is downloaded first, and after successful compilation a Jetty web server is launched. It is accessible via the URL printed in the <em>Run tool</em> view.</p>

	<p><img src="images/idea/FiveMinTutorialIdea_JettyRun.png" alt="" /></p>

	<p>Open that URL in your favorite browsers, click into the text field, and enter sample text</p>

	<pre><code class="language-mydsl">Hello Xtext!
	Hello World!
	</code></pre>
	<p>Check out the content assist by hitting <em>Ctrl/Cmd + Space</em>.</p>

	<p><img src="images/FiveMinTutorial_BrowserEditor.png" alt="" /></p>

	<p>To stop the web server hit the red stop button on left of the <em>Run tool</em> view of IDEA or go to IDEA’s main menu <em>→ Run → Stop</em>.</p>

	<h2 id="five-minutes-conclusion">Conclusion</h2>

	<p>In your first five minutes with Xtext, you have learned how to create a valid set of projects for building editors for your DSLs with IntelliJ IDEA. You have run Xtext’s code generation and compilation by means of the Gradle build system. That allows you to test the generated editors implementing your DSLs.</p>

	<p>Next up you should go through the more comprehensive <a href="102_domainmodelwalkthrough.html">Domain Model Example</a>. It explains the different concepts of the Xtext grammar language and illustrates how to customize various aspects of the language. </p>

	<hr />

	<p><strong><a href="102_domainmodelwalkthrough.html">Next Chapter: 15 Minutes Tutorial</a></strong></p>

	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<footer class="site-footer">
	<div id="extra">
	<div class="inner">
	<div class="container">
	<div class="row">
	<div class="span6">
	<h3 class="footer-links-header">Quick Links</h3>
	<ul class="footer-links clearfix">
	<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>
	<ul class="footer-links clearfix">
	<li><a href="http://www.eclipse.org">Eclipse Home</a></li>
	<li><a href="http://marketplace.eclipse.org/">Market Place</a></li>
	<li><a href="http://live.eclipse.org/">Eclipse Live</a></li>
	<li><a href="http://www.planeteclipse.org/">Eclipse Planet</a></li>
	</ul>
	</div>
	<div class="span6">
	<h3 class="footer-links-header"><a href="https://twitter.com/xtext" style="color: white;">@Xtext</a> on Twitter</h3>
	<a class="twitter-timeline" href="https://twitter.com/xtext" data-widget-id="346625441290928128"
	data-chrome="noheader nofooter transparent"
	data-theme="dark">Tweets by @xtext</a>
	<script>
	!function(d,s,id) {
	var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
	if(!d.getElementById(id)) {
	js=d.createElement(s);
	js.id=id;
	js.src=p+"://platform.twitter.com/widgets.js";
	fjs.parentNode.insertBefore(js,fjs);
	}
	}(document,"script","twitter-wjs");
	</script>

	</div>
	</div>
	</div>
	</div>
	</div>
	<a href="#" class="scrollup fadeOutRight animated" style="display: none;">ScrollUp</a>
	<!-- Le javascript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->

	<script src="/Xtext/js/jquery-1.11.3.min.js"></script>
	<script src="/Xtext/js/bootstrap.min.js"></script>
	<script src="/Xtext/js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="/Xtext/js/jquery.prettyPhoto.js" type="text/javascript"></script>
	<script src="/Xtext/js/twitter.js" type="text/javascript"></script>
	<script src="/Xtext/js/prettify.js" type="text/javascript"></script>
	<script src="/Xtext/js/lang-xtend.js" type="text/javascript"></script>
	<script src="/Xtext/js/lang-common.js" type="text/javascript"></script>
	<script src="/Xtext/js/custom.js" type="text/javascript"></script>
	<script src="https://apis.google.com/js/platform.js" async defer></script>
	<!--script type="text/javascript">
	var _gaq = _gaq \|\| [];
	_gaq.push([ '_setAccount', 'UA-2429174-3' ]);
	_gaq.push([ '_trackPageview' ]);
	(function() {
	var ga = document.createElement('script');
	ga.type = 'text/javascript';
	ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl'
	: 'http://www')
	+ '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(ga, s);
	})();
	</script-->
	<script src="/Xtext/js/coverflow.min.js" type="text/javascript"></script>
	<script>
	$(function() {
	$('#coverflow').coverflow({
	active : 1,
	visibleAside: 2,
	overlap : 0.5,
	scale : 0.9,
	angle : 20,
	trigger : {
	"itemfocus" : true,
	"swipe" : true,
	"mousewheel" : false
	}
	});
	$('#coverflow :hidden').toggle();
	$(window).resize(function() {
	$('#coverflow').coverflow();
	});
	});

	</script>
	</footer>


	</body>

	</html>