Jump to: navigation, search

Difference between revisions of "Scout/Tutorial/3.8/HelloWorld"

< Scout‎ | Tutorial‎ | 3.8
m (New page: {{ScoutPage|cat=Tutorial 3.8}} {{note|Under construction|This page is under construction}} =The Scout "Hello World" Application = This page shows how to create your Hello World app usin...)
 
m
Line 1: Line 1:
{{ScoutPage|cat=Tutorial 3.8}}
+
{{ScoutPage|cat=Tutorial 3.7}}
 
+
'''Hello World'''
{{note|Under construction|This page is under construction}}
+
{{note|Under construction|This page needs to be updated}}
 
+
=The Scout "Hello World" Application =
+
 
+
 
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}}.
 
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}}.
  

Revision as of 05:46, 13 April 2012


Scout
Wiki Home
Website
DownloadGit
Community
ForumsBlogTwitter
Bugzilla
Bugzilla

Hello World

Note.png
Under construction
This page needs to be updated

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


Newprojectmenu.png

Start your Eclipse and Use the New|Project ... menu


Newprojectdialog1.png

In the wizard choose Scout project and click Next


Newprojectdialog2.png

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


Newprojectdialog3.png

Select Application with a single form as your app template, then click Finish


Switchperspective.png

The empty application is created by Scout SDK and if you are not already in the Scout perspective you are prompted to change there now, click on Yes


Automaticformdataupdate.png

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


Productlauncher.png

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 products in dev mode (e.g. helloworld-swt-client-dev.product for the SWT client)

Runningempty.png

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


Addformfield.png

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 (a GroupBox) holding all UI components of the form

To the main box we will add a message field. Click right on MainBox and choose the menu New Form Field.


Newstringfield1.png

Step 1: Select field type. Here we'll use a String Field. Then click Next (you may directly click on it or use the search box as shown above)


Newstringfield2.png

Step 2: Add the field label, type "Message" that triggers the dropdown list. Choose New translated text... (or use an existing text)


Newstringfield3.png

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


MessageTextDetails.jpg

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


Newstringfield5.png

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 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 process service was created as part of the selected application template. The load(DesktopFormData) method is defined out of the box.

Serverloadmethod.png

Add a simple implentation for the load method:

  1. public DesktopFormData load(DesktopFormData formData) throws ProcessingException {
  2.   formData.getMessage().setValue("hello world");
  3.   return formData;
  4. }

On line 2 we access the message field of the FormData and set it's value to "hello world". The updated form data is returned and eventually sent back to the client.

Run the "hello world" application

In the 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"


Finalapplication.png