Introduction

With Scout Release 3.8 Scout offers support to handle Scalable Vector Graphics (SVG). For this, new a 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.

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.