|
|
| (29 intermediate revisions by 7 users not shown) |
| Line 1: |
Line 1: |
| − | {{ScoutPage|cat=Tutorial}}
| + | The Scout documentation has been moved to https://eclipsescout.github.io/. |
| − | | + | |
| − | =The Scout "Hello World" Application =
| + | |
| − | | + | |
| − | This page shows how to create your Hello World app using the Scout SDK. We assume that you already have installed Scout.
| + | |
| − | | + | |
| − | ==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 Scout SDK and you are prompted to change to the Scout perspective. Click on ''Yes''
| + | |
| − | | + | |
| − | <br/>[[Image:Automaticformdataupdate.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | Make sure you have switched on the automatic 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 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:
| + | |
| − | * Server product in dev mode (e.g. ''helloworld-server-dev.product'')
| + | |
| − | * One or more client product 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 Scout Explorer drill down to client, Forms, DesktopForm, MainBox
| + | |
| − | * '''client''' client part of Scout application
| + | |
| − | * '''Forms''' holding all Forms available in the client part
| + | |
| − | * '''DesktopForm'' the form created by the template chosen above: ''Application with a single form''
| + | |
| − | * '''MainBox''' the container holding all UI componens of the form
| + | |
| − | | + | |
| − | To the main box we will add a message field
| + | |
| − | | + | |
| − | <br/>[[Image:Newstringfield1.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | <br/>[[Image:Newstringfield2.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | <br/>[[Image:Newstringfield3.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | <br/>[[Image:Newstringfield4.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | <br/>[[Image:Newstringfield5.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | ==Server Side: Implement the Data Loading ==
| + | |
| − | | + | |
| − | <br/>[[Image:Serverloadmethod.png|left]]<br clear="all" />
| + | |
| − | | + | |
| − | ==Run the "hello world" application ==
| + | |
| − | | + | |
| − | <br/>[[Image:Finalapplication.png|left]]<br clear="all" />
| + | |
