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

   1 --------------
   2 /*
   3  * SvgGlassPaneExample.java
   4  *
   5  *  Glaspane is a simple Tutorial on programatic
   6  *  SVG generation and event handling.
   7  *
   8  *  Author: Andres Toussaint
   9  *  Created on May 18, 2005, 09:23 AM
  10  */
  11 
  12 package glasspane;
  13 
  14 import javax.swing.*;
  15 import org.apache.batik.dom.svg.SVGDOMImplementation;
  16 import org.w3c.dom.DOMImplementation;
  17 import org.w3c.dom.Document;
  18 import org.w3c.dom.Element;
  19 import org.apache.batik.swing.*;
  20 import org.w3c.dom.events.*;
  21 
  22 /**
  23  *
  24  * @author Andres Toussaint
  25  */
  26 public class SvgGlassPaneExample {
  27     
  28     protected JSVGCanvas canvas;
  29     protected JLabel target;
  30     /** Creates a new instance of SvgGlassPaneExample */
  31     public SvgGlassPaneExample(JPanel panel) {
  32         panel.removeAll();
  33         canvas = new JSVGCanvas();
  34         canvas.setDocumentState(JSVGCanvas.ALWAYS_DYNAMIC);
  35         canvas.setSize(400,400);
  36         canvas.setDocument(buildDocument());
  37         panel.add(canvas);
  38         panel.repaint();
  39     }
  40     
  41     
  42     
  43     protected Document buildDocument() {
  44         DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
  45         String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
  46         Document doc = impl.createDocument(svgNS, "svg", null);
  47         
  48         // get the root element (the svg element)
  49         Element svgRoot = doc.getDocumentElement();
  50         
  51         // set the width and height attribute on the root svg element
  52         svgRoot.setAttributeNS(null, "width", "400");
  53         svgRoot.setAttributeNS(null, "height", "400");
  54         
  55         // create the array of rectangles
  56         Element g = doc.createElementNS(svgNS, "g");
  57         g.setAttributeNS(null, "id", "rectangles");
  58         
  59         for (int x = 10; x < 400 ; x += 30) {
  60             for (int y = 10; y < 400; y += 30) {
  61                 Element rectangle = doc.createElementNS(svgNS, "rect");
  62                 rectangle.setAttributeNS(null, "x", "" + x);
  63                 rectangle.setAttributeNS(null, "y", "" + y);
  64                 rectangle.setAttributeNS(null, "width", "20");
  65                 rectangle.setAttributeNS(null, "height", "20");
  66                 rectangle.setAttributeNS(null, "style", "fill:red");
  67                 rectangle.setAttributeNS(null, "id", "rect: " + x + ", "+ y);
  68                 // attach the rectangle to the g element
  69                 g.appendChild(rectangle);
  70             }
  71         }
  72         
  73         svgRoot.appendChild(g);
  74         
  75         return doc;
  76     }
  77     
  78     public void addGlassPane() {
  79         String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
  80         Document doc = canvas.getSVGDocument();
  81         Element rectangle = doc.createElementNS(svgNS, "rect");
  82         rectangle.setAttributeNS(null, "x", "0");
  83         rectangle.setAttributeNS(null, "y", "0");
  84         rectangle.setAttributeNS(null, "width", "400");
  85         rectangle.setAttributeNS(null, "height", "400");
  86         rectangle.setAttributeNS(null, "style", "fill:none;pointer-events:fill");
  87         rectangle.setAttributeNS(null, "id", "glasspane");
  88         Element svgRoot = doc.getDocumentElement();
  89         
  90         svgRoot.insertBefore(rectangle, doc.getElementById("rectangles"));
  91 
  92     }
  93     
  94     public void registerListeners(JLabel target) {
  95         //this label provides feedback on the selected item
  96         this.target = target;
  97         // Gets an element from the loaded document.
  98         // document is your SVGDocument
  99         Element elt = canvas.getSVGDocument().getElementById("glasspane");
 100         EventTarget t = (EventTarget)elt;
 101         t.addEventListener("click", new GlassPaneClick(), false);
 102         
 103         Element elt2 = canvas.getSVGDocument().getElementById("rectangles");
 104         EventTarget t2 = (EventTarget)elt2;
 105         
 106         t2.addEventListener("click", new ObjectClick(), false);
 107     }
 108     
 109     public class GlassPaneClick implements EventListener {
 110         public void handleEvent(Event evt) {
 111             target.setText("Glasspane event "+((Element)evt.getTarget()).getAttribute("id"));
 112             target.repaint();
 113         }
 114     }
 115     
 116     public class ObjectClick implements EventListener {
 117         public void handleEvent(Event evt) {
 118             target.setText("Rectangles event "+((Element)evt.getTarget()).getAttribute("id"));
 119             target.repaint();
 120         }
 121     }
 122 }
 123 
 124 --------------
 125 
 126 --------------
 127 /*
 128  * GlassPane.java
 129  *
 130  *  Glaspane is a simple Tutorial on programatic
 131  *  SVG generation and event handling.
 132  *
 133  *  Author: Andres Toussaint
 134  *  Created on May 18, 2005, 09:23 AM
 135  */
 136 package glasspane;
 137 
 138 /**
 139  *
 140  * @author  Andres Toussaint
 141  */
 142 public class GlassPane extends javax.swing.JFrame {
 143     
 144     /** Creates new form NewJFrame */
 145     public GlassPane() {
 146         initComponents();
 147     }
 148     
 149     /** This method is called from within the constructor to
 150      * initialize the form.
 151      * WARNING: Do NOT modify this code. The content of this method is
 152      * always regenerated by the Form Editor.
 153      */
 154     private void initComponents() {
 155         svgPanel = new javax.swing.JPanel();
 156         jLabel1 = new javax.swing.JLabel();
 157         btnPanel = new javax.swing.JPanel();
 158         jButton1 = new javax.swing.JButton();
 159         jButton2 = new javax.swing.JButton();
 160         jButton3 = new javax.swing.JButton();
 161         jButton4 = new javax.swing.JButton();
 162         jSeparator1 = new javax.swing.JSeparator();
 163         jLabel2 = new javax.swing.JLabel();
 164         target = new javax.swing.JLabel();
 165 
 166         setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
 167         svgPanel.setMaximumSize(new java.awt.Dimension(400, 400));
 168         svgPanel.setMinimumSize(new java.awt.Dimension(400, 400));
 169         svgPanel.setPreferredSize(new java.awt.Dimension(400, 400));
 170         getContentPane().add(svgPanel, java.awt.BorderLayout.CENTER);
 171 
 172         jLabel1.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
 173         jLabel1.setText("SVG Glass pane example");
 174         getContentPane().add(jLabel1, java.awt.BorderLayout.NORTH);
 175 
 176         btnPanel.setLayout(new javax.swing.BoxLayout(btnPanel, javax.swing.BoxLayout.Y_AXIS));
 177 
 178         jButton1.setText("create SVG");
 179         jButton1.addActionListener(new java.awt.event.ActionListener() {
 180             public void actionPerformed(java.awt.event.ActionEvent evt) {
 181                 jButton1ActionPerformed(evt);
 182             }
 183         });
 184 
 185         btnPanel.add(jButton1);
 186 
 187         jButton2.setText("Add Glasspane");
 188         jButton2.setEnabled(false);
 189         jButton2.addActionListener(new java.awt.event.ActionListener() {
 190             public void actionPerformed(java.awt.event.ActionEvent evt) {
 191                 jButton2ActionPerformed(evt);
 192             }
 193         });
 194 
 195         btnPanel.add(jButton2);
 196 
 197         jButton3.setText("add listeners");
 198         jButton3.setEnabled(false);
 199         jButton3.addActionListener(new java.awt.event.ActionListener() {
 200             public void actionPerformed(java.awt.event.ActionEvent evt) {
 201                 jButton3ActionPerformed(evt);
 202             }
 203         });
 204 
 205         btnPanel.add(jButton3);
 206 
 207         jButton4.setText("reset");
 208         jButton4.setEnabled(false);
 209         jButton4.addActionListener(new java.awt.event.ActionListener() {
 210             public void actionPerformed(java.awt.event.ActionEvent evt) {
 211                 jButton4ActionPerformed(evt);
 212             }
 213         });
 214 
 215         btnPanel.add(jButton4);
 216 
 217         jSeparator1.setOrientation(javax.swing.SwingConstants.VERTICAL);
 218         jSeparator1.setMaximumSize(new java.awt.Dimension(20, 40));
 219         jSeparator1.setPreferredSize(new java.awt.Dimension(20, 40));
 220         btnPanel.add(jSeparator1);
 221 
 222         jLabel2.setFont(new java.awt.Font("MS Sans Serif", 1, 12));
 223         jLabel2.setText("Target:");
 224         jLabel2.setHorizontalTextPosition(javax.swing.SwingConstants.CENTER);
 225         btnPanel.add(jLabel2);
 226 
 227         target.setFont(new java.awt.Font("Arial Narrow", 0, 10));
 228         target.setText("none");
 229         target.setHorizontalTextPosition(javax.swing.SwingConstants.CENTER);
 230         btnPanel.add(target);
 231 
 232         getContentPane().add(btnPanel, java.awt.BorderLayout.EAST);
 233 
 234         pack();
 235     }
 236 
 237     private void jButton4ActionPerformed(java.awt.event.ActionEvent evt) {
 238         // TODO add your handling code here:
 239         svgPanel.removeAll();
 240         jButton4.setEnabled(false);
 241         jButton1.setEnabled(true);
 242     }
 243 
 244     private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {
 245         // TODO add your handling code here:
 246         example.registerListeners(target);
 247         jButton3.setEnabled(false);
 248     }
 249 
 250     private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {
 251         // TODO add your handling code here:
 252                 example.addGlassPane();
 253         jButton3.setEnabled(true);
 254         jButton2.setEnabled(false);
 255     }
 256 
 257     private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
 258         // TODO add your handling code here:
 259         example = new SvgGlassPaneExample(svgPanel);
 260         jButton2.setEnabled(true);
 261         jButton4.setEnabled(true);
 262         jButton1.setEnabled(false);
 263         this.validate();
 264     }
 265     
 266     /**
 267      * @param args the command line arguments
 268      */
 269     public static void main(String args[]) {
 270         java.awt.EventQueue.invokeLater(new Runnable() {
 271             public void run() {
 272                 new GlassPane().setVisible(true);
 273             }
 274         });
 275     }
 276     
 277     // Variables declaration - do not modify
 278     private javax.swing.JPanel btnPanel;
 279     private javax.swing.JButton jButton1;
 280     private javax.swing.JButton jButton2;
 281     private javax.swing.JButton jButton3;
 282     private javax.swing.JButton jButton4;
 283     private javax.swing.JLabel jLabel1;
 284     private javax.swing.JLabel jLabel2;
 285     private javax.swing.JSeparator jSeparator1;
 286     private javax.swing.JPanel svgPanel;
 287     private javax.swing.JLabel target;
 288     // End of variables declaration
 289     
 290     private SvgGlassPaneExample example;
 291 }
 292 --------------

BackgroundGlassPaneTutorial (last edited 2012-06-22 14:13:22 by drool)