|
|
| Line 1: |
Line 1: |
| − | {{ScoutPage|cat=Tutorial 3.7}}
| + | The Scout documentation has been moved to https://eclipsescout.github.io/. |
| − | '''Hello World'''
| + | |
| − | | + | |
| − | This page shows how to create your Hello World app using the {{ScoutLink|SDK|name=Scout SDK}}. We assume that you already have {{ScoutLink|HowTo|Install Scout SDK|installed Scout}}.
| + | |
| − | | + | |
| − | {{note|Check your release|This is the hello world tutorial for the current release (3.7) shipped with Eclipse Indigo. If you installed Eclipse Juno then you might want do the hello world tutorial for the new {{ScoutLink|Tutorial|3.8/HelloWorld|Eclipse Scout 3.8 release}} instead.}}
| + | |
| − | | + | |
| − | ==Create a new Scout Project ==
| + | |
| − | | + | |
| − | <br/>[[Image:Newprojectmenu.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | Start your Eclipse and Use the ''New|Project ...'' menu
| + | |
| − | | + | |
| − | <br/>[[Image:Newprojectdialog1.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | In the wizard choose Scout project and click ''Next''
| + | |
| − | | + | |
| − | <br/>[[Image:Newprojectdialog2.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | Enter org.eclipse.scout.helloworld as an application name. The last part of the name (after the last period) will automatically be used as the project alias. Then, click ''Next''
| + | |
| − | | + | |
| − | <br/>[[Image:Newprojectdialog3.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | Select ''Application with a single form'' as your app template, then click ''Finish''
| + | |
| − | | + | |
| − | <br/>[[Image:Switchperspective.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | The empty application is created by {{ScoutLink|SDK|name=Scout SDK}} and if you are not already in the {{ScoutLink|SDK|Perspective|Scout perspective}} you are prompted to change there now, click on ''Yes'' | + | |
| − | | + | |
| − | <br/>[[Image:Automaticformdataupdate.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | Make sure you have switched on the automatic {{ScoutLink|Concepts|FormData|formdata}} update in menu ''Scout|Update Formdata Automatically''
| + | |
| − | | + | |
| − | ==Run the Empty Scout Application in the Scout SDK ==
| + | |
| − | | + | |
| − | <br/>[[Image:Productlauncher.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | In the {{ScoutLink|SDK|Explorer_View|Scout Explorer}} open the node ''Scout Projects'', then click on ''org.eclipse.scout.helloworld''. This will show the ''Scout Object Properties'' for the application where you click on the edit icon of the product launcher.
| + | |
| − | | + | |
| − | In the product launcher you then select the shortcuts to the launching boxes that you will need most during application development. Typically this contains:
| + | |
| − | * {{ScoutLink|Concepts|Server_Plug-In|Server}} product in dev mode (e.g. ''helloworld-server-dev.product'')
| + | |
| − | * One or more {{ScoutLink|Concepts|Client_Plug-In|client}} products in dev mode (e.g. ''helloworld-swt-client-dev.product'' for the SWT client)
| + | |
| − | | + | |
| − | <br/>[[Image:Runningempty.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | After starting first the server and then the client from the launching boxes configured in the last step the empty client will appear.
| + | |
| − | | + | |
| − | ==Client Side: Add a Message Field to the Desktop Form ==
| + | |
| − | | + | |
| − | <br/>[[Image:Addformfield.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | In the {{ScoutLink|SDK|Explorer_View|Scout Explorer}} drill down to client, Forms, DesktopForm, MainBox
| + | |
| − | * '''client''' client part of Scout application
| + | |
| − | * '''Forms''' holding all {{ScoutLink|Concepts|Form|Forms}} available in the client part
| + | |
| − | * '''DesktopForm''' the {{ScoutLink|Concepts|Form|form}} created by the template chosen above: ''Application with a single form''
| + | |
| − | * '''MainBox''' the container (a {{ScoutLink|Concepts|GroupBox|GroupBox}}) holding all UI components of the form
| + | |
| − | | + | |
| − | To the main box we will add a message {{ScoutLink|Concepts|Field|field}}. Click right on ''MainBox'' and choose the menu ''New Form Field''.
| + | |
| − | | + | |
| − | <br/>[[Image:Newstringfield1.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | Step 1: Select field type. Here we'll use a {{ScoutLink|Concepts|StringField|String Field}}. Then click ''Next'' (you may directly click on it or use the search box as shown above)
| + | |
| − | | + | |
| − | <br/>[[Image:Newstringfield2.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | Step 2: Add the field label, type "Message" that triggers the dropdown list. Choose ''New translated text...'' (or use an existing text)
| + | |
| − | | + | |
| − | <br/>[[Image:Newstringfield3.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | Step 3: Fill in the default translation. Some other fields are automatically filled:
| + | |
| − | * '''Key Name''' used to retrieve the translated text in the code
| + | |
| − | * '''Deutsch''' German translation
| + | |
| − | | + | |
| − | Then click ''OK''
| + | |
| − | | + | |
| − | <br/>[[Image:MessageTextDetails.jpg|left]]<br clear="all" />
| + | |
| − | | + | |
| − | Step 4: Verify details of the new string field by clicking again into the Text: The bold title is the ''key name'' and all translations should be shown
| + | |
| − | | + | |
| − | Confirm by clicking ''Finish''
| + | |
| − | | + | |
| − | <br/>[[Image:Newstringfield5.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | Navigate down from the ''MainBox'' to the newly created ''MessageField''. Double click on the MessageField node to display the generated code (selected code in screenshot above) in the Java editor window.
| + | |
| − | | + | |
| − | ==Server Side: Implement the Data Loading ==
| + | |
| − | | + | |
| − | In the {{ScoutLink|SDK|Explorer_View|Scout Explorer}} navigate to the ''server'' node, then ''Process Services'', and ''DesktopProcessService''. The ''DesktopProcessService'' is the server side service corresponding to the DesktopForm defined on the client side. This {{ScoutLink|Concepts|Process_Service|process service}} was created as part of the selected application template. The ''load(DesktopFormData)'' method is defined out of the box.
| + | |
| − | | + | |
| − | [[Image:Serverloadmethod.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | Add a simple implentation for the ''load'' method:
| + | |
| − | | + | |
| − | <source lang="java" line="GESHI_NORMAL_LINE_NUMBERS" start="1">
| + | |
| − | public DesktopFormData load(DesktopFormData formData) throws ProcessingException {
| + | |
| − | formData.getMessage().setValue("hello world");
| + | |
| − | return formData;
| + | |
| − | }
| + | |
| − | </source>
| + | |
| − | | + | |
| − | On line 2 we access the message field of the {{ScoutLink|Concepts|FormData|FormData}} and set it's value to <code>"hello world"</CODE>. The updated form data is returned and eventually sent back to the client.
| + | |
| − | | + | |
| − | ==Run the "hello world" application ==
| + | |
| − | | + | |
| − | In the {{ScoutLink|SDK|Explorer_View|Scout Explorer}} go back to top-level node ''Scout Projects'', then click on ''org.eclipse.scout.helloworld'' to access the launch boxes in the Scout Object Properties.
| + | |
| − | * Start the server in the server box
| + | |
| − | * Start the client in the SWT box
| + | |
| − | | + | |
| − | And, "Ta Taa"
| + | |
| − | | + | |
| − | <br/>[[Image:Finalapplication.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | ==See Also==
| + | |
| − | * [[:Category:Scout_Tutorial_3.7|All Tutorial pages]]
| + | |
