Import the Scout Demo Applications

With this tutorial you will learn how to import the Scout Demo Application into your workspace. The tutorial consists of the following two parts:

  • Install the Scout Demo application

  • Run the Scout demo from your IDE

Install the Scout Demo Application

In the first part of the tutorial we import the demo applications using the Oomph Eclipse installer tool.

In the Eclipse IDE open the Import wizard with menu File ▸ Import…​. This opens the dialog shown in Figure 1. Next, under folder Oomph select the node Projects into Workspace and click the Next button.

oomph existing project
Figure 1. The Import Wizard in Eclipse.

The Eclipse Importer contains the folder hierarchy Eclipse Projects, Scout and Scout Demo App as shown in Figure 2. You can enter "Scout Demo" in the search filter to find the project easily.

oomph exiting projects1
Figure 2. Top part of the "Projects" Step of the Importer.

Now, add the desired project to the list to import according to the following steps.

  • [1] Select the "Scout Demo App" element.

  • [2] Add it to the list of projects using the "Add Projects" (down arrow) button.

  • [3] Adjust the Stream to the milestone build matching your Eclipse IDE, eg. “Neon (M4 release)” for January 2016.

oomph exiting projects2
Figure 3. Bottom part of the "Projects" Step of the Importer.

Once the project selection in your Eclipse importer looks as shown in Figure 3 Click on the Next button.

On the Variables dialog of the Eclipse importer a number of Oomph variables have to be specified. In case you have already used Oomph for other purposes, this step might look different or empty (for example when all variables have been set in a previous Oomph session).

Make sure to display all variables by activating checkbox Show all Variables in the bottom left corner as shown in Figure 4.

oomph exiting variables
Figure 4. "Variables" Step of the Importer.
The variables in Figure 4 may be shown in a different order in your case.

Before you proceed make sure that all shown variables are set appropriately for your use case. For the settings proposed below we assume that we only need read access for the git repository hosting the Scout demo application.

  • Git clone location rule: “Located in a folder named '.git/<repo>' within the workspace folder”

  • Target Platform: “None”

  • JRE 1.7 Location: Path to your Java 7 JRE

  • JRE 1.8 Location: Path to your Java 8 JRE

  • Scout Demo App Github repository: “HTTPS (read-write)” if you already have a GitHub account. Otherwise use “HTTPS (read-only, anonymous)”

Once the setting of the variables is completed click Next. This leads to the Confirmation dialog. This last step can be completed by clicking on Finish.

The Oomph installer first makes sure that all necessary Scout components and M2E connectors are available. In case one or more components are missing, Oomph will first download and install them. This triggers a restart request as shown in Figure 5.

oomph restart
Figure 5. Restart of the IDE after installation.

To complete the installation click Finish. If your IDE needs to be restarted, select the same workspace in the Eclipse Launcher dialog.

After the restart Oomph will continue to download and install the Scout demo application showing the progress in the Eclipse importer dialog. Once the download and installation has completed you may close the dialog with clicking the Finish button.

Setup result

After the Setup of the "Scout Demo App", a lot of projects are materialized in the workspace (see the screenshot in Figure 6). The projects are organized in three working sets:

Demo App: Contacts

The projects corresponding to the Scout Demo Application "Contacts".

Demo App: Widgets

The projects corresponding to the Scout Demo Application "Widgets".

Demo Docs

The scout documentation and the project containing most of the code snippets included in the documentation.

oomph workingsets
Figure 6. Projects in the workspace after the "Scout Demo App" setup.

If you do not see the workingsets, you might need to select "Top Level Elements ▸ Working Sets" from the Menu as displayed in Figure 7

workingsets top level
Figure 7. Select "Working Sets" as "Top Level Elements" in the "Package Explorer".

Run the Contacts Demo Application

With the Scout demo installed in our workspace we are now ready to start the application from within our IDE.

Start the application in the IDE

In the Package Explorer view of the IDE open the Maven module org.eclipse.scout.contacts.all.app.dev. To run the Contacts application use the Run As context menu on file contacts-all-dev.launch as shown in Figure 8.

run contracts all dev
Figure 8. Start the Contacts application.

Once the startup sequence of the Contacts application has completed the console view in your Eclipse IDE should look like Figure 9.

oomph contacts console
Figure 9. Console view after starting the Contacts demo.
Use the Contacts Demo in a Browser

With the Contacts demo running in the IDE open the application in your favorite browser via URL http://localhost:8082/. To get the screen shown in Figure 10 first click on the Persons node and then double click on the ''Alice'' row.

contacts persons alice
Figure 10. The Contacts application.

What’s Next?

Play with the Contacts application. This provides a good overview of a typical Scout application. You can browse through the data, open different forms and add/change entities.

Also have a quick look at the code. The list on the left side of the application containing the nodes Persons and Organizations is implemented in class ContactOutline as shown in Listing 1.

Listing 1. ContactOutline implementation.
public class ContactOutline extends AbstractOutline {
  @Override
  protected void execCreateChildPages(List<IPage<?>> pageList) {
    // pages to be shown in the navigation area of this outline
    pageList.add(new PersonTablePage()); (1)
    pageList.add(new OrganizationTablePage());
  }
  @Override
  protected String getConfiguredTitle() {
    return TEXTS.get("Contacts");
  }
  @Override
  protected String getConfiguredIconId() {
    return Icons.Category;
  }
}

If you have clicked on the Persons node a page with all available persons is shown. This page is implemented in class PersonTablePage and the dialog to show/edit persons is implemented in class PersonForm.

This is the end of the getting started guide.


Do you want to improve this document? Have a look at the sources on GitHub.