| <!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/101_five_minutes.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, 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 the Eclipse IDE, IntelliJ IDEA, and web browsers.</p> |
| |
| <p>But before we get started, make sure you have Eclipse Xtext properly <a href="../download.html">installed</a>. If you did not work with Eclipse yet you might want to choose the <a href="../download.html">Full Eclipse</a> distribution, which you can unpack into the folder of your choice and run. Otherwise you may install Xtext via the Eclipseone of our <a href="../download.html#updatesites">Update Sites</a> or the <a href="http://marketplace.eclipse.org/content/xtext">Eclipse Market Place</a> into your existing Eclipse IDE, and continue <a href="#new-project">here</a>. If you’re interested in Xtext’s IntelliJ IDEA or web support you need to install <a href="http://projects.eclipse.org/projects/tools.buildship">Buildship</a>, too, which is available via the <a href="http://marketplace.eclipse.org/content/buildship-gradle-integration">Eclipse Marketplace</a>, as well.</p> |
| |
| <p>After launching the Eclipse IDE you will be asked for a workspace directory, into which all the files and settings will be stored. You can start with the default proposal.</p> |
| |
| <p><img src="images/FiveMinTutorial_Workspace.png" alt="" /></p> |
| |
| <p>Once you confirmed your workspace the IDE will start with a welcome page. </p> |
| |
| <p><img src="images/FiveMinTutorial_Welcome.png" alt="" /></p> |
| |
| <p>Close the welcome page via the cross handle in the <em>Welcome</em> tab in the top left corner of the window, and there you go: This is your IDE.</p> |
| |
| <p><img src="images/FiveMinTutorial_PlainIDE.png" alt="" /></p> |
| |
| <h2 id="new-project">Creating A New Xtext Project</h2> |
| |
| <p>Now create a new Xtext project by choosing <em>File → New → Project…</em> from the main menu. The dialog offers a couple of different project types. Select <em>New Xtext Project</em> from the category <em>Xtext</em>.<br /> |
| <img src="images/FiveMinTutorial_WizardProjectType.png" alt="" /></p> |
| |
| <p>Keep the project and language names as proposed for the moment and continue via <em>Next</em>.<br /> |
| <img src="images/FiveMinTutorial_WizardPageNames.png" alt="" /></p> |
| |
| <p>Feel free to select all of the offered <em>Facets</em>, choose the <em>Gradle</em> build system, and finish the wizard.<br /> |
| <img src="images/FiveMinTutorial_WizardPageTargets.png" alt="" /></p> |
| |
| <p>You will find 9 new projects in your workspace which are mostly empty. The Xtext grammar editor will be opened and show the definition of a very simple <em>Hello World</em> language.</p> |
| |
| <p><img src="images/FiveMinTutorial_FreshProject.png" alt="" /></p> |
| |
| <p>The only thing this language allows is to write down a list of greetings. The following would be proper input: </p> |
| |
| <pre><code class="language-mydsl">Hello Xtext! |
| Hello World! |
| </code></pre> |
| |
| <h2 id="run-workflow">Generating The Language Infrastructure</h2> |
| |
| <p>In order to test drive this language, you will have to generate the respective language infrastructure. Therefore, open the grammar editor’s context menu and hit <em>Run As → Generate Xtext Artifacts</em>. A new Java process will be spawned, the <em>Console</em> view will appear, and afterwards you will find a couple of new files in the projects that were created by the project wizard.</p> |
| |
| <p><img src="images/FiveMinTutorial_GenerateXtext.png" alt="" /></p> |
| |
| <h2 id="testing-eclipse-editor">Try The Eclipse Editor</h2> |
| |
| <p>Let’s give the editor a try. If you select <em>Run As → Eclipse Application</em> from the project’s context menu. A new Eclipse IDE instance will be launched and allows to test drive the editor.</p> |
| |
| <p><img src="images/FiveMinTutorial_RunEditor.png" alt="" /></p> |
| |
| <p>Before you can create a file for the sample language in the test IDE you need to close the welcome page, of course, and create a sample project. Select <em>File → New → Project…</em> and choose a project type of your choice, e.g. <em>Java Project</em>, name it <em>Sample</em> and create a new file in the <em>src</em> folder of the project: From the context menu of the folder choose <em>New → File</em>, call it <em>Sample.mydsl</em> and hit <em>Finish</em>. The newly created editor for your language will open and ask you in a dialog, whether you want to add the Xtext nature to your project, which you should confirm. You can now give the editor a try, e.g. use content assist (<em>Ctrl+Space</em>) to insert the keyword <code>Hello</code> and see how the input is validated immediately.</p> |
| |
| <p><img src="images/FiveMinTutorial_EclipseEditor.png" alt="" /></p> |
| |
| <h2 id="testing-idea-editor">Try The IntelliJ IDEA Editor</h2> |
| |
| <p>The IDEA IDE can be launched by means of the Gradle build system. If you’re using the prepared Full Eclipse IDE, Gradle integration is already available. Otherwise, make sure to have <a href="http://projects.eclipse.org/projects/tools.buildship">Buildship</a> installed, which is available via the <a href="http://marketplace.eclipse.org/content/buildship-gradle-integration">Eclipse Marketplace</a>, for example.</p> |
| |
| <p>Open the <em>Gradle Tasks</em> view via <em>Window → Show view → Other… → Gradle → Gradle Tasks</em>.<br /> |
| <img src="images/FiveMinTutorial_RunIdea.png" alt="" /></p> |
| |
| <p>Expand the project <code>org.xtext.example.mydsl.parent</code> and double click on the task named <code>runIdea</code>. A bunch of required components is downloaded first, and after successful compilation an IDEA IDE is launched.<br /> |
| <img src="images/FiveMinTutorial_IdeaWelcome.png" alt="" /></p> |
| |
| <p>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/FiveMinTutorial_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. If you’re using the prepared Full Eclipse IDE, Gradle integration is already available. Otherwise, make sure to have <a href="http://projects.eclipse.org/projects/tools.buildship">Buildship</a> installed, which is available via the <a href="http://marketplace.eclipse.org/content/buildship-gradle-integration">Eclipse Marketplace</a>, for example.</p> |
| |
| <p>Open the <em>Gradle Tasks</em> view via <em>Window → Show view → Other… → Gradle → Gradle Tasks</em>.<br /> |
| <img src="images/FiveMinTutorial_JettyRun.png" alt="" /></p> |
| |
| <p>Expand the project <code>org.xtext.example.mydsl.parent</code> and double click on the task named <code>jettyRun</code>. 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>Console</em> view.</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 click into the <em>Console</em> view of your development IDE and hit <em>enter/return</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. You have run Xtext’s code generation in order to get a fully working language infrastructure, and finally learned how to test the generated editors.</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> |
