- From: Fred P. <fprog26@hotmail.com>
- Date: Fri, 14 Nov 2003 18:58:46 -0500
- To: www-svg@w3.org, dean@w3.org
RCC with some XSLT attribute extensions to consolidate no brainer RCC
prototype templates
4.1.5 The transformer element
http://www.w3.org/TR/SVG12/#transformer-element
4.7.2 The generateContent element = Use02 example
http://www.w3.org/TR/SVG12/#generateContent-element
<pushButton xmlns="http://bar.example.org/buttons"
action="myCallback(evt)" x='10' y='10' height='30' width='30'
/>
This should be feasible with RCC with an <attribute/> XSLT-like extension,
the goal here is to eliminate emcascript for common trivial cases.
Cases with more complicated logic can still be and should still be
achieved using emcascript or both.
i.e. <script ev:event="SVGBindEnd" type="text/ecmascript"
xlink:href="buildPushButton.es"/>
<extensionDefs namespace="http://bar.example.org/buttons"/>
<elementDef name="pushButton">
<attribute name="action" type="string" variable="$action" default=""/>
<attribute name="x" type="integer" variable="$x" default="0"/>
<attribute name="y" type="integer" variable="$y" default="0"/>
<attribute name="height" type="integer" variable="$height"
use="required" onerror="alert('pushButton: No height attribute');"/>
<attribute name="width" type="integer" variable="$width"
use="required" onerror="alert('pushButton: No width attribute');"/>
<prototype>
<g transform="translate({$x},{$y})">
<svg width="{$width}" height="{$height}">
<g class="pushButton" fill="blue" onclick="{$action}">
<rect width="100%" height="100%"/>
<svg x="10%" y="10%" width="80%" height="80%"/>
</g>
</svg>
</g>
</prototype>
</elementDef>
</extensionDefs>
if use="required" and the attribute is not given the element is not
constructed
[ probably with a normal (!) JavaScript error in the browser status bar ]
in such case if onerror is defined onerror is executed.
A questionable extensions would be to add simple math +-/*% calculation,
again the eternal problem of where we start and were we end is questionable,
see CSVG thread
between this sort of thing and pure emcascript.
SVG Viewers could use emcascript for evaluation using an eval() function
call or similar.
This would allow things like this:
<extensionDefs namespace="http://example.org/"/>
<elementDef name="checkbox">
<attribute name="action" type="string" variable="$action" default=""/>
<attribute name="x" type="integer" variable="$x" default="0"/>
<attribute name="y" type="integer" variable="$y" default="0"/>
<attribute name="height" type="integer" variable="$h" default="13"/>
<attribute name="width" type="integer" variable="$w" default="13"/>
<attribute name="id" type="string" variable="$id"
use="required" onerror="alert('checkbox: No id provided.');"/>
<variable name="w1" type="integer" value="$w-1"/>
<variable name="w2" type="integer" value="$w-2"/>
<variable name="w3" type="integer" value="$w-3"/>
<variable name="w4" type="integer" value="$w-4"/>
<variable name="h1" value="$h-1"/>
<variable name="h2" value="$h-2"/> <!-- EmcaScript Scalar type -->
<variable name="h3" value="$h-3"/>
<variable name="h4" value="$h-4"/>
<prototype>
<g id='$id' onclick="$action" transform='translate($x,$y)'>
<rect fill='#FFFFFF' width='$w' height='$h' x='0' y='0'/>
<rect fill='#999999' width='$w1' height='$h1' x='0' y='0'/>
<rect fill='#CCCCCC' width='$w2' height='$h2' x='1' y='1'/>
<rect fill='#333333' width='$w3' height='$h3' x='1' y='1'/>
<rect fill='#FFFFFF' width='$w4' height='$h4' x='2' y='2'/>
</g>
</prototype>
</elementDef>
</extensionDefs>
<!-- No need to wrap variable inside braces {$w1} -->
Another way would be inline calculations and no <variable/> like this:
<extensionDefs namespace="http://example.org/"/>
<elementDef name="checkbox">
<attribute name="action" type="string" variable="$action" default=""/>
<attribute name="x" type="integer" variable="$x" default="0"/>
<attribute name="y" type="integer" variable="$y" default="0"/>
<attribute name="height" type="integer" variable="$h" default="13"/>
<attribute name="width" type="integer" variable="$w" default="13"/>
<attribute name="id" type="string" variable="$id"
use="required" onerror="alert('checkbox: No id provided.');"/>
<prototype>
<g id='{$id}' onclick="{$action}" transform='translate({$x},{$y})'>
<rect fill='#FFFFFF' width='{$w}' height='{$h}' x='0' y='0'/>
<rect fill='#999999' width='{$w-1}' height='{$h-1}' x='0' y='0'/>
<rect fill='#CCCCCC' width='{$w-2}' height='{$h-2}' x='1' y='1'/>
<rect fill='#333333' width='{$w-3}' height='{$h-3}' x='1' y='1'/>
<rect fill='#FFFFFF' width='{$w-4}' height='{$h-4}' x='2' y='2'/>
</g>
</prototype>
</elementDef>
</extensionDefs>
<checkbox xmlns="http://example.org/" id='chkbox'
action="myCallback(evt)" x='10' y='10'/>
instead of classical DOM:
<script type="text/ecmascript"
a3:scriptImplementation="Adobe">
<![CDATA[
var svg_ns = 'http://www.w3.org/2000/svg';
var xlink_ns = 'http://www.w3.org/1999/xlink';
function createRect( f, w, h, x, y )
{
var r = document.createElement('rect');
r.setAttribute('fill', f);
r.setAttribute('width', w);
r.setAttribute('height', h);
r.setAttribute('x', x);
r.setAttribute('y', y);
return r;
}
function createCheckBox( action, w, h, x, y, id )
{
var g = document.createElement('g');
g.setAttribute('onclick', action );
g.setAttribute('id', id);
g.appendChild( createRect("#FFFFFF", w , h , x , y ) );
g.appendChild( createRect("#999999", w-1 , h-1 , x , y ) );
g.appendChild( createRect("#CCCCCC", w-2 , h-2 , x+1 , y+1 ) );
g.appendChild( createRect("#333333", w-3 , h-3 , x+1 , y+1 ) );
g.appendChild( createRect("#FFFFFF", w-4 , h-4 , x+2 , y+2 ) );
return g;
}
function onLoad()
{
// parsing <checkbox/>
var elements = document.documentElement.getElementsByTagNameNS(
"http://example.org/", "checkbox");
// For each such elements, create a new object
for (var i=0; i<elements.length; i++)
{
var id = tb.getAttribute( 'id' );
var action = tb.getAttribute( 'action' );
var x = parseInt(tb.getAttribute( 'x' )) + 0;
var y = parseInt(tb.getAttribute( 'y' )) + 0;
var width = parseInt(tb.getAttribute( 'width' )) + 0;
var height = parseInt(tb.getAttribute( 'height' )) + 0;
if ( width < 1 ) { width = 13; }
if ( height < 1 ) { height = 13; }
// build
// var xml = createCheckBox( "myCallback(evt)", 13, 13, 10, 10,
'chkbox' );
var xml = createCheckBox( action, width, height, x, y, id );
document.firstChild.appendChild( xml );
}
}
]]>
</script>
xlink:href could be solve using this:
<shadowUse xmlns="http://bar.example.org/buttons" x='10' y='10'
xlink:href="#object"/>
<extensionDefs namespace="http://bar.example.org/buttons"/>
<elementDef name="shadowUse">
<attribute namespace='http://www.w3.org/1999/xlink'
name="href" type="string" variable="$href" use="required"
onerror="alert('No xlink:href attribute');"/>
<attribute name="x" type="integer" variable="$x" default="0"/>
<attribute name="y" type="integer" variable="$y" default="0"/>
<prototype>
<use xlink:href='$href' x='$x' y='$y'/>
<use xlink:href='$href' x='$x' y='$y' transform='translate(1,1)'/>
</prototype>
</elementDef>
</extensionDefs>
This syntax should resolve the issue with Live Template for most cases,
complicated cases can still be done using EmcaScript and DOM.
Any comments welcome!
Sincerely yours,
Fred.
_________________________________________________________________
MSN 8 with e-mail virus protection service: 2 months FREE*
http://join.msn.com/?page=features/virus&pgmarket=en-ca&RU=http%3a%2f%2fjoin.msn.com%2f%3fpage%3dmisc%2fspecialoffers%26pgmarket%3den-ca
Received on Friday, 14 November 2003 18:58:48 UTC