Template for Help Pages
This short tutorial, that consists of two Java Classes, demonstrates first, how to build a SVG document programatically, then how to add elements to this document, then how to append listeners to the Document elements, and how to react to them.
The first action creates a Document with a grid of rectangles in it.
The second action inserts a FILL = NONE, POINTER-EVENTS = FILL element as the first element of the Document. This places it as the background element, behind all others. In this example this element is the last posible receiver of events, and reacts only if no other element lays on top of it. This element is useful to detect a CLICK = NONE action, for de-selecting, on a interactive canvas.
The third action adds the listeners to provide feedback when a mouse event happens in the canvas.
All SVG related manipulation is done in the class "svgGlassPaneExample.java".
The class "glassPane.java" is a GUI interface for testing. Please forgive the layout errors, as this is but a simple fast tutorial.
Example
--------------
/*
* SvgGlassPaneExample.java
*
* Glaspane is a simple Tutorial on programatic
* SVG generation and event handling.
*
* Author: Andres Toussaint
* Created on May 18, 2005, 09:23 AM
*/
package glasspane;
import javax.swing.*;
import org.apache.batik.dom.svg.SVGDOMImplementation;
import org.w3c.dom.DOMImplementation;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.apache.batik.swing.*;
import org.w3c.dom.events.*;
/**
*
* @author Andres Toussaint
*/
public class SvgGlassPaneExample {
protected JSVGCanvas canvas;
protected JLabel target;
/** Creates a new instance of SvgGlassPaneExample */
public SvgGlassPaneExample(JPanel panel) {
panel.removeAll();
canvas = new JSVGCanvas();
canvas.setDocumentState(JSVGCanvas.ALWAYS_DYNAMIC);
canvas.setSize(400,400);
canvas.setDocument(buildDocument());
panel.add(canvas);
panel.repaint();
}
protected Document buildDocument() {
DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
Document doc = impl.createDocument(svgNS, "svg", null);
// get the root element (the svg element)
Element svgRoot = doc.getDocumentElement();
// set the width and height attribute on the root svg element
svgRoot.setAttributeNS(null, "width", "400");
svgRoot.setAttributeNS(null, "height", "400");
// create the array of rectangles
Element g = doc.createElementNS(svgNS, "g");
g.setAttributeNS(null, "id", "rectangles");
for (int x = 10; x < 400 ; x += 30) {
for (int y = 10; y < 400; y += 30) {
Element rectangle = doc.createElementNS(svgNS, "rect");
rectangle.setAttributeNS(null, "x", "" + x);
rectangle.setAttributeNS(null, "y", "" + y);
rectangle.setAttributeNS(null, "width", "20");
rectangle.setAttributeNS(null, "height", "20");
rectangle.setAttributeNS(null, "style", "fill:red");
rectangle.setAttributeNS(null, "id", "rect: " + x + ", "+ y);
// attach the rectangle to the g element
g.appendChild(rectangle);
}
}
svgRoot.appendChild(g);
return doc;
}
public void addGlassPane() {
String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
Document doc = canvas.getSVGDocument();
Element rectangle = doc.createElementNS(svgNS, "rect");
rectangle.setAttributeNS(null, "x", "0");
rectangle.setAttributeNS(null, "y", "0");
rectangle.setAttributeNS(null, "width", "400");
rectangle.setAttributeNS(null, "height", "400");
rectangle.setAttributeNS(null, "style", "fill:none;pointer-events:fill");
rectangle.setAttributeNS(null, "id", "glasspane");
Element svgRoot = doc.getDocumentElement();
svgRoot.insertBefore(rectangle, doc.getElementById("rectangles"));
}
public void registerListeners(JLabel target) {
//this label provides feedback on the selected item
this.target = target;
// Gets an element from the loaded document.
// document is your SVGDocument
Element elt = canvas.getSVGDocument().getElementById("glasspane");
EventTarget t = (EventTarget)elt;
t.addEventListener("click", new GlassPaneClick(), false);
Element elt2 = canvas.getSVGDocument().getElementById("rectangles");
EventTarget t2 = (EventTarget)elt2;
t2.addEventListener("click", new ObjectClick(), false);
}
public class GlassPaneClick implements EventListener {
public void handleEvent(Event evt) {
target.setText("Glasspane event "+((Element)evt.getTarget()).getAttribute("id"));
target.repaint();
}
}
public class ObjectClick implements EventListener {
public void handleEvent(Event evt) {
target.setText("Rectangles event "+((Element)evt.getTarget()).getAttribute("id"));
target.repaint();
}
}
}
--------------
--------------
/*
* GlassPane.java
*
* Glaspane is a simple Tutorial on programatic
* SVG generation and event handling.
*
* Author: Andres Toussaint
* Created on May 18, 2005, 09:23 AM
*/
package glasspane;
/**
*
* @author Andres Toussaint
*/
public class GlassPane extends javax.swing.JFrame {
/** Creates new form NewJFrame */
public GlassPane() {
initComponents();
}
/** This method is called from within the constructor to
* initialize the form.
* WARNING: Do NOT modify this code. The content of this method is
* always regenerated by the Form Editor.
*/
private void initComponents() {
svgPanel = new javax.swing.JPanel();
jLabel1 = new javax.swing.JLabel();
btnPanel = new javax.swing.JPanel();
jButton1 = new javax.swing.JButton();
jButton2 = new javax.swing.JButton();
jButton3 = new javax.swing.JButton();
jButton4 = new javax.swing.JButton();
jSeparator1 = new javax.swing.JSeparator();
jLabel2 = new javax.swing.JLabel();
target = new javax.swing.JLabel();
setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
svgPanel.setMaximumSize(new java.awt.Dimension(400, 400));
svgPanel.setMinimumSize(new java.awt.Dimension(400, 400));
svgPanel.setPreferredSize(new java.awt.Dimension(400, 400));
getContentPane().add(svgPanel, java.awt.BorderLayout.CENTER);
jLabel1.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
jLabel1.setText("SVG Glass pane example");
getContentPane().add(jLabel1, java.awt.BorderLayout.NORTH);
btnPanel.setLayout(new javax.swing.BoxLayout(btnPanel, javax.swing.BoxLayout.Y_AXIS));
jButton1.setText("create SVG");
jButton1.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent evt) {
jButton1ActionPerformed(evt);
}
});
btnPanel.add(jButton1);
jButton2.setText("Add Glasspane");
jButton2.setEnabled(false);
jButton2.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent evt) {
jButton2ActionPerformed(evt);
}
});
btnPanel.add(jButton2);
jButton3.setText("add listeners");
jButton3.setEnabled(false);
jButton3.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent evt) {
jButton3ActionPerformed(evt);
}
});
btnPanel.add(jButton3);
jButton4.setText("reset");
jButton4.setEnabled(false);
jButton4.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent evt) {
jButton4ActionPerformed(evt);
}
});
btnPanel.add(jButton4);
jSeparator1.setOrientation(javax.swing.SwingConstants.VERTICAL);
jSeparator1.setMaximumSize(new java.awt.Dimension(20, 40));
jSeparator1.setPreferredSize(new java.awt.Dimension(20, 40));
btnPanel.add(jSeparator1);
jLabel2.setFont(new java.awt.Font("MS Sans Serif", 1, 12));
jLabel2.setText("Target:");
jLabel2.setHorizontalTextPosition(javax.swing.SwingConstants.CENTER);
btnPanel.add(jLabel2);
target.setFont(new java.awt.Font("Arial Narrow", 0, 10));
target.setText("none");
target.setHorizontalTextPosition(javax.swing.SwingConstants.CENTER);
btnPanel.add(target);
getContentPane().add(btnPanel, java.awt.BorderLayout.EAST);
pack();
}
private void jButton4ActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
svgPanel.removeAll();
jButton4.setEnabled(false);
jButton1.setEnabled(true);
}
private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
example.registerListeners(target);
jButton3.setEnabled(false);
}
private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
example.addGlassPane();
jButton3.setEnabled(true);
jButton2.setEnabled(false);
}
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
example = new SvgGlassPaneExample(svgPanel);
jButton2.setEnabled(true);
jButton4.setEnabled(true);
jButton1.setEnabled(false);
this.validate();
}
/**
* @param args the command line arguments
*/
public static void main(String args[]) {
java.awt.EventQueue.invokeLater(new Runnable() {
public void run() {
new GlassPane().setVisible(true);
}
});
}
// Variables declaration - do not modify
private javax.swing.JPanel btnPanel;
private javax.swing.JButton jButton1;
private javax.swing.JButton jButton2;
private javax.swing.JButton jButton3;
private javax.swing.JButton jButton4;
private javax.swing.JLabel jLabel1;
private javax.swing.JLabel jLabel2;
private javax.swing.JSeparator jSeparator1;
private javax.swing.JPanel svgPanel;
private javax.swing.JLabel target;
// End of variables declaration
private SvgGlassPaneExample example;
}
--------------