Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Scout/Tutorial/3.8/SVG Field"

< Scout‎ | Tutorial‎ | 3.8
(Add hyperlink interaction to the SVG field)
m (Load the SVG file from the client bundle resources)
 
(67 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{ScoutPage|cat=Tutorial}}
+
{{ScoutPage|cat=Tutorial 3.8}}
  
 
== Introduction ==
 
== Introduction ==
  
With the upcoming Scout Release 3.8 a SVG field will be introduced as an additional UI component. The new SVG field enhances Eclipse Scout with the ability to display interactive diagrams and graphics that work on desktop as well as on web environment.
+
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.
  
This tutorial demonstrate the use of the SVG field for a view only field as well as an interactive field.
+
This tutorial demonstrates
 +
* Displaying a static SVG field (view only)
 +
* Displaying an interactive SVG field using embedded hyperlinks.
  
 +
 +
{{warning|Mac OS X|There is a Bug on Mac OS X when using the Oracle JDK 7: [[https://bugs.eclipse.org/bugs/show_bug.cgi?id=378442 378442]]. If you need SVG support on Mac please use the Apple JDK 6 until the bug is solved.}}
 +
 +
<!--
 
== Getting started ==  
 
== Getting started ==  
  
 
The AbstractSvgField comes as part of Scout Runtime Release 3.8 that will be integrated into Eclipse Juno builds. The latest nightly build of Scout Runtime 3.8 can be downloaded from http://download.eclipse.org/scout/nightly/update/.
 
The AbstractSvgField comes as part of Scout Runtime Release 3.8 that will be integrated into Eclipse Juno builds. The latest nightly build of Scout Runtime 3.8 can be downloaded from http://download.eclipse.org/scout/nightly/update/.
  
[[Image:1_install_nightly_build.jpg|thumb|center|200px|Installation of Scout Runtime 3.8 via Update Site]]
+
[[Image:1_install_nightly_build.jpg|thumb|center|200px|Installation of Scout Runtime 3.8 via Update Site]]-->
 
+
  
 
== Create a Scout Application with SVG Fields ==
 
== Create a Scout Application with SVG Fields ==
  
=== Create a new Application ===
+
=== 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
 
As a first step create a new Scout application in the Scout perspective. For this, choose one of the following options
Line 29: Line 34:
 
[[Image:New_svg_project.png|thumb|center|400px|Scout SDK: Create a new Scout project]]
 
[[Image:New_svg_project.png|thumb|center|400px|Scout SDK: Create a new Scout project]]
  
More details can be found {{ScoutLink|Tutorial|Minicrm|New_Eclipse_Scout_Project|name=here}}.
+
More details can be found [[{{BASEPAGENAME}}/Minicrm/New_Eclipse_Scout_Project|here]].
  
 
=== Add SVG support to the application ===  
 
=== Add SVG support to the application ===  
Line 39: Line 44:
 
[[Image:Add_svg_support.png|thumb|center|400px|Scout SDK: Add SVG Support to Scout application]]
 
[[Image:Add_svg_support.png|thumb|center|400px|Scout SDK: Add SVG Support to Scout application]]
  
=== Add a SVG field to the DesktopForm ===
+
== Add the static SVG field to the DesktopForm ==
  
 
To add a SVG field to the DesktopForm do the following
 
To add a SVG field to the DesktopForm do the following
Line 50: Line 55:
 
[[Image:New_svg_field.png|thumb|center|400px|Scout SDK: Add an SVG form field]]
 
[[Image:New_svg_field.png|thumb|center|400px|Scout SDK: Add an SVG form field]]
  
=== Add a static SVG Image ===
+
=== Add an SVG Image ===
  
 
# In the ''Scout Explorer'' expand the ''MainBox'' and click on the newly created node '''StaticSvgField'''
 
# In the ''Scout Explorer'' expand the ''MainBox'' and click on the newly created node '''StaticSvgField'''
 
# Go to the ''Scout Object Properties''  
 
# Go to the ''Scout Object Properties''  
# Enter 4 in filed '''Grid H''' to provide a decent height for the SVG field
+
# Enter 3 in filed '''Grid H''' to provide a decent height for the SVG field
 
# Click on the green cross next to operation '''ExecInitField''' to add the init method
 
# Click on the green cross next to operation '''ExecInitField''' to add the init method
 
# Add the following implementation for to method '''execInitField()'''
 
# Add the following implementation for to method '''execInitField()'''
Line 61: Line 66:
 
   protected void execInitField() throws ProcessingException {
 
   protected void execInitField() throws ProcessingException {
 
     String xml =
 
     String xml =
        "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n" +
+
              "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n" +
            "<svg width=\"400\" height=\"400\" viewBox=\"0 0 400 400\" \n" +
+
                  "<svg width=\"400\" height=\"400\" viewBox=\"0 0 400 400\" \n" +
            "    xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \n" +
+
                  "    xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \n" +
            "    contentScriptType=\"text/ecmascript\" zoomAndPan=\"magnify\" \n" +
+
                  "    contentScriptType=\"text/ecmascript\" zoomAndPan=\"magnify\" \n" +
            "    contentStyleType=\"text/css\" version=\"1.1\" xml:space=\"preserve\" \n" +
+
                  "    contentStyleType=\"text/css\" version=\"1.1\" xml:space=\"preserve\" \n" +
            "    preserveAspectRatio=\"xMidYMid meet\"\n" +
+
                  "    preserveAspectRatio=\"xMidYMid meet\"\n" +
            ">\n" +
+
                  ">\n" +
            "  <a xlink:href=\"http://local/polygon\">\n" +
+
                  "  <a xlink:href=\"http://local/polygon\">\n" +
            "    <polygon id=\"poly\" points=\"220,100 300,210 170,250 123,234\" \n" +
+
                  "    <polygon id=\"poly\" points=\"220,100 300,210 170,250 123,234\" \n" +
            "            style=\"fill:#cccccc;stroke:#000000;stroke-width:1\" />\n" +
+
                  "            style=\"fill:#f5950d;stroke:red;stroke-width:3\" />\n" +
            "  </a>\n" +
+
                  "  </a>\n" +
            "  <a xlink:href=\"http://local/circle\">\n" +
+
                  "  <a xlink:href=\"http://local/circle\">\n" +
            "  <circle id=\"circle\" cx=\"100\" cy=\"50\" r=\"40\" \n" +
+
                  "  <circle id=\"circle\" cx=\"200\" cy=\"100\" r=\"40\" \n" +
            "          stroke=\"black\" stroke-width=\"2\" fill=\"grey\" />\n" +
+
                  "          stroke=\"blue\" stroke-width=\"2\" fill=\"#00678c\" />\n" +
            "  </a>\n" +
+
                  "  </a>\n" +
            "</svg>";
+
                  "</svg>";
 
     SVGDocument doc = SVGUtility.readSVGDocument(new ByteArrayInputStream(xml.getBytes()));
 
     SVGDocument doc = SVGUtility.readSVGDocument(new ByteArrayInputStream(xml.getBytes()));
 
     setSvgDocument(doc);
 
     setSvgDocument(doc);
 +
  }
 +
 +
=== 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.
 +
 +
In our example document hyperlinks are declared for the polygon and the circle, using http://local/polygon and http://local/circle respectively.
 +
 +
  <a xlink:href="http://local/polygon">
 +
  ...
 +
  <a xlink:href="http://local/circle">
 +
  ...
 +
 +
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
 +
 +
  @Override
 +
  protected void execHyperlink(SvgFieldEvent e) throws ProcessingException {
 +
    String url = e.getURL().toExternalForm();
 +
   
 +
    // checking for a match with 'http://local/circle'
 +
    if (url.contains("circle")) {
 +
      MessageBox.showOkMessage("Hyperlink Event", "You have clicked the circle", "URL: " + url);
 +
    }
 
   }
 
   }
  
Line 84: Line 119:
 
To verify the resulting SVG field server and client can be started
 
To verify the resulting SVG field server and client can be started
 
# In the ''Scout Explorer'' go to the projects top level node
 
# In the ''Scout Explorer'' go to the projects top level node
# Go to the ''Scout Object Properties''
+
# Go to the ''Scout Object Properties'' to section '''Product Launchers'''
# Start the server from the section '''Product Launchers''', see red arrow
+
## Start the server (lower green arrow)
# Start the client from the section '''Product Launchers''', see red arrow
+
## Start the client (upper green arrow)
  
 
[[Image:Verify_static_svg_field.png|thumb|center|400px|Scout SDK: Add an SVG form field]]
 
[[Image:Verify_static_svg_field.png|thumb|center|400px|Scout SDK: Add an SVG form field]]
  
 +
== Adding the interactive SVG diagram field ==
 +
Now we're looking at more realistic scenario where we load the SVG file "SampleGraphic.svg" from the client bundle.
  
 +
First, we add a second SVG field to the DesktopForm
 +
# Go to the ''Scout Explorer''
 +
# Open the node ''Client'' and the folder ''Forms''
 +
# Expand the ''DesktopForm'' and click on node '''MainBox''' as indicated by the red arrow
 +
# Use context menu '''New Form Field ...''' on node ''MainBox''
 +
# Select SvgField as shown below, click ''Next >'' and enter ''Dynamic SVG'' as name for the new field
 +
 +
=== Create a SVG file in the client bundle ===
 +
 +
For this, you first have to switch to the Package Explorer
 +
 +
[[Image:Scout-PackageExplorer.png]]
 +
 +
# Open the bundle org.eclipse.scout.svgtest.client
 +
# Create folder (New->Other..) '''svg''' below folder ''resources'' and add a new empty file "SampleGraphic.svg"
 +
 +
 +
[[Image:Scout-PackageExplorer-SVGFile.PNG]]
  
=== Create a scalable vector graphics file ===
+
Now, Open this file in the text editor and copy the following content into it
Alternatively, we create a graphic file that will be loaded into the SVG field later. The graphic file is named "SampleGraphic.svg". First we create a folder "svg" under svgfieldtutorial.client/resources, where the graphic file will be stored.
+
The SVG graphic file contains a dark grey circle and a light grey polygon.
+
  
  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify"  
+
<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify"  
 
   contentStyleType="text/css" version="1.1" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
 
   contentStyleType="text/css" version="1.1" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
 
   <a xlink:href="http://local/polygon">
 
   <a xlink:href="http://local/polygon">
Line 105: Line 158:
 
     <circle id="circle" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="grey" />
 
     <circle id="circle" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="grey" />
 
   </a>
 
   </a>
  </svg>
+
</svg>
  
The created SVG file can be loaded into the SVG field by using the following code snippet:
+
=== Load the SVG file from the client bundle resources ===
 +
 
 +
As in the case for the static SVG field add an implementation for method ''execInitField''. Below is the code to load the previously created SVG into the SVG field from the client bundle:
 +
 
 +
{{warning|Import|There are several suggestions for imports  when you hover ''Activator''. Make sure you select the correct one: Use ''org.eclipse.scout.'''svgtest'''.client'' (and java.io for InputStream)}}
  
 
   @Override
 
   @Override
Line 123: Line 180:
 
   }
 
   }
  
=== Adding interaction to the SVG field ===
+
=== Modify the SVG dynamically ===
Based on the SVG field and vector graphic file created in sections [http://wiki.eclipse.org/Scout/Tutorial/SVG_Field#Add a SVG field to the DesktopForm] and [http://wiki.eclipse.org/Scout/Tutorial/SVG_Field#Create a scalable vector graphics file] some interaction will be added to the SVG field.
+
  
==== Add click interaction to the SVG field ====
+
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.
  
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 '''DynamicSvgField'''
 +
# Go to the ''Scout Object Properties'' to '''Advanced Operations'''
 +
# Click on the green cross next to operation '''Exec Hyperlink''' to add the method
  
# In the ''Scout Explorer'' expand the ''MainBox'' and click on the previous created node '''StaticSvgField'''
+
[[Image:Add_Hyperlink_Handler.png|thumb|center|400px|Scout SDK: Add Hyperlink Event Handler]]
# 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 the following implementation for to method '''execClick()'''
+
  
[[Image:Add_Click_Handler.png|thumb|center|400px|Scout SDK: Add Click 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.
 
+
  @Override
+
  protected void execClicked(SvgFieldEvent e) throws ProcessingException {
+
    MessageBox.showOkMessage("Click Event", null, "Clicked on: [" + e.getPoint().getX() + "," + e.getPoint().getY() + "] ");
+
  }
+
 
+
 
+
==== 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
+
# Add the following implementation for to method '''execHyperlink()'''
+
 
+
[[Image:Add_Hyperlink_Handler.png|thumb|center|400px|Scout SDK: Add Hyperlink Event Handler]]
+
  
 
   @Override
 
   @Override
 
   protected void execHyperlink(SvgFieldEvent e) throws ProcessingException {
 
   protected void execHyperlink(SvgFieldEvent e) throws ProcessingException {
 
     if (e.getURL() == null) return;
 
     if (e.getURL() == null) return;
    //create a copy...
+
      // create a copy...
    SVGDocument doc = (SVGDocument) getSvgDocument().cloneNode(true);
+
      SVGDocument doc = (SVGDocument) getSvgDocument().cloneNode(true);
    String url = e.getURL().toExternalForm();
+
      String url = e.getURL().toExternalForm();
    if ("http://local/polygon".equals(url)) {
+
      if ("http://local/polygon".equals(url)) {
      //...and move a corner of the polygon
+
        // ... move a corner of the polygon to the right
      SVGPolygonElement poly = (SVGPolygonElement) doc.getElementById("poly");
+
        SVGPolygonElement poly = (SVGPolygonElement) doc.getElementById("poly");
      SVGPointList pointList = poly.getPoints();
+
        SVGPointList pointList = poly.getPoints();
      SVGPoint p = pointList.getItem(2);
+
        SVGPoint p = pointList.getItem(2);
      p.setX(p.getX() + 10);
+
        p.setX(p.getX() + 10);
    }
+
      }
    else if ("http://local/circle".equals(url)) {
+
      else if ("http://local/circle".equals(url)) {
      // ...and move the circle to the right
+
        // ... move circle to the left
      SVGCircleElement circle = (SVGCircleElement) doc.getElementById("circle");
+
        SVGCircleElement circle = (SVGCircleElement) doc.getElementById("circle");
      SVGLength cx = circle.getCx().getBaseVal();
+
        SVGLength cx = circle.getCx().getBaseVal();
      cx.setValue(cx.getValue() + 10);
+
        cx.setValue(cx.getValue() - 10);
    }
+
      }
    else {
+
      else {
      throw new ProcessingException("Unsupported Link: " + url);
+
        throw new ProcessingException("Unsupported Link: " + url);
    }
+
      }
    setSvgDocument(doc);
+
      setSvgDocument(doc);
 
   }
 
   }
  
 +
=== The final example ===
  
[[Image:Shifted_Polygon_and_Circle.png|thumb|center|400px|SVG field interaction: Shifted Polygon and Circle]]
+
[[Image:Shifted_Polygon_and_Circle.png|thumb|center|400px|SVG field interaction: Shifted Polygon and Circle several times to the right]]

Latest revision as of 05:31, 21 September 2012

The Scout documentation has been moved to https://eclipsescout.github.io/.

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.

This tutorial demonstrates

  • Displaying a static SVG field (view only)
  • Displaying an interactive SVG field using embedded hyperlinks.


Warning2.png
Mac OS X
There is a Bug on Mac OS X when using the Oracle JDK 7: [378442]. If you need SVG support on Mac please use the Apple JDK 6 until the bug is solved.


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 ...

In the New Scout Project dialog

  1. Enter org.eclipse.scout.svgtest into field Project Name
  2. Untick node org.eclipse.scout.svgtest.ui.rap
  3. Click Finish
Scout SDK: Create a new Scout project

More details can be found here.

Add SVG support to the application

For this, do the following

  1. Go to the projects top level node in the Scout Explorer
  2. Go to the Scout Property View and tick the check box Scalable Vector Graphics (SVG) as indicated by the red arrow.
Scout SDK: Add SVG Support to Scout application

Add the static SVG field to the DesktopForm

To add a SVG field to the DesktopForm do the following

  1. Go to the Scout Explorer
  2. Open the node Client and the folder Forms
  3. Expand the DesktopForm and click on node MainBox as indicated by the red arrow
  4. Use context menu New Form Field ... on node MainBox
  5. Select SvgField as shown below, click Next > and enter StaticSVG as class name for the field
Scout SDK: Add an SVG form field

Add an SVG Image

  1. In the Scout Explorer expand the MainBox and click on the newly created node StaticSvgField
  2. Go to the Scout Object Properties
  3. Enter 3 in filed Grid H to provide a decent height for the SVG field
  4. Click on the green cross next to operation ExecInitField to add the init method
  5. Add the following implementation for to method execInitField()
 @Override
 protected void execInitField() throws ProcessingException {
   String xml =
             "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n" +
                 "<svg width=\"400\" height=\"400\" viewBox=\"0 0 400 400\" \n" +
                 "     xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \n" +
                 "     contentScriptType=\"text/ecmascript\" zoomAndPan=\"magnify\" \n" +
                 "     contentStyleType=\"text/css\" version=\"1.1\" xml:space=\"preserve\" \n" +
                 "     preserveAspectRatio=\"xMidYMid meet\"\n" +
                 ">\n" +
                 "  <a xlink:href=\"http://local/polygon\">\n" +
                 "    <polygon id=\"poly\" points=\"220,100 300,210 170,250 123,234\" \n" +
                 "             style=\"fill:#f5950d;stroke:red;stroke-width:3\" />\n" +
                 "  </a>\n" +
                 "  <a xlink:href=\"http://local/circle\">\n" +
                 "  <circle id=\"circle\" cx=\"200\" cy=\"100\" r=\"40\" \n" +
                 "          stroke=\"blue\" stroke-width=\"2\" fill=\"#00678c\" />\n" +
                 "  </a>\n" +
                 "</svg>";
   SVGDocument doc = SVGUtility.readSVGDocument(new ByteArrayInputStream(xml.getBytes()));
   setSvgDocument(doc);
 }

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.

In our example document hyperlinks are declared for the polygon and the circle, using http://local/polygon and http://local/circle respectively.

 <a xlink:href="http://local/polygon">
 ...
 <a xlink:href="http://local/circle">
 ...

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.

  1. In the Scout Explorer click on node StaticSvgField
  2. Open Advanced Operations in the SVG field's Scout Object Properties
  3. Click on the green cross next to operation ExecHyperlink to add the method
  4. The implementation below will show a message box when the user clicks on the circle
 @Override
 protected void execHyperlink(SvgFieldEvent e) throws ProcessingException {
   String url = e.getURL().toExternalForm();
   
   // checking for a match with 'http://local/circle'
   if (url.contains("circle")) {
     MessageBox.showOkMessage("Hyperlink Event", "You have clicked the circle", "URL: " + url);
   }
 }

Verify the result

To verify the resulting SVG field server and client can be started

  1. In the Scout Explorer go to the projects top level node
  2. Go to the Scout Object Properties to section Product Launchers
    1. Start the server (lower green arrow)
    2. Start the client (upper green arrow)
Scout SDK: Add an SVG form field

Adding the interactive SVG diagram field

Now we're looking at more realistic scenario where we load the SVG file "SampleGraphic.svg" from the client bundle.

First, we add a second SVG field to the DesktopForm

  1. Go to the Scout Explorer
  2. Open the node Client and the folder Forms
  3. Expand the DesktopForm and click on node MainBox as indicated by the red arrow
  4. Use context menu New Form Field ... on node MainBox
  5. Select SvgField as shown below, click Next > and enter Dynamic SVG as name for the new field

Create a SVG file in the client bundle

For this, you first have to switch to the Package Explorer

Scout-PackageExplorer.png

  1. Open the bundle org.eclipse.scout.svgtest.client
  2. Create folder (New->Other..) svg below folder resources and add a new empty file "SampleGraphic.svg"


Scout-PackageExplorer-SVGFile.PNG

Now, Open this file in the text editor and copy the following content into it

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" 
  contentStyleType="text/css" version="1.1" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
  <a xlink:href="http://local/polygon">
   <polygon id="poly" points="220,100 300,210 170,250 123,234" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
  </a>
  <a xlink:href="http://local/circle">
   <circle id="circle" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="grey" />
  </a>
</svg>

Load the SVG file from the client bundle resources

As in the case for the static SVG field add an implementation for method execInitField. Below is the code to load the previously created SVG into the SVG field from the client bundle:

Warning2.png
Import
There are several suggestions for imports when you hover Activator. Make sure you select the correct one: Use org.eclipse.scout.svgtest.client (and java.io for InputStream)


 @Override
 protected void execInitField() throws ProcessingException {
   try {
     URL url = Activator.getDefault().getBundle().getResource("/resources/svg/SampleGraphic.svg");
     InputStream is = url.openStream();
     SVGDocument svgDoc = SVGUtility.readSVGDocument(is);
     setSvgDocument(svgDoc);
   }
   catch (IOException e) {
     e.printStackTrace();
     throw new ProcessingException("Exception occured while reading svg file", e);
   }
 }

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.

  1. In the Scout Explorer expand the MainBox and click on the previous created node DynamicSvgField
  2. Go to the Scout Object Properties to Advanced Operations
  3. 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.

 @Override
 protected void execHyperlink(SvgFieldEvent e) throws ProcessingException {
   if (e.getURL() == null) return;
     // create a copy...
     SVGDocument doc = (SVGDocument) getSvgDocument().cloneNode(true);
     String url = e.getURL().toExternalForm();
     if ("http://local/polygon".equals(url)) {
       // ... move a corner of the polygon to the right
       SVGPolygonElement poly = (SVGPolygonElement) doc.getElementById("poly");
       SVGPointList pointList = poly.getPoints();
       SVGPoint p = pointList.getItem(2);
       p.setX(p.getX() + 10);
     }
     else if ("http://local/circle".equals(url)) {
       // ... move circle to the left
       SVGCircleElement circle = (SVGCircleElement) doc.getElementById("circle");
       SVGLength cx = circle.getCx().getBaseVal();
       cx.setValue(cx.getValue() - 10);
     }
     else {
       throw new ProcessingException("Unsupported Link: " + url);
     }
     setSvgDocument(doc);
 }

The final example

SVG field interaction: Shifted Polygon and Circle several times to the right

Back to the top