Introduction

Since Release 3.8 Scout offers support to handle Scalable Vector Graphics (SVG). For this, a new SVG field is introduced as an additional UI component. This field enhances Eclipse Scout with the ability to display interactive diagrams and graphics that work on desktop as well as on web environment.

This tutorial demonstrates

Displaying a static SVG field (view only)

Displaying an interactive SVG field using embedded hyperlinks.

Mac OS XWhen using Mac OS X with the Oracle JDK 7: Please ensure to use the latest JDK versions. See Bug [378442] for details.

Create a Scout Application with SVG Fields

Create a new Scout application

As a first step create a new Scout application in the Scout perspective. For this, choose one of the following options

Use menu File, New, Project ..., Scout Project

In the Scout Explorer on the top levle node use context menu New Scout Project ...

Handling SVG Hyperlink Clicks

A hyperlink event is fired when the user clicks on a SVG element containing an hyperlink. The URL may also contain GET parameters. A hyperlink event handler could then parse this URL and these parameters and open a new form for this entity. E.g. the hyperlink could be http://local/person_nr?1234. The event handler could open the PersonForm for the person with the ID 1234 when the hyperlink event is fired.

Whenever the user clicks on a hyperlink in the SVG field the corresponding execHyperlink event handler routine is called.
Processing of user clicks on hyperlinks embedded in the SVG can be implemented by overriding method execHyperlink for the SVG field.
For this, follow the steps below.

In the Scout Explorer click on node StaticSvgField

Open Advanced Operations in the SVG field's Scout Object Properties

Click on the green cross next to operation ExecHyperlink to add the method

The implementation below will show a message box when the user clicks on the circle

Modify the SVG dynamically

For the case of this dynamic SVG field we will directly modify the shown SVG document based on the clicks the user makes on the circle or the polygon.

In the Scout Explorer expand the MainBox and click on the previous created node DynamicSvgField

Go to the Scout Object Properties to Advanced Operations

Click on the green cross next to operation Exec Hyperlink to add the method

Scout SDK: Add Hyperlink Event Handler

Add the implementation for to method execHyperlink() as shown below. In this implementation we first get a copy of the currently shown SVG document, and then update individual SVG elements depending on the shape that the user clicked. If the polygon was clicked, one of its corner will be shifted to the right. If the circle was clicked, it will be moved to the left.