eclipse web tools
platform project

Xinjie Zhang Contributions

This project proposal is in the Proposal Phase and is posted here to solicit additional project participation and ways the project can be leveraged from the Eclipse membership-at-large. You are invited to comment on and/or join the project. Please send all feedback to the eclipse.webtools newsgroup or the wtp-proposal mailing list.


A SVG Widget Framework Plugin will be contributed as a part of the Web Tools Project. It aims to help developers create Rich Web Clients, or so called Rich Internet Application, based on SVG (Scalable Vector Graphics), an open standard under development by W3C. An original version has been available on This document demonstrates its main features and possible extensions.

Description of the Contribution

Rapid web application development is the goal of this plugin. A set of features are provided to serve this purpose. Let's look at the Figure 1. It is an overview of this plugin.

Figure 1: Overview
Figure 1:

Its main interface is composed of five parts:

  • A SVG Editor to present a SVG file with two views, namely Source and Design. Necessary Javascript code is generated to synchronize these two views(refer to Figure 2)
  • An Outline View, which gives an overview of SVG widget objects with a tree;
  • A Properties View, which displays the properties of selected widget(s) and allows to edit them
  • An Outlook style Side-bar, where predefined SVG widgets are hosted in different categories according to their Looks & Feels
  • A Preview toolbar button, click and a stand-alone SVG Player will pop up (view Figure 3). It is based on Batik SVG Toolkit, which provides a sophisticated SVG Swing component. However, it has been adapted into a SWT component for better integrating with Eclipse IDE.

Figure 2: Autogenerated Javascript Code
Figure 2:

Figure 3: Preview Window
Figure 3:

This plugin also provides a simple Project Wizard to help you create an empty or a demo SVG project. There are two steps:

  • Step 1. Choose a template of SVG project (refer to Figure 4). In the first version, there are only two templates : Default/Empty Project and Example Project.

Figure 4: New SVG Project
Figure 4:

  • Step 2. Assign a project name (Figure 5)

Figure 5: Project Name
Figure 5:


Although it has won a prize in the "International Challenge for Eclipse", this plugin is still far from mature. The Web Tools Project gives it a chance to become a really useful Tool, not just a Toy. There are several extensions could be predicted:

  • A better Source view by integrating with other contributions, e.g. X-Men, see Jens Lukowski proposal;
  • A feature-rich Javascript Editor and Debugger, it may be also available from other contributions;
  • A light weight SVG Player. It will be provided as a Java Applet with limited features. The point is, it should be compatible with Microsoft JVM 1.1.4 and the size is expected to be limited in 500kb. In this way, a SVG web application could be deployed in most computers;
  • Integrate with Java Application Server technologies;
  • Be able to import Flash components and pack a SVG application into a single compressed file;
  • More SVG widgets with different Looks & Feels , some powerful data and chart widgets etc


The SVG has a lot of potential to be a perfect language for Rich Internet Application. This plugin aims to turn its potential into reality. Moreover, its integration with other Java Application Server plugins extends its value.