Re: [SVG] CGI Forms and SVG widgets

 > I was trying to consider CGI form inside SVG,
 > especially having customized widget drawn by SVG <g></g>
 > like customized button, list, drop box with images.
 >
 > <svg>
 >
 > <form name="myForm" action="form.php" method="get">
 > [...]
 > <input
 >   name='foo'
 >   value="go to destination"
 > [...]
 > <button id='downButton'
 >   x='10'
 >   y='10'
 > [...]

>Check out
>http://www.w3.org/TR/SVG12/#rax-xforms
>http://www.w3.org/TR/SVG12/#xforms
>http://www.w3.org/TR/SVG2Reqs/#req-graphics

>"2.3. Relationship to other Web formats [...]
>2. [...] SVG should be compatible with XForms User Interface presentation"

I found few screenshot examples of XFORMS:
http://www.w3.org/TR/2002/CR-xforms-20021112/slice10.html#action-info

<model>
  <message level="modal"
ev:event="xforms-model-initialize">This is not a drill!</message>
  ...
</model>

<input ref="po/address/street1">
  <label>Street</label>
  <hint>Please enter the number and street name</hint>
</input>

<secret ref="users/currentuser/password">
  <label>Please enter your password --
it will not be visible as you type.</label>
  <help>Have you forgotten your password?
Simply call 1-900-555-1212 and have
    a major credit card handy.</help>
</secret>

Do they support <br /> or similar for line breaking help/hint?
or they use implicit/explicit \n inside the code?

What about making the thing centered, justified, colored, bold, italic?
Do they support XHTML tags for <help>?
http://www.w3.org/TR/2002/CR-xforms-20021112/slice8.html#ui-commonelems-help

http://www.w3.org/TR/2002/CR-xforms-20021112/slice8.html

<input ref="order/shipDate">
    <label>Ship By</label>
    <hint>Please specify the ship date for this order.</hint>
</input>

<textarea ref="message/body" class="messageBody">
  <label>Message Body</label>
  <hint>Enter the text of your message here</hint>
</textarea>

<upload ref="mail/attach1" mediatype="image/*">
  <label>Select image:</label>
</upload>

<range ref="/stats/balance" start="-2.0" end="2.0" step="0.5">
  <label>Balance</label>
</range>

<select1 ref="my:flavor">
  <label>Flavor</label>
  <item>
    <label>Vanilla</label>
    <value>v</value>
  </item>
  <item>
    <label>Strawberry</label>
    <value>s</value>
  </item>
  <item>
    <label>Chocolate</label>
    <value>c</value>
  </item>
</select1>

I find this one:
<xforms:model>
  <xforms:instance>
    <ecommerce>
      <method/>
      <number/>
      <expiry/>
    </ecommerce>
  </xforms:instance>
  <xforms:submission
action="http://example.com/submit" method="post" id="submit"/>
</xforms:model>

quite useful and creates very reusable components.

http://www.w3.org/TR/2002/CR-xforms-20021112/sliceG.html#id2642184

Also how those sort of XForms can be customized with SVG graphics ?
This SVG 1.2 does not describe it in anyway.

How do I make a customized button with:
purple background with a yellow cat on it when out of focus
becoming a
blue background with a green arrow on it when on focus
becoming a
black background with a blue bird on it when pushed?

The only button I found...
<xforms:submission
action="http://example.com/submit"
method="post" id="submit"/>

How do you style it?

maybe with something like:

<xforms:submission
action="http://example.com/submit"
method="post" id="submit"

style="
  submission_out  :'url(#purp_bg_yellow_cat)';
  submission_over :'url(#blue_bg_green_arrow)';
  submission_push :'url(#black_bg_blue_bird)';
"/>

What if the button has no text, but only an image?

Like a cisor image for cut, for instance,
maybe I don't want to submit the form,
but just run some javascript instead,
with action="javascript: blabla;"

Another thing that would be nice is to have
SVG components taking parameters:

<g id='button' params='($x,$y,$color,$text)'>
  <rect style='fill: $color' x='$x' y='$y' width='20' height='10'/>
  <text x='$x+2' y='$y+2'>$text</text>
</g>

<use xlink:href='#button'
     params='10,10,"#FF00FF","Cool, Great and Fun"'
     x='1' y='1' />
or
<use xlink:href='#button(10,10,"#FF00FF","Cool, Great and Fun")'
x='1' y='1' />

or

<use xlink:href='#button'
params='this.x*10, this.y + 10*this.x, "#FF00FF",
"("+ this.x +","+ this.y +")"'
     x='1' y='1' />

or even better

<use xlink:href='#button' state='push'
params='10, 10, getColor( this.state ), this.state'
     x='1' y='1' />

where getColor is a JavaScript or ECMAScript function
taking a scalar parameter.

Another example:

<use xlink:href='#button' state='push'
params='10, 10, getColor( this.state ), this.state'
     x='1' y='1' onClick='pushButton( this )'/>


function getColor( state )
{
  if ( state == 'push' ) return '#FF00FF';
  return '#00FF00';
}

function pushButton( useElement )
{
  var state = useElement.getAttribute( 'state' );

  if ( state == 'push' )
    useElement.setAttribute( 'state', 'pop'  );
  else
    useElement.setAttribute( 'state', 'push' );
}



>"4.2 Graphical Features
>[...]
6. SVG may define a set of predefined user interface controls, such as
those needed for form interaction (e.g. buttons, text fields, sliders,
etc). Many images on the web today are raster versions of "web buttons"
which could be more efficiently expressed in SVG. This requirement will
involve liason with the XForms Working Group [SVG 1.2] [SVG 2.0]"

Minimum is standard HTML form widget or XForms,
what would be better is customized SVG widget using XForms,
on top of having default widget.

I think most people will use standard widget,
but many will use customized button,
customized font, background, look and feel, etc.

Sincerely yours,
Fred.


_________________________________________________________________
The new MSN 8: advanced junk mail protection and 2 months FREE*  
http://join.msn.com/?page=features/junkmail

Received on Sunday, 4 May 2003 07:47:43 UTC