Import the Scout Demo Applications

Install the Scout Demo Applications

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.

Figure 1. The Import Wizard in Eclipse.

Now select Scout Demo App, check in the table below that 'Stream' shows the desired Scout version and click Next.

Figure 2. Select Scout Demo App

On the next wizard page, select the Show all variables check box in the bottom left corner.

Figure 3. "Variables" Step of the Importer.

Before you proceed make sure that all shown variables are set appropriately for your use case.

Git clone location rule: “Located in a folder named '.git/<repo>' within the workspace folder”
Target Platform: “None”
JRE 1.8 Location: Path to your Java 8 JRE
Scout Demo App Github repository: “HTTPS (read-only, anonymous)”

Once you finished setting the variables 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 4. If the dialog does not automatically appear, click on the small icon in the status bar on the bottom as shown in Figure 5.

Figure 4. Restart of the IDE after installation.

Figure 5. Status icon

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 applications showing the progress in the Eclipse importer dialog. Once the download and installation has completed you can 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 Applications "Widgets" and "JSWidgets".
Demo Docs: The scout documentation and the project containing most of the code snippets included in the documentation.

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

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 applications from within our IDE.

Start the application in the IDE

Open the Run As menu as shown in Figure 8. There are 3 launch groups available, one for each application. Each launch group will start all the necessary builds and servers. Now select [contacts] all (Windows or Unix variant) to run the Contacts application.

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.

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.

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.

@ClassId("303c0267-3c99-4736-a7f5-3097c5e011b6")
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.CategoryBold;
  }
}

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.


Hello World Tutorial		Scout Tooling


Hello World Tutorial		Scout Tooling