SVG setup and other notes

[Colin Britton <cb...@mediabridge.net>]

Firstly thanks to all on this project for a great set of functionality. We
are enjoying building apps using the framework and are also really looking
forward to Cocoon 2!!! We are writing various componants which extend cocoon
into our system and interface with our DB's media handling systems and
during that work we have worked with the existing componants to demo wap,
html, svg, gif generation etc... from a single XML file.

Here are some pieces of feedback as to how we are currently working. I felt
that it may be of general interest and maybe some of the setting get
reflected into the samples etc...

Firstly we are using the URL extension to allow us to select stylesheets.
This method uses "fake" user-Agents to trigger a stylesheet. Like below:

http://cocoonserver.domain.com\samples\foo.xml?user-Agent=.svg

By including the period we get round the Microsoft IE mime problem (this
should also work for PDF's produced from FO). Explorer launches the correct
item.

Clearly we also have to have a set of matching fake user-agents in the
properties file. See below:

browser.0 = explorer=MSIE
browser.1 = opera=Opera
browser.2 = lynx=Lynx
browser.3 = java=Java
browser.4 = wap=Nokia-WAP-Toolkit
browser.5 = netscape=Mozilla
browser.6 = imagebuilder=jpeg
browser.7 = wap=Nokia
browser.8 = svg=svg

In addition we have added another wap mapping this is because the actual
Nokia cell phones have a different user agent than the toolkit. (The second
setting should work for both as I believe it does a sub string check)

By using the user agent we are able to switch stylesheet in the URL, bit of
a hack but makes for a cool demonstration when the same xml is rendered as
html, gif and svg in the same browser.

To get the svg to work we added a formatter to the properties file:

formatter.type.image/svg  = org.apache.cocoon.formatter.SVGFormatter

and the corresponding java (copied from the XML formatter source - someone
should check it is correct - although it does work). Here is that source:

To keep this message short I have not put in the notice from the front....
Maybe someone can pick it up, check it and add it to the cvs with the
correct apache notices etc... (source at end of message)

For svg we are using the Adobe SVG viewer in IE (or Netscape).

Here is a simple sample XML file and SVG stylesheet that does something.....

<?xml version="1.0"?>
<?xml-stylesheet href="svg.xsl" type="text/xsl" media="svg"?>
<?cocoon-process type="xslt"?>

<EXAMPLE>
<LOGO PATH="cocoon.jpg"/>
<MESSAGE TYPE="HEAD">
Hello World!</MESSAGE>
<MESSAGE TYPE="SUB">
SVG Rocks!</MESSAGE>
</EXAMPLE>

and the stylesheet...

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xlink="http://www.w3.org/1999/xlink">

<xsl:template match="*|/">
<xsl:apply-templates/></xsl:template>

<xsl:template match="text()|@*"><xsl:value-of select="."/></xsl:template>

<xsl:template match="text()"><xsl:value-of select="."/></xsl:template>

<xsl:template match="EXAMPLE">
<xsl:processing-instruction
name="cocoon-format">type="image/svg"</xsl:processing-instruction>
<svg xml:space="default" width="200" height="200"
style="text-rendering:optimizeLegibility;shape-rendering:default;image-rende
ring:optimizeQuality">
<desc>Cocoon Server Demonstration</desc>

<image x="0" y="0" width="300" height="69" transform="matrix(1 0 0 1 150
10)">
	<xsl:attribute name="xlink:href"><xsl:value-of
select="LOGO/@PATH"/></xsl:attribute>
</image>

<g transform="translate(200 200)">
		<circle id="circle1"
style="fill:blue;stroke:black;stroke-width:3;opacity:100%" cx="0" cy="0"
r="30">
			<animateTransform attributeName="transform" type="rotate" values="0;360"
additive="sum" dur="3s" repeatDur="indefinite"/>
			<animateTransform attributeName="transform" type="scale"  values="4 1;0.5
1;4 1"   additive="sum" dur="4s" repeatDur="indefinite"/>
		</circle>
		<circle id="circle2"
style="fill:red;stroke:#0A8;stroke-width:3;opacity:100%" cx="0" cy="0"
r="30">
			<animateTransform attributeName="transform" type="rotate" values="0;-360"
additive="sum" dur="12s" repeatDur="indefinite"/>
			<animateTransform attributeName="transform" type="rotate"
