| <!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.2" /> |
| <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" /> |
| <link rel="stylesheet" href="css/eclipse.css" /> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/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="sdk.html" shape="rect" title="Scout Tooling"><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%">Scout Tooling</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>After installing the Eclipse Scout package you are now ready to implement 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. This workspace directory will then hold all the project code for the “Hello World” application. Once the Eclipse IDE is running it will show the Scout perspective with the <a href="sdk_view_explorer.html">Scout Explorer View</a> and an empty <a href="sdk_view_object_properties.html">Scout Object Properties View</a>. To create a new Scout project select the <span class="menu">New Scout Project…​</span> context menu as shown in <a href="#img-sdk_create_new_scout_project">Figure 1</a>.</p> |
| </div> |
| <div id="img-sdk_create_new_scout_project" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_create_new_scout_project.png" alt="sdk create new scout project" /> |
| </div> |
| <div class="title"> |
| Figure 1. Create a new Scout project using the Scout SDK perspective. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>In the <em class="wizard">New Scout Project</em> wizard enter a name for your Scout project. As we are creating a “Hello World” application, use <span class="java">org.eclipsescout.helloworld</span> for the <em class="field">Project Name</em> field according to <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 id="img-sdk_new_project_wizard" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_new_project_2.png" alt="sdk new project 2" /> |
| </div> |
| <div class="title"> |
| Figure 2. The new Scout project wizard. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Once the initial project code is built, the Scout SDK displays the application model in the <em>Scout Explorer</em> as shown in <a href="#img-sdk_initial_helloworld_project">Figure 3</a>. This model is visually presented as a tree structure covering both the client and the server part of the application. The Scout Explorer view on the left hand side displays the top level elements of the complete Scout application. Under the orange node the Scout client components are listed. Components that are needed in both the Scout client and the Scout server are collected under the green node. And the Scout server components are listed below the blue node in the Scout Explorer view.</p> |
| </div> |
| <div id="img-sdk_initial_helloworld_project" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_initial_helloworld_project.png" alt="sdk initial helloworld project" /> |
| </div> |
| <div class="title"> |
| Figure 3. The Scout SDK showing the tree representation of our “Hello World” application in the Scout Explorer. The Scout Object Properties contain the product launchers for the server and the available clients. |
| </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, we switch to the Scout Explorer view and select the root node <span class="java">org.eclipse.scout.helloworld</span>. This then loads the corresponding controls and the <em>Product Launchers section</em> into the <em>Scout Object Properties</em> view as shown in <a href="#img-sdk_initial_helloworld_project">Figure 3</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 4. Starting the Hello World application in the Scout SDK using the provided product launcher. Make sure to start the server before starting any client product. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>In the product launcher section of the Scout Object Properties view four launcher boxes are available. One launcher box for the Scout server product, and three launchers for the different client products. Each launcher box provides a link to the corresponding configuration and product definition files, as well as the launcher icons to start and stop the corresponding product. The green <em class="icon">Circle</em> icon starts the product in normal mode. The <em class="icon">Bug</em> icon just below, starts a product in debug mode. To terminate a running product, the red <em class="icon">Square</em> icon is provided.</p> |
| </div> |
| <div class="paragraph"> |
| <p>Before any of the client products is started, we need to start the server product using the green circle or the bug launcher icon. During startup of the Scout server you should see console output similar to the one shown on the right hand side of <a href="#img-start_client">Figure 4</a>.</p> |
| </div> |
| <div class="paragraph"> |
| <p>Once the server is running, you may start the RAP client as shown in <a href="#img-start_client">Figure 4</a>. To start the Swing client, or the SWT client use the corresponding green <em class="icon">Circle</em> icon or <em class="icon">Bug</em> icon. And with a running RAP client, the Scout client can be opened in a web browser by clicking on the provided <em class="link">Automatic Device Dispatch</em> link.</p> |
| </div> |
| <div id="img-helloworld_empty" class="imageblock"> |
| <div class="content"> |
| <img src="images/hellworld_empty_rap.png" alt="hellworld empty rap" /> |
| </div> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="images/hellworld_empty_swing.png" alt="hellworld empty swing" /> |
| </div> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="images/hellworld_empty_swt.png" alt="hellworld empty swt" /> |
| </div> |
| <div class="title"> |
| Figure 5. Running the three client applications. Each client displays an empty desktop form. The RAP client, the Swing client, and the SWT client |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Having started the Scout server and all client products, the running client applications should look as shown in <a href="#img-helloworld_empty">Figure 5</a>.</p> |
| </div> |
| </div> |
| <div class="sect3"> |
| <h4 id="add-the-user-interface-widgets"><a class="anchor" href="#add-the-user-interface-widgets"></a>Add the User Interface Widgets</h4> |
| <div class="paragraph"> |
| <p>The project creation step has created a Scout client that displays an empty desktop form. We will now add widgets to the client’s desktop form that will later display the “Hello World!” message.</p> |
| </div> |
| <div class="paragraph"> |
| <p>To add any widgets to the desktop form, navigate to the <em class="element">DesktopForm</em> in the Scout Explorer. For this, click on the orange client node in the Scout Explorer view. Then, expand the <em class="element">Forms</em> folder by clicking on the small triangle icon, and further expand the <em class="element">DesktopForm</em>. As a result, the <em class="element">MainBox</em> element becomes visible below the desktop form as shown in <a href="#img-new_field_context_menu">Figure 6</a>. With a click of the right mouse button over the <em class="element">MainBox</em>, the available context menus are displayed. To start the form field wizard select the <span class="menu">New Form Field …​</span> menu.</p> |
| </div> |
| <div id="img-new_field_context_menu" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_new_field_wizard_menu.png" alt="sdk new field wizard menu" /> |
| </div> |
| <div class="title"> |
| Figure 6. Using the |
| <span class="menu">New Form Field …​</span> menu to start the form field wizard provided by the Scout SDK. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>In the first step of the form field wizard shown on in <a href="#img-helloworld_groupboxfield">Figure 7</a> choose <span class="java">GroupBox</span> as the form field type and click on the <b class="button">Next</b> button. In the second wizard step, enter ‘Desktop’ into the <em class="field">Class Name</em> field before you close the wizard with the <b class="button">Finish</b> button. The Scout SDK will then add the necessary Java code for the <span class="java">DesktopBox</span> in the background.</p> |
| </div> |
| <div id="img-helloworld_groupboxfield" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_new_field_groupbox_1.png" alt="sdk new field groupbox 1" /> |
| </div> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_new_field_groupbox_2.png" alt="sdk new field groupbox 2" /> |
| </div> |
| <div class="title"> |
| Figure 7. Adding the |
| <em>DesktopBox</em> field with the Scout SDK form field wizard. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>We can now add the text field widget to the group box just created. To do this, expand the <em class="element">MainBox</em> in the Scout Explorer view to access the newly created <em class="element">DesktopBox</em> element. On the <em class="element">DesktopBox</em> use the <span class="menu">New Form Field …​</span> menu again. In the first wizard step, select <em class="element">StringField</em> as the form field type according to <a href="#img-helloworld_stringfield">Figure 8</a>. To select the <em class="element">StringField</em> type you can either scroll down the list of available types or enter “st” into the field above the field type list. In the second wizard step, enter ‘Message’ into the <em class="field">Label</em> field. As we do not yet have the text ‘Message’ available in our “Hello World” application the wizard prompts the user with the proposal <code>New Translated Text …​</code>.</p> |
| </div> |
| <div id="img-helloworld_stringfield" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_new_field_stringfield_1.png" alt="sdk new field stringfield 1" /> |
| </div> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_new_field_stringfield_2.png" alt="sdk new field stringfield 2" /> |
| </div> |
| <div class="title"> |
| Figure 8. Adding a |
| <em>StringField</em> and providing a new translation entry. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>With a double click on this option a new text entry can be added to the application as shown in <a href="#img-helloworld_text_entry">Figure 9</a>. Once an initial translation for the message label is provided, close the translation dialog with the <b class="button">Ok</b> button. Finally, close the form field wizard using the <b class="button">Finish</b> button.</p> |
| </div> |
| <div id="img-helloworld_text_entry" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_new_text_entry.png" alt="sdk new text entry" /> |
| </div> |
| <div class="title"> |
| Figure 9. Adding a new translation entry. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>By expanding the <em class="element">DesktopBox</em> element in the Scout Explorer, the new message field becomes visible. Now, double click on the message field element to load the corresponding Java code into an editor and displays the message field’s properties in the Scout Object Properties as shown in <a href="#img-helloworld_messagefield">Figure 10</a>. This is a good moment to compare your status with this screenshot. Make sure that both the Java code and the project structure in the Scout Explorer look as shown in <a href="#img-helloworld_messagefield">Figure 10</a>.</p> |
| </div> |
| <div id="img-helloworld_messagefield" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_helloworld_messagefield.png" alt="sdk helloworld messagefield" /> |
| </div> |
| <div class="title"> |
| Figure 10. Scout SDK showing the |
| <em>MessageField</em> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Having verified your status of the “Hello World” application start the start the server and a client of the application as described in the previous section. The client applications will then display your message widget. However, the text widget is still empty, as we did not yet load any initial content into this field. This is the topic of the next section.</p> |
| </div> |
| </div> |
| <div class="sect3"> |
| <h4 id="implement-the-server-service"><a class="anchor" href="#implement-the-server-service"></a>Implement the Server Service</h4> |
| <div class="paragraph"> |
| <p>The responsibility of the Scout server in our “Hello World” application is to provide an initial text content for the message field in the client’s user interface. We implement this behaviour in the <span class="java">load</span> method of the server’s <span class="java">DesktopService</span>. An empty stub for the <span class="java">load</span> method of the <span class="java">DesktopService</span> service has already been created during the initial project creation step.</p> |
| </div> |
| <div class="paragraph"> |
| <p>To navigate to the implementation of the desktop service in the Scout SDK, we first expand the blue top-level <em class="node">server</em> node in the Scout Explorer. Below the server node, we then expand the <em class="folder">Services</em> folder which shows the <em class="element">DesktopService</em> element. Expanding this <em class="element">DesktopService</em> node, the <span class="java">load</span> method becomes visible as shown in <a href="#img-helloworld_load_servicemethod">Figure 11</a>.</p> |
| </div> |
| <div id="img-helloworld_load_servicemethod" class="imageblock"> |
| <div class="content"> |
| <img src="images/sdk_server_desktopservice_load.png" alt="sdk server desktopservice load" /> |
| </div> |
| <div class="title"> |
| Figure 11. The Scout Explorer showing the blue server node expanded with the |
| <em class="folder">Services</em> folder. In this folder the |
| <em class="element">load</em> method of |
| <em class="element">DesktopService</em> is selected and its initial implementation is shown in the editor on the right side. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>The <span class="java">DesktopService</span> represents the server service corresponding to the <span class="java">DesktopForm</span> on the client side. This initial setup represents Scout’s default where client forms and server services typically come in pairs. Whenever the client’s user interface displays a form to the user, the client connects to the server and calls the <span class="java">load</span> method of the corresponding server service. We just need to add our business logic to the <span class="java">load</span> method of the server’s <span class="java">DesktopService</span>.</p> |
| </div> |
| <div class="paragraph"> |
| <p>According to the signature of the <span class="java">load</span> method, a <span class="java">formData</span> object is passed into this method that is then handed back in the return statement. To complete the implementation of the <span class="java">load</span> method it is sufficient to assign the text 'hello world!' to the message field part of the form data. The complete implementation of the <span class="java">load</span> method is provided in <a href="#lst-helloworld.desktopservice.load">Listing 1</a>.</p> |
| </div> |
| <div id="lst-helloworld.desktopservice.load" class="listingblock"> |
| <div class="title"> |
| Listing 1. load() implementation in the DesktopService. |
| </div> |
| <div class="content"> |
| <pre class="CodeRay highlight"><code data-lang="java"> <span class="annotation">@Override</span> |
| <span class="directive">public</span> DesktopFormData load(DesktopFormData formData) <span class="directive">throws</span> ProcessingException { |
| formData.getMessage().setValue(<span class="string"><span class="delimiter">"</span><span class="content">Hello World!</span><span class="delimiter">"</span></span>); <i class="conum" data-value="1"></i><b>(1)</b> |
| <span class="keyword">return</span> formData; |
| }</code></pre> |
| </div> |
| </div> |
| <div class="colist arabic"> |
| <table> |
| <tbody> |
| <tr> |
| <td><i class="conum" data-value="1"></i><b>1</b></td> |
| <td>assign a value to the value holder part of the FormData corresponding to the message field</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="paragraph"> |
| <p>With this last element we have completed the Scout “Hello World” application.</p> |
| </div> |
| </div> |
| <div class="sect3"> |
| <h4 id="run-the-final-application"><a class="anchor" href="#run-the-final-application"></a>Run the Final Application</h4> |
| <div class="paragraph"> |
| <p>We are now ready to run the completed “Hello World!” application by first starting the server and then the clients. This results in running clients as shown in <a href="#img-helloworld_finished">Figure 12</a>. The mobile version of the client can be started from the Scout SDK by clicking on the <em class="link">Smartphone Devices</em> link in the product launchers section. Alternatively, manually change the applications URL from <span class="java">http://localhost:8082/web</span> to <span class="java">http://localhost:8082/mobile</span>.</p> |
| </div> |
| <div id="img-helloworld_finished" class="imageblock"> |
| <div class="content"> |
| <img src="images/helloworld_swt.png" alt="helloworld swt" /> |
| </div> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="images/helloworld_web.png" alt="helloworld web" /> |
| </div> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="images/helloworld_mobile.png" alt="helloworld mobile" /> |
| </div> |
| <div class="title"> |
| Figure 12. Running the complete “Hello World!” application with an SWT client, as a web application and a mobile application. |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Congratulations, you just have implemented your first Scout client server application!</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="sdk.html" shape="rect" title="Scout Tooling"><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%">Scout Tooling</td> |
| </tr> |
| </table> |
| <div id="footer"> |
| <div id="footer-text"> |
| Version 5.0.0-SNAPSHOT |
| <br /> Last updated 2015-06-03 10:52:05 CEST |
| </div> |
| </div> |
| </body> |
| </html> |
