| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="generator" content="Asciidoctor 2.0.10"> |
| <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.7.0/css/font-awesome.min.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 Scout</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"><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">Project…​</b></span> and type <code>Scout Project</code> 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>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 Scout</code> application just use the already pre-filled values and ensure the user interface programming language is set to <code>Java</code> 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 initially be missing. 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 Maven modules for the <code>Hello Scout</code> application the code is compiled by the Eclipse IDE. You can see the created Maven modules in the <code>Package Explorer</code> 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 initial set of Maven modules created for the Hello Scout application. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>After the compilation, you can start the Scout application for the first time. Since the <code>Hello Scout</code> app consists of a backend and a frontend, two servers need to be started. Before the frontend server can deliver any JavaScript code to the browser the JavaScript build needs to be executed as well. You 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 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 Scout application. |
| </div> |
| </div> |
| <div class="admonitionblock important"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="icon"> <i class="fa icon-important" title="Important"></i> </td> |
| <td class="content"> The JavaScript build could fail in case the installed Node.js could not be found or is too old. In that case follow the instructions in the section <a href="#Prerequisites">[Prerequisites]</a>. </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="paragraph"> |
| <p>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 <code>Server ready</code>. You can now access the <code>Hello Scout</code> application by navigating to <a href="http://localhost:8082/" class="bare" target="_blank">http://localhost:8082/</a> in your favorite web browser.</p> |
| </div> |
| <div class="paragraph"> |
| <p>The <code>Hello Scout</code> application is then presented as shown in <a href="#img-start_browser">Figure 6</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 6. The Hello Scout application in the browser. |
| </div> |
| </div> |
| </div> |
| <div class="sect3"> |
| <h4 id="whats-next"><a class="anchor" href="#whats-next"></a>What’s Next?</h4> |
| <div class="paragraph"> |
| <p>In the <a href="tutorial_existingdemo.html#import-the-scout-demo-applications">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-software/org.eclipse.scout.docs/blob/releases/11.0/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 11.0 |
| <br> Last updated 2021-03-05 08:41:30 +0100 |
| </div> |
| </div> |
| </body> |
| </html> |
