I was able to add quite a bit of functionality to my XSLT transform.  Just
about enough to be able to port the standard Spark Button
(spark.skins.spark.skins.ButtonSkin.mxml) to HTML5/SVG.

Here is a demo showing them side by side:

http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/flexVhtml5.html

Some notes about the transformation/workflow:

1.  The XSLT does not handle states yet.  I am manually modifying it handle
different states.  Each state/run of the XSLT on the  produces a single
.svg file.  So we have three svg files as a result:
http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/button_skin_up.svg
http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/button_skin_over.svg
http://people.apache.org/~bigosmallm/fxg2svg/buttonskin/button_skin_down.svg

I probably will hook it up so that ANT can do some preprocessing of the
XSLT for each state involved.  Anyone else has better ideas on how to do
this?

2.  The XSLT handles these FXG elements (and their attributes) for now:

   1. Rect
   2. fill
   3. SolidColor
   4. LinearGradient
   5. stroke
   6. LinearGradientStroke
   7. gradientTransform

As I am targetting a very specific usecase (ButtonSkin.mxml) I am guessing
there are quite a attributes that I dont handle - for now.

3.  I tested it on the latest versions of Chrome and Firefox.  Chrome seems
to have a more faithful rendering fidelity among the two browsers.  Note
that I have not used ANY browser specific style rules (yet!)

4.  I have had to handcode some of the more fancier gradientTransform
functionalities.  A lot of fun Math is going to be involved here :-)

5.  I am using pure CSS to skin the various states of the html Button
element.  I guess we could also do it using Javascript.  But things seems
to be working this way.  I plan to continue in this approach unless others
(Alex/Erik/Jude -> I am looking at you!) have concerns.

After this demo, I am much more confident about this approach.  It
definitely is going to be quite a lot of work, but it is definitely
possible to achieve visual consistency between Flex skins and HTML5/SVG
skins.

I hope to hear a lot of feedback!   And perhaps some volunteers to jump in
and tackle the future tasks in this project :-)

Thanks,
Om

Reply via email to