1. No category

Enhancing Server-Side SVG
Generation using the Batik
Extension Handler Mechanism
For the SVG Open 2009 Conference
Jonathan Leech
Virtela Communications
Saturday, October 3, 2009
Overview
JFreeChart
Apache Batik
Enhancements
External CSS
SVG Patterns
Tooltips
Highlights
Animation
Groups
Saturday, October 3, 2009
Analogy
Saturday, October 3, 2009
Class Hierarchy
java.awt.Paint
ExtensionPaint
CompositePaint
AttributePaint
SVGPatternTexturePaint
TooltipPaint
AnimateTransformPaint
ExternalCSSPaint
org.apache.batik.svggen.SVGGraphics2D
ExtensionSVGGraphics2D
Saturday, October 3, 2009
AnimatePaint
External CSS
Paint p = new ExternalCSSPaint("series1");
plot.setSectionPaint(name, p);
...
<?xml-stylesheet media="print" href="chartbw.css" type="text/css"?>
<?xml-stylesheet media="screen" href="chart.css" type="text/css"?>
...
.series1 { fill:#EEEEEE }
...
.series1 { fill:green }
...
Saturday, October 3, 2009
External CSS
Saturday, October 3, 2009
External CSS
Saturday, October 3, 2009
SVG Patterns
Paint p = SVGPatternTexturePaint.createStarPaint(14, Color.GREEN, Color.WHITE);
plot.setSectionPaint(name, p);
...
Saturday, October 3, 2009
SVG Patterns
Saturday, October 3, 2009
Tooltips
Paint p = new TooltipPaint("http", "272638.000");
plot.setSectionPaint("http", p);
...
Saturday, October 3, 2009
Tooltips
Saturday, October 3, 2009
Highlights
Map<String, String> attrs = new HashMap<String, String>();
attrs.put("onmouseover", "highlight(evt)");
attrs.put("onmouseout", "unhighlight(evt)");
AttributePaint highlightPaint = new AttributePaint(hattrs);
...
function highlight(evt) {
var targetshape = evt.target;
targetshape.setAttribute("stroke-width", "2px");
targetshape.setAttribute("stroke", "black");
}
Saturday, October 3, 2009
Highlights
Saturday, October 3, 2009
Animation
Paint p = new AnimateTransformPaint(AnimateTransformPaint.Type.rotate, "10s",
"0,391,260", "360,391,260");
plot.setSectionPaint(name, p);
...
Saturday, October 3, 2009
Animation
Saturday, October 3, 2009
Groups
Thread.getStackTrace();
Batik DOMGroupManager, DOMTreeManager
Use in Conjuction with
External CSS
Javascript
Post-processing
Saturday, October 3, 2009
Groups
<g fill="white" text-rendering="geometricPrecision" font-family="sans-serif...>
<rect x="777.6656" width="171.3344" height="323.8682" y="99.0659" clip-.../>
<line clip-path="url(#clipPath1)" fill="none" x1="778.1656" x2="948.5" .../>
<line clip-path="url(#clipPath1)" fill="none" x1="778.1656" x2="948.5" .../>
<line clip-path="url(#clipPath1)" fill="none" x1="778.1656" x2="778.165.../>
<line clip-path="url(#clipPath1)" fill="none" x1="948.5" x2="948.5" y1=.../>
...
<g class="org_jfree_chart_JFreeChart_draw">
<g class="org_jfree_chart_JFreeChart_drawTitle">
<g class="org_jfree_chart_title_LegendTitle_draw">
<g fill="white" text-rendering="geometricPrecision" font-family="s...>
<rect x="777.6656" width="171.3344" height="323.8682" y="99.06.../>
</g>
<g class="org_jfree_chart_block_LineBorder_draw">
<g fill="white" text-rendering="geometricPrecision" font-family...>
<line clip-path="url(#clipPath1)" fill="none" x1="778.1656".../>
<line clip-path="url(#clipPath1)" fill="none" x1="778.1656".../>
<line clip-path="url(#clipPath1)" fill="none" x1="778.1656".../>
<line clip-path="url(#clipPath1)" fill="none" x1="948.5" x2.../>
</g>
</g>
...
Saturday, October 3, 2009
Groups
Saturday, October 3, 2009
Thanks
Virtela Communications
JFreeChart - David Gilbert
Batik - Apache Foundation
SVG Whiz! - Doug Schepers
Saturday, October 3, 2009