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.
Difference between revisions of "Scout/Tutorial/3.8/SVG Field"
| Line 31: | Line 31: | ||
=== Create a scalable vector graphics file === | === Create a scalable vector graphics file === | ||
| − | We create a graphic file that will be loaded into the SVG field later. The graphic file is named "SampleGraphic.svg". First create a folder "svg" | + | 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"?> | ||
Revision as of 08:29, 23 January 2012
The Scout documentation has been moved to https://eclipsescout.github.io/.
Contents
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. In this tutorial a simple form containing a SVG field is created and its event handling capabilities is demonstrated.
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/.
Create a form containing a SVG field
Create a Scout application
As a first step create a new Scout application called "svgfieldtutorial" in the Scout perspective. More details can be found The Scout documentation has been moved to https://eclipsescout.github.io/..
[picture1]
[picture2]
Add SVG client plugin
To be able to use the SVG field the plugin "org.eclipse.scout.svg.client" has to be added as a required plugin to the client part of our sample application. Open the Java perspective and open the plugin.xml file in svgfieldtutorial.client.
[picture3]
Create a scalable vector graphics file
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"?> <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/info-prev"> <polygon id="poly" points="220,100 300,210 170,250 123,234" style="fill:#cccccc;stroke:#000000;stroke-width:1"/> </a> <circle id="circle" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="grey" /> </svg>
Create SampleSVGFieldNodePage
In the minicrm sample application we will add a SampleSVGNodePage to the StandardOutline. This node page is able to hold a SampleSVGFieldForm that will be created next step.
Create SampleSVGFieldForm
We create a SampleSVGFieldForm and add a SVG field called "GraphicField" to the MainBox which subclasses AbstractSvgField. A close button that subclasses AbstractCloseButton is also added to the MainBox.