| <!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> |
| <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 start the Scout application for the first time. For this, the following three steps are necessary</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> <p>Start the Scout backend server</p> </li> |
| <li> <p>Start the Scout frontend server</p> </li> |
| <li> <p>Open the application in the browser</p> </li> |
| </ol> |
| </div> |
| <div class="paragraph"> |
| <p>To start the Scout backend server we first select the <code>[webapp] dev server.launch</code> file in the Package Explorer view of the Eclipse IDE and then use the <em class="menu">Run As</em> menu as shown in <a href="#img-start_client">Figure 5</a>.</p> |
| </div> |
| <div id="img-start_client" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_start_client_product.png" alt="sdk start client product"> |
| </div> |
| <div class="title"> |
| Figure 5. Starting the Hello World application. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Starting the Scout frontend server works exactely the same. But first select the <code>[webapp] dev ui.launch</code> file in the Eclipse IDE. This launch file is located under module <code>helloworld.ui.html.app.dev</code> in the Package Explorer.</p> |
| </div> |
| <div class="paragraph"> |
| <p>During startup of the Scout applications you should see console output providing information about the startup. After having successfully started the Scout backend and frontend servers the Hello World application can then be accessed 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 running Hello World application should then be started in your browser 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 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/7.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 7.0 |
| <br> Last updated 2017-05-26 14:49:24 CEST |
| </div> |
| </div> |
| </body> |
| </html> |
