Hi,
In episode two of the SVG and XForms trilogy Antoine
Quint leaves the smalltalk behind and gets down to
business and shows you how to use RCC (Rendering
Custom Content) and shadow tree magic upcoming in the
SVG 1.2 spec to create a push-button widget
(<ui:button>).
Antoine writes:
In an RCC architecture, the markup really serves as
the blueprint of the functionality you need to
implement. When you have a component in mind that you
want to design using SVG and the RCC mechanism, the
first thing that you will likely do is jot down some
ideas on paper and figure out how your markup should
look. Here, I am designing a simple push button, which
will feature a text label. Staying in a simple mood, I
create a simple element with geometry and position
attributes and a text label as a child node:
<ui:button x="10" y="40"
width="150">ui:button</ui:button>
Now if you wonder how does this SVG, RCC and shadow
tree magic look like for a simple push-button. Here's
a sample:
<extensionDefs
namespace="http://xmlns.fuchsia-design.com/ui/";>
<elementDef name="button">
<prototype>
<svg id="root" width="0" height="26">
<rect id="rect" style="stroke: black; fill:
lightgray;"
x=".5" y=".5" rx="5" ry="5" width="0"
height="25" />
<text x="50%" y="65%"
style="pointer-events: none;
text-anchor: middle;">
<refContent />
</text>
</svg>
</prototype>
<script ev:event="SVGBindEnd"
type="text/ecmascript">
new SimpleRCCButton(evt.target);
</script>
<script type="text/ecmascript">
<!-- SimpleRCCButton class -->
</script>
</elementDef>
</extensionDefs>
Antoine concludes:
I have now covered the relevant parts of SVG that
will allow you to mix XForms together with SVG in the
next article. In the last part of this series, I will
show you how to wrap my existing RCC-based UI widgets
in some higher-level XForms controls and re-code the
stylable combo box demo with XForms.
Full story @
http://www-106.ibm.com/developerworks/xml/library/x-svgxf2
- Gerald
-------------------------------------------------------
This SF.net email is sponsored by: SF.net Giveback Program.
Does SourceForge.net help you be more productive? Does it
help you create better code? SHARE THE LOVE, and help us help
YOU! Click Here: http://sourceforge.net/donate/
_______________________________________________
xul-announce mailing list
[EMAIL PROTECTED]
https://lists.sourceforge.net/lists/listinfo/xul-announce