values="0;30;-40;190;90;170;320;290;210;170;0" additive="sum" dur="7s"
repeatDur="indefinite"/>
			<animateTransform attributeName="transform" type="scale"  values="1 5;3
0.5;1 5"   additive="sum" dur="3s" repeatDur="indefinite"/>
		</circle>
		<circle id="circle3"
style="fill:yellow;stroke:#0C0;stroke-width:3;opacity:100%" cx="0" cy="0"
r="30">
			<animateTransform attributeName="transform" type="rotate" values="0;-360"
additive="sum" dur="12s" repeatDur="indefinite"/>
			<animateTransform attributeName="transform" type="rotate"
values="0;30;-40;190;90;170;320;290;210;170;0" additive="sum" dur="8s"
repeatDur="indefinite"/>
			<animateTransform attributeName="transform" type="scale"  values="4 1;0.5
1;4 1"   additive="sum" dur="3s" repeatDur="indefinite"/>
		</circle>
	</g>

<g transform="matrix(1 0 0 1 200 200)"
style="fill:#000000;font-family:Arial; font-size:20;text-align:left">
<text x="0" y="0"><xsl:value-of select="MESSAGE[@TYPE='HEAD']"/>
	<animateTransform attributeName="transform" type="rotate" values="0;-360"
additive="sum" dur="12s" repeatDur="indefinite"/>
	<animateTransform attributeName="transform" type="rotate"
values="0;30;-40;190;90;170;320;290;210;170;0" additive="sum" dur="7s"
repeatDur="indefinite"/>
	<animateTransform attributeName="transform" type="scale"  values="1 5;3
0.5;1 5"   additive="sum" dur="3s" repeatDur="indefinite"/>

</text>
</g>

<g transform="matrix(1 0 0 1 200 200)"
style="fill:#ff2d60;font-family:ArialBold; font-size:20;text-align:left">
<text x="0" y="0"><xsl:value-of select="MESSAGE[@TYPE='SUB']"/>
		<animateTransform attributeName="transform" type="rotate" values="0;-360"
additive="sum" dur="12s" repeatDur="indefinite"/>
		<animateTransform attributeName="transform" type="rotate"
values="0;30;-40;190;90;170;320;290;210;170;0" additive="sum" dur="8s"
repeatDur="indefinite"/>
		<animateTransform attributeName="transform" type="scale"  values="4 1;0.5
1;4 1"   additive="sum" dur="3s" repeatDur="indefinite"/>
</text>
</g>

</svg>
</xsl:template>
</xsl:stylesheet>

I hope someone finds this feedback usefull.

rgds
Colin Britton
cbritton@mediabridge.net



formatter source below:

<source>
package org.apache.cocoon.formatter;

import java.io.*;
import java.util.*;
import org.w3c.dom.*;
import org.apache.xml.serialize.*;
import org.apache.cocoon.framework.*;

public class SVGFormatter extends AbstractFormatter implements Status {

    private SerializerFactory factory;

    public SVGFormatter () {
        this.factory = SerializerFactory.getSerializerFactory(Method.XML);
    }

    public void format(Document document, Writer writer, Dictionary p)
throws Exception {
        OutputFormat format = super.getFormat(p);
        format.setMethod(Method.XML);
        format.setOmitXMLDeclaration(false);
        format.setPreserveSpace(false);
        format.setEncoding(null);
        format.setDoctype("svg SYSTEM", "svg-19990812.dtd");
        Serializer serializer = this.factory.makeSerializer(writer, format);
        serializer.asDOMSerializer().serialize(document);
    }

    public String getMIMEType() {
        return "image/svg";
    }

    public String getStatus() {
        return "SVG Formatter";
    }
}

</source>

Re: SVG setup and other notes

[Niclas Hedhman <ni...@localbar.com>]

Colin Britton wrote:

> browser.0 = explorer=MSIE
> browser.1 = opera=Opera
> browser.2 = lynx=Lynx
> browser.3 = java=Java
> browser.4 = wap=Nokia-WAP-Toolkit
> browser.5 = netscape=Mozilla
> browser.6 = imagebuilder=jpeg
> browser.7 = wap=Nokia
> browser.8 = svg=svg

Does not the Nokia 9110 with the HTML browser report "Nokia" as user agent, and hence you would be
delivering wrong content??

I am not sure about this, but to me it seems likely.

Niclas