Good progress! You may have seen that Peter checked in an HTML5 control set. Now we have to figure out how to wire your stuff into that.
Some comments: 1) How should an svg button skin handle the button states in html? It isn't done with separate svg files? 2) I would think we would want to use CSS more. I forgot to follow up with Jude on his objections to CSS proliferation. Maybe he'll jump in here. 3) If ANT preprocessing is going to be a lot of work, it might be time to integrate into the compiler and manipulate stuff from Java. On 4/1/13 12:59 PM, "Om" <[email protected]> wrote: > 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 -- Alex Harui Flex SDK Team Adobe Systems, Inc. http://blogs.adobe.com/aharui
