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

From Eclipsepedia

< Scout‎ | Tutorial‎ | 3.8
Jump to: navigation, search
(Adding an interactive SVG diagram)
(Create a SVG file in the client bundle)
Line 107: Line 107:
 
# Open the bundle in the ''Package Explorer''
 
# Open the bundle in the ''Package Explorer''
 
# Create folder '''svg''' below folder ''resources'' and add a new empty file "SampleGraphic.svg"
 
# Create folder '''svg''' below folder ''resources'' and add a new empty file "SampleGraphic.svg"
# Open this file in the text editor and copy the following content into it
 
  
 
[[Image:SVG_file.png|thumb|center|400px|SVG file]]
 
[[Image:SVG_file.png|thumb|center|400px|SVG file]]
 +
 +
# Open this file in the text editor and copy the following content into it
  
 
The SVG graphic file contains a dark grey circle and a light grey polygon.
 
The SVG graphic file contains a dark grey circle and a light grey polygon.
Line 140: Line 141:
 
   }
 
   }
  
=== Adding interaction to the SVG field ===
+
== Adding interaction to the SVG field ==
  
 
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.
 
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.

Revision as of 16:24, 20 March 2012


Scout
Wiki Home
Website
DownloadGit
Community
ForumsBlogTwitter
Bugzilla
Bugzilla


Contents

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.

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

Installation of Scout Runtime 3.8 via Update Site


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 a 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 a static 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);
 }

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 red arrow)
    2. Start the client (upper red 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 Java Perspective

  1. Locate the bundle org.eclipse.scout.svgtest.client
  2. Open the bundle in the Package Explorer
  3. Create folder svg below folder resources and add a new empty file "SampleGraphic.svg"
SVG file
  1. Open this file in the text editor and copy the following content into it

The SVG graphic file contains a dark grey circle and a light grey polygon.

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

The created SVG file can be loaded into the SVG field by using the following code snippet:

 @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);
   }
 }

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.

  1. In the Scout Explorer expand the MainBox and click on the previous created node StaticSvgField
  2. Go to the Scout Object Properties
  3. Click on the green cross next to operation Exec Click to add the method based on the click event
  4. Add the following implementation for to method execClick()
Scout SDK: Add Click Event Handler
 @Override
 protected void execClicked(SvgFieldEvent e) throws ProcessingException {
   MessageBox.showOkMessage("Click Event", null, "Clicked on: [" + e.getPoint().getX() + "," + e.getPoint().getY() + "] ");
 }
SVG field interaction: Messagebox with xy-coordinates of 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.

  1. In the Scout Explorer expand the MainBox and click on the previous created node StaticSvgField
  2. Go to the Scout Object Properties
  3. Click on the green cross next to operation Exec Hyperlink under Advanced Operations to add the method based on the hyperlink event
  4. Add the following implementation for to method execHyperlink()
Scout SDK: Add Hyperlink Event Handler
 @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)) {
     //...and move a corner of the polygon
     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)) {
     // ...and move the circle to the right
     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);
 }


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