You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@cocoon.apache.org by Gautam Ganguly <gg...@transunion.com> on 2004/02/10 20:05:00 UTC
Embedded JavaScript file inside dynamic SVG isn't working
hi all,
I am trying to make these dynamic svg which i create using xsp to
also use the javascript file but it somehow doesn't seem to find it.
The basic system setup is:
JDK-1.4.1
Win2k Professional
Cocoon-2.1.2
Tomcat-4.1.27
These is what my sitemap looks like:
<map:match pattern="ShowMeSVG.html">
<map:generate type="serverpages" src="docs/svg/result.xsp"/>
<map:transform src="docs/svg/style/GenDynaSvg.xsl"/>
<map:transform type="extractor"/>
<map:transform src="docs/svg/style/fragment-extractor.xsl"/>
<map:serialize/>
</map:match>
<map:match pattern="svgimages/*.svg">
<map:generate type="extractor" src="{1}"/>
<map:serialize/>
</map:match>
<map:match pattern="scripts/MoveCircle.js">
<map:read src="resources/js/MoveCircle.js"
mime-type="text/javascript"/>
</map:match>
<map:match pattern="resources/**.js">
<map:read src="resources/js/{1}.js"
mime-type="application/x-javascript"/>
</map:match>
---------------------------------
And the files looks like these:
[Result.xsp]
-------------------------
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsp:page language="java" xmlns:xsp="http://apache.org/xsp">
<document>
<graph>
<row>NO DATA</xsp:expr></row>
</graph>
</document>
</xsp:page>
[fragment-extractor.xsl]
-------------------------------
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:fe="http://apache.org/cocoon/fragmentextractor/2.0">
<xsl:template match="//fe:fragment">
<embed width="400" height="200" unit="pixels" border="2"
src="svgimages/{@fragment-id}.svg" name="svgmap"
type="image/svg+xml"
pluginspage="http::/www.adobe.com/svg/viewer/install/"/>
</xsl:template>
<xsl:template match="@*|*|text()|processing-instruction()"
priority="-1">
<xsl:copy>
<xsl:apply-templates
select="@*|*|text()|processing-instruction()"/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
[GenDynsSvg.xsl]
-----------------------------------------------
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<xsl:import href="GenDynHtmlTemplate.xsl"/>
<xsl:template match="graph">
<svg:svg xml:space="preserve"
width="400" height="200" onload="init(evt)"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg:script xlink:href="scripts/MoveCircle.js"
type="text/javascript"/> <svg:circle id="Circle1" cx="80" cy="40"
r="30"
style="stroke-width:2;stroke:black;fill:white;
fill-opacity:0.5"
onmouseup="mouseup(evt)" onmousemove="move(evt)"
onmousedown="click(evt)"/>
</svg:svg>
</xsl:template>
</xsl:stylesheet>
[GenDynHtmlTemplate.xsl]
--------------------------------------------------------------
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Embedding SVG Image using Javascript</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="right"><xsl:apply-templates/></td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
MoveCircle.js
-------------------------------------------------------------
var track=false;
var SVGDoc;
function init(evt) {
// Get the Document
SVGDoc = evt.getTarget().getOwnerDocument();
// Get the circle you'll be dragging around
nodeCircle = SVGDoc.getElementById("Circle1");
}
function click(evt){
track=true;
}
function mouseup(evt){
track=false;
}
function move(evt){
// get window values
var x = evt.getClientX();
var y = evt.getClientY();
if (track==true)
{
// set the center point of the circle to the new values
nodeCircle.setAttributeNS(null,"cx",x);
nodeCircle.setAttributeNS(null,"cy",y);
}
}
-------------------------------------------------
Main Task is just not to show the SVG images dynamically but also to
let the user edit them on the web-page.
The dynamic generation of the svg image and embedding them into the
HTML page and displaying it works just great...thanks to you all out
there
who helped me!!
The next task of make the displayed SVG image using the Javascript
file
is where i am getting struck at:(.
I have tried to put the javascript file in every available location
that i could think of,but still cocoon doesn't seem to find it..and as a
matter of fact even tried to force the pipeline to use only the one
javascript file as you can see in the sitemap..but that too didnot
help.
I even placed the java script code into the svg file by using the
<script type="text/ecmascript"><![CDATA[ ]]></script> tags didn't help
it either.
Any clues ..any suggesttion would be of lot of help.
Thanks to you all ..again.
regards
Gautam
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@cocoon.apache.org
For additional commands, e-mail: users-help@cocoon.apache.org