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.

Adding interaction to the SVG field

Based on the SVG field and vector graphic file created in sections [1] and [2] some interaction will be added to the SVG field.

Add click interaction to the SVG field

The click event is fired whenever the SVG item is clicked. In this example a simple handler for the click event will be shown. Upon a click event a message box will be popped up and displays the xy-coordinates of the point that was clicked on.

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

Go to the Scout Object Properties

Click on the green cross next to operation Exec Click to add the method based on the click event

Add hyperlink interaction to the SVG field

The hyperlink event is fired when an element containing an hyperlink is clicked on. The URL could contain GET parameters. A hyperlink event handler could 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.

In our example the polygon and the circle are declared with the links http://local/polygon and http://local/circle respectively.
Based on the hyperlink our simple event handler processes the corresponding SVG element. If the polygon is clicked, one of its corner will be shifted to the right. If the circle is clicked, it will be moved to the right.

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

Go to the Scout Object Properties

Click on the green cross next to operation Exec Hyperlink under Advanced Operations to add the method based on the hyperlink event