| <!-- |
| ~ Copyright (c) 2010-2020 BSI Business Systems Integration AG. |
| ~ All rights reserved. This program and the accompanying materials |
| ~ are made available under the terms of the Eclipse Public License v1.0 |
| ~ which accompanies this distribution, and is available at |
| ~ http://www.eclipse.org/legal/epl-v10.html |
| ~ |
| ~ Contributors: |
| ~ BSI Business Systems Integration AG - initial API and implementation |
| --> |
| <!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.5"> |
| <title>Hello World Tutorial</title> |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700"> |
| <link rel="stylesheet" href="css/eclipse.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> |
| <link rel="stylesheet" href="css/coderay-eclipse.css"> |
| </head> |
| <body class="article"> |
| <table border="0" class="navigation" style="width: 100%;" summary="navigation"> |
| <tr> |
| <td align="left" colspan="1" rowspan="1" style="width: 30%"><a href="tutorial.html" shape="rect" title="Getting Started"><img alt="Previous" border="0" src="images/prev.gif"></a></td> |
| <td align="center" colspan="1" rowspan="1" style="width: 40%"></td> |
| <td align="right" colspan="1" rowspan="1" style="width: 30%"><a href="tutorial_existingdemo.html" shape="rect" title="Import the Scout Demo Applications"><img alt="Next" border="0" src="images/next.gif"></a></td> |
| </tr> |
| <tr> |
| <td align="left" colspan="1" rowspan="1" style="width: 30%">Getting Started</td> |
| <td align="center" colspan="1" rowspan="1" style="width: 40%"></td> |
| <td align="right" colspan="1" rowspan="1" style="width: 30%">Import the Scout Demo Applications</td> |
| </tr> |
| </table> |
| <div id="header"> |
| </div> |
| <div id="content"> |
| <div class="sect2"> |
| <h3 id="hello-world-tutorial"><a class="anchor" href="#hello-world-tutorial"></a>Hello World Tutorial</h3> |
| <div class="paragraph"> |
| <p>With this tutorial you will learn how to create your first Scout application.</p> |
| </div> |
| <div class="sect3"> |
| <h4 id="create-a-scout-project"><a class="anchor" href="#create-a-scout-project"></a>Create a Scout Project</h4> |
| <div class="paragraph"> |
| <p>Start your Eclipse IDE and select an empty directory for your workspace as shown in <a href="#img-sdk_start_new_workspace">Figure 1</a>. This workspace directory will then hold all the project code for the <code>Hello World</code> application. Once the Eclipse IDE is running it will show the Java perspective.</p> |
| </div> |
| <div id="img-sdk_start_new_workspace" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_start_new_workspace.png" alt="sdk start new workspace"> |
| </div> |
| <div class="title"> |
| Figure 1. Select a new empty folder to hold your project workspace |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>To create a new Scout project select the menu <span class="menuseq"><span class="menu">File</span> ▸ <span class="submenu">New</span> ▸ <span class="menuitem">Project…​</span></span> and type “Scout Project” in the wizard search field. |
| Select the Scout Project wizard and press <b class="button">Next</b>. |
| The <em class="wizard">New Scout Project</em> wizard is then started as shown in <a href="#img-sdk_new_project_wizard">Figure 2</a>.</p> |
| </div> |
| <div id="img-sdk_new_project_wizard" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_new_project.png" alt="sdk new project"> |
| </div> |
| <div class="title"> |
| Figure 2. The new Scout project wizard. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>In the <em class="wizard">New Scout Project</em> wizard you have to enter a <code>group id</code>, <code>artifact id</code> and a <code>display name</code> for your Scout project. As the created project will make use of <a href="https://maven.apache.org/" target="_blank">Apache Maven</a> please refer to the <a href="https://maven.apache.org/guides/mini/guide-naming-conventions.html" target="_blank">Maven naming conventions</a> to choose <code>group id</code> and <code>artifact id</code> for your project. The <code>artifact id</code> will then also be the project name in the Eclipse workspace. The <code>display name</code> is used as the application name presented to the user (e.g. in the Browser title bar).</p> |
| </div> |
| <div class="paragraph"> |
| <p>For the <code>Hello World</code> application just use the already prefilled values as sown in <a href="#img-sdk_new_project_wizard">Figure 2</a>. Then, click the <b class="button">Finish</b> button to let the Scout SDK create the initial project code for you.</p> |
| </div> |
| <div class="paragraph"> |
| <p>Depending on your Eclipse installation some <code>Maven plugin connectors</code> may be missing initially. In that case a dialog as shown in <a href="#img-sdk_new_project_connector">Figure 3</a> may be shown. To continue click on <b class="button">Finish</b> to resolve the selected connectors. Afterwards confirm the installation, accept the license and the message that some content has not been signed. Finally, the installation of the maven plugin connectors requires a restart of the Eclipse IDE.</p> |
| </div> |
| <div id="img-sdk_new_project_connector" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_new_project_connectors.png" alt="sdk new project connectors"> |
| </div> |
| <div class="title"> |
| Figure 3. The Maven plugin connector installation dialog. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>After the <em class="wizard">New Scout Project</em> wizard has created the initial Maven modules for the <code>Hello World</code> application these modules are compiled and built by the Eclipse IDE. In case of a successful Eclipse Scout installation your Eclipse IDE should display all created Maven modules in the Package Explorer and have an empty Problems view as shown in <a href="#img-sdk_new_project_initial_helloworld">Figure 4</a>.</p> |
| </div> |
| <div id="img-sdk_new_project_initial_helloworld" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_new_project_initial_helloworld.png" alt="sdk new project initial helloworld"> |
| </div> |
| <div class="title"> |
| Figure 4. The inital set of Maven modules created for the Hello World application. |
| </div> |
| </div> |
| <div class="admonitionblock warning"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-warning" title="Warning"></i> |
| </td> |
| <td class="content"> |
| You need to adjust the Maven build if Java 9 is the minimal required version of your project. Open <code>helloworld/pom.xml</code> (replace <code>helloworld</code> with the <code>artifact id</code> you chose earlier) and add <code><master_signatureCheck_skip>true</master_signatureCheck_skip></code> to the <code><properties></code>-element. Note: the minimal required Java version is declared by property <code>jdk.source.version</code> within the very same <code><properties></code>-element. |
| </td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| <div class="sect3"> |
| <h4 id="run-the-application"><a class="anchor" href="#run-the-application"></a>Run the Application</h4> |
| <div class="paragraph"> |
| <p>After the initial project creation step we can try to start the Scout application for the first time. |
| Since the Hello World app consists of a backend and a frontend, we need to start two servers, one for the backend and one for the frontend. |
| We also need to launch the JavaScript build that creates the JS and CSS bundles which will be served by the frontend server. |
| We could start each launch configuration separately, but for the sake of convenience there is a launch group available which starts all at once.</p> |
| </div> |
| <div class="paragraph"> |
| <p>To start the launch group we use the <em class="menu">Run As</em> menu as shown in <a href="#img-start_all">Figure 5</a>.</p> |
| </div> |
| <div id="img-start_all" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_start_all.png" alt="sdk start all"> |
| </div> |
| <div class="title">Figure 5. Starting the Hello World application.</div> |
| |
| </div> |
| <div class="paragraph"> |
| <p>Because the JavaScript build needs a Node.js installation, the launching will fail if Node.js is not installed, see <a href="#img-start_missing_node">Figure 6</a></p> |
| </div> |
| <div id="img-start_missing_node" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_start_missing_node.png" alt="sdk start missing node"> |
| </div> |
| <div class="title"> |
| Figure 6. Launching fails due to missing Node.js |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>If that is the case, we need to install a recent Node.js version. |
| To do this, we visit the official download page <a href="https://nodejs.org/en/" class="bare">https://nodejs.org/en/</a>, download the LTS version for our platform and install it.</p> |
| </div> |
| <div class="admonitionblock important"> |
| <table> |
| <tr> |
| <td class="icon"> |
| <i class="fa icon-important" title="Important"></i> |
| </td> |
| <td class="content"> |
| The installation process could also fail if the installed Node.js is too old. |
| Scout requires at least Node.js 12.1.0. |
| </td> |
| </tr> |
| </table> |
| </div> |
| <div class="paragraph"> |
| <p>After Node.js has been installed, we can try to launch the application again using the <em class="menu">Run as</em> menu we used before. |
| This time you should see console output providing information about the JS build process. |
| Once the JS build has been completed successfully, the frontend and backend servers will be started automatically. |
| The servers are ready as soon as the console shows <em>Server ready</em>. |
| We can now access the Hello World application by navigating to <a href="http://localhost:8082/" class="bare">http://localhost:8082/</a> in our favorite web browser.</p> |
| </div> |
| <div class="paragraph"> |
| <p>The running Hello World application should then be started in your browser as shown in <a href="#img-start_browser">Figure 7</a>.</p> |
| </div> |
| <div id="img-start_browser" class="imageblock"> |
| <div class="content"> |
| <img src="images/run_helloworld_in_browser.png" alt="run helloworld in browser"> |
| </div> |
| <div class="title"> |
| Figure 7. The Hello World application in the browser. |
| </div> |
| </div> |
| </div> |
| <div class="sect3"> |
| <h4 id="what-s-next"><a class="anchor" href="#what-s-next"></a>What’s Next?</h4> |
| <div class="paragraph"> |
| <p>In the <a href="tutorial_existingdemo.html#import-the-scout-demo-applications-tutorial">next tutorial</a>, you will learn how to import the Scout demo applications into your workspace.</p> |
| </div> |
| <hr> |
| <div class="paragraph"> |
| <p>Do you want to improve this document? Have a look at the <a href="https://github.com/BSI-Business-Systems-Integration-AG/org.eclipse.scout.docs/blob/releases/10.0.x/docs/build/eclipse_help/src/docs/tutorial_helloworld.adoc" target="_blank">sources</a> on GitHub.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <table border="0" class="navigation" style="width: 100%;" summary="navigation"> |
| <tr> |
| <td align="left" colspan="1" rowspan="1" style="width: 30%"><a href="tutorial.html" shape="rect" title="Getting Started"><img alt="Previous" border="0" src="images/prev.gif"></a></td> |
| <td align="center" colspan="1" rowspan="1" style="width: 40%"><a href="scout_user_guide.html" shape="rect" title="Eclipse Scout User Guide"><img alt="Eclipse Scout User Guide" border="0" src="images/home.gif"></a></td> |
| <td align="right" colspan="1" rowspan="1" style="width: 30%"><a href="tutorial_existingdemo.html" shape="rect" title="Import the Scout Demo Applications"><img alt="Next" border="0" src="images/next.gif"></a></td> |
| </tr> |
| <tr> |
| <td align="left" colspan="1" rowspan="1" style="width: 30%">Getting Started</td> |
| <td align="center" colspan="1" rowspan="1" style="width: 40%"></td> |
| <td align="right" colspan="1" rowspan="1" style="width: 30%">Import the Scout Demo Applications</td> |
| </tr> |
| </table> |
| <div id="footer"> |
| <div id="footer-text"> |
| Version 10.0 |
| <br> Last updated 2020-03-10 14:49:24 CEST |
| </div> |
| </div> |
| </body> |
| </html> |
