W3C home > Mailing lists > Public > www-svg@w3.org > November 2003

SVG1.2: Consolidate RCC with Live Templates

From: Fred P. <fprog26@hotmail.com>
Date: Fri, 14 Nov 2003 18:58:46 -0500
To: www-svg@w3.org, dean@w3.org
Message-ID: <BAY10-F120hh0NJjkJ5000063d9@hotmail.com>

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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 5 November 2012 23:52:55 GMT