SVG-based Template via javascript

<!--

  Goals:
    - A pure XML based template declaration

    - SVG Editor with simple ecmascript can 'understand' these templates
      by using them as objects with parameters (or attributes or properties)

    - Parameters type can be typesafe, declared, with min/max/default 
values, etc.

    - An editor can therefore design objects parameter "editor" dialog
      using such information like IDL have done for OOP language.

    - An editor can drag, resize, move, create, delete these objects.

    - Fully descriptive

    - No need to invent any new language

    - SVG 1.0/1.1 can be supported using a proper ecmascript translator:
      left as an exercise shouldn't be too complicated to implement 
non-native.

    - Need an XML standard on which all SVG editor 1.2 can rely on
      for describing unknown objects/figures/entities...
-->



<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg SYSTEM 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg
  width='1024' height='700' enableZoomAndPanControls='false'
  xmlns="http://www.w3.org/2000/svg"
  xmlns:f='http://xmlns.fred.com/'
  >
<defs>
  <template xmlns='http://xmlns.fred.com/'
    name='user'
    function='drawUser(x,y,w,h,id,drag,child)'
    resize='resizeUser(node,w,h)'
    move='moveUser(node,x,y)'
    >
    <param name='x'     type='Integer' min='0' max='100' default='0'  />
    <param name='y'     type='Integer' min='0' max='100' default='0'  />
    <param name='w'     type='Integer' min='0' max='20'  default='10' />
    <param name='h'     type='Integer' min='0' max='20'  default='10' />
    <param name='id'    type='String'  min='0' max='80'  default='fred' />
    <param name='drag'  type='Boolean'                   default='false' />
    <param name='child' type='NodeList' empty='true'     default='null' />
  </template>

  <!-- Cannot be move or resize -->
  <template name='f:pizza' function='drawPizza(x,y)'>
    <param name='x'     type='Integer' min='0' max='100' default='0'  />
    <param name='y'     type='Integer' min='0' max='100' default='0'  />
  </template>
</defs>

<f:user  x='10' y='10' w='10' h='10'/>
<f:pizza x='30' y='30'/>

<script type='text/ecmascript'
<![CDATA[
function drawPizza(x,y) { return drawUser(x,y,10,10,'pizza',false,null); }

function resizeUser(node,w,h) { node.setAttribute( 'width', w ); 
node.setAttribute( 'height', h ); return node; }
function moveUser(node,w,h)   { node.setAttribute( 'x',     x ); 
node.setAttribute( 'y',      y ); return node; }

function drawUser(x,y,w,h,id,drag,child)
{
  var s = "<rect x='" + x + "' y='" + y + "' width='"+ w +"' height='"+ h 
+"'/>";

  // Return an XML node
  return parseXML( s, document );
}
]]>
</script>
</svg>

Comments, suggestions welcome.

Sincerely yours,
Fred.

_________________________________________________________________
Tired of spam? Get advanced junk mail protection with MSN 8.  
http://join.msn.com/?page=features/junkmail

Received on Monday, 6 October 2003 05:14:54 UTC